diff options
Diffstat (limited to 'src/routes/blog/+page.svelte')
| -rw-r--r-- | src/routes/blog/+page.svelte | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte new file mode 100644 index 0000000..627b55c --- /dev/null +++ b/src/routes/blog/+page.svelte @@ -0,0 +1,52 @@ +<script lang="ts"> + import { resolve } from '$app/paths'; + import type { PageProps } from './$types'; + + let { data }: PageProps = $props(); +</script> + +<div class="flex justify-center"> + <div class="max-w-2xl w-full"> + <div class="font-genericmono"> + <h1 class="font-space-grotesk text-5xl mt-8 mb-4"> + <span class="text-red-400 select-none">❯ </span>ls + <span class="text-red-400">'</span>blog posts<span class="text-red-400" + >'</span + ><span class="text-red-400 select-none">;</span> + </h1> + {#each Object.entries(data.posts) as [_filename, post]} + <div class="flex gap-2"> + <div class="flex flex-col items-end"> + <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 + > + <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 + > + </div> + <div class="flex flex-col"> + <table> + <tbody> + {#each Object.entries( { ...post.metadata, slug: undefined, id: undefined, created: undefined, updated: undefined }, ).filter((v) => v[1] !== undefined) as v} + <tr> + <td class="pr-1 align-top">{v[0]}:</td> + <td class="pl-1 align-top">{JSON.stringify(v[1])}</td> + </tr> + {/each} + </tbody> + </table> + </div> + </div> + {/each} + </div> + </div> +</div> |