src/pages/Post.tsx


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

import { useParams, Link } from "react-router-dom";
import CodeSnippet from "../components/CodeSnippet";
import LinkWithIcon from "../components/LinkWithIcon";
import NotFoundPage from "./404Page";

interface PostFile {
  attributes: {
    title: string;
    date: string;
    cover?: string;
  };
  markdown: string;
  ReactComponent: React.FC<any>;
}

const posts = import.meta.glob("../blog/*.md", {
  eager: true,
}) as Record<string, PostFile>;

export default function Post() {
  const { slug } = useParams<{ slug: string }>();

  const match = Object.entries(posts).find(([path]) =>
    path.endsWith(`${slug}.md`)
  );

  if (!match) return <NotFoundPage />;
  const { attributes: meta, ReactComponent: Content } = match[1];

  return (
    <article className="prose prose-zinc dark:prose-invert mx-auto px-4 py-10">
      <Link to="/blog" className="no-underline">
        ← Back
      </Link>

      {meta.cover && (
        <img
          src={meta.cover}
          alt={meta.title}
          className="w-full h-60 object-cover rounded-lg my-6"
        />
      )}

      <h1>{meta.title}</h1>
      <p className="text-sm text-zinc-500 mb-8">
        {new Date(meta.date).toLocaleDateString("de-DE")}
      </p>

      {/* The Markdown, already a React component */}
      <Content
        components={{
          code({ children }: any) {
            return (
              <CodeSnippet
                code={String(children).replace(/\n$/, "")}
                initialLines={5}
              />
            );
          },
          a: LinkWithIcon,
        }}
      />
    </article>
  );
}