1
// content/blog/my-post.md — Frontmatter format
2
---
3
title: "Your Post Title"
4
excerpt: "A short description of the post."
5
date: "2026-02-19"
6
readingTime: "5 min read"
7
tags: ["React", "Tutorial"]
8
featured: false
9
---
10
11
// Your markdown content here...
12
13
// app/blog/[slug]/page.tsx
14
import {
15
  getBlogPostWithHtml,
16
  getAllBlogSlugs,
17
  getAllBlogPosts,
18
} from "@/features/blog/server/blog-data";
19
import { siteConfig } from "@/server/seo/seo";
20
21
export function generateStaticParams() {
22
  return getAllBlogSlugs().map((slug) => ({ slug }));
23
}
24
25
export default async function PostPage({
26
  params,
27
}: {
28
  params: Promise<{ slug: string }>;
29
}) {
30
  const { slug } = await params;
31
  const post = await getBlogPostWithHtml(slug);
32
33
  // Related posts: same tags, excluding current
34
  const related = getAllBlogPosts()
35
    .filter((p) => p.slug !== slug && p.tags.some((tag) => post.tags.includes(tag)))
36
    .slice(0, 3);
37
38
  return (
39
    <article className="mx-auto max-w-3xl">
40
      {/* Back link */}
41
      <Link href="/blog" className="text-muted-foreground text-sm">
42
        <FontAwesomeIcon icon={faArrowLeft} /> Back to Blog
43
      </Link>
44
45
      {/* Tags */}
46
      <p className="text-primary text-xs font-semibold uppercase">
47
        {post.tags.join(" / ")}
48
      </p>
49
50
      <h1 className="text-3xl font-bold">{post.title}</h1>
51
      <p className="text-muted-foreground text-lg">{post.excerpt}</p>
52
      <p className="text-muted-foreground text-sm">
53
        {post.date} | {post.readingTime}
54
      </p>
55
56
      {/* Content */}
57
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
58
59
      {/* Author section */}
60
      <div className="border-t pt-6">
61
        <p className="text-muted-foreground text-sm">
62
          Written by <span className="font-medium">{siteConfig.author}</span>
63
          &middot; Software Engineer
64
          &middot; <Link href="/about" className="text-primary">About me</Link>
65
        </p>
66
      </div>
67
68
      {/* Related posts */}
69
      <div className="border-t pt-6">
70
        <h2 className="text-2xl font-bold">Related Posts</h2>
71
        {related.map((rp) => (
72
          <div key={rp.slug}>
73
            <h3 className="font-semibold">{rp.title}</h3>
74
            <p className="text-muted-foreground text-sm">{rp.readingTime}</p>
75
          </div>
76
        ))}
77
      </div>
78
    </article>
79
  );
80
}