feat: tola v0.7.0

Author: nullishamy

.github/workflows/tola-build.yaml

@@ -27,7 +27,7 @@ jobs:
           
       - name: Tola build (data files)
         run: |
-          wget 'https://github.com/tola-rs/tola-ssg/releases/download/v0.6.5/tola-x86_64-linux-static.tar.gz'
+          wget 'https://github.com/tola-rs/tola-ssg/releases/download/v0.7.0/tola-x86_64-linux-static.tar.gz'
           tar xzvf tola-*
           chmod +x ./tola
           ls -lah

.gitignore

@@ -3,4 +3,6 @@ npm-debug.*
 *.log
 .DS_Store
 public/
-.direnv/
+.direnv/
+.tola/
+content/tags/*.typ

assets/styles/tailwind.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+
 @import 'tailwindcss';
 
 /* Tailwind CSS v4 configuration */

components/layout.typ

@@ -0,0 +1,28 @@
+// Layout components
+// Import: #import "/components/layout.typ" as layout
+
+#import "/utils/tola.typ": cls
+
+/// Horizontal rule with default styling
+#let hr = html.hr(class: "border-surface my-8")
+
+
+/// Flex row container with configurable gap
+/// safelist: gap-1 gap-2 gap-3 gap-4 gap-5 gap-6 gap-7 gap-8
+#let flex-row(gap: 4, ..items) = html.div(
+  class: cls("flex flex-wrap items-center", "gap-" + str(gap)),
+)[#for item in items.pos() { item }]
+
+
+/// Flex column container with configurable gap
+/// safelist: gap-1 gap-2 gap-3 gap-4 gap-5 gap-6 gap-7 gap-8
+#let flex-col(gap: 4, ..items) = html.div(
+  class: cls("flex flex-col", "gap-" + str(gap)),
+)[#for item in items.pos() { item }]
+
+
+/// Grid container
+/// safelist: grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4
+#let grid(cols: 2, gap: 4, ..items) = html.div(
+  class: cls("grid", "grid-cols-" + str(cols), "gap-" + str(gap)),
+)[#for item in items.pos() { item }]

components/ui.typ

@@ -0,0 +1,94 @@
+// UI components
+// Import: #import "/components/ui.typ" as ui
+
+#import "/utils/tola.typ": cls
+#import "/components/layout.typ" as layout
+
+/// Navigation link
+#let nav-link(href, label) = html.a(
+  class: "text-muted hover:text-accent transition-colors",
+  href: href,
+)[#label]
+
+/// Tag badge
+#let tag(name) = html.span(
+  class: "px-2 py-1 text-xs bg-surface rounded text-accent",
+)[#name]
+
+/// Card container
+#let card(title: none, body) = html.div(class: "p-4 bg-surface rounded-lg")[
+  #if title != none { html.h3(class: "font-semibold text-accent mb-2")[#title] }
+  #body
+]
+
+/// Post card for blog listings
+#let post-card(post) = {
+  let date = post.at("date", default: "")
+  html.a(
+    class: "block mb-6 p-4 border border-white/10 rounded-lg bg-surface/50 hover:bg-surface transition-colors no-underline group",
+    href: post.permalink,
+  )[
+    #html.h3(class: "text-xl font-semibold mb-2 group-hover:text-accent transition-colors")[
+      #post.title
+    ]
+
+    #layout.flex-row(
+      gap: 4,
+      html.span(class: "text-sm text-muted")[#date],
+      ..post.at("tags", default: ()).map(t => tag(t)),
+    )
+
+    #if post.at("summary", default: none) != none {
+      html.p(class: "mt-2 text-muted")[#post.at("summary")]
+    }
+  ]
+}
+
+/// Side-by-side showcase card: source code + rendered output.
+#let showcase-demo(
+  title: none,
+  description: none,
+  code: none,
+  preview: none,
+  code-label: "Typst Code",
+  preview-label: "Rendered Output",
+) = {
+  assert(title != none, message: "showcase-demo: `title` is required")
+  assert(code != none, message: "showcase-demo: `code` is required")
+  assert(preview != none, message: "showcase-demo: `preview` is required")
+
+  html.section(
+    class: "my-8 rounded-lg border border-white/10 bg-gradient-to-br from-slate-900/80 via-slate-900/50 to-cyan-950/20 p-4 sm:p-6",
+  )[
+    #html.div(class: "mb-4")[
+      #html.h3(class: "text-lg sm:text-xl font-semibold text-cyan-300")[
+        #title
+      ]
+      #if description != none {
+        html.p(class: "mt-1 text-sm text-slate-300")[
+          #description
+        ]
+      }
+    ]
+
+    #html.div(class: "grid gap-4")[
+      #html.div(class: "rounded-lg border border-white/10 bg-slate-950/70 overflow-hidden")[
+        #html.div(class: "border-b border-white/10 px-3 py-2 text-xs uppercase tracking-wide text-slate-400")[
+          #code-label
+        ]
+        #html.div(class: "p-3 text-sm")[
+          #code
+        ]
+      ]
+
+      #html.div(class: "rounded-lg border border-cyan-500/30 bg-surface/40 overflow-hidden")[
+        #html.div(class: "border-b border-cyan-500/20 px-3 py-2 text-xs uppercase tracking-wide text-cyan-300")[
+          #preview-label
+        ]
+        #html.div(class: "p-3 text-sm")[
+          #preview
+        ]
+      ]
+    ]
+  ]
+}

content/index.typ

@@ -1,5 +1,6 @@
 #import "/templates/page.typ": page
 #import "/utils/helpers.typ" as utils
+#import "@tola/pages:0.0.0": pages
 
 #show: page.with(title: "home")
 
@@ -49,12 +50,11 @@ In the near future I intend on exploring embedded hardware & RF with some home-a
 #utils.hr
 
 = recent posts
-#let pages = json("/_data/pages.json")
 #let posts = (
-    pages
+    pages()
         // filter 'all posts' out
         .filter(p => p.title != "posts")
-        .filter(p => "/posts/" in p.url)
+        .filter(p => "/posts/" in p.permalink)
         .filter(p => p.at("draft", default: false) == false)
         .sorted(key: p => p.date)
         .rev()

content/posts.typ

@@ -1,15 +1,15 @@
 #import "/templates/page.typ": page
 #import "/utils/helpers.typ" as utils
+#import "@tola/pages:0.0.0": pages
 
 #show: page.with(title: "posts")
 
 = all posts
-#let pages = json("/_data/pages.json")
 #let posts = (
-    pages
+    pages()
         // filter this page out
         .filter(p => p.title != "posts")
-        .filter(p => "/posts/" in p.url)
+        .filter(p => "/posts/" in p.permalink)
         .filter(p => p.at("draft", default: false) == false)
         .sorted(key: p => p.date)
         .rev()

content/posts/cloudflare-warp.typ

@@ -1,9 +1,9 @@
 #import "/templates/post.typ": post
-#import "/utils/helpers.typ" as utils
+#import "/utils/helpers.typ": parse-date
 
 #let args = (
     title: "warp madness",
-    date: "2025-09-04",
+    date: parse-date("2025-09-04"),
     author: "amy erskine",
     summary: [trials and tribulations of cloudflare warp],
     tags: ("networking", "cloudflare"),

content/posts/entra-user-move.typ

@@ -1,9 +1,9 @@
 #import "/templates/post.typ": post
-#import "/utils/helpers.typ" as utils
+#import "/utils/helpers.typ": parse-date
 
 #let args = (
     title: "moving on-prem users to Entra",
-    date: "2025-09-05",
+    date: parse-date("2025-09-05"),
     author: "amy erskine",
     summary: [how to migrate your Active Directory users],
     tags: ("tidbits", "microsoft"),
@@ -52,7 +52,7 @@ $body = @{
 Invoke-MgGraphRequest -Method PATCH -Uri "https://graph.microsoft.com/v1.0/users/$userId" -Body $body
 ```
 
-This will **break** the on-premise link. Be sure you're operating on the right accounts.
+This will *break* the on-premise link. Be sure you're operating on the right accounts.
 
 Wait for the Exchange mailboxes to get assigned, then verify they are all set to SharedMailbox mode:
 ```powershell

content/posts/fortinet-sslvpn-stuck.typ

@@ -1,9 +1,9 @@
 #import "/templates/post.typ": post
-#import "/utils/helpers.typ" as utils
+#import "/utils/helpers.typ": parse-date
 
 #let args = (
     title: "SSLVPN stuck at 98%",
-    date: "2025-08-11",
+    date: parse-date("2025-08-11"),
     author: "amy erskine",
     summary: [troubleshooting Fortinet's SSLVPN],
     tags: ("tidbits", "networking", "fortinet"),