Static blog with front page summary

Goal: have a personal blog, and try out another point in the 'modular app design with elixir' space. Designing OTP systems with elixir had some interesting ideas.
2026-03-17 11:17:21 +00:00
commit bc14696f57
94 changed files with 6846 additions and 0 deletions
@@ -0,0 +1,33 @@
+<header class="navbar px-4 sm:px-6 lg:px-8 border-b border-base-200">
+  <div class="flex-1">
+    <a href="/" class="font-display text-xl font-semibold tracking-tight text-primary hover:opacity-80 transition">
+      firehose
+    </a>
+  </div>
+  <div class="flex-none">
+    <ul class="flex flex-row px-1 space-x-2 sm:space-x-4 items-center">
+      <li>
+        <a href="/blog/engineering" class="btn btn-ghost btn-sm">Engineering</a>
+      </li>
+      <li>
+        <a href="/blog/releases" class="btn btn-ghost btn-sm">Releases</a>
+      </li>
+      <li>
+        <a href="https://qwan.eu" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">
+          QWAN
+        </a>
+      </li>
+      <li>
+        <.theme_toggle />
+      </li>
+    </ul>
+  </div>
+</header>
+
+<main class="px-4 py-12 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-2xl space-y-4">
+    {@inner_content}
+  </div>
+</main>
+
+<.flash_group flash={@flash} />
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <.live_title default="Firehose" suffix=" — Willem van den Ende">
+      {assigns[:page_title]}
+    </.live_title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Source+Sans+3:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" />
+    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
+    </script>
+    <script>
+      (() => {
+        const setTheme = (theme) => {
+          if (theme === "system") {
+            localStorage.removeItem("phx:theme");
+            document.documentElement.removeAttribute("data-theme");
+          } else {
+            localStorage.setItem("phx:theme", theme);
+            document.documentElement.setAttribute("data-theme", theme);
+          }
+        };
+        if (!document.documentElement.hasAttribute("data-theme")) {
+          setTheme(localStorage.getItem("phx:theme") || "system");
+        }
+        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
+        
+        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
+      })();
+    </script>
+  </head>
+  <body>
+    {@inner_content}
+  </body>
+</html>