From ceb3750add5f871fccc89ea28cd8152aad69fe76 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 14 May 2026 18:00:53 +0200
Subject: [PATCH] client:load + lightweight markdown.ts

---
 frontend/src/layouts/Layout.astro     | 10 ++++-----
 frontend/src/lib/markdown.ts          | 31 ++++++++++++++++++++++++++-
 frontend/src/pages/contact.astro      |  2 +-
 frontend/src/pages/index.astro        |  8 +++----
 frontend/src/pages/posts/[slug].astro |  2 +-
 5 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 4ee9f72..b79b7ce 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -88,7 +88,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 				<a href="/" class="nameplate group" aria-label="Home">
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.title}
 							fieldKey="title"
 							isAdmin
@@ -100,7 +100,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 					)}
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.subtitle}
 							fieldKey="subtitle"
 							isAdmin
@@ -119,7 +119,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 							class="font-display italic text-sm text-[var(--subtext1)] hover:text-[var(--mauve)] transition-colors tracking-wide"
 						>Contact</a>
 					)}
-					<Search client:load />
+					<Search client:idle />
 					{isAdmin && (
 						<div class="flex items-center gap-1 pl-3 ml-1 border-l border-[var(--surface2)]/60">
 							<a
@@ -130,7 +130,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 								<span class="w-1.5 h-1.5 rounded-full bg-[var(--rosewater)] animate-pulse"></span>
 								Artist
 							</a>
-							<LogoutButton client:load />
+							<LogoutButton client:idle />
 						</div>
 					)}
 					<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
@@ -151,7 +151,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 			<p class="font-display italic text-base text-[var(--subtext1)] mb-2">
 				{isAdmin ? (
 					<EditableText
-						client:load
+						client:visible
 						initial={siteConfig.footer}
 						fieldKey="footer"
 						isAdmin
diff --git a/frontend/src/lib/markdown.ts b/frontend/src/lib/markdown.ts
index 4e1d18e..75d0327 100644
--- a/frontend/src/lib/markdown.ts
+++ b/frontend/src/lib/markdown.ts
@@ -2,9 +2,38 @@ import { Marked } from 'marked';
 import markedKatex from 'marked-katex-extension';
 import { markedHighlight } from 'marked-highlight';
 import { gfmHeadingId } from 'marked-gfm-heading-id';
-import hljs from 'highlight.js/lib/common';
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import go from 'highlight.js/lib/languages/go';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import rust from 'highlight.js/lib/languages/rust';
+import shell from 'highlight.js/lib/languages/shell';
+import sql from 'highlight.js/lib/languages/sql';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
 import DOMPurify from 'isomorphic-dompurify';
 
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('rust', rust);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('yaml', yaml);
+
 function escapeHtml(s: string): string {
   return s
     .replace(/&/g, '&amp;')
diff --git a/frontend/src/pages/contact.astro b/frontend/src/pages/contact.astro
index 770b4ac..c654677 100644
--- a/frontend/src/pages/contact.astro
+++ b/frontend/src/pages/contact.astro
@@ -116,7 +116,7 @@ function obfuscateEmail(addr: string): { user: string; host: string; display: st
 			<h2 class="font-display italic text-2xl md:text-3xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4 mb-6">
 				Or send a note directly
 			</h2>
-			<ContactForm client:load />
+			<ContactForm client:idle />
 		</div>
 
 		<div class="section-rule mt-16">
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 3870480..f1dae2f 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -61,7 +61,7 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 				<h1 class="font-display italic font-semibold text-[var(--text)] text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight mb-6">
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.welcome_title}
 							fieldKey="welcome_title"
 							isAdmin
@@ -73,7 +73,7 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 				<p class="font-sans text-lg md:text-xl text-[var(--subtext1)] leading-relaxed max-w-xl">
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.welcome_subtitle}
 							fieldKey="welcome_subtitle"
 							isAdmin
@@ -90,7 +90,7 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
 							New work
 						</a>
-						<AssetsButton client:load className="btn-ghost" iconSize={12} />
+						<AssetsButton client:idle className="btn-ghost" iconSize={12} />
 						<a href="/admin/messages" class="btn-ghost">
 							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
 							Messages
@@ -123,5 +123,5 @@ const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 		</div>
 	)}
 
-	{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} client:load />}
+	{posts.length > 0 && <PostList posts={posts} isAdmin={isAdmin} client:idle />}
 </Layout>
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index 2069f2e..ad255d7 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -95,7 +95,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
               Edit
             </a>
-            <DeletePostButton slug={post.slug} title={displayTitle} client:load />
+            <DeletePostButton slug={post.slug} title={displayTitle} client:idle />
           </div>
         )}
       </div>