mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Cody OlsenandGitHub
41019c2314
This PR updates the `cms-sanity` example to use: - App Router - TypeScript - Sanity Studio v3 instead of v2 - Embeds the Studio inside the next app on the `/studio` route. - ISR / Data Cache (revalidations through `revalidatePath` while in Live Visual Editing, time-based to match the Sanity API CDN in production). - Support Vercel Visual Editing out of the box. - The new `next-sanity/image` component. - Vercel Speed Insights. - The Sanity Presentation Tool for live content previews. - Sanity Portable Text setup to fully support `@tailwindcss/typography`. - [AI Assist](https://www.sanity.io/docs/ai-assist) - Auto fill in `alt` text on images. - Preset prompts for content creation
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import { draftMode } from "next/headers";
|
|
|
|
import MoreStories from "../../more-stories";
|
|
import Avatar from "../../avatar";
|
|
import Date from "../../date";
|
|
import CoverImage from "../../cover-image";
|
|
|
|
import { Markdown } from "@/lib/markdown";
|
|
import { getAllPosts, getPostAndMorePosts } from "@/lib/api";
|
|
|
|
export async function generateStaticParams() {
|
|
const allPosts = await getAllPosts(false);
|
|
|
|
return allPosts.map((post) => ({
|
|
slug: post.slug,
|
|
}));
|
|
}
|
|
|
|
export default async function PostPage({
|
|
params,
|
|
}: {
|
|
params: { slug: string };
|
|
}) {
|
|
const { isEnabled } = draftMode();
|
|
const { post, morePosts } = await getPostAndMorePosts(params.slug, isEnabled);
|
|
|
|
return (
|
|
<div className="container mx-auto px-5">
|
|
<h2 className="mb-20 mt-8 text-2xl font-bold leading-tight tracking-tight md:text-4xl md:tracking-tighter">
|
|
<Link href="/" className="hover:underline">
|
|
Blog
|
|
</Link>
|
|
.
|
|
</h2>
|
|
<article>
|
|
<h1 className="mb-12 text-center text-6xl font-bold leading-tight tracking-tighter md:text-left md:text-7xl md:leading-none lg:text-8xl">
|
|
{post.title}
|
|
</h1>
|
|
<div className="hidden md:mb-12 md:block">
|
|
{post.author && (
|
|
<Avatar name={post.author.name} picture={post.author.picture} />
|
|
)}
|
|
</div>
|
|
<div className="mb-8 sm:mx-0 md:mb-16">
|
|
<CoverImage title={post.title} url={post.coverImage.url} />
|
|
</div>
|
|
<div className="mx-auto max-w-2xl">
|
|
<div className="mb-6 block md:hidden">
|
|
{post.author && (
|
|
<Avatar name={post.author.name} picture={post.author.picture} />
|
|
)}
|
|
</div>
|
|
<div className="mb-6 text-lg">
|
|
<Date dateString={post.date} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-2xl">
|
|
<div className="prose">
|
|
<Markdown content={post.content} />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr className="border-accent-2 mt-28 mb-24" />
|
|
<MoreStories morePosts={morePosts} />
|
|
</div>
|
|
);
|
|
}
|