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 {
+  padding: 0 1em;
+}
+
+main > * {
+  max-width: 35rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+::selection {
+  background: var(--color-select);
+  color: var(--color-bg);
+}
+
+.heading {
+  color: var(--color-primary);
+  font-family: var(--font-mono);
+  h1, h2, h3, h4, h5, h6 { font-weight: inherit }
+
+  &:hover .header-anchor {
+    color: var(--color-fg);
+  }
+
+  .header-anchor {
+    margin-right: 1ch;
+    text-decoration: none;
+    color: inherit;
+
+    &:hover + * {
+      color: var(--color-select-variant);
+      text-decoration: underline;
+    }
+  }
+}
+
+/* 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;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--font-mono);
+  row-gap: 0.25em;
+  bottom: 0;
+  right: 1ch;
+  left: 1ch;
+  padding-bottom: 0.5em;
+  background: var(--color-bg);
+
+  .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 {
+    view-transition-name: nav;
+    flex-grow: 100;
+    display: flex;
+
+    ul {
+      display: flex;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      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: 50;
+          background: var(--color-fg);
+        }
+        
+        &.active {
+          position: relative;
+          color: var(--color-bg);
+          background: var(--color-fg);
+        }
+
+        span {
+          position: relative;
+          z-index: 100;
+        }
+
+        &:hover {
+          color: var(--color-bg);
+          background: var(--color-fg);
+        }
+      }
+    };
+  }
+
+  #nav-cursor {
+    margin-right: 2ch;
+  }
+
+  &: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: 161ms ease-in both slide-out-up;
+}
+
+::view-transition-new(main-content) {
+  animation: 161ms ease-in both slide-in-up;
+}
+
+::view-transition-group(navbar) {
+  z-index: 10;
+}
+
+::view-transition-group(nav-active-bg) {
+  z-index: 50;
+}
+
+::view-transition-group(nav) {
+  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 has a lot of outdated deps :/
+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"
+shellout = ">= 1.7.0 and < 2.0.0"
+jot = ">= 8.0.0 and < 9.0.0"
+tom = ">= 2.0.0 and < 3.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" }
+jot = { version = ">= 8.0.0 and < 9.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" }

pages/dots.djot

···
+# what i use
+
+We all use software. Good software, bad software, great software, shit software.
+Here's a wall of text about the software I use.
+Oh, also some hardware too, I guess.
+
+## operating system
+
+Arch (btw). I tried to like NixOS. I really did. I tried twice! I gave up twice…
+
+The idea of having a single configuration for your whole system is incredibly
+appealing, but I never got over Nix-the-language and the sheer complexity
+of it all. So back to Arch it is.
+
+## desktop environment
+
+I am currently quite enjoying [Niri](https://github.com/YaLTeR/niri) in combination
+with the [Noctalia](https://noctalia.dev/) shell. Tiling window managers are a way
+of life, and Noctalia comes with basic shell things I need. If I never have to
+configure a Waybar again, it'll be too soon.
+
+I tend to go _all in_ on color schemes. After yeeeaars on Gruvbox, I switched to
+[Kanagawa](https://github.com/rebelot/kanagawa.nvim) a while ago.
+My shell, terminal, editor, GTK/QT theme, _even this website_ are styled accordingly.
+
+## terminal stuff
+
+Yeah, I thought it was hype too, but [Ghostty](https://ghostty.org/)
+is actually really nice. No complaints so far!
+
+After a long time of using zsh at work, I decided to pick up
+[Elvish](https://elv.sh/) for a few days. While it's definitely worth
+checking out, I ultimately went back to [fish](https://fishshell.com/).
+Dunno why I left it, it's really, really nice! Bonus points for being
+one of the blessed shells that usually gets shell completions out of the box.
+
+Like everyone else I use [Starship](https://starship.rs/) for my prompt.
+I will say that configuring that did _not_ spark joy. Until native
+support comes along, I'm also using the
+[starship-jj](https://gitlab.com/lanastara_foss/starship-jj) module.
+
+## browser
+
+I finally did it. I stopped using Firefox. It was a long time coming,
+but evolving into a "Modern AI Browser" finally tipped me over the edge.
+I'm currently using [Helium](https://helium.computer/), a chromium-based browser.
+I definitely do miss some Firefox-isms, but overall I'm pretty happy.
+
+By the way, if you're using Firefox, you're not seeing the multi-page
+view transitions on this website!
+
+## coding
+
+I'll probably leave this a stub because otherwise it will escalate.
+
+After years I finally wrote a decent config from actual scratch.
+No LazyVim. Not even kickstart. Just nvim nightly and the new native
+package manager. I mostly use plugins from the `mini` family, as well as
+`blink` for completions and `flash` for navigation.
+
+Of course I also use LSP. LSP is great! I just wish it was good…
+
+## multimedia
+
+When I abandoned the last remnants of Windows I jumped from VLC to mpv
+because it didn't quite work right on Wayland somehow.
+The default UI is butt-ugly (and this is coming from a VLC user!),
+but my nvim config skills have prepared me for also configuring mpv.
+Of course I've changed the colors over to Kanagawa.
+
+I also have a local music library (sourced from Bandcamp), but I haven't
+settled on a music player yet.
+
+## keeeeeebs
+
+i love dem ortho split keebs. looove em!
+I use a [3w6](https://github.com/weteor/3W6) at work and a
+[corne](https://github.com/foostan/crkbd) at home. The extra column is really
+a must for the gaming-layer.
+Both layouts are heavily based on [miryoku](https://github.com/manna-harbour/miryoku),
+but I'm still stuck on QWERTY.
+
+I'd really like to try something fancier with tenting or a curved surface or something,
+but for now I'm happy with what I've got.

pages/index.djot

···
+# hello, world
+
+hi, I'm fruno, a professional software developer and amateur
+[crytpid](https://en.wikipedia.org/wiki/List_of_cryptids) based in Vienna.
+I also like opossums.
+
+At my day job I use Kotlin, but my free time is mostly spent with
+[Gleam](https://gleam.run/) or Rust (usually on the Gleam compiler).
+You can find me over on
+[GitHub](https://github.com/fruno-bulax) or [tangled](https://tangled.org/fruno.win),
+which also hosts the [source code](https://tangled.org/fruno.win/webbed-site/)
+of this very site! I'm not really on any socials but you can message me on
+[Bluesky](https://bsky.app/profile/fruno.win).

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

···
+---
+title = "Initial Commit"
+---
+
+# initial commit
+
+This post is gonna detail how I made this site, but for now it's just a placeholder.

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/blog.gleam

···
+import component
+import gleam/list
+import gleam/string
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/ssg/djot
+import simplifile
+import tom
+
+pub type Post {
+  Post(slug: String, title: String, content: String)
+}
+
+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.sort(string.compare)
+  |> list.map(read_post)
+}
+
+fn read_post(filename: String) {
+  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"
+
+  Post(slug, title, content)
+}
+
+pub fn list_posts(posts: List(Post)) -> List(Element(msg)) {
+  [
+    component.header(1, "blog", [], [html.text("blog")]),
+    html.ul([], list.map(posts, post_list_item)),
+  ]
+}
+
+fn post_list_item(post: Post) -> Element(msg) {
+  html.a([attribute.href("/blog/" <> post.slug)], [
+    html.text(post.slug),
+    html.text(".djot"),
+  ])
+}

src/component.gleam

···
+import gleam/int
+import gleam/string
+import lustre/attribute.{type Attribute}
+import lustre/element.{type Element}
+import lustre/element/html
+
+pub fn header(
+  level: Int,
+  id: String,
+  attrs: List(Attribute(msg)),
+  content: List(Element(msg)),
+) -> Element(msg) {
+  let h = case level {
+    1 -> html.h1
+    2 -> html.h2
+    3 -> html.h3
+    4 -> html.h4
+    5 -> html.h5
+    6 -> html.h6
+    _ -> html.p
+  }
+
+  let anchor =
+    html.a([attribute.href("#" <> id), attribute.class("header-anchor")], [
+      html.text(string.repeat("#", int.min(6, level))),
+    ])
+
+  html.div([attribute.class("heading")], [
+    h([attribute.id(id), ..attrs], [anchor, html.span([], content)]),
+  ])
+}

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 blog
+import component
+import gleam/dict
+import gleam/list
+import gleam/option.{None, Some}
+import gleam/string
+import jot
+import lustre/attribute.{attribute}
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/ssg/djot
+import meta.{type SiteMeta}
+import simplifile
+
+pub type Page {
+  Index
+  Blog
+  Dots
+
+  BlogPost(blog.Post)
+}
+
+pub fn route(page: Page) {
+  case page {
+    Index -> "/"
+    Blog -> "/blog/"
+    Dots -> "/dots"
+    BlogPost(post) -> "/blog/" <> post.slug
+  }
+}
+
+pub fn title(page: Page) {
+  case page {
+    Index -> "/index"
+    Blog -> "/blog/"
+    Dots -> "/.dots"
+    BlogPost(post) -> post.title
+  }
+}
+
+pub type SiteInfo {
+  SiteInfo(posts: List(blog.Post), meta: SiteMeta)
+}
+
+pub fn render(page: Page, info: SiteInfo) -> 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([], "fruno |"),
+      html.link([
+        attribute.rel("stylesheet"),
+        attribute.href("/style.css"),
+      ]),
+    ]),
+    html.body([], [navbar(page, info.meta), html.main([], content(page, info))]),
+  ])
+}
+
+const pages_dir = "pages/"
+
+fn content(page: Page, info: SiteInfo) -> List(Element(msg)) {
+  let read_page = fn(file) {
+    let assert Ok(content) = simplifile.read(pages_dir <> file)
+      as "Failed to read djot file"
+    content
+  }
+
+  case page {
+    Index -> "index.djot" |> read_page |> djot.render(renderer())
+    Dots -> "dots.djot" |> read_page |> djot.render(renderer())
+
+    Blog -> blog.list_posts(info.posts)
+    BlogPost(post) -> djot.render(post.content, renderer())
+  }
+}
+
+fn navbar(page: Page, meta: SiteMeta) -> Element(msg) {
+  html.nav([attribute.id("navbar")], [
+    prompt_left(),
+    nav(page),
+    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(page: Page) -> Element(msg) {
+  html.div([attribute.id("nav")], [
+    html.span([attribute.id("nav-chevron")], [html.text(">")]),
+    html.span([], [html.text("/")]),
+    html.span([attribute.id("nav-cursor")], [html.text("█")]),
+    html.ul([], [
+      nav_link(Index, page),
+      nav_link(Blog, page),
+      nav_link(Dots, page),
+    ]),
+  ])
+}
+
+fn nav_link(to: Page, active: Page) {
+  let is_active = case to, active {
+    BlogPost(_), BlogPost(_) | BlogPost(_), Blog -> True
+    _, _ if to == active -> True
+    _, _ -> False
+  }
+  html.li([], [
+    html.a(
+      [
+        attribute.href(route(to)),
+        attribute.classes([#("active", is_active)]),
+      ],
+      [html.span([], [html.text(title(to))])],
+    ),
+  ])
+}
+
+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([], [])]),
+  ])
+}
+
+pub fn renderer() -> djot.Renderer(Element(msg)) {
+  let to_attributes = fn(attrs) {
+    use attrs, key, val <- dict.fold(attrs, [])
+    [attribute(key, val), ..attrs]
+  }
+
+  djot.Renderer(
+    codeblock: fn(attrs, lang, code) {
+      let lang = option.unwrap(lang, "text")
+      html.pre(to_attributes(attrs), [
+        html.code([attribute("data-lang", lang)], [html.text(code)]),
+      ])
+    },
+    emphasis: fn(content) { html.em([], content) },
+    heading: fn(attrs, level, content) {
+      let assert Ok(id) = attrs |> dict.get("id") as "Missing id in header"
+      let attrs = to_attributes(attrs)
+      component.header(level, id, attrs, content)
+    },
+    link: fn(destination, attributes, content) {
+      let attributes = to_attributes(attributes)
+
+      case destination {
+        None -> html.span(attributes, content)
+        Some(url) -> html.a([attribute.href(url), ..attributes], content)
+      }
+    },
+    paragraph: fn(attrs, content) { html.p(to_attributes(attrs), content) },
+    bullet_list: fn(layout, _style, items) {
+      html.ul([], {
+        list.map(items, fn(item) {
+          case layout {
+            jot.Tight -> html.li([], item)
+            jot.Loose -> html.li([], [html.p([], item)])
+          }
+        })
+      })
+    },
+    raw_html: fn(content) { element.unsafe_raw_html("", "div", [], content) },
+    strong: fn(content) { html.strong([], content) },
+    text: fn(text) { html.text(text) },
+    code: fn(content) { html.code([], [html.text(content)]) },
+    image: fn(destination, attributes, alt) {
+      let attributes = to_attributes(attributes)
+      case destination {
+        None -> html.span(attributes, [html.text(alt)])
+        Some(url) ->
+          html.img([attribute.href(url), attribute.alt(alt), ..attributes])
+      }
+    },
+    linebreak: html.br([]),
+    thematicbreak: html.hr([]),
+    inline_math: fn(math) {
+      html.span([attribute.class("math inline")], [
+        html.text("\\(" <> math <> "\\)"),
+      ])
+    },
+    display_math: fn(math) {
+      html.span([attribute.class("math display")], [
+        html.text("\\[" <> math <> "\\]"),
+      ])
+    },
+    blockquote: fn(attrs, content) {
+      html.blockquote(to_attributes(attrs), content)
+    },
+    span: fn(attrs, content) {
+      html.span(to_attributes(attrs), [html.text(content)])
+    },
+    div: fn(attrs, content) { html.div(to_attributes(attrs), content) },
+  )
+}

src/webbed_site.gleam

···
+import blog
+import gleam/dict
+import gleam/list
+import lustre/ssg
+import meta
+import page
+
+pub fn main() {
+  let assert Ok(meta) = meta.fetch() as "Failed to fetch site meta"
+  let posts = blog.posts()
+  let info = page.SiteInfo(posts:, meta:)
+
+  let site =
+    ssg.new("./dist")
+    |> ssg.add_static_route(
+      page.route(page.Index),
+      page.render(page.Index, info),
+    )
+    // Special path here because wisp (the AT-Proto hosting platform)
+    // likes them that way
+    |> ssg.add_static_route("/blog/index", page.render(page.Blog, info))
+    |> ssg.add_static_route(page.route(page.Dots), page.render(page.Dots, info))
+    |> ssg.add_dynamic_route(
+      "/blog/",
+      posts
+        |> list.map(fn(post) { #(post.slug, page.BlogPost(post)) })
+        |> dict.from_list(),
+      page.render(_, info),
+    )
+    |> ssg.add_static_dir("./assets")
+    |> ssg.build
+
+  let assert Ok(_) = site as "Build failed"
+}