src/lib/blog/Post.svelte


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

<script lang="ts" module>
  export * from './Post';
</script>

<script lang="ts">
  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>

<svelte:head>
  <title>{meta.title} - /~mem/blog/</title>
  <meta name="description" content={meta.blurb} />
</svelte:head>

<div class="flex justify-center">
  <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 flex gap-1 md:gap-2 flex-wrap">
      <a href={encodeURI(`../`)} class="quicklink">../</a>{#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}<span class="select-none">▒</span>ctime: {meta.created
        .toISOString()
        .split('T')[0]}<span class="select-none">▒</span>mtime: {meta.updated
        .toISOString()
        .split('T')[0]}
    </p>
    <article id="postmd">
      <PostComp />
    </article>
  </div>
</div>