feat(*.php, *.psql): deduplicate API code + performance improvements

src/assets/scripts/index.js

@@ -1,48 +1,80 @@
 window.addEventListener("load", () => {
   // dialog controls
   (() => {
-    if (document.querySelectorAll(".dialog-open").length) {
-      document.querySelectorAll(".dialog-open").forEach((button) => {
-        const dialogId = button.getAttribute("data-dialog-trigger");
-        const dialog = document.getElementById(`dialog-${dialogId}`);
+    const dialogButtons = document.querySelectorAll(".dialog-open");
+    if (!dialogButtons.length) return;
 
-        if (!dialog) return;
+    dialogButtons.forEach((button) => {
+      const dialogId = button.getAttribute("data-dialog-trigger");
+      const dialog = document.getElementById(`dialog-${dialogId}`);
+      if (!dialog) return;
 
-        const closeButton = dialog.querySelector(".dialog-close");
+      const closeButton = dialog.querySelector(".dialog-close");
 
-        button.addEventListener("click", () => {
-          dialog.showModal();
-          dialog.classList.remove("closing");
-        });
+      button.addEventListener("click", async () => {
+        const isDynamic = dialog.dataset.dynamic;
+        const isLoaded = dialog.dataset.loaded;
 
-        if (closeButton)
-          closeButton.addEventListener("click", () => {
-            dialog.classList.add("closing");
-            setTimeout(() => dialog.close(), 200);
-          });
+        if (isDynamic && !isLoaded) {
+          const markdownFields = dialog.dataset.markdown || "";
+          try {
+            const res = await fetch(`/api/proxy.php?data=${isDynamic}&id=${dialogId}&markdown=${encodeURIComponent(markdownFields)}`);
+            const [data] = await res.json();
+            const firstField = markdownFields.split(",")[0]?.trim();
+            const html = data?.[`${firstField}_html`] || "<p>No notes available.</p>";
 
-        dialog.addEventListener("click", (event) => {
-          const rect = dialog.getBoundingClientRect();
+            dialog.querySelectorAll(".dialog-dynamic").forEach((el) => el.remove());
 
-          if (
-            event.clientX < rect.left ||
-            event.clientX > rect.right ||
-            event.clientY < rect.top ||
-            event.clientY > rect.bottom
-          ) {
-            dialog.classList.add("closing");
-            setTimeout(() => dialog.close(), 200);
+            const container = document.createElement("div");
+
+            container.classList.add("dialog-dynamic");
+            container.innerHTML = html;
+            dialog.appendChild(container);
+            dialog.dataset.loaded = "true";
+          } catch (err) {
+            dialog.querySelectorAll(".dialog-dynamic").forEach((el) => el.remove());
+
+            const errorNode = document.createElement("div");
+
+            errorNode.classList.add("dialog-dynamic");
+            errorNode.textContent = "Failed to load content.";
+            dialog.appendChild(errorNode);
+
+            console.warn("Dialog content load error:", err);
           }
-        });
+        }
 
+        dialog.showModal();
+        dialog.classList.remove("closing");
+      });
 
-        dialog.addEventListener("cancel", (event) => {
-          event.preventDefault();
+      if (closeButton) {
+        closeButton.addEventListener("click", () => {
           dialog.classList.add("closing");
           setTimeout(() => dialog.close(), 200);
         });
+      }
+
+      dialog.addEventListener("click", (event) => {
+        const rect = dialog.getBoundingClientRect();
+        const outsideClick =
+          event.clientX < rect.left ||
+          event.clientX > rect.right ||
+          event.clientY < rect.top ||
+          event.clientY > rect.bottom;
+
+        if (outsideClick) {
+          dialog.classList.add("closing");
+          setTimeout(() => dialog.close(), 200);
+        }
       });
-    }
+
+      dialog.addEventListener("cancel", (event) => {
+        event.preventDefault();
+        dialog.classList.add("closing");
+        setTimeout(() => dialog.close(), 200);
+      });
+    });
   })();
 
   // text toggle for media pages
@@ -51,12 +83,9 @@ window.addEventListener("load", () => {
     const content = document.querySelector("[data-toggle-content]");
     const text = document.querySelectorAll("[data-toggle-content] p");
     const minHeight = 500; // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
-    const interiorHeight = Array.from(text).reduce(
-      (acc, node) => acc + node.scrollHeight,
-      0,
-    );
+    const interiorHeight = Array.from(text).reduce((acc, node) => acc + node.scrollHeight, 0);
 
-    if (!button || !content || !text) return;
+    if (!button || !content || !text.length) return;
 
     if (interiorHeight < minHeight) {
       content.classList.remove("text-toggle-hidden");

src/assets/styles/base/fonts.css

@@ -6,22 +6,6 @@
   font-display: swap;
 }
 
-@font-face {
-  font-family: 'Lexend';
-  src: url('/assets/fonts/ll.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Lexend';
-  src: url('/assets/fonts/lb.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
 @font-face {
   font-family: "Space Grotesk";
   src: url("/assets/fonts/sg.woff2") format("woff2");

src/assets/styles/base/index.css

@@ -1,7 +1,7 @@
 html,
 body {
   font-family: var(--font-body);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   color: var(--text-color);
   background: var(--background-color);
 }

src/assets/styles/base/vars.css

@@ -71,7 +71,7 @@
   --border-gray: 1px solid var(--gray-light);
 
   /* fonts */
-  --font-body: "Lexend", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
+  --font-body: Helvetica Neue, Helvetica, Arial, sans-serif;
   --font-heading: "Space Grotesk", "Arial Black", "Arial Bold", Gadget, sans-serif;
   --font-code: "MonoLisa", SFMono-Regular, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 
@@ -84,7 +84,6 @@
   --font-size-2xl: 1.45rem;
   --font-size-3xl: 1.6rem;
 
-  --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-bold: 700;
 

src/assets/styles/components/dialog.css

@@ -54,7 +54,7 @@ dialog {
     font-size: var(--font-size-lg);
   }
 
-  h1, h2, h3 {
+  * {
     margin-top: 0;
   }