Changes to allow for module inclusion in pages

robstarbuck · Mar 8, 2024 · 17b57b8 · 17b57b8
1 parent 04d4929
commit 17b57b8
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 59 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 _site
 src/documents
-src/content.robstarbuck.uk
+src/content.robstarbuck.uk
+src/posts
diff --git a/_config.ts b/_config.ts
@@ -1,11 +1,27 @@
 import { Page } from "lume/core/file.ts";
 import lume from "lume/mod.ts";
 import codeHighlight from "lume/plugins/code_highlight.ts";
+import esbuild from "lume/plugins/esbuild.ts";
 
 const site = lume({
   src: "./src",
 });
 
+site.use(
+  esbuild({
+    extensions: [".ts", ".js"],
+    options: {
+      bundle: true,
+      format: "esm",
+      minify: true,
+      keepNames: true,
+      platform: "browser",
+      target: "esnext",
+      treeShaking: true,
+    },
+  })
+);
+
 const [date, time] = new Date().toISOString().split(/T|\./);
 
 site.data("buildDate", date);
@@ -64,6 +80,9 @@ site.preprocess([".html"], (pages) => {
         page.data.layout = "index.vto";
       }
     }
+
+    page.data.modules = page.data.modules ?? [];
+
     if (page.data.title?.toLocaleLowerCase() === "cv") {
       const [cvDate] = page.data.date.toISOString().split("T");
       const pdfName = cvDate.concat(".pdf");
@@ -96,32 +115,6 @@ site.process([".html"], (pages, allPages) => {
     }
 
     // Create demo pages wherever a .create-page element exists
-    document
-      .querySelectorAll("main :where(.create-page)")
-      .forEach((element) => {
-        // Avoid mutating the original page
-        const doc = page.document?.cloneNode(true) as Document;
-        const main = doc?.querySelector("main");
-        const nav = doc?.querySelector("nav");
-        const footer = doc?.querySelector("footer");
-        if(nav){
-          nav.parentElement?.removeChild(nav)
-        }
-        if (footer) {
-          footer.parentElement?.removeChild(footer);
-        }
-        if (main) {
-          main.outerHTML = element.outerHTML;
-        }
-
-        const demoPage = Page.create({
-          title: page.data.title,
-          url: page.data.url + "demo",
-          content: doc?.documentElement.outerHTML,
-          layout: "index.vto",
-        });
-        allPages.push(demoPage);
-      });
 
     document
       .querySelectorAll("main :where(iframe, a, img, svg)")
@@ -159,6 +152,50 @@ site.process([".html"], (pages, allPages) => {
           return;
         }
       });
+
+    document.querySelectorAll("main [data-breakout-url]").forEach((element) => {
+      // Avoid mutating the original page
+      const doc = page.document?.cloneNode(true) as Document;
+
+      const urlSuffix = element.getAttribute("data-breakout-url");
+      const breakoutClass = element.getAttribute("data-breakout-class");
+      const breakoutButtonColor = element.getAttribute(
+        "data-breakout-button-color"
+      );
+      const breakoutUrl = page.data.url + urlSuffix ?? "breakout";
+
+
+      const a = doc.createElement("a");
+      a.setAttribute("href", breakoutUrl);
+      a.textContent = "Open ↗";
+      a.classList.add("breakout-link");
+      element.parentElement?.appendChild(a);
+      // Note element.style seems unavailable
+      element.parentElement?.setAttribute(
+        "style",
+        `--breakout-link-color: ${breakoutButtonColor}`
+      );
+
+      const body = doc?.querySelector("body");
+      if (body) {
+        doc.documentElement.classList.add("breakout", breakoutClass ?? "");
+        body.innerHTML = element.outerHTML;
+        if (breakoutButtonColor) {
+          body.setAttribute(
+            "style",
+            `--breakout-link-color: ${breakoutButtonColor}`
+          );
+        }
+      }
+
+      const demoPage = Page.create({
+        title: page.data.title,
+        url: breakoutUrl,
+        content: doc?.documentElement.outerHTML,
+        layout: "index.vto",
+      });
+      allPages.push(demoPage);
+    });
   });
 
   const readMe = Page.create({

diff --git a/deno.lock b/deno.lock
diff --git a/src/_includes/cv.vto b/src/_includes/cv.vto
@@ -14,7 +14,7 @@
       robstarbuck.uk
     </a>
   </nav>
-  <main>
+  <main class="cv">
     <div class="content">
     {{ content }}
     </div>

diff --git a/src/_includes/index.vto b/src/_includes/index.vto
@@ -6,15 +6,28 @@
   <link rel="preconnect" href="https://rsms.me/">
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
   <link rel="stylesheet" href="/font.css">
+
+  <link rel="stylesheet" href="/minireset.css"></link>
+  <link rel="stylesheet" href="/vertical-rhythm.css"></link>
+  <link rel="stylesheet" href="/index.css"></link>
+  <link rel="stylesheet" href="/highlight-js/robstarbuck.uk.css"></link>
+
   <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=.75">
+
+  {{ for module of modules }}
+  <script type="module" src="{{ module }}"></script>
+  {{ /for }}
+
+  <script defer src="/scripts/back-button.js"></script>
+
 </head>
 <body>
   <nav>
     <a href="/">
       robstarbuck.uk
     </a>
   </nav>
-  <main>
+  <main {{ if url == "/" }}class="home"{{ /if }}>
   {{ if url !== "/" }}
   <h1>{{ title }}</h1>
   {{ /if }}
@@ -27,8 +40,6 @@
     </a>
   </footer>
 </body>
-<link rel="stylesheet" href="/minireset.css"></link>
-<link rel="stylesheet" href="/vertical-rhythm.css"></link>
-<link rel="stylesheet" href="/index.css"></link>
-<link rel="stylesheet" href="/highlight-js.css"></link>
+
+
 </html>
diff --git a/src/index.page.ts b/src/index.page.ts
@@ -17,7 +17,7 @@ export default function (page: Lume.Data) {
 
   return `
     <ul>
-      ${posts
+      ${posts.reverse()
         .map((post) => {
           return `<li><a href="${post.url}">${post.title}</a></li>`;
         })

diff --git a/src/scripts/back-button.ts b/src/scripts/back-button.ts
@@ -0,0 +1,11 @@
+const body = document.body;
+
+if (body && document.documentElement.classList.contains("breakout")) {
+  if (document.referrer && window.location.href.includes(document.referrer)) {
+    const button = document.createElement("button");
+    button.textContent = "↙ Back";
+    button.classList.add("breakout-back");
+    button.addEventListener("click", () => history.back());
+    body.prepend(button);
+  }
+}
diff --git a/src/styles/font.css b/src/styles/font.css
@@ -1,10 +1,24 @@
 /* https://rsms.me/inter/ */
-html {
+html, button {
     font-family: "Inter", sans-serif;
 }
 
 @supports (font-variation-settings: normal) {
-    html {
+    html, button {
         font-family: "Inter var", sans-serif;
     }
+}
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+pre code {
+    border-radius: calc(var(--r) * 0.25);
+    display: block;
+    padding: calc(var(--pd) * 0.5);
+    color: var(--highlight-color);
+    background: var(--highlight-bg);
+
+    font-family: "JetBrains Mono", monospace;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
 }
diff --git a/src/styles/highlight-js.css → src/styles/highlight-js/robstarbuck.uk.css b/src/styles/highlight-js.css → src/styles/highlight-js/robstarbuck.uk.css
@@ -15,15 +15,15 @@
     --code-shade8: var(--shade8);
 
     /* https://gka.github.io/palettes/#/9|s|34806c,00ff8d,fffcf8|662483,00eaff|1|1 */
-    --code-accent0: #34806c;
-    --code-accent1: #379372;
-    --code-accent2: #3da679;
-    --code-accent3: #48b882;
-    --code-accent4: #59ca8e;
-    --code-accent5: #71dc9c;
-    --code-accent6: #91ecb0;
-    --code-accent7: #bcf8cb;
-    --code-accent8: #fffcf8;
+    --code-accent0: #004f4d;
+    --code-accent1: #146658;
+    --code-accent2: #297d64;
+    --code-accent3: #409470;
+    --code-accent4: #5bac7e;
+    --code-accent5: #7ac38e;
+    --code-accent6: #9fd99f;
+    --code-accent7: #caeeb4;
+    --code-accent8: #ffffcc;
 
     --code-attr: #88efff;
 
@@ -34,23 +34,14 @@
     --highlight-attribute: var(--code-accent7);
     --highlight-symbol: #c59bc1;
     --highlight-namespace: var(--code-accent6);
-    --highlight-variable: #ffff80;
+    --highlight-variable: #ffef16;
     --highlight-literal: var(--code-attr);
     --highlight-punctuation: var(--code-shade2);
     --highlight-deletion: #de7176;
     --highlight-addition: var(--code-accent4);
 }
 
-pre code {
-    border-radius: calc(var(--r) * 0.25);
-}
 
-pre code {
-    display: block;
-    padding: calc(var(--pd) * 0.5);
-    color: var(--highlight-color);
-    background: var(--highlight-bg);
-}
 
 .hljs-subst {
     color: var(--highlight-color);