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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

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

<script lang="ts">
  import { dev } from '$app/environment';
  import { page } from '$app/state';

  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);

  let ignorePublishedStatus = $derived(
    page.url.searchParams.has('ignore-unpublished'),
  );
</script>

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

{#snippet unpublished()}
  <div
    class="p-4 rounded-lg bg-neutral-950 border-accent-primary border-[1.8px] my-4 sticky top-4 z-50"
  >
    <h1 class="text-xl mb-2">Unpublished</h1>
    <p class="my-1.5 leading-5">
      This article has either not yet been published or has been retracted.<br
      />
      This could be due to being unfinished, factual errors, bad formulations, pending
      significant corrections, or any number of other reasons.
    </p>
    {#if !ignorePublishedStatus && dev}
      <p class="mt-1 5">
        <a
          href={new URL('?ignore-unpublished=+', page.url).href}
          class="quicklink">Ignore and read anyway</a
        >
      </p>
    {:else if ignorePublishedStatus}
      <p class="mt-1.5">Here be dragons.</p>
    {/if}
  </div>
{/snippet}

<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="select-none"
        ><span class="text-red-400">❯ </span> less
        <span class="text-red-400">'</span></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 && (meta.published || ignorePublishedStatus || dev)}<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>
    {#if meta.published || ignorePublishedStatus}
      {#if !meta.published}
        {@render unpublished()}
      {/if}
      <article id="postmd">
        <PostComp />
      </article>
    {:else}
      {@render unpublished()}
    {/if}
  </div>
</div>