diff --git a/src/scripts/expanders.ts b/src/scripts/expanders.ts index 6749b6852..5c835c2a0 100644 --- a/src/scripts/expanders.ts +++ b/src/scripts/expanders.ts @@ -1,3 +1,28 @@ +function anchorToId(anchor: HTMLAnchorElement) { + return anchor.href.replace("./", ""); +} + +const stored = localStorage.getItem("expanded") ?? "[]"; +let parsed: string[]; +try { + parsed = JSON.parse(stored) as string[]; +} +catch (e) { + parsed = []; +} +const state = new Set(parsed); +const submenus = Array.from(document.querySelectorAll("#menu .submenu-item")); +for (const sub of submenus) { + try { + if (state.has(anchorToId(sub.children[0] as HTMLAnchorElement))) sub.classList.add("expanded"); + } + catch (e) { + // TODO: create logger + console.warn("Could not restore expanded state"); // eslint-disable-line no-console + console.error(e); // eslint-disable-line no-console + } +} + export default function setupExpanders() { const expanders = Array.from(document.querySelectorAll("#menu .collapse-button")); for (const ex of expanders) { @@ -6,15 +31,20 @@ export default function setupExpanders() { e.stopPropagation(); // ex.parentElement.parentElement.classList.toggle("expanded"); ex.closest(".submenu-item")?.classList.toggle("expanded"); + const id = anchorToId(ex.closest("a")!); + if (state.has(id)) state.delete(id); + else state.add(id); + localStorage.setItem("expanded", JSON.stringify([...state])); }); } + // In case a linked article lead to a new tree const activeLink = document.querySelector("#menu a.active"); if (activeLink) { let parent = activeLink.parentElement; const mainMenu = document.getElementById("#menu"); while (parent && parent !== mainMenu) { - if (parent.matches(".submenu-item")) { + if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) { parent.classList.add("expanded"); } parent = parent.parentElement; diff --git a/src/scripts/search.ts b/src/scripts/search.ts index d992b430e..fe25390f4 100644 --- a/src/scripts/search.ts +++ b/src/scripts/search.ts @@ -14,9 +14,18 @@ interface SearchResult { path: string; } +function buildResultItem(result: SearchResult) { + return ` +
${result.title}
+
${result.path || "Home"}
+
`; +} + export default function setupSearch() { const searchInput: HTMLInputElement = document.querySelector(".search-input")!; + + // TODO: move listener to another function searchInput.addEventListener("keyup", debounce(async () => { // console.log("CHANGE EVENT"); const current = document.body.dataset.noteId; @@ -27,7 +36,7 @@ export default function setupSearch() { const results = json.results.slice(0, 5); const lines = [`
`]; for (const result of results) { - lines.push(`
${result.title}
${result.path || "Home"}
`); + lines.push(buildResultItem(result)); } lines.push("
"); @@ -39,7 +48,7 @@ export default function setupSearch() { container.style.minWidth = `${rect.width}px`; const existing = document.querySelector(".search-results"); - if (existing) existing.replaceWith(container); + if (existing) existing.replaceWith(container); // TODO: consider updating existing container and never removing else document.body.append(container); }, 500)); diff --git a/src/scripts/theme.ts b/src/scripts/theme.ts index 06aec7edb..1e3d57a3b 100644 --- a/src/scripts/theme.ts +++ b/src/scripts/theme.ts @@ -1,5 +1,18 @@ +const preference = localStorage.getItem("theme"); +if (preference) { + if (preference === "dark") { + document.body.classList.add("theme-dark"); + document.body.classList.remove("theme-light"); + } + else { + document.body.classList.remove("theme-dark"); + document.body.classList.add("theme-light"); + } +} + export default function setupThemeSelector() { const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!; + // TODO: consolidate this with initialization (DRY) themeSwitch?.addEventListener("change", () => { if (themeSwitch.checked) { document.body.classList.add("theme-dark"); @@ -12,16 +25,4 @@ export default function setupThemeSelector() { localStorage.setItem("theme", "light"); } }); - - const preference = localStorage.getItem("theme"); - if (preference) { - if (preference === "dark") { - document.body.classList.add("theme-dark"); - document.body.classList.remove("theme-light"); - } - else { - document.body.classList.remove("theme-dark"); - document.body.classList.add("theme-light"); - } - } } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 8ae5f3043..d8d9e6824 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -86,9 +86,25 @@ a:hover { } - +.ck-content code, .ck-content pre { color: var(--text-primary); + background-color: var(--background-secondary); + border: 1px solid var(--background-active); + border-radius: 6px; + white-space: pre; +} + +.ck-content code { + padding: 2px 5px; +} + +.ck-content pre code { + border: 0; +} + +.ck-content pre { + overflow: auto; } #content h1, diff --git a/src/styles/navbar/header.css b/src/styles/navbar/header.css index b17e873d1..c43c1326c 100644 --- a/src/styles/navbar/header.css +++ b/src/styles/navbar/header.css @@ -130,6 +130,7 @@ input:checked ~ .dark-icon { flex: 1; padding: 5px 5px 5px 32px; width: 200px; + border-radius: 6px; } .search-icon {