Initial commit

.gitignore

···
+*.beam
+*.ez
+/build
+erl_crash.dump
+/dist

.tangled/workflows/publish.yaml

···
+when:
+  - event: ['push']
+    branch: ['main']
+  - event: ['manual']
+
+engine: 'nixery'
+
+dependencies:
+  nixpkgs:
+    - coreutils
+    - curl
+  github:NixOS/nixpkgs/nixpkgs-unstable:
+    - gleam
+    - beamMinimal28Packages.erlang
+
+environment:
+  SITE_PATH: 'dist'
+  SITE_NAME: 'webbed-site'
+  WISP_HANDLE: 'fruno.win'
+
+steps:
+  - name: build site
+    command: |
+      export PATH="$HOME/.nix-profile/bin:$PATH"
+
+      gleam run
+  - name: deploy to wisp
+    command: |
+      # Download Wisp CLI
+      curl https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux -o wisp-cli
+      chmod +x wisp-cli
+
+      # Deploy to Wisp
+      ./wisp-cli \
+        "$WISP_HANDLE" \
+        --path "$SITE_PATH" \
+        --site "$SITE_NAME" \
+        --password "$WISP_APP_PASSWORD"

README.md

···
+# webbed site
+
+```sh
+gleam run
+gleam run -m serve
+```
+
+# Credits
+
+- The [Myna](https://github.com/sayyadirfanali/Myna) monospace font
+- [Inclusive Sans](https://github.com/LivKing/Inclusive-Sans)

assets/img/gleam.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#ffaff3" d="M50.417 7.19c1.816-5.147 8.57-6.338 12.038-2.122L80.63 27.166a12.189 12.189 0 0 0 9.118 4.44l28.629.697c5.466.133 8.676 6.177 5.735 10.771L108.68 67.177a12.165 12.165 0 0 0-1.415 10.04l8.172 27.411c1.557 5.223-3.2 10.155-8.493 8.78l-27.713-7.2a12.194 12.194 0 0 0-9.989 1.76l-23.578 16.245c-4.504 3.103-10.66.096-10.984-5.345l-1.696-28.554a12.169 12.169 0 0 0-4.763-8.95L5.477 63.993c-4.335-3.31-3.385-10.088 1.706-12.082l26.664-10.447a12.188 12.188 0 0 0 7.048-7.29z"/><path fill="#151515" d="M55.39.154c-3.23.57-6.183 2.715-7.405 6.178l-9.523 26.981a9.598 9.598 0 0 1-5.553 5.744L6.243 49.504c-6.842 2.68-8.165 12.092-2.332 16.547l22.744 17.37a9.571 9.571 0 0 1 3.75 7.047l1.696 28.553c.435 7.325 8.98 11.493 15.034 7.322l23.58-16.245v-.001a9.604 9.604 0 0 1 7.87-1.387l27.714 7.199c7.116 1.849 13.72-4.99 11.623-12.023l-8.17-27.41a9.578 9.578 0 0 1 1.114-7.905l15.432-24.105c3.957-6.181-.504-14.572-7.85-14.751l-28.63-.696a9.595 9.595 0 0 1-7.183-3.497L64.46 3.425C62.127.589 58.619-.417 55.389.153m.869 4.932c1.468-.26 3.07.248 4.206 1.627L78.639 28.81a14.78 14.78 0 0 0 11.052 5.383l28.63.695c3.585.088 5.544 3.783 3.618 6.79L106.508 65.78a14.761 14.761 0 0 0-1.716 12.172l8.171 27.41c1.018 3.415-1.892 6.44-5.363 5.538l-27.714-7.2a14.787 14.787 0 0 0-12.108 2.136l-23.58 16.245c-2.954 2.035-6.722.187-6.933-3.368L35.57 90.16a14.762 14.762 0 0 0-5.775-10.852L7.051 61.939c-2.837-2.167-2.26-6.31 1.078-7.619l26.666-10.447a14.782 14.782 0 0 0 8.545-8.84l9.523-26.98c.594-1.685 1.927-2.71 3.395-2.968"/><path fill="#151515" d="M47.093 72.832a5.082 5.082 0 1 0-1.766-10.01 5.082 5.082 0 0 0 1.766 10.01zm40.945-7.22a5.081 5.081 0 1 0-1.764-10.008 5.081 5.081 0 0 0 1.764 10.008zM63.356 71.7a2.594 2.594 0 0 0-1.434 1.365 2.59 2.59 0 0 0-.048 1.98 6.734 6.734 0 0 0 3.562 3.737h.001c.81.358 1.681.554 2.566.575h.002a6.755 6.755 0 0 0 2.591-.451h.001a6.735 6.735 0 0 0 2.222-1.409h.001a6.74 6.74 0 0 0 2.089-4.722 2.588 2.588 0 0 0-4.952-1.106c-.137.31-.212.645-.22.985a1.55 1.55 0 0 1-.134.595v.002a1.578 1.578 0 0 1-.87.828 1.572 1.572 0 0 1-1.201-.03h-.002a1.573 1.573 0 0 1-.5-.35v-.001a1.568 1.568 0 0 1-.329-.518 2.585 2.585 0 0 0-3.345-1.48z"/></svg>

assets/style.css

···
+:root {
+  color-scheme: light dark;
+
+  --color-fg: light-dark(#1f1f28, #dcd7ba);
+  --color-bg: light-dark(#dcd7ba, #1f1f28);
+
+  --color-fg-muted: light-dark(#363646, #bab28a);
+  /* lighter in dark mode, darker in light mode */
+  --color-bg-variant: light-dark(#363646, #bab28a);
+
+  --color-primary: light-dark(#957fb8, #938aa9);
+  --color-primary-variant: light-dark(#938aa9, #957fb8);
+  --color-secondary: light-dark(#6a9589, #7aa89f);
+  --color-select: light-dark(#7fb4ca, #7e9cd8);
+  --color-select-variant: light-dark(#7e9cd8, #7fb4ca);
+
+  --font: "Inclusive Sans", sans-serif;
+  --font-mono: "Myna", monospace;
+
+  color: var(--color-fg);
+  background: var(--color-bg);
+
+  font-family: var(--font);
+  font-size: calc(.333vw + 1em);
+}
+
+/* Fonts */
+
+@font-face {
+  font-family: "Inclusive Sans";
+  font-style: normal;
+  src: url("/fonts/InclusiveSans.woff2") format("woff2-variations");
+  font-weight: 125 950;
+}
+
+@font-face {
+  font-family: "Inclusive Sans";
+  font-style: italic;
+  src: url("/fonts/InclusiveSans-Italic.woff2") format("woff2-variations");
+  font-weight: 125 950;
+}
+
+@font-face {
+  font-family: "Myna";
+  font-style: normal;
+  src: url("/fonts/Myna.woff2");
+  font-weight: 400;
+}
+
+
+/* Style */
+
+main > * {
+  max-width: 35rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+::selection {
+  background: var(--color-select);
+  color: var(--color-bg);
+}
+
+h1, h2, h3 {
+  color: var(--color-primary);
+  font-family: var(--font-mono);
+  font-weight: inherit;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:hover:before {
+    color: var(--color-fg);
+  }
+}
+
+h1::before {
+  content: "# ";
+}
+
+h2::before {
+  content: "## ";
+}
+
+h3::before {
+  content: "### ";
+}
+
+/* Only works in flex containers because CSS works in mysterious ways */
+.icon {
+  height: 1em;
+  width: 1em;
+  margin: auto 0.25em;
+}
+
+#navbar {
+  view-transition-name: navbar;
+  position: fixed;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 0.25em;
+  font-family: var(--font-mono);
+  bottom: 0.25rem;
+  right: 1ch;
+  left: 1ch;
+
+  /* With a mouse, leave space for the little link hover thing
+   * in the bottom left
+   */
+  @media (pointer: fine) {
+    bottom: 1.5em;
+  }
+
+  .prompt-pointed-right {
+    width: 3ch;
+    height: 100%;
+    div {
+      width: 2ch;
+      height: 100%;
+      clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%);
+    }
+  }
+
+  #prompt-left .prompt-rounded-left {
+    background: var(--color-primary);
+  }
+
+  #prompt-left {
+    display: flex;
+    color: var(--color-bg);
+
+    #prompt-user {
+      display: flex;
+      background: var(--color-primary);
+      padding-left: 1ch;
+      border-radius: 999em 0 0 999em;
+
+      & + .prompt-pointed-right {
+        background: linear-gradient(90deg, var(--color-primary) 25%, var(--color-secondary) 0 100%);
+        div {
+          background: var(--color-primary);
+        }
+      }
+    }
+
+    #prompt-dir {
+      display: flex;
+      background: var(--color-secondary);
+
+      & + .prompt-pointed-right {
+        background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-bg) 0 100%);
+        div {
+          background: var(--color-secondary);
+        }
+      }
+    }
+  }
+
+  #prompt-right {
+    float: right;
+    display: flex;
+
+    --jj-bg: color-mix(in srgb, var(--color-bg) 90%, var(--color-fg) 10%);
+    --gleam-bg: color-mix(in srgb, var(--color-bg) 80%, var(--color-fg) 20%);
+
+    .prompt-pointed-right:first-child {
+      background: linear-gradient(90deg, var(--color-bg) 25%, var(--jj-bg) 0 100%);
+      div {
+        background: var(--color-bg);
+      }
+    }
+
+    #prompt-jj-change-id {
+      display: flex;
+      background: var(--jj-bg);
+      color: var(--color-fg-muted);
+
+      a { color: inherit }
+
+      & + .prompt-pointed-right {
+        background: linear-gradient(90deg, var(--jj-bg) 25%, var(--gleam-bg) 0 100%);
+        div {
+          background: var(--jj-bg);
+        }
+      }
+    }
+
+    #prompt-gleam {
+      display: flex;
+      background: var(--gleam-bg);
+
+      & + .prompt-pointed-right {
+        width: 2ch;
+        background: linear-gradient(90deg, var(--gleam-bg) 25%, var(--color-bg) 0 100%);
+        div {
+          background: var(--gleam-bg);
+        }
+      }
+    }
+  }
+
+  #nav {
+    flex-grow: 100;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 1ch;
+
+    a {
+      padding: 0 1ch;
+      border-radius: 0.25em;
+      color: var(--color-fg);
+
+      &:visited {
+        color: inherit;
+      }
+
+      /*
+       * Pseudo background element we can animate during page transitions
+       */
+      &.active::before {
+        view-transition-name: nav-active-bg;
+        border-radius: 0.25em;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        z-index: -100;
+        background: var(--color-fg);
+      }
+      
+      &.active {
+        position: relative;
+        color: var(--color-bg);
+        background: var(--color-fg);
+      }
+
+      &:hover {
+        color: var(--color-bg);
+        background: var(--color-fg);
+      }
+    }
+  }
+
+  #nav-cursor {
+    margin-right: 1ch;
+  }
+
+  &:hover #nav-cursor {
+    animation: blink 1.5s steps(1, start) infinite;
+  }
+
+  #nav-chevron {
+    display: none;
+    width: 1ch;
+    margin-right: 1ch;
+  }
+
+  /* I wanted to avoid breakpoints, but I can't figure out a way around this one */
+  @media (max-width: 768px) {
+    #nav-chevron { display: inherit }
+    #prompt-right {
+      position: relative;
+      left: -2ch;
+    }
+    #nav {
+      order: 3;
+      width: 100vw;
+    }
+
+    #prompt-right .prompt-pointed-right:first-child {
+      background: linear-gradient(90deg, var(--color-secondary) 25%, var(--jj-bg) 0 100%);
+      div {
+        background: var(--color-secondary);
+      }
+    }
+  }
+}
+
+a {
+  color: var(--color-select);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-select-variant);
+  }
+}
+
+@view-transition {
+  navigation: auto;
+}
+
+@keyframes blink {
+  50% { visibility: hidden }
+}
+
+@keyframes slide-out-up {
+  from { transform: translateY(0) }
+  to { transform: translateY(-100vh) }
+}
+
+@keyframes slide-in-up {
+  from { transform: translateY(100vh) }
+  to { transform: translateY(0) }
+}
+
+main {
+  view-transition-name: main-content;
+}
+
+::view-transition-old(main-content) {
+  animation: 250ms ease-in both slide-out-up;
+}
+
+::view-transition-new(main-content) {
+  animation: 250ms ease-in both slide-in-up;
+}
+
+::view-transition-group(navbar) {
+  z-index: 100;
+}
+

gleam.toml

···
+name = "webbed_site"
+version = "1.0.0"
+
+# Fill out these fields if you intend to generate HTML documentation or publish
+# your project to the Hex package manager.
+#
+# description = ""
+# licences = ["Apache-2.0"]
+# repository = { type = "github", user = "", repo = "" }
+# links = [{ title = "Website", href = "" }]
+#
+# For a full reference of all the available options, you can have a look at
+# https://gleam.run/writing-gleam/gleam-toml/.
+
+[dependencies]
+gleam_stdlib = ">= 0.44.0 and < 2.0.0"
+lustre_ssg = { git = "https://github.com/fruno-bulax/lustre_ssg", ref = "6c132bd34ab75a1144d31c0f896cab0e3cbf80fc" }
+lustre = ">= 5.4.0 and < 6.0.0"
+gleam_time = ">= 1.6.0 and < 2.0.0"
+simplifile = ">= 2.3.2 and < 3.0.0"
+tom = ">= 2.0.0 and < 3.0.0"
+shellout = ">= 1.7.0 and < 2.0.0"

manifest.toml

···
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "envoy", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "envoy", source = "hex", outer_checksum = "850DA9D29D2E5987735872A2B5C81035146D7FE19EFC486129E44440D03FD832" },
+  { name = "exception", version = "2.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "exception", source = "hex", outer_checksum = "329D269D5C2A314F7364BD2711372B6F2C58FA6F39981572E5CA68624D291F8C" },
+  { name = "filepath", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "B06A9AF0BF10E51401D64B98E4B627F1D2E48C154967DA7AF4D0914780A6D40A" },
+  { name = "gleam_crypto", version = "1.5.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_crypto", source = "hex", outer_checksum = "50774BAFFF1144E7872814C566C5D653D83A3EBF23ACC3156B757A1B6819086E" },
+  { name = "gleam_erlang", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "1124AD3AA21143E5AF0FC5CF3D9529F6DB8CA03E43A55711B60B6B7B3874375C" },
+  { name = "gleam_json", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "44FDAA8847BE8FC48CA7A1C089706BD54BADCC4C45B237A992EDDF9F2CDB2836" },
+  { name = "gleam_otp", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BA6A294E295E428EC1562DC1C11EA7530DCB981E8359134BEABC8493B7B2258E" },
+  { name = "gleam_regexp", version = "1.1.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_regexp", source = "hex", outer_checksum = "9C215C6CA84A5B35BB934A9B61A9A306EC743153BE2B0425A0D032E477B062A9" },
+  { name = "gleam_stdlib", version = "0.67.1", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "6CE3E4189A8B8EC2F73AB61A2FBDE49F159D6C9C61C49E3B3082E439F260D3D0" },
+  { name = "gleam_time", version = "1.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_time", source = "hex", outer_checksum = "0DF3834D20193F0A38D0EB21F0A78D48F2EC276C285969131B86DF8D4EF9E762" },
+  { name = "houdini", version = "1.2.0", build_tools = ["gleam"], requirements = [], otp_app = "houdini", source = "hex", outer_checksum = "5DB1053F1AF828049C2B206D4403C18970ABEF5C18671CA3C2D2ED0DD64F6385" },
+  { name = "jot", version = "8.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "houdini", "splitter"], otp_app = "jot", source = "hex", outer_checksum = "CCE11C8904B129CC9DA3A293B645884B91C96D252183F6DBCAEFA8F2587CAEFD" },
+  { name = "lustre", version = "5.4.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib", "houdini"], otp_app = "lustre", source = "hex", outer_checksum = "40E097BABCE65FB7C460C073078611F7F5802EB07E1A9BFB5C229F71B60F8E50" },
+  { name = "lustre_ssg", version = "0.12.0", build_tools = ["gleam"], requirements = ["filepath", "gleam_regexp", "gleam_stdlib", "jot", "lustre", "simplifile", "temporary", "tom"], source = "git", repo = "https://github.com/fruno-bulax/lustre_ssg", commit = "6c132bd34ab75a1144d31c0f896cab0e3cbf80fc" },
+  { name = "shellout", version = "1.7.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "shellout", source = "hex", outer_checksum = "1BDC03438FEB97A6AF3E396F4ABEB32BECF20DF2452EC9A8C0ACEB7BDDF70B14" },
+  { name = "simplifile", version = "2.3.2", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "E049B4DACD4D206D87843BCF4C775A50AE0F50A52031A2FFB40C9ED07D6EC70A" },
+  { name = "splitter", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "splitter", source = "hex", outer_checksum = "3DFD6B6C49E61EDAF6F7B27A42054A17CFF6CA2135FF553D0CB61C234D281DD0" },
+  { name = "temporary", version = "1.0.0", build_tools = ["gleam"], requirements = ["envoy", "exception", "filepath", "gleam_crypto", "gleam_stdlib", "simplifile"], otp_app = "temporary", source = "hex", outer_checksum = "51C0FEF4D72CE7CA507BD188B21C1F00695B3D5B09D7DFE38240BFD3A8E1E9B3" },
+  { name = "tom", version = "2.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "gleam_time"], otp_app = "tom", source = "hex", outer_checksum = "74D0C5A3761F7A7D06994755D4D5AD854122EF8E9F9F76A3E7547606D8C77091" },
+]
+
+[requirements]
+gleam_stdlib = { version = ">= 0.44.0 and < 2.0.0" }
+gleam_time = { version = ">= 1.6.0 and < 2.0.0" }
+lustre = { version = ">= 5.4.0 and < 6.0.0" }
+lustre_ssg = { git = "https://github.com/fruno-bulax/lustre_ssg", ref = "6c132bd34ab75a1144d31c0f896cab0e3cbf80fc" }
+shellout = { version = ">= 1.7.0 and < 2.0.0" }
+simplifile = { version = ">= 2.3.2 and < 3.0.0" }
+tom = { version = ">= 2.0.0 and < 3.0.0" }

posts/2026-01-03-initial-commit.djot

···
+---
+title = "Initial Commit"
+date = 2026-01-03
+---
+
+# Initial Commit
+
+Hello there!

serve💅.py

···
+#!/usr/bin/env python3
+
+import http.server
+import socketserver
+import sys
+import os.path
+
+PORT = 8080
+# Be careful in public networks!
+# I just wanna check the site on my phone
+HOST = "0.0.0.0"
+ROOT = "./dist"
+
+class CleanUrlHandler(http.server.SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=ROOT, **kwargs)
+
+    def do_GET(self):
+        # This is a very shitty check, but it's good enough
+        if not '.' in self.path and not os.path.isdir(self.translate_path(self.path)):
+            self.path += '.html'
+
+        super().do_GET()
+
+with socketserver.TCPServer((HOST, PORT), CleanUrlHandler) as http:
+    print(f"Serving 💅 at {HOST}:{PORT}")
+    try:
+        http.serve_forever()
+    except KeyboardInterrupt:
+        sys.exit(0)

src/component.gleam

···
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+import gleam/string
+
+pub fn header(title: String, h) -> Element(Nil) {
+  let id = slugify(title)
+  h(
+    [attribute.id(id)],
+    [html.a([attribute.href("#" <> id)], [html.text(title)])],
+  )
+}
+
+fn slugify(text: String) -> String {
+  text
+    |> string.lowercase
+    |> string.replace(" ", "-")
+}

src/meta.gleam

···
+import gleam/result
+import shellout
+
+pub type SiteMeta {
+  SiteMeta(commit_hash: String, gleam_version: String)
+}
+
+pub fn fetch() -> Result(SiteMeta, String) {
+  use commit_hash <- result.try(commit_hash())
+  use gleam_version <- result.map(gleam_version())
+  SiteMeta(commit_hash:, gleam_version:)
+}
+
+fn commit_hash() -> Result(String, String) {
+  shellout.command(run: "git", with: ["rev-parse", "HEAD"], in: ".", opt: [])
+  |> result.map_error(fn(error) { "Failed to fetch commit hash: " <> error.1 })
+}
+
+fn gleam_version() -> Result(String, String) {
+  let result = shellout.command("gleam", ["--version"], ".", [])
+  case result {
+    Ok("gleam " <> version) -> Ok(version)
+    Ok(_) -> Error("gleam --version returned unexpected result")
+    Error(error) -> Error("Failed to fetch gleam version: " <> error.1)
+  }
+}

src/page.gleam

···
+import gleam/string
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+import meta.{type SiteMeta}
+
+pub type Nav {
+  Index
+  Blog
+  About
+}
+
+pub fn render(
+  active_nav: Nav,
+  title: String,
+  meta: SiteMeta,
+  content: List(Element(msg)),
+) -> Element(msg) {
+  html.html([attribute.lang("en")], [
+    html.head([], [
+      html.meta([attribute.charset("utf-8")]),
+      html.meta([
+        attribute.name("viewport"),
+        attribute.content("width=device-width, initial-scale=1.0"),
+      ]),
+      html.title([], title),
+      html.link([
+        attribute.rel("stylesheet"),
+        attribute.href("/style.css"),
+      ]),
+    ]),
+    html.body([], [navbar(active_nav, meta), html.main([], content)]),
+  ])
+}
+
+fn navbar(active: Nav, meta: SiteMeta) -> Element(msg) {
+  html.nav([attribute.id("navbar")], [
+    prompt_left(),
+    nav(active),
+    prompt_right(meta),
+  ])
+}
+
+fn prompt_left() -> Element(msg) {
+  html.div([attribute.id("prompt-left")], [
+    html.div([attribute.id("prompt-user")], [
+      html.text("fruno"),
+    ]),
+    html.div([attribute.class("prompt-pointed-right")], [html.div([], [])]),
+    html.div([attribute.id("prompt-dir")], [
+      html.text("~/webbed_site"),
+    ]),
+    html.div([attribute.class("prompt-pointed-right")], [html.div([], [])]),
+  ])
+}
+
+fn nav(active: Nav) -> Element(msg) {
+  html.ul([attribute.id("nav")], [
+    html.span([attribute.id("nav-chevron")], [html.text(">")]),
+    html.span([attribute.id("nav-cursor")], [html.text("█")]),
+    html.li([], [
+      html.a(
+        [
+          attribute.href("/"),
+          attribute.id("home"),
+          attribute.classes([#("active", active == Index)]),
+        ],
+        [html.text("/home")],
+      ),
+    ]),
+    html.li([], [
+      html.a(
+        [
+          attribute.href("/blog/"),
+          attribute.id("blog"),
+          attribute.classes([#("active", active == Blog)]),
+        ],
+        [html.text("/blog/")],
+      ),
+    ]),
+    html.li([], [
+      html.a(
+        [
+          attribute.href("/about"),
+          attribute.id("about"),
+          attribute.classes([#("active", active == About)]),
+        ],
+        [html.text("/about")],
+      ),
+    ]),
+  ])
+}
+
+fn prompt_right(meta: SiteMeta) -> Element(msg) {
+  html.div([attribute.id("prompt-right")], [
+    html.div([attribute.class("prompt-pointed-right")], [html.div([], [])]),
+    html.div([attribute.id("prompt-jj-change-id")], [
+      html.a(
+        [
+          attribute.href(
+            "https://tangled.org/fruno.win/webbed-site/commit/" <> meta.commit_hash,
+          ),
+        ],
+        [html.text(string.slice(meta.commit_hash, 0, 4))],
+      ),
+    ]),
+    html.div([attribute.class("prompt-pointed-right")], [html.div([], [])]),
+    html.div([attribute.id("prompt-gleam")], [
+      html.img([
+        attribute.class("icon"),
+        attribute.alt("Lucy, the mascot of the gleam programming language"),
+        attribute.src("/img/gleam.svg"),
+      ]),
+      html.text(meta.gleam_version),
+    ]),
+    html.div([attribute.class("prompt-pointed-right")], [html.div([], [])]),
+  ])
+}

src/page/about.gleam

···
+import meta.{type SiteMeta}
+import lustre/element.{type Element}
+import lustre/element/html
+import page
+import component
+
+pub fn view(meta: SiteMeta) -> Element(Nil) {
+  page.render(page.About, "about", meta, [
+    component.header("about", html.h1)
+  ])
+}

src/page/blog.gleam

···
+import meta.{type SiteMeta}
+import gleam/list
+import gleam/string
+import gleam/time/calendar.{type Date}
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/ssg/djot
+import page
+import simplifile
+import tom
+
+pub type Post {
+  Post(title: String, date: Date, slug: String, content: List(Element(Nil)))
+}
+
+const posts_dir = "./posts"
+
+pub fn posts() -> List(Post) {
+  let assert Ok(files) = simplifile.read_directory(posts_dir)
+    as "Failed to read posts directory"
+
+  files
+  |> list.map(read_post)
+  |> list.sort(fn(a, b) { calendar.naive_date_compare(a.date, b.date) })
+}
+
+pub fn list_all(posts: List(Post), meta: SiteMeta) -> Element(Nil) {
+  page.render(page.Blog, "blog", meta, [
+    html.article([], [
+      html.header([], [html.h1([], [html.text("blog")])]),
+      html.ul([], list.map(posts, post_list_item)),
+    ]),
+  ])
+}
+
+fn post_list_item(post: Post) -> Element(Nil) {
+  html.a([attribute.href("/blog/" <> post.slug)], [html.text(post.title)])
+}
+
+pub fn view_post(post: Post, meta: SiteMeta) -> Element(Nil) {
+  page.render(page.Blog, post.title, meta, post.content)
+}
+
+fn read_post(filename: String) -> Post {
+  let assert [slug, "djot"] = string.split(filename, ".")
+    as "Unexpected post file type"
+  let assert Ok(content) = simplifile.read(posts_dir <> "/" <> filename)
+    as "Failed to read file"
+
+  let assert Ok(meta) = djot.metadata(content) as "Failed to read post metadata"
+  let assert Ok(title) = tom.get_string(meta, ["title"]) as "Missing post title"
+  let assert Ok(date) = tom.get_date(meta, ["date"])
+    as "Missing or malformed post date"
+
+  // TODO scaffolding like nav and such
+  let content = djot.render(content, djot.default_renderer())
+
+  Post(title:, date:, slug:, content:)
+}

src/page/index.gleam

···
+import meta.{type SiteMeta}
+import component
+import lustre/element.{type Element}
+import lustre/element/html
+import page
+
+pub fn view(meta: SiteMeta) -> Element(Nil) {
+  page.render(page.Index, "index", meta, [
+    component.header("wip", html.h1),
+    html.p([], [
+      html.text(
+        "This site is very work-in-progress but it kind of looks like a terminal and that's pretty neat.",
+      ),
+    ]),
+    component.header("Nested headers work too!", html.h2),
+    html.p([], [
+      html.text(
+        "This is a purely static site without javascript but with mutli-page view transitions instead. Firefox can't do them yet. boooo!",
+      ),
+    ]),
+  ])
+}

src/webbed_site.gleam

···
+import gleam/dict
+import gleam/list
+import lustre/ssg
+import meta
+import page/about
+import page/blog
+import page/index
+
+pub fn main() {
+  let assert Ok(meta) = meta.fetch() as "Failed to fetch site meta"
+  let posts = blog.posts()
+
+  let build =
+    ssg.new("./dist")
+    |> ssg.add_static_route("/", index.view(meta))
+    |> ssg.add_static_route("/about", about.view(meta))
+    |> ssg.add_static_route("/blog/index", blog.list_all(posts, meta))
+    |> ssg.add_dynamic_route(
+      "/blog/",
+      posts
+        |> list.map(fn(post) { #(post.slug, post) })
+        |> dict.from_list(),
+      blog.view_post(_, meta),
+    )
+    |> ssg.add_static_dir("./assets")
+    |> ssg.build
+
+  let assert Ok(_) = build as "Build failed"
+}