Some more finishing touches

src/main/index.ts

@@ -8,13 +8,13 @@ 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";
 
 
 const ETAPI_REF_NOTE_ID = "pPIXi0uwF5GX";
 const HIDDEN_SUBMENUS = ["blog"];
 const EXTERNAL_LINKS = {
     EGFtX8Uw96FQ: "https://github.com/zadam/trilium",
+    dXAKFE0fJtom: "https://discord.gg/eTaTXUgcBr"
 };
 const ALIASES = {
     WqBnya4Ye8rS: "",
@@ -58,4 +58,16 @@ $try(generateTOC);
 $try(highlight);
 $try(injectSwagger, ETAPI_REF_NOTE_ID);
 $try(makeMobileMenu);
-$try(addOpenGraphMeta);
+
+/**
+ * This was removed because both the title change and the opengraph
+ * additions are now handled by a traefik plugin that rewrites
+ * the body of the http request, that way the change does not
+ * require client-side JS. This is important for sites wishing
+ * to display that information.
+ * 
+ * TODO: Determine how reasonable it would be to move more
+ * of these modules over to a traefik rewrite plugin. This gives
+ * a better experience to end users, SEO, etc.
+ */
+// $try(addOpenGraphMeta);

src/main/navigation/toc.ts

@@ -14,6 +14,15 @@ const buildItem = (heading: Element) => {
     const link = document.createElement("a");
     link.setAttribute("href", `#${slug}`);
     link.textContent = heading.textContent;
+    link.addEventListener("click", e => {
+        const target = document.querySelector(`#${slug}`);
+        if (!target) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        
+        target.scrollIntoView({behavior: "smooth"});
+    });
 
     heading.append(anchor);
 

src/main/other/opengraph.ts

@@ -1,40 +0,0 @@
-// 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/styles/mobile.css

@@ -145,4 +145,13 @@ button.expand {
     #menu > ul:not(#sidebar) ul {
         margin-left: 20px;
     }
+
+    #menu > ul:not(#sidebar) ul {
+        margin-left: 20px;
+    }
+
+    #menu > ul:not(#sidebar) a.active {
+        background: var(--accent-color);
+        border-radius: 6px;
+    }
 }

src/styles/sidebar.css

@@ -55,4 +55,12 @@
 #sidebar > li > ul.hasSubmenu,
 #sidebar > li > ul > li.submenu-item + li.submenu-item {
     margin-top: 20px;
+}
+
+#sidebar a.active,
+#sidebar > li > ul > li.submenu-item > p > a.active {
+    background: var(--accent-color);
+    /* background: rgba(255, 255, 255, 0.1); */
+    color: var(--text-heading);
+    font-weight: 700;
 }