Merge pull request 'add blog editor' (#11) from dev into staging

Reviewed-on: #11

package-lock.json

@@ -15,9 +15,6 @@
 				"@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"
@@ -29,7 +26,6 @@
 				"@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",
@@ -3241,33 +3237,6 @@
 				"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",
@@ -5963,15 +5932,6 @@
 				"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",
@@ -6577,27 +6537,6 @@
 			"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,7 +28,6 @@
 		"@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",
@@ -65,9 +64,6 @@
 		"@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,5 +1,4 @@
 @import 'tailwindcss';
-@plugin '@tailwindcss/typography';
 
 @theme {
 	--color-bg: #f6f4f0;

src/lib/server/markdown.ts

@@ -1,18 +0,0 @@
-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,31 +48,18 @@
 	];
 </script>
 
-<div class="flex flex-col min-h-screen">
+<header class="flex justify-between items-center gap-4 py-4 px-4">
-	<header class="flex justify-between items-center gap-4 py-4 px-4">
+	<a href={resolve('/')} class="text-2xl font-bold">Stan Runge</a>
-		<a href={resolve('/')} class="text-2xl font-bold">Stan Runge</a>
+	<nav class="flex flex-wrap justify-center gap-4" aria-label="Social links">
-		<nav class="flex flex-wrap justify-center gap-4" aria-label="Social links">
+		{#each copies as c (c.label)}
-			{#each copies as c (c.label)}
+			<CopyButton {...c} />
-				<CopyButton {...c} />
+		{/each}
-			{/each}
+		{#each links as { icon: Icon, label, href } (label)}
-			{#each links as { icon: Icon, label, href } (label)}
+			<a {href} aria-label={label} class="text-2xl transition hover:opacity-60">
-				<a {href} aria-label={label} class="text-2xl transition hover:opacity-60">
+				<Icon />
-					<Icon />
+			</a>
-				</a>
+		{/each}
-			{/each}
+	</nav>
-		</nav>
+</header>
-	</header>
 
-	<main class="flex-1">
+{@render children()}
-		{@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,7 +1,6 @@
 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';
@@ -29,7 +28,6 @@ export const load: PageServerLoad = async (event) => {
 
 	return {
 		blogArticle: article,
-		contentHtml: renderMarkdown(article.content ?? ''),
 		isAdmin: admin
 	};
 };

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

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

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

@@ -52,9 +52,7 @@
 			name="content"
 			bind:value={content}
 			rows="20"
-			class="rounded border border-gray-300 px-3 py-2 font-body text-base leading-relaxed text-gray-900 outline-none"
+			class="rounded border border-gray-300 px-3 py-2 font-mono text-sm outline-none"></textarea>
-		></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,8 +63,7 @@
 		const initMap = (center: [number, number], zoom: number) => {
 			map = new Map({
 				container: mapContainer,
-				style:
+				style: 'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
-					'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
 				center,
 				zoom
 			});

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

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