{metadata.title}
- {metadata.date} · {metadata.author} + {metadata.summary} +
++ ·{" "} + {metadata.author} · {readingTime}
-
-
{posts.length > 0 ? (
- posts.map(({ slug, metadata }) => (
+ posts.map(({ slug, metadata, date, readingTime }) => (
-
{metadata.title}
-
- {metadata.date} · {metadata.author}
+
+ {metadata.summary} +
+ + ·{" "} + {metadata.author} · {readingTime}
))
diff --git a/src/app/content/[...path]/route.ts b/src/app/content/[...path]/route.ts
new file mode 100644
index 0000000..f27e33d
--- /dev/null
+++ b/src/app/content/[...path]/route.ts
@@ -0,0 +1,61 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { lookup as lookupMime } from "mime-types";
+import type { NextRequest } from "next/server";
+
+const CONTENT_ROOT = path.join(process.cwd(), "src", "content");
+const CONTENT_ROOT_PREFIX = path.normalize(`${CONTENT_ROOT}${path.sep}`);
+const ALLOWED_EXTENSIONS = new Set([
+ ".avif",
+ ".gif",
+ ".jpeg",
+ ".jpg",
+ ".mp4",
+ ".pdf",
+ ".png",
+ ".svg",
+ ".webm",
+ ".webp",
+]);
+
+export const runtime = "nodejs";
+
+const safeJoin = (segments: string[]) => {
+ const resolvedPath = path.join(CONTENT_ROOT, ...segments);
+ const normalized = path.normalize(resolvedPath);
+ if (!normalized.startsWith(CONTENT_ROOT_PREFIX)) {
+ return null;
+ }
+ return normalized;
+};
+
+export async function GET(
+ _request: NextRequest,
+ { params }: { params: Promise<{ path: string[] }> },
+) {
+ const { path: pathSegments } = await params;
+ const filePath = safeJoin(pathSegments ?? []);
+
+ if (!filePath) {
+ return new Response("Not found", { status: 404 });
+ }
+
+ try {
+ const extension = path.extname(filePath).toLowerCase();
+ if (!ALLOWED_EXTENSIONS.has(extension)) {
+ return new Response("Not found", { status: 404 });
+ }
+
+ const buffer = await fs.readFile(filePath);
+ const contentType = lookupMime(filePath) || "application/octet-stream";
+
+ return new Response(buffer, {
+ headers: {
+ "Content-Type": contentType,
+ "Cache-Control": "public, max-age=31536000, immutable",
+ },
+ });
+ } catch {
+ return new Response("Not found", { status: 404 });
+ }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 37ff499..59c7b63 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -23,5 +23,48 @@
body {
background: var(--background);
color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
+ font-family: var(--font-geist-sans);
+}
+
+.prose :is(h2, h3, h4, h5, h6) {
+ scroll-margin-top: 6rem;
+}
+
+.prose .heading-anchor {
+ color: inherit;
+ text-decoration: none;
+}
+
+.prose .heading-anchor:hover {
+ text-decoration: underline;
+}
+
+.prose pre[data-theme] {
+ background-color: var(--shiki-light);
+ border-radius: 0.75rem;
+ padding: 1.25rem;
+ overflow-x: auto;
+}
+
+.prose pre,
+.prose code {
+ font-family: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+ .prose pre[data-theme] {
+ background-color: var(--shiki-dark);
+ }
+}
+
+.prose code:not(pre code) {
+ background: rgba(24, 24, 27, 0.08);
+ border-radius: 0.375rem;
+ padding: 0.15rem 0.35rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ .prose code:not(pre code) {
+ background: rgba(250, 250, 250, 0.1);
+ }
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 048ed75..bb57d17 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import SceneWrapper from "@/components/canvas/SceneWrapper";
+import { siteConfig } from "@/lib/site";
import "./globals.css";
const geistSans = Geist({
@@ -14,8 +15,30 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ metadataBase: new URL(siteConfig.url),
+ title: {
+ default: siteConfig.name,
+ template: `%s · ${siteConfig.name}`,
+ },
+ description: siteConfig.description,
+ alternates: {
+ types: {
+ "application/rss+xml": `${siteConfig.url}/rss.xml`,
+ },
+ },
+ openGraph: {
+ type: "website",
+ title: siteConfig.name,
+ description: siteConfig.description,
+ url: siteConfig.url,
+ siteName: siteConfig.name,
+ locale: siteConfig.locale,
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: siteConfig.name,
+ description: siteConfig.description,
+ },
};
export default function RootLayout({
diff --git a/src/app/robots.ts b/src/app/robots.ts
new file mode 100644
index 0000000..6a1a632
--- /dev/null
+++ b/src/app/robots.ts
@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next";
+
+import { absoluteUrl } from "@/lib/site";
+
+export default function robots(): MetadataRoute.Robots {
+ return {
+ rules: {
+ userAgent: "*",
+ allow: "/",
+ },
+ sitemap: absoluteUrl("/sitemap.xml"),
+ };
+}
diff --git a/src/app/rss.xml/route.ts b/src/app/rss.xml/route.ts
new file mode 100644
index 0000000..8e421d2
--- /dev/null
+++ b/src/app/rss.xml/route.ts
@@ -0,0 +1,46 @@
+import { Feed } from "feed";
+
+import { getBlogPosts } from "@/lib/blog-utils";
+import { absoluteUrl, siteConfig } from "@/lib/site";
+
+export const dynamic = "force-static";
+
+export async function GET() {
+ const posts = await getBlogPosts();
+
+ const feed = new Feed({
+ title: siteConfig.name,
+ description: siteConfig.description,
+ id: siteConfig.url,
+ link: siteConfig.url,
+ language: siteConfig.language,
+ favicon: absoluteUrl("/favicon.ico"),
+ updated: posts[0]?.date ?? new Date(),
+ generator: "Next.js",
+ copyright: `© ${new Date().getFullYear()} ${siteConfig.name}`,
+ feedLinks: {
+ rss2: absoluteUrl("/rss.xml"),
+ },
+ author: {
+ name: siteConfig.author.name,
+ },
+ });
+
+ for (const post of posts) {
+ const url = absoluteUrl(`/blog/${post.slug}`);
+ feed.addItem({
+ title: post.metadata.title,
+ id: url,
+ link: url,
+ description: post.metadata.summary,
+ date: post.date,
+ author: [{ name: post.metadata.author }],
+ });
+ }
+
+ return new Response(feed.rss2(), {
+ headers: {
+ "Content-Type": "application/rss+xml; charset=utf-8",
+ },
+ });
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 0000000..5862a92
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,24 @@
+import type { MetadataRoute } from "next";
+
+import { getBlogPosts } from "@/lib/blog-utils";
+import { absoluteUrl, siteConfig } from "@/lib/site";
+
+export default async function sitemap(): Promise
+ {chart}
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/src/content/blog/another-post/page.mdx b/src/content/blog/another-post/page.mdx
deleted file mode 100644
index 1fa8064..0000000
--- a/src/content/blog/another-post/page.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const metadata = {
- title: "Another Post",
- date: "2025-01-01",
- author: "John Doe",
-}
-
-## Heading
-This is another post
diff --git a/src/content/blog/example-post.mdx b/src/content/blog/example-post.mdx
deleted file mode 100644
index a1ea3bc..0000000
--- a/src/content/blog/example-post.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const metadata = {
- title: "Example Post",
- date: "2025-01-01",
- author: "John Doe",
-}
-
-## Heading
-This is an example post
diff --git a/src/content/blog/kitchen-sink/inline.png b/src/content/blog/kitchen-sink/inline.png
new file mode 100644
index 0000000..48a5df5
Binary files /dev/null and b/src/content/blog/kitchen-sink/inline.png differ
diff --git a/src/content/blog/kitchen-sink/og.png b/src/content/blog/kitchen-sink/og.png
new file mode 100644
index 0000000..7e5a877
Binary files /dev/null and b/src/content/blog/kitchen-sink/og.png differ
diff --git a/src/content/blog/kitchen-sink/page.mdx b/src/content/blog/kitchen-sink/page.mdx
new file mode 100644
index 0000000..26f785a
--- /dev/null
+++ b/src/content/blog/kitchen-sink/page.mdx
@@ -0,0 +1,79 @@
+export const metadata = {
+ title: "MDX Kitchen Sink",
+ date: "2025-02-01",
+ author: "F0RR0",
+ summary: "A tour of the MDX blog features: headings, code, images, tables, diagrams, and links.",
+ image: "./og.png",
+ tags: ["mdx", "blog", "demo"],
+ updated: "2025-02-10",
+}
+
+## Table of contents
+- [Quickstart](#quickstart)
+- [Code blocks](#code-blocks)
+- [Images](#images)
+- [Tables](#tables)
+- [Mermaid diagrams](#mermaid-diagrams)
+- [Links](#links)
+- [Footnotes](#footnotes)
+
+## Quickstart
+Create a folder, add `page.mdx`, and drop assets next to it.
+
+1. `src/content/blog/my-post/page.mdx`
+2. `src/content/blog/my-post/og.png`
+3. Use `image: "./og.png"` in metadata
+
+> Tip: keep `draft: true` until you are ready to publish.
+
+## Code blocks
+Use fenced blocks with a language for syntax highlighting.
+
+```ts
+type Post = {
+ title: string;
+ date: string;
+};
+
+const posts: Post[] = [
+ { title: "Hello", date: "2025-01-01" },
+];
+```
+
+Inline code like `next.config.ts` is styled too.
+
+## Images
+Markdown images work with relative paths:
+
+
+
+You can also use the MDX `