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 = [`
");
@@ -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 {