.gitignore

@@ -1 +1,18 @@
-.zig-cache
+*
+!.gitignore
+!flake.lock
+!flake.nix
+!zine.ziggy
+!Dockerfile
+!layouts/
+!layouts/**
+
+!content/
+!content/**
+
+!assets/
+!assets/**
+
+!.gitea/
+!.gitea/workflows/
+!.gitea/workflows/**

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

CLAUDE.md

@@ -0,0 +1,81 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a static website built with [Zine](https://zine-ssg.io/), a static site generator written in Zig. The site uses:
+
+- **SuperMD (.smd)** for content pages - a Markdown superset with embedded templating
+- **SuperHTML (.shtml)** for layout templates - HTML with templating extensions
+- **Nix** for development environment and dependency management
+
+## Development Commands
+
+### Development Server
+```bash
+# Start development server with live reload (default: localhost:1990)
+zine
+
+# Start with custom host/port
+zine --port 8080 --host 0.0.0.0
+
+# Include draft pages
+zine --drafts
+```
+
+### Build for Production
+```bash
+# Generate static site for deployment
+zine release
+```
+
+### Environment Setup
+```bash
+# Enter development shell with zine available
+nix develop
+```
+
+## Project Structure
+
+### Content Files (.smd)
+- `content/` - All site content in SuperMD format
+  - `index.smd` - Homepage
+  - `about.smd` - About page
+  - `blog/` - Blog posts and index
+  - `devlog/` - Microblog entries
+
+### Layout Templates (.shtml)
+- `layouts/` - SuperHTML templates
+  - `templates/base.shtml` - Base template with site navigation
+  - `index.shtml`, `page.shtml`, `post.shtml` - Page-specific layouts
+  - `blog.shtml`, `devlog.shtml` - Section layouts
+  - `*.xml` - RSS feed templates
+
+### Configuration
+- `zine.ziggy` - Site configuration (title, URLs, asset paths)
+- `flake.nix` - Nix development environment with Zine binary
+
+### Assets
+- `assets/` - Static assets (CSS, JS, images)
+  - Includes math rendering (Temml) and syntax highlighting
+
+## Architecture Notes
+
+### Content Types
+1. **Pages** - Individual content files with frontmatter and layout assignment
+2. **Blog** - Traditional blog with separate pages per post
+3. **Devlog** - Microblog format with multiple entries on single page
+
+### Templating System
+- Uses Scripty expression language for logic
+- SuperHTML templates extend base template via `<extend template="base.shtml">`
+- Content rendered via `$page.content()`, metadata via `$page.title`, etc.
+- Site-wide variables available via `$site.*`
+
+### Asset Handling
+- Static assets referenced via `$site.asset('filename').link()`
+- Page-specific assets stored alongside content files
+- CSS and JS assets included in base template
+
+The development server automatically rebuilds on file changes with configurable debounce timing.

Dockerfile

@@ -1,12 +1,25 @@
-FROM busybox:latest
+FROM alpine:3.22.1 as zine
+ARG ZINE_VERSION=v0.11.1
 
-RUN adduser -D static
-USER static
-WORKDIR /home/static
+ARG TARGETARCH
+RUN apk add --no-cache curl tar xz \
+  && case "$TARGETARCH" in \
+  amd64)  Z_ARCH="x86_64-linux-musl";; \
+  arm64)  Z_ARCH="aarch64-linux-musl";; \
+  *) echo "Unsupported TARGETARCH: $TARGETARCH" && exit 1;; \
+  esac \
+  && curl -L "https://github.com/kristoff-it/zine/releases/download/${ZINE_VERSION}/${Z_ARCH}.tar.xz" -o /tmp/zine.tar.xz \
+  && tar -C /usr/local/bin -xJf /tmp/zine.tar.xz zine \
+  && chmod +x /usr/local/bin/zine \
+  && zine --version
 
-COPY ./zig-out/ .
-
-EXPOSE 3000
-
-CMD ["busybox", "httpd", "-f", "-v", "-p", "3000"]
+FROM alpine:3.22.1 as builder
+COPY --from=zine /usr/local/bin/zine /usr/local/bin/zine
+WORKDIR /site
+COPY . .
+RUN zine release
 
+FROM nginx:alpine3.22 AS runner
+COPY --from=builder /site/public/ /usr/share/nginx/html/
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

assets/Temml-Local.css

@@ -0,0 +1,249 @@
+/*
+Temml.woff2 is a clone of KaTeX_Script-Regular, except that the code points
+have been changed from ASCII to Unicode Mathematical Alphanumeric Symbols Script capitals,
+Unicode range 1D49C to 1D4B5.
+*/
+
+@font-face {
+  font-family: 'Temml';
+  src: url('Temml.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+math {
+  font-family: "Cambria Math", 'STIXTwoMath-Regular', 'NotoSansMath-Regular', math;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  font-size-adjust: none;
+  text-indent: 0;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  direction: ltr;
+  /* Prevent Firefox from omitting the dot on i or j. */
+  font-feature-settings: "dtls" off;
+}
+
+math * {
+  border-color: currentColor;
+}
+
+/* Next line is active in Firefox and Safari.
+ * Not in Chromium, which recognizes display: "block math" written inline. */
+math.tml-display { display: block; }
+
+*.mathcal {
+  /* NotoSans */
+  font-feature-settings: 'ss01';
+}
+
+math .mathscr {
+  font-family: "Temml";
+}
+
+mo.tml-prime {
+  font-family: Temml;
+}
+
+/* Prevent f' from overlapping in Chromium */
+mo.prime-pad {
+  padding-left: 0.08em;
+}
+
+/* \cancel & \phase use background images. Get them to print. */
+menclose {
+  -webkit-print-color-adjust: exact;  /* Chrome & Edge */
+          print-color-adjust: exact;
+}
+
+/* Array cell justification in Firefox & WebKit */
+.tml-right {
+  text-align: right;
+}
+.tml-left {
+  text-align: left;
+}
+
+/* Styles for Chromium only */
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+  /* MathML Core & Chromium do not support the MathML 3.0 element <menclose> attributes. */
+  /* So use styles. */
+  menclose {
+    position: relative;
+    padding: 0.5ex 0ex;
+  }
+  
+    .tml-overline {
+    padding: 0.1em 0 0 0;
+    border-top: 0.065em solid;
+  }
+
+  .tml-underline {
+    padding: 0 0 0.1em 0;
+    border-bottom: 0.065em solid;
+  }
+
+  .tml-cancel {
+    display: inline-block;
+    position: absolute;
+    left: 0.5px;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: currentColor;
+  }
+  .upstrike {
+    clip-path: polygon(0.05em 100%, 0em calc(100% - 0.05em), calc(100% - 0.05em) 0em, 100% 0.05em);
+  }
+  .downstrike {
+    clip-path: polygon(0em 0.05em, 0.05em 0em, 100% calc(100% - 0.05em), calc(100% - 0.05em) 100%);
+  }
+  .sout {
+    clip-path: polygon(0em calc(55% + 0.0333em), 0em calc(55% - 0.0333em), 100% calc(55% - 0.0333em), 100% calc(55% + 0.0333em));
+  }
+  .tml-xcancel {
+    background: linear-gradient(to top left,
+    rgba(0,0,0,0) 0%,
+    rgba(0,0,0,0) calc(50% - 0.06em),
+    rgba(0,0,0,1) 50%,
+    rgba(0,0,0,0) calc(50% + 0.06em),
+    rgba(0,0,0,0) 100%),
+    linear-gradient(to top right,
+    rgba(0,0,0,0) 0%,
+    rgba(0,0,0,0) calc(50% - 0.06em),
+    rgba(0,0,0,1) 50%,
+    rgba(0,0,0,0) calc(50% + 0.06em),
+    rgba(0,0,0,0) 100%)
+  }
+
+  .longdiv-top {
+    border-top: 0.067em solid;
+    padding: 0.1em 0.2em 0.2em 0.433em;
+  }
+  .longdiv-arc {
+    position: absolute;
+    top: 0;
+    bottom: 0.1em;
+    left: -0.4em;
+    width: 0.7em;
+    border: 0.067em solid;
+    transform: translateY(-0.067em);
+    border-radius: 70%;
+    clip-path: inset(0 0 0 0.4em);
+    box-sizing: border-box;}
+    .menclose {display: inline-block;
+    text-align: left;
+    position: relative;
+  }
+  
+  .phasor-bottom {
+    border-bottom: 0.067em solid;
+    padding: 0.2em 0.2em 0.1em 0.6em;
+  }
+  .phasor-angle {
+    display: inline-block;
+    position: absolute;
+    left: 0.5px;
+    bottom: -0.04em;
+    height: 100%;
+    aspect-ratio: 0.5;
+    background-color: currentColor;
+    clip-path: polygon(0.05em 100%, 0em calc(100% - 0.05em), calc(100% - 0.05em) 0em, 100% 0.05em);
+  }
+
+  .tml-box {
+    padding: 3pt 0 3pt 0;
+    border: 1px solid;
+  }
+  .tml-fbox {
+    padding: 3pt;
+    border: 1px solid;
+  }
+
+  .circle-pad {
+    padding: 0.267em;
+  }
+  .textcircle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    border: 0.067em solid;
+    border-radius: 50%;
+   }
+
+   .actuarial {
+    padding: 0.03889em 0.03889em 0 0.03889em;
+    border-width: 0.08em 0.08em 0em 0em;
+    border-style: solid;
+    margin-right: 0.03889em;
+   }
+
+   /* Stretch \widetilde */
+  .tml-crooked-2 {
+    transform: scale(2.0, 1.1)
+  }
+  .tml-crooked-3 {
+    transform: scale(3.0, 1.3)
+  }
+  .tml-crooked-4 {
+    transform: scale(4.0, 1.4)
+  }
+  /* set array cell justification */
+  .tml-right {
+    text-align: -webkit-right;
+  }
+  .tml-left {
+    text-align: -webkit-left;
+  }
+}
+
+/* Adjust WebKit accents */
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  .tml-xshift { transform: translate(0px, 0.45em) }
+  .tml-capshift { transform: translate(0px, 0.35em) }
+}
+
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Default mtd top padding is 0.5ex per MathML-Core and user-agent CSS */
+/* We adjust for jot and small */
+mtable.tml-jot mtd {
+  padding-top: 0.7ex;
+  padding-bottom: 0.7ex;
+}
+mtable.tml-small mtd {
+  padding-top: 0.35ex;
+  padding-bottom: 0.35ex;
+}
+
+/* Firefox */
+@-moz-document url-prefix() {
+  /* Avoid flex-wrap */
+  math { display: inline; }
+  math > mrow { padding: 0 }
+  /* Adjust Firefox spacing between array rows */
+  mtd, mtable.tml-small mtd { padding-top: 0; padding-bottom: 0; }
+  mtable.tml-jot mtd { padding-top: 0.2ex; padding-bottom: 0.ex; }
+}
+
+/* AMS environment auto-numbering via CSS counter. */
+.tml-eqn::before {
+  counter-increment: tmlEqnNo;
+  content: "(" counter(tmlEqnNo) ")";
+}
+
+body {
+  counter-reset: tmlEqnNo;
+}

assets/highlight.css

@@ -0,0 +1,37 @@
+:root {
+  --light-yellow: #e5c07b;
+  --dark-yellow: #d19a66;
+  --blue: #61afef;
+  --cyan: #56b6c2;
+  --light-red: #e06c75;
+  --dark-red: #be5046;
+  --comment-gray: #5c6370;
+  --magenta: #c678dd;
+}
+
+pre {
+  border-top: 1px solid white;
+  border-bottom: 1px solid white;
+  padding: 10px 5px;
+}
+
+code.ziggy {
+  color: var(--cyan);
+}
+
+code.ziggy .keyword,
+code.ziggy .type {
+  color: var(--light-yellow);
+}
+
+code.ziggy .string {
+  color: var(--dark-yellow);
+}
+
+code.ziggy .numeric.constant {
+  color: var(--magenta);
+}
+
+code.ziggy .function {
+  color: var(--blue);
+}

assets/render-mathtex.js

@@ -0,0 +1,8 @@
+let eqns = document.querySelectorAll("script[type='math/tex']");
+for (let i=eqns.length-1; i>=0; i--) {
+    let eqn = eqns[i];
+    let src = eqn.text;
+    let d = eqn.closest('p') == null; 
+    eqn.outerHTML = temml.renderToString(src, { displayMode: d });
+}
+

assets/reset.css

@@ -1,90 +0,0 @@
-/* https://piccalil.li/blog/a-more-modern-css-reset/ */
-
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Prevent font size inflation */
-html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-}
-
-/* Remove default margin in favour of better control in authored CSS */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-
-/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-}
-
-/* Set shorter line heights on headings and interactive elements */
-h1,
-h2,
-h3,
-h4,
-button,
-input,
-label {}
-
-/* Balance text wrapping on headings */
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
-/* A elements that don't have a class get default styles */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-  color: currentColor;
-}
-
-/* Make images easier to work with */
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* Make sure textareas without a rows attribute are not tiny */
-textarea:not([rows]) {
-  min-height: 10em;
-}
-
-/* Anything that has been anchored to should have extra scroll margin */
-:target {
-  scroll-margin-block: 5ex;
-}

assets/style.css

@@ -1,139 +1,85 @@
-:root {
-  --font-family: "Monaspace Argon", monospace;
-  --measure: 100ch;
-  --line-height: 1.20rem;
-
-  --background-color: #fbf1c7;
-  --foreground-color: #282828;
-
-  font-family: var(--font-family);
-  font-optical-sizing: auto;
-  font-weight: normal;
-  font-style: normal;
-  /*font-variant-numeric: tabular-nums lining-nums;*/
-  font-size: 16px;
-}
-
-@media screen and (max-width: 480px) {
-  body {
-    padding: var(--line-height) 1ch;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color: #282828;
-    --foreground-color: #fbf1c7;
-  }
-}
-
-body {
-  width: 100%;
-  line-height: var(--line-height);
-  background: var(--background-color);
-  color: var(--foreground-color);
-  margin: calc(var(--line-height) * 3) auto;
-  padding: 0 2ch;
-}
-
-
-
-/* Specify max chars on a line */
-* {
-  max-inline-size: var(--measure);
-}
-
-*+* {
-  margin-top: var(--line-height);
-}
-
-ul {
-  margin-top: 0;
-  padding-left: 1ch;
-}
-
-html {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
-
-li {
-  margin-top: 0;
-}
-
-html,
-body,
-div,
-header,
-nav,
-main,
-footer {
-  max-inline-size: none;
-}
-
 h1,
 h2,
 h3,
 h4,
-h5,
-h6 {
-  margin-top: var(--line-height);
-  margin-bottom: var(--line-height);
+h5 {
+  color: #ddd;
+  font-family: "Verdana", sans-serif;
 }
 
-#debug-grid {
-  --color: color-mix(in srgb, var(--foreground-color) 10%, var(--background-color) 90%);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-
-  background-image:
-    repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
-    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
-
-  background-size: 1ch var(--line-height);
+b,
+strong {
+  color: #fff;
 }
 
-@font-face {
-  font-family: 'Monaspace Neon';
-  src: url('fonts/MonaspaceNeonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
+a {
+  color: #eee;
 }
 
-@font-face {
-  font-family: 'Monaspace Argon';
-  src: url('fonts/MonaspaceArgonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
+html {
+  color: #ccc;
+  font-family: "Georgia", serif;
+  font-size: 1.2em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #111;
 }
 
-@font-face {
-  font-family: 'Monaspace Krypton';
-  src: url('fonts/MonaspaceKryptonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
+body {
+  width: 800px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
 }
 
-@font-face {
-  font-family: 'Monaspace Radon';
-  src: url('fonts/MonaspaceRadonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
+.site-title {
+  font-size: 2.5em;
+  margin-bottom: 10px;
+  /* text-align: center; */
 }
 
-@font-face {
-  font-family: 'Monaspace Xenon';
-  src: url('fonts/MonaspaceXenonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  font-size: 1.2em;
+  margin-bottom: 20px;
 }
+
+.block {
+  border: 1px dotted white;
+  padding: 5px 15px;
+  margin: 0 10px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.block h1 {
+  font-size: 1em;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.small {
+  font-size: 0.8em;
+}
+
+.wave {
+  background: #111;
+  color: #fff;
+  text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
+}
+
+footer {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+footer hr {
+  width: 100%;
+}

build.zig

@@ -1,19 +0,0 @@
-const std = @import("std");
-const zine = @import("zine");
-
-pub fn build(b: *std.Build) !void {
-    zine.website(b, .{
-        .title = "Yadunand's Site",
-        .host_url = "https://yadunut.dev",
-        .content_dir_path = "content",
-        .layouts_dir_path = "layouts",
-        .assets_dir_path = "assets",
-        .static_assets = &.{
-            "fonts/MonaspaceNeonVarVF[wght,wdth,slnt].woff2",
-            "fonts/MonaspaceArgonVarVF[wght,wdth,slnt].woff2",
-            "fonts/MonaspaceXenonVarVF[wght,wdth,slnt].woff2",
-            "fonts/MonaspaceRadonVarVF[wght,wdth,slnt].woff2",
-            "fonts/MonaspaceKryptonVarVF[wght,wdth,slnt].woff2",
-        },
-    });
-}

build.zig.zon

@@ -1,11 +0,0 @@
-.{
-    .name = "Zine Website",
-    .version = "0.0.0",
-    .dependencies = .{
-        .zine = .{
-            .url = "git+https://github.com/kristoff-it/zine#7feb9e2389f015f56fc86cc90ab581b9ba3a21c6",
-            .hash = "1220e1db0d9ad44ba2cb484d202cdbc2d9d62d6ec329b418d61ea13f09ab4f69df5c",
-        },
-    },
-    .paths = .{"."},
-}

content/blog/index.smd

@@ -1,7 +1,14 @@
 ---
-.title = "Blogs",
-.date = @date("2024-12-14"),
+.title = "Blog",
+.date = @date("2025-08-05"),
 .author = "Yadunand Prem",
-.layout = "blogs.shtml",
+.layout = "blog.shtml",
+.alternatives = [{
+    .name = "rss",
+    .layout = "blog.xml",
+    .output = "index.xml",
+}],
 .draft = false,
---- 
+---
+
+The blog section has an [RSS feed]($link.alternative('rss')).

content/blog/lean.smd

@@ -1,9 +0,0 @@
----
-.title = "Learning Lean",
-.date = @date("2024-12-26"),
-.author = "Yadunand Prem",
-.layout = "post.shtml",
-.draft = true,
---- 
-
-[Lean](https://lean-lang.org/) is a Programming Language and an interactive theorem prover. I'm mainly exploring this to improve my logical thinking and my mathematical proving skills.

content/blog/tmp.smd

@@ -0,0 +1,27 @@
+---
+.title = "Second Post",
+.date = @date("1990-01-01"),
+.author = "Sample Author",
+.layout = "post.shtml",
+.draft = true,
+---
+
+This second post is mainly here to show you that you can also create single file
+posts for convenience. The first post contains more interesting content.
+
+Don't forget to read [the official SuperMD
+docs](https://zine-ssg.io/docs/supermd/) to know how to *style* your content.
+
+
+Btw this sample website also includes the JS/CSS dependencies required to render
+math:
+
+```=mathtex
+\begin{aligned}
+f(t) &= \int_{-\infty}^\infty F(\omega) \cdot (-1)^{2 \omega t} \mathrm{d}\omega \\
+F(\omega) &= \int_{-\infty}^\infty f(t) \div (-1)^{2 \omega t} \mathrm{d}t \\
+\end{aligned}
+```
+
+This: [`(-1)^x = \cos(\pi x) + i\sin(\pi x)`]($mathtex) is an inline equation
+instead!

content/index.smd

@@ -1,22 +1,22 @@
 ---
 .title = "Yadunand's Site (WIP 🚧)",
-.date = @date("2024-12-14"),
+.date = @date("2025-08-05"),
 .author = "Yadunand Prem",
-.layout = "home.shtml",
+.layout = "index.shtml",
 .draft = false,
---- 
-Hi, I'm Yadunand, a software engineer currently based in 🇨🇦, previously in 🇭🇰,🇦🇺,🇸🇬. I'm interested in how
-  companies build things that scale, and how infrastructure works in general. This site is built on the exploration of
-  that. Most of my work (including [this site](https://git.yadunut.dev/yadunut/yadunut.dev), and the [infrastructure](https://git.yadunut.dev/yadunut/homelab)) can be found on my [gitea](https://git.yadunut.dev/yadunut)
+---
+Hi, I'm Yadunand, a software engineer currently based in 🇸🇬, previously in 🇨🇦,🇭🇰,🇦🇺. I'm interested in how companies build things that scale, and how infrastructure works in general. This site is built on the exploration of that. Most of my work (including [this site](https://git.yadunut.dev/yadunut/yadunut.dev), and the [infrastructure](https://git.yadunut.dev/yadunut/homelab)) can be found on my [gitea](https://git.yadunut.dev/yadunut)
 
 ## Currently
+- Year 4 student at [National University of Singapore](https://www.nus.edu.sg/)
+  - CS4212 (Compiler Design)
+  - CS3223 (Database Systems Implementation)
+  - CS3231 (Theory of Computation)
+
+## Previously
 - Software Engineer at [Endor Health](https://endorhealth.com)
   - React Native, Typescript
   - Python, Flask
-- Year 3 student at [National University of Singapore](https://www.nus.edu.sg/)
-- Exchange Student at [University of Toronto](https://www.utoronto.ca/)
-
-## Previously
 - Technology Intern at [Marshall Wace](https://www.mwam.com/)
   - Python, FastAPI
   - React, Typescript
@@ -26,4 +26,4 @@ Hi, I'm Yadunand, a software engineer currently based in 🇨🇦, previously in
 
 ## Contact Me
 
-I'm always happy to chat, feel free to reach out to me a @yadunut on (Twitter, Instagram, Telegram) or on [email](mailto:me@yadunut.com)
+I'm always happy to chat, feel free to reach out to me a @yadunut on (Twitter, Instagram, Telegram) or on [email](mailto:blog@yadunut.com)

content/microblog/2025.smd

@@ -0,0 +1,16 @@
+---
+.title = "Microblog - 2025",
+.date = @date("2025-01-01"),
+.author = "Yadunand Prem",
+.layout = "microblog.shtml",
+.draft = false,
+---
+[]($section.id('about'))
+## About
+
+A place for short form thoughts and ideas
+
+> This page lists entries for the current year, for past entries consult the [microblog archive](/microblog/).
+
+## [Hello World]($section.id("2025-08-05"))
+This is the first entry in this year's microblog created with [Zine](https://zine-ssg.io)! I'm exploring using Jujutsu as a VCS right now, and it seems interesting. The site data can be found [here](https://git.yadunut.dev/yadunut/yadunut.dev).

content/microblog/index.smd

@@ -0,0 +1,14 @@
+---
+.title = "Microblog Archive",
+.date = @date("2025-01-01"),
+.author = "Yadunand Prem",
+.layout = "microblog-archive.shtml",
+.alternatives = [{
+    .name = "rss",
+    .layout = "microblog.xml",
+    .output = "index.xml",
+}],
+.draft = false,
+---
+
+The archive of my microblogging posts by year

content/sitemap.smd

@@ -1,7 +0,0 @@
----
-.title = "Sitemap",
-.date = @date("2024-12-14"),
-.author = "Yadunand Prem",
-.layout = "sitemap.shtml",
-.draft = false,
---- 

flake.lock

@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1734126203,
-        "narHash": "sha256-0XovF7BYP50rTD2v4r55tR5MuBLet7q4xIz6Rgh3BBU=",
+        "lastModified": 1754278406,
+        "narHash": "sha256-jvIQTMN5EzoOP5RaGztpVese8a3wqy0M/h6tNzycW28=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "71a6392e367b08525ee710a93af2e80083b5b3e2",
+        "rev": "6a489c9482ca676ce23c0bcd7f2e1795383325fa",
         "type": "github"
       },
       "original": {

flake.nix

@@ -7,17 +7,45 @@
     };
   };
 
-  outputs = {nixpkgs, flake-utils, ...}: 
-    flake-utils.lib.eachDefaultSystem (system:
-      let pkgs = import nixpkgs {
-        inherit system;
-      }; in {
+  outputs =
+    {
+      nixpkgs,
+      flake-utils,
+      ...
+    }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+        };
+        zineBinary =
+          if system == "aarch64-darwin" then
+            pkgs.stdenvNoCC.mkDerivation {
+              pname = "zine";
+              version = "0.11.1";
+              src = pkgs.fetchzip {
+                url = "https://github.com/kristoff-it/zine/releases/download/v0.11.1/aarch64-macos.zip";
+                sha256 = "WKY9B4ObE4D7fkvMsF3cLvGHyxOT2FI8YNwLmOAujrQ=";
+                stripRoot = false;
+              };
+              installPhase = ''
+                mkdir -p $out/bin
+                cp $src/zine $out/bin/
+                chmod +x $out/bin/zine
+              '';
+            }
+          else
+            { };
+      in
+      {
         devShells = {
           default = pkgs.mkShell {
-            buildInputs = with pkgs;[
-              zig
+            buildInputs = [
+              zineBinary
             ];
           };
         };
-      });
+      }
+    );
 }

layouts/blog.shtml

@@ -0,0 +1,25 @@
+<extend template="base.shtml">
+<head id="head">
+  <style>
+    .date {
+      font-size: 0.9em;
+    }
+
+    .title h3{
+      margin-top: 0;
+    }
+  </style>
+</head>
+<body id="body">
+  <h1 :text="$page.title"></h1>
+  <div :html="$page.content()"></div>
+  <div>
+    <h2>Post list</h2>
+    <div :loop="$page.subpages()">
+      <span class="date" :text="$loop.it.date.format('January 02, 2006')"></span>
+      <a class="title" href="$loop.it.link()">
+        <h3 :text="$loop.it.title"></h3>
+      </a>
+    </div>
+  </div>
+</body>

layouts/blog.xml

@@ -0,0 +1,19 @@
+<rss version="2.0">
+  <channel>
+    <title :text="$site.title"></title>
+    <link :text="$site.host_url"></link>
+    <description :text="$site.title.suffix(' - Blog')"></description>
+    <generator>Zine -- https://zine-ssg.io</generator>
+    <language>en-US</language>
+    <lastBuildDate :text="$build.generated.formatHTTP()"></lastBuildDate>
+    <ctx :loop="$page.subpages()">
+      <item>
+        <title :text="$loop.it.title"></title>
+        <description :text="$loop.it.content()"></description>
+        <link :text="$site.host_url.addPath($loop.it.link())"></link>
+        <pubDate :text="$loop.it.date.formatHTTP()"></pubDate>
+        <guid :text="$site.host_url.addPath($loop.it.link())"></guid>
+      </item>
+    </ctx>
+  </channel>
+</rss>

layouts/blogs.shtml

@@ -1,17 +0,0 @@
-<extend template="base.shtml">
-<title id="title" :text="$site.title"></title>
-<div id="main">
-  <h1 :text="$page.title"></h1>
-  <ul :loop="$page.subpages()">
-    <li>
-      <a href="$loop.it.link()" :text="$loop.it.title"></a>
-      <div :if="$loop.it.isSection()">
-        <ul :loop="$loop.it.subpages()">
-          <li>
-            <a href="$loop.it.link()" :text="$loop.it.title"></a>
-          </li>
-        </ul>
-      </div>
-    </li>
-  </ul>
-</div>

layouts/index.shtml

@@ -1,6 +1,7 @@
 <extend template="base.shtml">
-<title id="title" :text="$site.title"></title>
-<div id="main">
+<head id="head">
+</head>
+<body id="body">
   <h1 :text="$page.title"></h1>
   <div :html="$page.content()"></div>
-</div>
+</body>

layouts/microblog-archive.shtml

@@ -0,0 +1,25 @@
+<extend template="base.shtml">
+<head id="head">
+  <style>
+    .date {
+      font-size: 0.9em;
+    }
+    
+    .title h3{
+      margin-top: 0;
+    }
+  </style>
+</head>
+<body id="body">
+  <h1 :text="$page.title"></h1>
+  <div :html="$page.content()"></div>
+  <div>
+    <h2>Past years</h2>
+    <div :loop="$page.subpages()">
+      <span class="date" :text="$loop.it.date.format('Year 2006')"></span>
+      <a class="title" href="$loop.it.link()">
+        <h3 :text="$loop.it.title"></h3>
+      </a>
+    </div>
+  </div>
+</body>

layouts/microblog.shtml

@@ -0,0 +1,45 @@
+<extend template="base.shtml">
+<head id="head">
+  <style>
+    .feed {
+      margin-top: 2em;
+    }
+
+    .feed>div {
+      margin: 0 -20px;
+      padding: 5px 20px;
+      margin-bottom: 1em;
+    }
+
+    .feed>div>h2 {
+      margin-top: 0.4em;
+    }
+
+    .feed>div[id]:target {
+      animation: pulse-div 2s ease-in-out 1 forwards;
+    }
+
+    @keyframes pulse-div {
+
+      0%,
+      100% {
+        background-color: #222;
+      }
+
+      50% {
+        background-color: #111;
+      }
+    }
+  </style>
+</head>
+<body id="body">
+  <h1 class="title" :text="$page.title"></h1>
+  <div :html="$page.contentSection('about')"></div>
+  <div class="feed" :loop="$page.contentSections().slice(1)">
+    <div id="$loop.it.id">
+      <span :text="$loop.it.id.parseDate().format('January 02, 2006')"></span>
+      <h2><a href="$loop.it.id.prefix('#')" :html="$loop.it.heading()"></a></h2>
+      <ctx :html="$loop.it.htmlNoHeading()"></ctx>
+    </div>
+  </div>
+</body>

layouts/microblog.xml

@@ -0,0 +1,21 @@
+<rss version="2.0">
+  <channel>
+    <title :text="$site.title"></title>
+    <link :text="$site.host_url"></link>
+    <description :text="$site.title.suffix(' - Microblog')"></description>
+    <generator>Zine -- https://zine-ssg.io</generator>
+    <language>en-US</language>
+    <lastBuildDate :text="$build.generated.formatHTTP()"></lastBuildDate>
+    <ctx :if="$page.subpages().first?()">
+      <ctx :loop="$if.contentSections().slice(1)">
+        <item>
+          <title :text="$loop.it.heading()"></title>
+          <description :text="$loop.it.html()"></description>
+          <link :text="$site.host_url.addPath($page.link().suffix('#', $loop.it.id))"></link>
+          <pubDate :text="$loop.it.id.parseDate().formatHTTP()"></pubDate>
+          <guid :text="$site.host_url.addPath($page.link().suffix('#', $loop.it.id))"></guid>
+        </item>
+      </ctx>
+    </ctx>
+  </channel>
+</rss>

layouts/page.shtml

@@ -0,0 +1,7 @@
+<extend template="base.shtml">
+<head id="head">
+</head>
+<body id="body">
+  <h1 :text="$page.title"></h1>
+  <div :html="$page.content()"></div>
+</body>

layouts/post.shtml

@@ -1,14 +1,40 @@
 <extend template="base.shtml">
-<title id="title" :text="$site.title"></title>
-<div id="main">
-  <h2 :text="$page.title"></h2>
-  <h3>by
-    <span :text="$page.author"></span></h3>
-  <h4>
-    Posted on:
-    <span
-      :text="$page.date.format('January 02, 2006')"
-    ></span>
-  </h4>
-  <div :html="$page.content()"></div>
-</div>
+<head id="head">
+  <style>
+    #prev-next {
+     display: flex;
+     flex-direction: row;
+     justify-content: space-between;
+     margin-top: 40px;
+    }
+
+    figure {
+      align-self: center;
+      text-align: center;
+      font-style: italic;
+    }
+
+    .post {
+      display:flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body id="body">
+  <h1 :text="$page.title"></h1>
+  <div class="post" :html="$page.content()"></div>
+  <div id="prev-next">
+    <div :if="$page.prevPage?()">
+      <a href="$if.link()">
+        ←
+        <span :text="$if.title"></span>
+      </a>
+    </div>
+    <div :if="$page.nextPage?()">
+      <a href="$if.link()">
+        <span :text="$if.title"></span>
+        →
+      </a>
+    </div>
+  </div>
+</body>

layouts/sitemap.shtml

@@ -1,17 +0,0 @@
-<extend template="base.shtml">
-<title id="title" :text="$site.title"></title>
-<div id="main">
-  <h1 :text="$page.title"></h1>
-  <ul :loop="$page.parentSection().subpages()">
-    <li>
-      <a href="$loop.it.link()" :text="$loop.it.title"></a>
-      <div :if="$loop.it.isSection()">
-        <ul :loop="$loop.it.subpages()">
-          <li>
-            <a href="$loop.it.link()" :text="$loop.it.title"></a>
-          </li>
-        </ul>
-      </div>
-    </li>
-  </ul>
-</div>

layouts/templates/base.shtml

@@ -1,20 +1,32 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title id="title"><super></title>
-    <link rel="stylesheet" type="text/css" href="$site.asset('reset.css').link()">
-    <link rel="stylesheet" type="text/css" href="$site.asset('style.css').link()">
+  <head id="head">
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1">
+    <title :text="$site.title"></title>
+    <link type="text/css" rel="stylesheet" href="$site.asset('style.css').link()">
+    <link type="text/css" rel="stylesheet" href="$site.asset('highlight.css').link()">
+    <!-- mathtex -->
+    <link type="text/css" rel="stylesheet" href="$site.asset('Temml-Local.css').link()">
+    <script defer src="$site.asset('temml.min.js').link()"></script>
+    <script defer src="$site.asset('render-mathtex.js').link()"></script>
+    <!-- /mathtex -->
+    <super>
   </head>
-  <body>
+  <body id="body">
+    <h1 class="site-title" :text="$site.title"></h1>
     <nav>
-      <a href="/">Home</a>
+      <a href="$site.page('').link()">Home</a>
+       &nbsp; • &nbsp;
       <a href="$site.page('blog').link()">Blog</a>
-      <a href="$site.page('sitemap').link()">Sitemap</a>
+      <ctx :if="$site.page('microblog').subpages().first?()">
+         &nbsp; • &nbsp;
+        <a href="$if.link()">Microblog</a>
+      </ctx>
     </nav>
-    <div id="main">
-      <super>
-    </div>
-    <div id="debug-grid"></div>
+    <super>
+    <footer>
+      <hr>
+    </footer>
   </body>
 </html>

zig-out/blog/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title id="title">Yadunand&apos;s Site</title>
-    <link rel="stylesheet" type="text/css" href="/reset.css">
-    <link rel="stylesheet" type="text/css" href="/style.css">
-  </head>
-  <body>
-    <nav>
-      <a href="/">Home</a>
-      <a href="/blog/">Blog</a>
-      <a href="/sitemap/">Sitemap</a>
-    </nav>
-    <div id="main">
-      
-  <h1>Blogs</h1>
-  <ul></ul>
-
-    </div>
-    <div id="debug-grid"></div>
-  </body>
-</html>

zig-out/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title id="title">Yadunand&apos;s Site</title>
-    <link rel="stylesheet" type="text/css" href="/reset.css">
-    <link rel="stylesheet" type="text/css" href="/style.css">
-  </head>
-  <body>
-    <nav>
-      <a href="/">Home</a>
-      <a href="/blog/">Blog</a>
-      <a href="/sitemap/">Sitemap</a>
-    </nav>
-    <div id="main">
-      
-  <h1>Yadunand&apos;s Site (WIP 🚧)</h1>
-  <div><p>Hi, I’m Yadunand, a software engineer currently based in 🇨🇦, previously in 🇭🇰,🇦🇺,🇸🇬. I’m interested in how companies build things that scale, and how infrastructure works in general. This site is built on the exploration of that. Most of my work (including <a href="https://git.yadunut.dev/yadunut/yadunut.dev" target="_blank">this site</a>, and the <a href="https://git.yadunut.dev/yadunut/homelab" target="_blank">infrastructure</a>) can be found on my <a href="https://git.yadunut.dev/yadunut" target="_blank">gitea</a></p><h2>Currently</h2><ul><li>Software Engineer at <a href="https://endorhealth.com" target="_blank">Endor Health</a><ul><li>React Native, Typescript</li><li>Python, Flask</li></ul></li><li>Year 3 student at <a href="https://www.nus.edu.sg/" target="_blank">National University of Singapore</a></li><li>Exchange Student at <a href="https://www.utoronto.ca/" target="_blank">University of Toronto</a></li></ul><h2>Previously</h2><ul><li>Technology Intern at <a href="https://www.mwam.com/" target="_blank">Marshall Wace</a><ul><li>Python, FastAPI</li><li>React, Typescript</li><li>K8s, flux, grafana, prometheus</li></ul></li><li>Software Engineer at <a href="https://www.undertide.co/" target="_blank">Undertide</a><ul><li>React Native, Graphql, Typescript</li></ul></li></ul><h2>Contact Me</h2><p>I’m always happy to chat, feel free to reach out to me a @yadunut on (Twitter, Instagram, Telegram) or on <a href="mailto:me@yadunut.com" target="_blank">email</a></p></div>
-
-    </div>
-    <div id="debug-grid"></div>
-  </body>
-</html>

zig-out/reset.css

@@ -1,90 +0,0 @@
-/* https://piccalil.li/blog/a-more-modern-css-reset/ */
-
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Prevent font size inflation */
-html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-}
-
-/* Remove default margin in favour of better control in authored CSS */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-
-/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-}
-
-/* Set shorter line heights on headings and interactive elements */
-h1,
-h2,
-h3,
-h4,
-button,
-input,
-label {}
-
-/* Balance text wrapping on headings */
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
-/* A elements that don't have a class get default styles */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-  color: currentColor;
-}
-
-/* Make images easier to work with */
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* Make sure textareas without a rows attribute are not tiny */
-textarea:not([rows]) {
-  min-height: 10em;
-}
-
-/* Anything that has been anchored to should have extra scroll margin */
-:target {
-  scroll-margin-block: 5ex;
-}

zig-out/sitemap/index.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title id="title">Yadunand&apos;s Site</title>
-    <link rel="stylesheet" type="text/css" href="/reset.css">
-    <link rel="stylesheet" type="text/css" href="/style.css">
-  </head>
-  <body>
-    <nav>
-      <a href="/">Home</a>
-      <a href="/blog/">Blog</a>
-      <a href="/sitemap/">Sitemap</a>
-    </nav>
-    <div id="main">
-      
-  <h1>Sitemap</h1>
-  <ul>
-    <li>
-      <a href="/sitemap/">Sitemap</a>
-      <div></div>
-    </li>
-  
-    <li>
-      <a href="/blog/">Blogs</a>
-      <div>
-        <ul></ul>
-      </div>
-    </li>
-  </ul>
-
-    </div>
-    <div id="debug-grid"></div>
-  </body>
-</html>

zig-out/style.css

@@ -1,139 +0,0 @@
-:root {
-  --font-family: "Monaspace Argon", monospace;
-  --measure: 100ch;
-  --line-height: 1.20rem;
-
-  --background-color: #fbf1c7;
-  --foreground-color: #282828;
-
-  font-family: var(--font-family);
-  font-optical-sizing: auto;
-  font-weight: normal;
-  font-style: normal;
-  /*font-variant-numeric: tabular-nums lining-nums;*/
-  font-size: 16px;
-}
-
-@media screen and (max-width: 480px) {
-  body {
-    padding: var(--line-height) 1ch;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color: #282828;
-    --foreground-color: #fbf1c7;
-  }
-}
-
-body {
-  width: 100%;
-  line-height: var(--line-height);
-  background: var(--background-color);
-  color: var(--foreground-color);
-  margin: calc(var(--line-height) * 3) auto;
-  padding: 0 2ch;
-}
-
-
-
-/* Specify max chars on a line */
-* {
-  max-inline-size: var(--measure);
-}
-
-*+* {
-  margin-top: var(--line-height);
-}
-
-ul {
-  margin-top: 0;
-  padding-left: 1ch;
-}
-
-html {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
-
-li {
-  margin-top: 0;
-}
-
-html,
-body,
-div,
-header,
-nav,
-main,
-footer {
-  max-inline-size: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: var(--line-height);
-  margin-bottom: var(--line-height);
-}
-
-#debug-grid {
-  --color: color-mix(in srgb, var(--foreground-color) 10%, var(--background-color) 90%);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-
-  background-image:
-    repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
-    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
-
-  background-size: 1ch var(--line-height);
-}
-
-@font-face {
-  font-family: 'Monaspace Neon';
-  src: url('fonts/MonaspaceNeonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
-}
-
-@font-face {
-  font-family: 'Monaspace Argon';
-  src: url('fonts/MonaspaceArgonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
-}
-
-@font-face {
-  font-family: 'Monaspace Krypton';
-  src: url('fonts/MonaspaceKryptonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
-}
-
-@font-face {
-  font-family: 'Monaspace Radon';
-  src: url('fonts/MonaspaceRadonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
-}
-
-@font-face {
-  font-family: 'Monaspace Xenon';
-  src: url('fonts/MonaspaceXenonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique -10deg 0deg;
-}

zine.ziggy

@@ -0,0 +1,10 @@
+Site {
+    .title = "blog@yadunut",
+    .host_url = "https://yadunut.dev",
+    .content_dir_path = "content",
+    .layouts_dir_path = "layouts",
+    .assets_dir_path = "assets",
+    .static_assets = [
+        "Temml.woff2",
+    ],
+}