From a595dd575f80200efa07129907ccee4686c155c4 Mon Sep 17 00:00:00 2001
From: memdmp <memdmp@estrogen.zone>
Date: Wed, 14 Jan 2026 07:05:23 +0100
Subject: feat: im done for tn i think

---
 src/app.css                           | 27 ++++++++++++++++++++++++++-
 src/lib/blog/InfoCard.svelte          |  0
 src/lib/blog/Post.svelte              | 26 ++++++++++++++++++++++++--
 src/routes/blog/+page.svelte          |  8 ++++++++
 src/routes/blog/[id=int]/+page.svelte |  2 +-
 src/routes/blog/[id=int]/+page.ts     |  1 +
 src/routes/blog/posts/test-post.svx   |  8 +++++++-
 7 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/blog/InfoCard.svelte

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index 7dcddd4..679174a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,6 +28,7 @@
   --color-formatted-table-background: var(--color-neutral-950);
   --color-codeblock-border: var(--color-neutral-900);
   --color-codeblock-background: var(--color-neutral-950);
+  --color-accent-primary: var(--color-red-400);
 }
 
 @utility afterunderline-* {
@@ -62,11 +63,19 @@
     }
   }
 }
+@utility quicklink {
+  @apply text-accent-primary transition-all afterunderline-accent-primary hover:afterunderline-hoverstate hover:text-white;
+}
 
 @utility internal-header-active {
   &:not(:is(p)) {
     @apply text-white/95;
   }
+  &:is(blockquote) {
+    &::before {
+      background-color: var(--colour-full);
+    }
+  }
   &::after {
     @apply -ml-3 bg-gray-200/50;
   }
@@ -74,7 +83,7 @@
 #postmd {
   @apply font-sans;
   a {
-    @apply text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white;
+    @apply quicklink;
   }
   h1 {
     @apply text-4xl mb-1.5 mt-2;
@@ -185,6 +194,22 @@
       }
     }
   }
+  blockquote:not(.default-blockquote) {
+    @apply -ml-1 pl-4 p-2 relative my-1;
+    &::before {
+      @apply absolute w-1 bg-accent-primary/50 transition-colors left-0 top-[10%] h-[80%];
+      content: '';
+      --colour-full: var(--color-accent-primary);
+    }
+    &:hover::before {
+      background-color: var(--colour-full);
+    }
+    p {
+      &::after {
+        @apply hidden;
+      }
+    }
+  }
 }
 
 /*
diff --git a/src/lib/blog/InfoCard.svelte b/src/lib/blog/InfoCard.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/blog/Post.svelte b/src/lib/blog/Post.svelte
index 8d50be8..2c61621 100644
--- a/src/lib/blog/Post.svelte
+++ b/src/lib/blog/Post.svelte
@@ -3,19 +3,41 @@
 </script>
 
 <script lang="ts">
-  import type { Post } from './Post';
+  import { parsePostMetadata, type Post } from './Post';
 
   let {
     post,
+    filename,
   }: {
     post: Post;
+    filename?: string;
   } = $props();
 
+  let meta = $derived(parsePostMetadata(post.metadata));
+
   let PostComp = $derived(post.default);
 </script>
 
 <div class="flex justify-center">
-  <div class="max-w-2xl">
+  <div class="max-w-2xl w-full">
+    <h1 class="font-space-grotesk text-5xl mt-8 mb-4">
+      <span class="text-accent-primary select-none">:&nbsp;</span
+      >{meta.title}<span class="text-accent-primary select-none">;</span>
+    </h1>
+    <p class="my-4 font-genericmono">
+      ctime: {meta.created.toISOString().split('T')[0]}<span class="select-none"
+        >&MediumSpace;▒&MediumSpace;</span
+      >mtime: {meta.updated.toISOString().split('T')[0]}{#if filename}<span
+          class="select-none">&MediumSpace;▒&MediumSpace;</span
+        ><a
+          href={encodeURI(
+            `https://codeberg.org/dmpmem/tilde/src/branch/master/src/routes/blog/${filename}`,
+          )}
+          class="quicklink"
+          target="_blank"
+          rel="noopener noreferrer">src</a
+        >{/if}
+    </p>
     <article id="postmd">
       <PostComp />
     </article>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 89a3b3a..7e21fda 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -17,6 +17,14 @@
           class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
           >link</a
         >
+        -
+        <a
+          href={resolve('/blog/[id=int]', {
+            id: post.metadata.id.toString(),
+          })}
+          class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
+          >short</a
+        >
         {JSON.stringify(post.metadata, (k, v) =>
           v instanceof Date ? v.toISOString() : v,
         )}
diff --git a/src/routes/blog/[id=int]/+page.svelte b/src/routes/blog/[id=int]/+page.svelte
index b2f6807..84d33ef 100644
--- a/src/routes/blog/[id=int]/+page.svelte
+++ b/src/routes/blog/[id=int]/+page.svelte
@@ -28,4 +28,4 @@
   <link rel="canonical" href={new URL(route, page.url).href} />
 </svelte:head>
 
-<Post post={data.post} />
+<Post post={data.post} filename={data.filename} />
diff --git a/src/routes/blog/[id=int]/+page.ts b/src/routes/blog/[id=int]/+page.ts
index 077d72c..ea2803f 100644
--- a/src/routes/blog/[id=int]/+page.ts
+++ b/src/routes/blog/[id=int]/+page.ts
@@ -7,5 +7,6 @@ export const load = async ({ data }) => {
   const post = (await posts[filename]());
   return {
     post,
+    filename,
   }
 }
diff --git a/src/routes/blog/posts/test-post.svx b/src/routes/blog/posts/test-post.svx
index 71d8c21..b12b25a 100644
--- a/src/routes/blog/posts/test-post.svx
+++ b/src/routes/blog/posts/test-post.svx
@@ -3,7 +3,7 @@ title:  "Test Post"
 blurb:  "Awawawa Ipsum dolor the neobot is in the washing machine"
 author: "7222e800"
 slug:   "test-post"
-id:     0
+id:     -1
 
 # Timestamps are in ISO8601 UTC (`date -u +%Y-%m-%dT%H:%M:%SZ`)
 created: "2026-01-14T01:25:14Z"
@@ -18,6 +18,8 @@ updated: "2026-01-14T01:25:14Z"
 
 this is a test blog post.
 
+## elements
+
 ## markdown
 
 [this is a link](https://en.wikipedia.org/wiki/Catgirl).
@@ -30,6 +32,10 @@ this is a test blog post.
 console.log('and this is a codeblock');
 ```
 
+> and this is a quote
+>
+> a multiline one
+
 ### unwrapped table
 
 |       | awawa | test  |
-- 
cgit v1.2.3