Some final touches

src/main/fixes/activelink.ts

@@ -4,20 +4,23 @@
  * link with a special style. This fixes that and
  * turns the <strong> 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<string, string>) {
     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 <strong>
     active.replaceWith(link);

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) {

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<T extends (...a: unknown[]) => unknown>(func: T, ...args: Parameters<T>) {
@@ -21,22 +26,27 @@ function $try<T extends (...a: unknown[]) => 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);

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;
 }

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");

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 = `<!-- HTML Meta Tags -->
+<meta name="description" content="A website for guides, reference, showcase, inspiration, and more, all for Trilium Notes! Not convinced? Come see for yourself just what Trilium can do.">
+
+<!-- Facebook Meta Tags -->
+<meta property="og:url" content="https://trilium.rocks/">
+<meta property="og:type" content="website">
+<meta property="og:title" content="{{title}}">
+<meta property="og:description" content="A website for guides, reference, showcase, inspiration, and more, all for Trilium Notes! Not convinced? Come see for yourself just what Trilium can do.">
+<meta property="og:image" content="https://github.com/zadam/trilium/wiki/images/screenshot.png">
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image">
+<meta property="twitter:domain" content="trilium.rocks">
+<meta property="twitter:url" content="https://trilium.rocks/">
+<meta name="twitter:title" content="{{title}}">
+<meta name="twitter:description" content="A website for guides, reference, showcase, inspiration, and more, all for Trilium Notes! Not convinced? Come see for yourself just what Trilium can do.">
+<meta name="twitter:image" content="https://github.com/zadam/trilium/wiki/images/screenshot.png">
+
+<!-- Meta Tags Generated via https://opengraph.dev -->`;
+
+
+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<HTMLMetaElement>;
+    for (const node of nodes) {
+        document.head.append(node);
+    }
+}

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;

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%);
 }