feat: optimizations and improvements

ncpa0 · Aug 9, 2024 · 4637b49 · 4637b49
1 parent ec838f3
commit 4637b49
Show file tree

Hide file tree

Showing 38 changed files with 503 additions and 156 deletions.
diff --git a/.zed/settings.json b/.zed/settings.json
@@ -0,0 +1,50 @@
+{
+  "languages": {
+    "JavaScript": {
+      "language_servers": ["!eslint", "vtsls"],
+      "format_on_save": {
+        "external": {
+          "command": "yarn",
+          "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"]
+        }
+      }
+    },
+    "TypeScript": {
+      "language_servers": ["!eslint", "vtsls"],
+      "format_on_save": {
+        "external": {
+          "command": "yarn",
+          "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"]
+        }
+      }
+    },
+    "TSX": {
+      "language_servers": ["!eslint", "vtsls"],
+      "format_on_save": {
+        "external": {
+          "command": "yarn",
+          "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"]
+        }
+      }
+    },
+    "CSS": {
+      "format_on_save": {
+        "external": {
+          "command": "yarn",
+          "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"]
+        }
+      }
+    },
+    "JSON": {
+      "format_on_save": {
+        "external": {
+          "command": "yarn",
+          "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"]
+        }
+      }
+    }
+  },
+  "lsp": {
+    "eslint": {}
+  }
+}
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "esbuild": "^0.21.4",
     "htmx.org": "^1.9.12",
     "jsxte": "3.3.1",
+    "lightningcss": "^1.26.0",
     "node-os-walk": "^1.0.2",
     "prettier": "^3.3.1",
     "rimraf": "^5.0.5",
@@ -38,7 +39,7 @@
     "workbox-strategies": "^7.1.0"
   },
   "dependencies": {
-    "adwavecss": "0.1.0",
+    "adwavecss": "0.1.1",
     "adwaveui": "0.0.11",
     "dedent": "^1.5.3",
     "highlight.js": "^11.10.0"

diff --git a/scripts/build.cjs b/scripts/build.cjs
@@ -106,9 +106,9 @@ build()
           if (ev === "addDir") return;
 
           if (
-            fPath.includes("src/assets") &&
-            !fPath.includes("src/assets/js") &&
-            !fPath.includes("src/assets/css")
+            fPath.includes("src/assets")
+            && !fPath.includes("src/assets/js")
+            && !fPath.includes("src/assets/css")
           ) {
             console.log(
               `Asset changed, copying (${path.relative(p("."), fPath)})`,

diff --git a/scripts/tmpl-builder.cjs b/scripts/tmpl-builder.cjs
@@ -49,7 +49,7 @@ module.exports.buildTemplate = async function buildTemplate(
     minify: !IS_DEV,
     write: false,
     sourcemap: IS_DEV ? "inline" : false,
-    external: ["jsxte", "esbuild", "scripts", "prettier"],
+    external: ["jsxte", "esbuild", "scripts", "prettier", "lightningcss"],
     platform: "node",
     plugins: [plugin(srcDir, outDir)],
     alias: {
@@ -70,18 +70,19 @@ module.exports.buildTemplate = async function buildTemplate(
   /** @type {{ contents: string; outFile: string }[]} */
   const registeredExtFiles = [];
   const registerExternalFile = (contents, name, type) => {
-    const hashedName = createHash(`${name}_${contents}`, 8);
+    const presentationName = name.split(".")[0];
+    const hash = createHash(`${name}_${contents}`, 8);
     switch (type) {
       case "css": {
-        const fPath = `/assets/css/${hashedName}.css`;
+        const fPath = `/assets/css/${presentationName}_${hash}.css`;
         registeredExtFiles.push({
           contents,
           outFile: path.join(outDir, fPath),
         });
         return fPath;
       }
       case "js": {
-        const fPath = `/assets/js/${hashedName}.js`;
+        const fPath = `/assets/js/${presentationName}_${hash}.js`;
         registeredExtFiles.push({
           contents,
           outFile: path.join(outDir, fPath),
@@ -115,7 +116,7 @@ module.exports.buildTemplate = async function buildTemplate(
 
   // make sure directory exists
   await fs.promises.mkdir(baseDir, { recursive: true });
-  await fs.promises.writeFile(htmlOutFile, html, "utf8");
+  await fs.promises.writeFile(htmlOutFile, `<!DOCTYPE html>\n${html}`, "utf8");
 
   await Promise.all(
     registeredExtFiles.map(({ contents, outFile }) => {

diff --git a/src/assets/noto-sans.css b/src/assets/noto-sans.css
@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtGyI.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzTtw.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvTtw.ttf) format('truetype');
+}
diff --git a/src/components/code-sample.client.ts b/src/components/code-sample.client.ts
@@ -7,18 +7,30 @@ declare global {
 }
 
 class CodeSample extends HTMLDivElement {
-  connectedCallback() {
+  static registerLanguages = () => {
     HighlightJS.registerLanguage("html", getXmlLanguage);
     HighlightJS.registerLanguage("css", getCssLanguage);
+    this.registerLanguages = () => {};
+  };
+
+  private highlight() {
+    const codeElem = this.querySelector("code");
+    if (codeElem!.dataset["highlighted"] !== "yes") {
+      HighlightJS.highlightElement(codeElem!);
+    }
+  }
+
+  connectedCallback() {
+    CodeSample.registerLanguages();
 
     let codeElem = this.getCodeElement();
     if (codeElem) {
-      HighlightJS.highlightElement(this.querySelector("code")!);
+      this.highlight();
     } else {
       const interval = setInterval(() => {
         codeElem = this.getCodeElement();
         if (codeElem) {
-          HighlightJS.highlightElement(this.querySelector("code")!);
+          this.highlight();
           clearInterval(interval);
         }
       }, 10);

diff --git a/src/components/example.tsx b/src/components/example.tsx
@@ -44,8 +44,16 @@ export function ExampleSection(
               navigator.clipboard.writeText(href.toString());
             `}
           >
-            <img id="link-dark" src={url("assets/link-dark.svg")} />
-            <img id="link-light" src={url("assets/link-light.svg")} />
+            <img
+              id="link-dark"
+              src={url("assets/link-dark.svg")}
+              alt={`Copy link to "${label}"`}
+            />
+            <img
+              id="link-light"
+              src={url("assets/link-light.svg")}
+              alt={`Copy link to "${label}"`}
+            />
           </button>
           <span>{label}</span>
         </h5>

diff --git a/src/components/font-size-selector.tsx b/src/components/font-size-selector.tsx
@@ -32,10 +32,6 @@ export const FontSizeSelector = () => {
           +
         </button>
       </div>
-      <Script
-        dirname={__dirname}
-        path="./font-size-selector.client.ts"
-      />
     </>
   );
 };
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -1,11 +1,10 @@
 import { Box, NavSidebar } from "adwavecss";
-import { Script } from "../script";
+import HamburgerDark from "../assets/burger-dark.svg";
+import HamburgerLight from "../assets/burger-light.svg";
 import { cls } from "../utils/cls";
 import { url } from "../utils/url";
 import { FontSizeSelector } from "./font-size-selector";
 import { ThemeSwitcher } from "./theme-switcher";
-import HamburgerDark from "../assets/burger-dark.svg";
-import HamburgerLight from "../assets/burger-light.svg";
 
 const NavbarLink = (props: {
   href: string;
@@ -190,7 +189,6 @@ export const Navbar = (props: { activePage?: string }) => {
     <div class={cls(Box.box, "bg-3")}>
       <LeftNavbarDesktop activePage={props.activePage} />
       <LeftNavbarMobile activePage={props.activePage} />
-      <Script dirname={__dirname} path="./navbar.client.tsx" />
     </div>
   );
 };
diff --git a/src/components/theme-switcher.tsx b/src/components/theme-switcher.tsx
@@ -1,5 +1,4 @@
 import { Button, Input } from "adwavecss";
-import { Script } from "../script";
 import { cls } from "../utils/cls";
 
 export function ThemeSwitcher() {
@@ -12,18 +11,10 @@ export function ThemeSwitcher() {
         >
           Dark Theme
         </button>
-        <button
-          class={Button.button}
-          data-theme="light-theme"
-        >
+        <button class={Button.button} data-theme="light-theme">
           Light Theme
         </button>
       </div>
-      <Script
-        dirname={__dirname}
-        path="./theme-switcher.client.ts"
-        type="iife"
-      />
     </>
   );
 }
diff --git a/src/htmx.ts b/src/htmx.ts
@@ -1,4 +1,6 @@
 import htmx from "htmx.org";
+// @ts-ignore
+import("htmx.org/dist/ext/preload");
 
 Object.defineProperty(window, "htmx", {
   value: htmx,
@@ -7,5 +9,78 @@ Object.defineProperty(window, "htmx", {
   enumerable: false,
 });
 
-// @ts-ignore
-import("htmx.org/dist/ext/preload");
+htmx.defineExtension("merge-meta", {
+  // @ts-expect-error
+  init(api) {
+    htmx.on(
+      "htmx:afterSwap",
+      // @ts-expect-error
+      function(
+        evt: CustomEvent<{ xhr: { response: string }; boosted: boolean }>,
+      ) {
+        var serverResponse = evt.detail.xhr.response;
+        if (
+          api.triggerEvent(document.body, "htmx:beforeHeadMerge", evt.detail)
+        ) {
+          mergeHead(serverResponse);
+        }
+      },
+    );
+
+    htmx.on(
+      "htmx:historyRestore",
+      // @ts-expect-error
+      function(
+        evt: CustomEvent<
+          { cacheMiss: boolean; serverResponse: string; item: { head: string } }
+        >,
+      ) {
+        if (
+          api.triggerEvent(document.body, "htmx:beforeHeadMerge", evt.detail)
+        ) {
+          if (evt.detail.cacheMiss) {
+            mergeHead(evt.detail.serverResponse);
+          } else {
+            mergeHead(evt.detail.item.head);
+          }
+        }
+      },
+    );
+
+    htmx.on(
+      "htmx:historyItemCreated",
+      // @ts-expect-error
+      function(evt: CustomEvent<{ item: { head: string } }>) {
+        var historyItem = evt.detail.item;
+        historyItem.head = document.head.outerHTML;
+      },
+    );
+  },
+});
+
+function mergeHead(newContent: string) {
+  const headStart = newContent.indexOf("<head>");
+  if (headStart !== -1) {
+    const headEnd = newContent.indexOf("</head>", headStart);
+    const headHtml = newContent.substring(headStart, headEnd);
+    const parsed = new DOMParser().parseFromString(headHtml, "text/html");
+    const metaTags = parsed.head.querySelectorAll("meta");
+
+    for (let i = 0; i < metaTags.length; i++) {
+      const newTag = metaTags[i]!;
+      const name = newTag.getAttribute("name");
+      if (!name) continue;
+
+      const existingTag = document.head.querySelector(
+        `meta[name="${name}"]`,
+      );
+      if (existingTag) {
+        if (existingTag.outerHTML !== newTag.outerHTML) {
+          existingTag.replaceWith(newTag);
+        }
+      } else {
+        document.head.appendChild(newTag);
+      }
+    }
+  }
+}
diff --git a/src/index.client.ts b/src/index.client.ts
@@ -0,0 +1,6 @@
+import "./components/code-sample.client.ts";
+import "./components/font-size-selector.client.js";
+import "./components/navbar.client.js";
+import "./components/theme-switcher.client.js";
+import "./hljs-theme-loader.client.ts";
+import "./service-workers/register.client.ts";
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,10 @@
+@import "components/code-sample.css";
+@import "components/example.css";
+@import "components/font-size-selector.css";
+@import "components/navbar.css";
+@import "components/theme-switcher.css";
+@import "../node_modules/adwavecss/dist/styles.css";
+
 *:not(body, h1, h2, h3, h4, h5, h6) {
   font-size: inherit;
 }