feat(blog/nuldoc): add `defer` attribute to some `script` tags

7 files changed, 22 insertions, 11 deletions

diff --git a/vhosts/blog/nuldoc-src/components/StaticScript.tsx b/vhosts/blog/nuldoc-src/components/StaticScript.tsx
index e3b103cc..0e3ab194 100644
--- a/vhosts/blog/nuldoc-src/components/StaticScript.tsx
+++ b/vhosts/blog/nuldoc-src/components/StaticScript.tsx
@@ -3,15 +3,16 @@ import { Config } from "../config.ts";
 import { calculateFileHash } from "./utils.ts";
 
 export default async function StaticScript(
-  { fileName, type, config }: {
+  { fileName, type, defer, config }: {
     fileName: string;
     type?: string;
+    defer?: "true";
     config: Config;
   },
 ) {
   const filePath = join(Deno.cwd(), config.locations.staticDir, fileName);
   const hash = await calculateFileHash(filePath);
   return (
-    <script src={`${fileName}?h=${hash}`} {...(type ? { type } : {})}></script>
+    <script src={`${fileName}?h=${hash}`} type={type} defer={defer}></script>
   );
 }
diff --git a/vhosts/blog/nuldoc-src/jsx/types.d.ts b/vhosts/blog/nuldoc-src/jsx/types.d.ts
index cbf68a4c..0e5b223f 100644
--- a/vhosts/blog/nuldoc-src/jsx/types.d.ts
+++ b/vhosts/blog/nuldoc-src/jsx/types.d.ts
@@ -64,7 +64,7 @@ declare global {
       noscript: IntrinsicElementType;
       ol: IntrinsicElementType;
       p: IntrinsicElementType;
-      script: { src: string; type?: string };
+      script: { src: string; type?: string; defer?: "true" };
       section: IntrinsicElementType;
       time: IntrinsicElementType & { datetime?: string };
       title: IntrinsicElementType;
diff --git a/vhosts/blog/nuldoc-src/pages/AboutPage.tsx b/vhosts/blog/nuldoc-src/pages/AboutPage.tsx
index 99953b3e..1fe6adac 100644
--- a/vhosts/blog/nuldoc-src/pages/AboutPage.tsx
+++ b/vhosts/blog/nuldoc-src/pages/AboutPage.tsx
@@ -25,8 +25,12 @@ export default function AboutPage(
             <header className="post-header">
               <h1 className="post-title">nsfisis</h1>
               <div className="my-icon">
-                <StaticScript fileName="/my-icon.js" config={config} />
                 <div id="myIcon" />
+                <StaticScript
+                  fileName="/my-icon.js"
+                  defer="true"
+                  config={config}
+                />
                 <noscript>
                   <img src="/favicon.svg" />
                 </noscript>
diff --git a/vhosts/blog/nuldoc-src/renderers/html.ts b/vhosts/blog/nuldoc-src/renderers/html.ts
index ec77eb4d..b9336b53 100644
--- a/vhosts/blog/nuldoc-src/renderers/html.ts
+++ b/vhosts/blog/nuldoc-src/renderers/html.ts
@@ -183,9 +183,14 @@ function elementNodeToHtmlText(e: Element, ctx: Context): string {
     s += " ";
     for (let i = 0; i < attributes.length; i++) {
       const [name, value] = attributes[i];
-      s += `${name === "className" ? "class" : name}="${
-        encodeSpecialCharacters(value)
-      }"`;
+      if (name === "defer" && value === "true") {
+        // TODO
+        s += "defer";
+      } else {
+        s += `${name === "className" ? "class" : name}="${
+          encodeSpecialCharacters(value)
+        }"`;
+      }
       if (i !== attributes.length - 1) {
         s += " ";
       }
@@ -246,6 +251,7 @@ function indent(ctx: Context): string {
 function getElementAttributes(e: Element): [string, string][] {
   return [...e.attributes.entries()]
     .filter((a) => !a[0].startsWith("--"))
+    .filter((a) => a[1] !== undefined)
     .sort(
       (a, b) => {
         // Special rules:
diff --git a/vhosts/blog/public/about/index.html b/vhosts/blog/public/about/index.html
index 7ffe7f61..dd90ed32 100644
--- a/vhosts/blog/public/about/index.html
+++ b/vhosts/blog/public/about/index.html
@@ -42,10 +42,10 @@
         <header class="post-header">
           <h1 class="post-title">nsfisis</h1>
           <div class="my-icon">
-            <script src="/my-icon.js?h=47e1423076143fd4bc0aba0f57000b02">
-            </script>
             <div id="myIcon">
             </div>
+            <script defer src="/my-icon.js?h=bfcf9a771ec584b2040bf1e787a021d0">
+            </script>
             <noscript>
               <img src="/favicon.svg">
               </img>
diff --git a/vhosts/blog/public/my-icon.js b/vhosts/blog/public/my-icon.js
index 7d3ea96e..13086daf 100644
--- a/vhosts/blog/public/my-icon.js
+++ b/vhosts/blog/public/my-icon.js
@@ -166,7 +166,7 @@ const init = () => {
 
     setTimeout(mainLoop, 1000 / FPS);
   }
-  setTimeout(mainLoop, 2000);
+  mainLoop();
 };
 
 document.addEventListener("DOMContentLoaded", init);
diff --git a/vhosts/blog/static/my-icon.js b/vhosts/blog/static/my-icon.js
index 7d3ea96e..13086daf 100644
--- a/vhosts/blog/static/my-icon.js
+++ b/vhosts/blog/static/my-icon.js
@@ -166,7 +166,7 @@ const init = () => {
 
     setTimeout(mainLoop, 1000 / FPS);
   }
-  setTimeout(mainLoop, 2000);
+  mainLoop();
 };
 
 document.addEventListener("DOMContentLoaded", init);