1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<script lang="ts">
import { resolve } from '$app/paths';
import type { PageProps } from './$types';
let { data }: PageProps = $props();
let posts = $derived(
Object.entries(data.posts)
.filter((v) => v[1].metadata.published === true)
.toSorted(
([_, a], [__, b]) =>
b.metadata.updated.getTime() - a.metadata.updated.getTime(),
),
);
</script>
<svelte:head>
<title>/~mem/blog/</title>
</svelte:head>
<div class="flex justify-center">
<div class="max-w-2xl w-full">
<div class="font-genericmono">
{#if posts.length}
<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>
<div class="flex gap-4 flex-col">
{#each 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="quicklink">link</a
>
<a
href={resolve('/blog/[id=int]', {
id: post.metadata.id.toString(),
})}
class="quicklink">short</a
>
</div>
<div class="flex flex-col">
<table>
<tbody>
{#each Object.entries( { ...post.metadata, slug: undefined, id: undefined, created: undefined, updated: undefined, published: 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>
{:else}
<h2 class="font-space-grotesk text-5xl mt-8 mb-4">
<span class="text-accent-primary select-none">zsh: </span>no
matches found<span class="text-accent-primary select-none">.</span>
</h2>
<p class="mt-1.5">
Feel free to check back once some posts are published.
</p>
{/if}
</div>
</div>
</div>
|
