3 files changed, 137 insertions, 18 deletions
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index a817d44..89a3b3a 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,13 +1,26 @@
 <script lang="ts">
+  import { resolve } from '$app/paths';
   import type { PageProps } from './$types';
 
   let { data }: PageProps = $props();
 </script>
 
-<div class="font-mono">
-  {#each Object.entries(data.posts) as [_filename, post]}
-    {JSON.stringify(post.metadata, (k, v) =>
-      v instanceof Date ? v.toISOString() : v,
-    )}
-  {/each}
+<div class="flex justify-center">
+  <div class="max-w-2xl">
+    <div class="font-genericmono">
+      {#each Object.entries(data.posts) as [_filename, post]}
+        <a
+          href={resolve('/blog/[id=int]-[slug]', {
+            id: post.metadata.id.toString(),
+            slug: post.metadata.slug,
+          })}
+          class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
+          >link</a
+        >
+        {JSON.stringify(post.metadata, (k, v) =>
+          v instanceof Date ? v.toISOString() : v,
+        )}
+      {/each}
+    </div>
+  </div>
 </div>
diff --git a/src/routes/blog/[id=int]/+page.svelte b/src/routes/blog/[id=int]/+page.svelte
index 16fc586..b2f6807 100644
--- a/src/routes/blog/[id=int]/+page.svelte
+++ b/src/routes/blog/[id=int]/+page.svelte
@@ -10,19 +10,22 @@
 
   let { data }: PageProps = $props();
 
+  let route = $derived(
+    forceTrailingSlash(
+      resolve('/blog/[id=int]-[slug]', {
+        id: data.post.metadata.id.toString(),
+        slug: data.post.metadata.slug,
+      }),
+    ),
+  );
+
   onMount(() => {
-    tick().then(() =>
-      replaceState(
-        forceTrailingSlash(
-          resolve('/blog/[id=int]-[slug]', {
-            id: data.post.metadata.id.toString(),
-            slug: data.post.metadata.slug,
-          }),
-        ),
-        page.state,
-      ),
-    );
+    tick().then(() => replaceState(route, page.state));
   });
 </script>
 
+<svelte:head>
+  <link rel="canonical" href={new URL(route, page.url).href} />
+</svelte:head>
+
 <Post post={data.post} />
diff --git a/src/routes/blog/posts/test-post.svx b/src/routes/blog/posts/test-post.svx
index a3f8248..71d8c21 100644
--- a/src/routes/blog/posts/test-post.svx
+++ b/src/routes/blog/posts/test-post.svx
@@ -10,9 +10,45 @@ created: "2026-01-14T01:25:14Z"
 updated: "2026-01-14T01:25:14Z"
 ---
 
+<script lang="ts">
+  import TableWrapper from '$/lib/blog/TableWrapper.svelte';
+</script>
+
 # Test Post
 
-this is a test blog post
+this is a test blog post.
+
+## markdown
+
+[this is a link](https://en.wikipedia.org/wiki/Catgirl).
+
+*this is italic*, and _this is too_. __this is underscore bolded__, and **this is asterisk bolded**.
+
+`this is single backticked`.
+
+```js
+console.log('and this is a codeblock');
+```
+
+### unwrapped table
+
+|       | awawa | test  |
+|-------|-------|-------|
+| **a** | b     | k     |
+| **z** | c     |       |
+| **f** | d     | f     |
+
+### wrapped table
+
+<TableWrapper>
+
+|       | awawa | test  |
+|-------|-------|-------|
+| **a** | b     | k     |
+| **z** | c     |       |
+| **f** | d     | f     |
+
+</TableWrapper>
 
 # section testing
 
@@ -79,3 +115,70 @@ Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias dolori
 Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
 
 Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+## some code
+
+```ts
+/*
+  Copyright (C) 2024-2026 memdmp
+
+  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by Affero, Inc., at version 1.
+
+  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the Affero General Public License for more details.
+
+  You should have received a copy of the Affero General Public License along with this program.  If not, see <https://spdx.org/licenses/AGPL-1.0-only>.
+*/
+import { Animation, MultiObjectKeyframe } from '@memdmp/keyframegen';
+import {
+  biosStepInterval,
+  biosSteps,
+  getDelay,
+  login,
+  ttyLines,
+} from './shared.ts';
+import fs from 'node:fs';
+import esbuild from 'esbuild';
+console.log('hi');
+const anim = new Animation();
+let ttyCtr = 0;
+const stages = [
+  anim.selector('.anmroot #bios'),
+  anim.selector('.anmroot #grub'),
+  anim.selector('.anmroot #grub-term'),
+  anim.selector('.anmroot #openrc'),
+  ...ttyLines.flatMap((v) =>
+    v.kind === 'clear' ? [anim.selector('.anmroot #tty-' + ttyCtr++)] : [],
+  ),
+];
+const handleSteps: Step[] = [
+  // (n) => {
+  //   toStage(0);
+  //   anim.in(500, n);
+  // },
+  ...biosStepHandlers,
+  ...grubStepHandlers,
+  ...openrcStepHandlers(1),
+  ...ttyStepHandlers,
+  (n) => {
+    const s = anim.selector('.anmroot #app .hidden-after-anim');
+    s.style(visibleStyles);
+    anim._internal_timeline.now += 1;
+    s.style(hiddenStyles);
+    anim.in(1000, n);
+  },
+];
+fs.writeFileSync(
+  'src/routes/anim.css',
+  `${comment}
+${esbuild.buildSync({
+    stdin: {
+      contents: `${exported}
+${tail}`,
+      loader: 'css',
+    },
+    write: false,
+    minify: false,
+  }).outputFiles![0].text
+  }`,
+);
+```