Initial commit
This commit is contained in:
56
app/blog/[slug]/page.tsx
Normal file
56
app/blog/[slug]/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { Metadata } from 'next';
|
||||
import { allPosts } from 'contentlayer/generated';
|
||||
import { getPostBySlug } from '@/lib/posts';
|
||||
|
||||
export function generateStaticParams() {
|
||||
return allPosts.map((post) => ({
|
||||
slug: post.slug || post.flattenedPath
|
||||
}));
|
||||
}
|
||||
|
||||
interface Props {
|
||||
params: { slug: string };
|
||||
}
|
||||
|
||||
export function generateMetadata({ params }: Props): Metadata {
|
||||
const slug = params.slug;
|
||||
const post = getPostBySlug(slug);
|
||||
if (!post) return {};
|
||||
|
||||
return {
|
||||
title: post.title,
|
||||
description: post.description || post.title
|
||||
};
|
||||
}
|
||||
|
||||
export default function BlogPostPage({ params }: Props) {
|
||||
const slug = params.slug;
|
||||
const post = getPostBySlug(slug);
|
||||
|
||||
if (!post) return notFound();
|
||||
|
||||
return (
|
||||
<article className="prose dark:prose-invert max-w-none">
|
||||
<h1>{post.title}</h1>
|
||||
{post.published_at && (
|
||||
<p className="text-xs text-gray-500">
|
||||
{new Date(post.published_at).toLocaleDateString('zh-TW')}
|
||||
</p>
|
||||
)}
|
||||
{post.tags && (
|
||||
<p className="mt-1 text-xs">
|
||||
{post.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
|
||||
>
|
||||
#{t}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
<div dangerouslySetInnerHTML={{ __html: post.body.html }} />
|
||||
</article>
|
||||
);
|
||||
}
|
||||
50
app/blog/page.tsx
Normal file
50
app/blog/page.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import Link from 'next/link';
|
||||
import { getAllPostsSorted } from '@/lib/posts';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Blog'
|
||||
};
|
||||
|
||||
export default function BlogIndexPage() {
|
||||
const posts = getAllPostsSorted();
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Blog</h1>
|
||||
<ul className="space-y-3">
|
||||
{posts.map((post) => (
|
||||
<li key={post._id}>
|
||||
<Link
|
||||
href={post.url}
|
||||
className="text-lg font-medium hover:underline"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
<div className="text-xs text-gray-500">
|
||||
{post.published_at &&
|
||||
new Date(post.published_at).toLocaleDateString('zh-TW')}
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<span className="ml-2">
|
||||
{post.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
|
||||
>
|
||||
#{t}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{post.description && (
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
|
||||
{post.description}
|
||||
</p>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
30
app/layout.tsx
Normal file
30
app/layout.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import '../styles/globals.css';
|
||||
import type { Metadata } from 'next';
|
||||
import { siteConfig } from '@/lib/config';
|
||||
import { LayoutShell } from '@/components/layout-shell';
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: siteConfig.title,
|
||||
template: `%s | ${siteConfig.title}`
|
||||
},
|
||||
description: siteConfig.description
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="zh-Hant" suppressHydrationWarning>
|
||||
<body>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
||||
<LayoutShell>{children}</LayoutShell>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
42
app/page.tsx
Normal file
42
app/page.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import Link from 'next/link';
|
||||
import { getAllPostsSorted } from '@/lib/posts';
|
||||
|
||||
export default function HomePage() {
|
||||
const posts = getAllPostsSorted().slice(0, 5);
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">你好，我是 Your Name</h1>
|
||||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||||
這裡是我的個人首頁與技術 Blog。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">最新文章</h2>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{posts.map((post) => (
|
||||
<li key={post._id}>
|
||||
<Link href={post.url} className="hover:underline">
|
||||
{post.title}
|
||||
</Link>
|
||||
{post.published_at && (
|
||||
<span className="ml-2 text-xs text-gray-500">
|
||||
{new Date(post.published_at).toLocaleDateString('zh-TW')}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/blog"
|
||||
className="mt-4 inline-block text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
所有文章 →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
39
app/pages/[slug]/page.tsx
Normal file
39
app/pages/[slug]/page.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { Metadata } from 'next';
|
||||
import { allPages } from 'contentlayer/generated';
|
||||
import { getPageBySlug } from '@/lib/posts';
|
||||
|
||||
export function generateStaticParams() {
|
||||
return allPages.map((page) => ({
|
||||
slug: page.slug || page.flattenedPath
|
||||
}));
|
||||
}
|
||||
|
||||
interface Props {
|
||||
params: { slug: string };
|
||||
}
|
||||
|
||||
export function generateMetadata({ params }: Props): Metadata {
|
||||
const slug = params.slug;
|
||||
const page = getPageBySlug(slug);
|
||||
if (!page) return {};
|
||||
|
||||
return {
|
||||
title: page.title,
|
||||
description: page.description || page.title
|
||||
};
|
||||
}
|
||||
|
||||
export default function StaticPage({ params }: Props) {
|
||||
const slug = params.slug;
|
||||
const page = getPageBySlug(slug);
|
||||
|
||||
if (!page) return notFound();
|
||||
|
||||
return (
|
||||
<article className="prose dark:prose-invert max-w-none">
|
||||
<h1>{page.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: page.body.html }} />
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user