client:load + lightweight markdown.ts

frontend/package-lock.json

@@ -21,7 +21,6 @@
         "@fontsource-variable/fraunces": "^5.2.9",
         "@fontsource-variable/inter": "^5.2.5",
         "@fontsource-variable/jetbrains-mono": "^5.2.5",
-        "@fontsource/caveat": "^5.2.8",
         "@replit/codemirror-vim": "^6.3.0",
         "@tailwindcss/vite": "^4.2.2",
         "astro": "^6.0.8",
@@ -1723,15 +1722,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/caveat": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/caveat/-/caveat-5.2.8.tgz",
-      "integrity": "sha512-9fUUfFE2IQFKbx+xOcaeQxxmh8iJguEb8z+j1PeueO4UUx+XfT4pRm/B04ZDvFA794/iRxY/IibmP8ZKtIf4rw==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",

frontend/package.json

@@ -25,7 +25,6 @@
     "@fontsource-variable/fraunces": "^5.2.9",
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
-    "@fontsource/caveat": "^5.2.8",
     "@replit/codemirror-vim": "^6.3.0",
     "@tailwindcss/vite": "^4.2.2",
     "astro": "^6.0.8",

frontend/src/layouts/Layout.astro

@@ -1,10 +1,7 @@
 ---
 import '../styles/global.css';
-import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/atom-one-dark.css';
 import '@fontsource-variable/fraunces';
 import '@fontsource-variable/eb-garamond';
-import '@fontsource/caveat';
 import '@fontsource-variable/jetbrains-mono';
 import ThemeSwitcher from '../components/react/ThemeSwitcher';
 import Search from '../components/react/Search';
@@ -91,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
@@ -103,7 +100,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 					)}
 					{isAdmin ? (
 						<EditableText
-							client:load
+							client:visible
 							initial={siteConfig.subtitle}
 							fieldKey="subtitle"
 							isAdmin
@@ -122,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
@@ -133,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} />
@@ -154,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

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, '&')

frontend/src/pages/admin/editor.astro

@@ -1,4 +1,6 @@
 ---
+import 'katex/dist/katex.min.css';
+import 'highlight.js/styles/atom-one-dark.css';
 import AdminLayout from '../../layouts/AdminLayout.astro';
 import Editor from '../../components/react/admin/Editor';
 

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">

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>

frontend/src/pages/posts/[slug].astro

@@ -1,4 +1,6 @@
 ---
+import 'katex/dist/katex.min.css';
+import 'highlight.js/styles/atom-one-dark.css';
 import Layout from '../../layouts/Layout.astro';
 import DeletePostButton from '../../components/react/DeletePostButton';
 import { renderMarkdown } from '../../lib/markdown';
@@ -93,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>