diff --git a/src/main/fixes/activelink.ts b/src/main/fixes/activelink.ts index f991393b0..1f9506173 100644 --- a/src/main/fixes/activelink.ts +++ b/src/main/fixes/activelink.ts @@ -4,20 +4,23 @@ * link with a special style. This fixes that and * turns the back into an actual link * with the correct note id. + * + * TODO: make it fix aliases too */ -export default function fixActiveLink() { +export default function fixActiveLink(aliases: Record) { const active = document.querySelector("#menu strong"); if (!active) return; // Something is really wrong // Currently active note id is stored on body - const id = document.body.dataset.noteId; + const id = document.body.dataset.noteId!; + const href = aliases[id] ?? id; // Create the new link const link = document.createElement("a"); link.className = "type-text active"; link.href = ``; link.textContent = active.textContent; - link.href = `./${id}`; + link.href = `./${href}`; // Replace the active.replaceWith(link); diff --git a/src/main/fixes/submenu.ts b/src/main/fixes/submenu.ts index 82609d6ca..6b167769b 100644 --- a/src/main/fixes/submenu.ts +++ b/src/main/fixes/submenu.ts @@ -1,20 +1,3 @@ -const submenuBlacklist = ["ZapIU17QNEyU"]; -// if (item.innerHTML.includes(submenuBlacklist[0])) item.className += " hidden"; -/* function fixSubMenu() { - const items = document.querySelectorAll("#menu > ul > li"); - for (const item of items) { - const sublist = item.querySelector("ul"); - if (sublist) { - if (sublist.children.length) { - item.className = "submenu"; - } - else { - sublist.remove(); - } - } - } -} */ - /** * General premise here is to find all submenus/sublists * and give them a submenu class. Then any list item @@ -22,7 +5,7 @@ const submenuBlacklist = ["ZapIU17QNEyU"]; * class. Additionally, any sublist that itself has a * sublist is given the class hasSubmenu. */ -export default function fixSubMenu() { +export default function fixSubMenu(submenuBlacklist: string[]) { // Get every list item in the navigation const items = document.querySelectorAll("#menu ul li"); for (const item of items) { diff --git a/src/main/index.ts b/src/main/index.ts index 1588c830e..33a8966da 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -1,19 +1,24 @@ -/* eslint-disable no-console */ import fixActiveLink from "./fixes/activelink"; import fixTableHeaders from "./fixes/tableheaders"; import highlight from "./other/highlight"; import buildSidenav from "./navigation/sidenav"; import buildBreadcrumbs from "./navigation/breadcrumbs"; -import fixSubMenu from "./fixes/submenu"; +import fixSubMenus from "./fixes/submenu"; import generateTOC from "./navigation/toc"; import addExternalLinks from "./fixes/externallinks"; import injectSwagger from "./other/swagger"; import makeMobileMenu from "./other/mobile"; +import addOpenGraphMeta from "./other/opengraph"; -// https://instance-name/api/notes/vW1cXaYNN7OM/download +const ETAPI_REF_NOTE_ID = "pPIXi0uwF5GX"; +const HIDDEN_SUBMENUS = ["blog"]; const EXTERNAL_LINKS = { - EGFtX8Uw96FQ: "https://github.com/zadam/trilium" + EGFtX8Uw96FQ: "https://github.com/zadam/trilium", +}; +const ALIASES = { + WqBnya4Ye8rS: "", + ZapIU17QNEyU: "blog" }; function $try unknown>(func: T, ...args: Parameters) { @@ -21,22 +26,27 @@ function $try unknown>(func: T, ...args: Paramete func.apply(func, args); } catch (e) { - console.error(e); + console.error(e); // eslint-disable-line no-console } } -// const $try = (func, ...args) => { -// try { -// func.apply() -// } -// }; - - +/** + * Lots of these functions seem to depend on each other indirectly + * through DOM changes or classes or what-have-you. This is + * obviously not ideal as it makes things less clear, and also + * makes TypeScript less helpful. + * + * TODO: Find a good way of restructuring that allows things + * to act a bit more harmoniously. + * + * TODO: Make use of esbuild's define api to enable a debug + * build that contains all the console logs and such. + */ // Perform fixes first -$try(fixActiveLink); +$try(fixActiveLink, ALIASES); $try(fixTableHeaders); -$try(fixSubMenu); +$try(fixSubMenus, HIDDEN_SUBMENUS); $try(addExternalLinks, EXTERNAL_LINKS); // Now layout changes @@ -46,39 +56,6 @@ $try(generateTOC); // Finally, other features $try(highlight); -$try(injectSwagger); +$try(injectSwagger, ETAPI_REF_NOTE_ID); $try(makeMobileMenu); - -// mobileMenu.append(document.querySelector("#menu > ul")!); -// mobileMenu.append(document.querySelector("#sidebar")!); - - - - -// try {fixActiveLink();} -// catch (e) {console.error(e);} - -// try {highlight();} -// catch (e) {console.error(e);} - -// try {fixTableHeaders();} -// catch (e) {console.error(e);} - -// try{addLogo();} -// catch{} - - -// try {fixSubMenu();} -// catch (e) {console.error(e);} - -// try {buildSidenav();} -// catch (e) {console.error(e);} - -// try {buildBreadcrumbs();} -// catch (e) {console.error(e);} - -// try {generateTOC();} -// catch (e) {console.error(e);} - -// try {addExternalLinks(EXTERNAL_LINKS);} -// catch (e) {console.error(e);} +$try(addOpenGraphMeta); diff --git a/src/main/navigation/breadcrumbs.ts b/src/main/navigation/breadcrumbs.ts index a32353915..16bd58409 100644 --- a/src/main/navigation/breadcrumbs.ts +++ b/src/main/navigation/breadcrumbs.ts @@ -47,5 +47,7 @@ export default function buildBreadcrumbsFromNav() { // Add breadcrumb container to the main layout const main = document.getElementById("main"); main?.prepend(container); + + // Scroll to the active breadcrumb in case of overflow container.scrollLeft = container.scrollWidth - container.clientWidth; } \ No newline at end of file diff --git a/src/main/other/highlight.ts b/src/main/other/highlight.ts index 7218847ec..4895ab475 100644 --- a/src/main/other/highlight.ts +++ b/src/main/other/highlight.ts @@ -26,9 +26,11 @@ const highlightJQuery: HLJSPlugin = { /** * Let's highlight some codeblocks! - * TODO: check if there are codeblocks on the page before performing this action */ export default function addHljs() { + const codeblocks = document.querySelectorAll(`.ck-content pre`); + if (!codeblocks.length) return; // If there are none, don't add dependency + // Add the hightlight.js styles from the child note of this script // TODO: make this a mapping const link = document.createElement("link"); diff --git a/src/main/other/opengraph.ts b/src/main/other/opengraph.ts new file mode 100644 index 000000000..c9fb88844 --- /dev/null +++ b/src/main/other/opengraph.ts @@ -0,0 +1,40 @@ +// TODO: move to common location +const parseHTML = (html: string, fragment = false) => { + const template = document.createElement("template"); + template.innerHTML = html; + const node = template.content.cloneNode(true); + if (fragment) return node; + return node.childNodes.length > 1 ? node.childNodes : node.childNodes[0]; +}; + + +// TODO: See if there's a way to inject this without client-side js +const metaString = ` + + + + + + + + + + + + + + + + + +`; + + +export default function addOpenGraphMeta() { + const currentTitle = document.querySelector("title")!; + currentTitle.textContent = currentTitle.textContent === "Trilium Rocks" ? "Trilium Rocks - Home" : `Trilium Rocks - ${currentTitle.textContent}`; + const nodes = parseHTML(metaString.replaceAll("{{title}}", currentTitle.textContent)) as NodeListOf; + for (const node of nodes) { + document.head.append(node); + } +} \ No newline at end of file diff --git a/src/main/other/swagger.ts b/src/main/other/swagger.ts index de8fa3f44..572250bd8 100644 --- a/src/main/other/swagger.ts +++ b/src/main/other/swagger.ts @@ -9,10 +9,10 @@ const opts: SwaggerUIOptions = { /** * Add swagger to the ETAPI page! */ -export default function injectSwagger() { +export default function injectSwagger(expectedNoteId: string) { // Check if it's the ETAPI page, otherwise avoid dependency const noteId = document.body.dataset.noteId; - if (noteId !== "pPIXi0uwF5GX") return; // TODO: make this a param + if (noteId !== expectedNoteId) return; // TODO: make this a param const main = document.getElementById("main")!; main.innerHTML = ""; opts.domNode = main; diff --git a/src/styles/breadcrumbs.css b/src/styles/breadcrumbs.css index ba56f7ac1..23fd91d3f 100644 --- a/src/styles/breadcrumbs.css +++ b/src/styles/breadcrumbs.css @@ -1,9 +1,9 @@ #breadcrumbs { - margin-bottom: 30px; + margin: 0 0 30px 0; display: flex; align-items: center; list-style: none; - padding: 0; + padding: 16px 0 0 0; overflow-x: auto; } @@ -22,6 +22,7 @@ } #breadcrumbs img { + width: 18px; min-width: 18px; filter: invert(100%); }