my-site
- content
- test-1.mdx
- src
- app
- blog
- [slug]
- page.tsx
- page.tsx
// page.tsx
import { promises as fs } from "fs";
import { compileMDX } from "next-mdx-remote/rsc";
import Link from "next/link";
import path from "path";
export async function generateMetadata() {
const content = await fs.readFile(path.join(process.cwd(), "content", "test-1.mdx"), "utf-8");
const data = await compileMDX<{ title: string }>({
source: content,
options: {
parseFrontmatter: true,
},
});
return { title: data.frontmatter?.title };
}
export default async function TestsPage() {
const filenames = await fs.readdir(path.join(process.cwd(), "content"));
const projects = await Promise.all(
filenames.map(async (filename) => {
const content = await fs.readFile(path.join(process.cwd(), "content", filename), "utf-8");
const { frontmatter } = await compileMDX<{ title: string; summary: string }>({
source: content,
options: {
parseFrontmatter: true,
},
});
return {
filename,
slug: filename.replace(".mdx", ""),
...frontmatter,
};
}),
);
return (
<section>
<div className="container">
<ul>
{projects.map((project) => (
<li key={project.slug} className="flex flex-col gap-2 py-3">
<Link href={`/blog/${project.slug}`} className="text-3xl font-bold">
{project.title}
</Link>
<p>{project.summary}</p>
</li>
))}
</ul>
</div>
</section>
);
}
// [slug]/page.tsx
import { Table } from "@/components/mdx";
import { promises as fs } from "fs";
import { compileMDX } from "next-mdx-remote/rsc";
import path from "path";
export async function generateMetadata(props: { params: Promise<{ slug: string }> }) {
const { slug } = await props.params;
const content = await fs.readFile(path.join(process.cwd(), "content", `${slug}.mdx`), "utf-8");
const data = await compileMDX<{ title: string }>({
source: content,
options: {
parseFrontmatter: true,
},
});
return { title: data.frontmatter?.title };
}
export default async function TestsPage(props: { params: Promise<{ slug: string }> }) {
const params = await props.params;
const content = await fs.readFile(path.join(process.cwd(), "content", `${params.slug}.mdx`), "utf-8");
const data = await compileMDX<{ title: string }>({
source: content,
options: {
parseFrontmatter: true,
},
components: {
Table,
},
});
return (
<section>
<div className="container">
<article>{data.content}</article>
</div>
</section>
);
}
148 views