Merge pull request 'add footer with git link' (#20) from dev into staging

Reviewed-on: #20

package-lock.json

@@ -15,6 +15,9 @@
 				"@sveltejs/adapter-node": "^5.5.7",
 				"ai": "^7.0.85",
 				"drizzle-orm": "^1.0.0-rc.4",
+				"highlight.js": "^11.12.0",
+				"marked": "^18.0.11",
+				"marked-highlight": "^2.2.4",
 				"mode-watcher": "^1.1.0",
 				"postgres": "^3.4.9",
 				"zod": "^4.5.4"
@@ -26,6 +29,7 @@
 				"@sveltejs/enhanced-img": "^0.11.0",
 				"@sveltejs/kit": "^2.70.3",
 				"@sveltejs/vite-plugin-svelte": "^7.3.0",
+				"@tailwindcss/typography": "^0.5.20",
 				"@tailwindcss/vite": "^4.3.3",
 				"@types/eslint": "9.6.1",
 				"@types/pg": "^8.23.1",
@@ -3237,6 +3241,33 @@
 				"node": ">= 20"
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.20",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.20.tgz",
+			"integrity": "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
+			}
+		},
+		"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@tailwindcss/vite": {
 			"version": "4.3.3",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
@@ -5932,6 +5963,15 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.12.0.tgz",
+			"integrity": "sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6537,6 +6577,27 @@
 			"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
 			"license": "BSD-2-Clause"
 		},
+		"node_modules/marked": {
+			"version": "18.0.11",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-18.0.11.tgz",
+			"integrity": "sha512-HnslJfsZkRPBDJRHvVtAaWlZHEpSu7u8LgQuJCELjRKuWR+hpq4A7sLq3p8HaI9ypVoXDXxV34CsQJEe1+J5Aw==",
+			"license": "MIT",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/marked-highlight": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.2.4.tgz",
+			"integrity": "sha512-PZxisNMJDduSjc0q6uvjsnqqHCXc9s0eyzxDO9sB1eNGJnd/H1/Fu+z6g/liC1dfJdFW4SftMwMlLvsBhUPrqQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"marked": ">=4 <19"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "10.2.6",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",

package.json

@@ -28,6 +28,7 @@
 		"@sveltejs/enhanced-img": "^0.11.0",
 		"@sveltejs/kit": "^2.70.3",
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
+		"@tailwindcss/typography": "^0.5.20",
 		"@tailwindcss/vite": "^4.3.3",
 		"@types/eslint": "9.6.1",
 		"@types/pg": "^8.23.1",
@@ -64,6 +65,9 @@
 		"@sveltejs/adapter-node": "^5.5.7",
 		"ai": "^7.0.85",
 		"drizzle-orm": "^1.0.0-rc.4",
+		"highlight.js": "^11.12.0",
+		"marked": "^18.0.11",
+		"marked-highlight": "^2.2.4",
 		"mode-watcher": "^1.1.0",
 		"postgres": "^3.4.9",
 		"zod": "^4.5.4"

src/app.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@plugin '@tailwindcss/typography';
 
 @theme {
 	--color-bg: #f6f4f0;

src/lib/server/markdown.ts

@@ -0,0 +1,18 @@
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+
+const marked = new Marked(
+	markedHighlight({
+		emptyLangClass: 'hljs',
+		langPrefix: 'hljs language-',
+		highlight(code, lang) {
+			const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+			return hljs.highlight(code, { language }).value;
+		}
+	})
+);
+
+export function renderMarkdown(content: string): string {
+	return marked.parse(content, { async: false });
+}

src/routes/+layout.svelte

@@ -48,18 +48,31 @@
 	];
 </script>
 
-<header class="flex justify-between items-center gap-4 py-4 px-4">
-	<a href={resolve('/')} class="text-2xl font-bold">Stan Runge</a>
-	<nav class="flex flex-wrap justify-center gap-4" aria-label="Social links">
-		{#each copies as c (c.label)}
-			<CopyButton {...c} />
-		{/each}
-		{#each links as { icon: Icon, label, href } (label)}
-			<a {href} aria-label={label} class="text-2xl transition hover:opacity-60">
-				<Icon />
-			</a>
-		{/each}
-	</nav>
-</header>
+<div class="flex flex-col min-h-screen">
+	<header class="flex justify-between items-center gap-4 py-4 px-4">
+		<a href={resolve('/')} class="text-2xl font-bold">Stan Runge</a>
+		<nav class="flex flex-wrap justify-center gap-4" aria-label="Social links">
+			{#each copies as c (c.label)}
+				<CopyButton {...c} />
+			{/each}
+			{#each links as { icon: Icon, label, href } (label)}
+				<a {href} aria-label={label} class="text-2xl transition hover:opacity-60">
+					<Icon />
+				</a>
+			{/each}
+		</nav>
+	</header>
 
-{@render children()}
+	<main class="flex-1">
+		{@render children()}
+	</main>
+
+	<footer class="flex justify-center py-8 bg-gray-200">
+		<p>
+			Hosted on <a
+				class="underline text-blue-500"
+				href="https://git.stanrunge.dev/stan/personal-website">my git server :)</a
+			>
+		</p>
+	</footer>
+</div>

src/routes/blog/[slug]/+page.server.ts

@@ -1,6 +1,7 @@
 import { db } from '$lib/server/db';
 import { blogArticles } from '$lib/server/db/schema';
 import { isAdmin } from '$lib/server/auth';
+import { renderMarkdown } from '$lib/server/markdown';
 import { eq } from 'drizzle-orm';
 
 import type { PageServerLoad } from './$types.js';
@@ -28,6 +29,7 @@ export const load: PageServerLoad = async (event) => {
 
 	return {
 		blogArticle: article,
+		contentHtml: renderMarkdown(article.content ?? ''),
 		isAdmin: admin
 	};
 };

src/routes/blog/[slug]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import 'highlight.js/styles/github-dark.css';
 
 	let { data } = $props();
 </script>
@@ -17,5 +18,7 @@
 		{/if}
 	</div>
 	<p class="mb-6 text-sm text-gray-500">{data.blogArticle.createdAt?.toDateString()}</p>
-	<div class="whitespace-pre-wrap">{data.blogArticle.content}</div>
+	<div class="prose prose-neutral max-w-none">
+		{@html data.contentHtml}
+	</div>
 </article>

src/routes/blog/[slug]/edit/+page.svelte

@@ -52,7 +52,9 @@
 			name="content"
 			bind:value={content}
 			rows="20"
-			class="rounded border border-gray-300 px-3 py-2 font-mono text-sm outline-none"></textarea>
+			class="rounded border border-gray-300 px-3 py-2 font-body text-base leading-relaxed text-gray-900 outline-none"
+		></textarea>
+		<p class="-mt-2 text-xs text-gray-400">Supports Markdown formatting.</p>
 
 		<div class="flex justify-end gap-2">
 			<button

src/routes/projects/animaldex/+page.svelte

@@ -63,7 +63,8 @@
 		const initMap = (center: [number, number], zoom: number) => {
 			map = new Map({
 				container: mapContainer,
-				style: 'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
+				style:
+					'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
 				center,
 				zoom
 			});

src/routes/projects/animaldex/register/+page.svelte

@@ -73,7 +73,8 @@
 
 		map = new Map({
 			container: mapContainer,
-			style: 'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
+			style:
+				'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
 			center: [lng!, lat!],
 			zoom: 15
 		});