diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 27 | ||||
| -rw-r--r-- | src/lib/blog/InfoCard.svelte | 0 | ||||
| -rw-r--r-- | src/lib/blog/Post.svelte | 26 | ||||
| -rw-r--r-- | src/routes/blog/+page.svelte | 8 | ||||
| -rw-r--r-- | src/routes/blog/[id=int]/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/blog/[id=int]/+page.ts | 1 | ||||
| -rw-r--r-- | src/routes/blog/posts/test-post.svx | 8 |
7 files changed, 67 insertions, 5 deletions
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 --- /dev/null +++ b/src/lib/blog/InfoCard.svelte 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">: </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" + > ▒ </span + >mtime: {meta.updated.toISOString().split('T')[0]}{#if filename}<span + class="select-none"> ▒ </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 | |