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
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import Avatar from "./avatar";
|
|
import CoverImage from "./cover-image";
|
|
import DateComponent from "./date";
|
|
|
|
import { sanityFetch } from "@/sanity/lib/fetch";
|
|
import {
|
|
MoreStoriesQueryResponse,
|
|
moreStoriesQuery,
|
|
} from "@/sanity/lib/queries";
|
|
|
|
export default async function MoreStories(params: {
|
|
skip: string;
|
|
limit: number;
|
|
}) {
|
|
const data = await sanityFetch<MoreStoriesQueryResponse>({
|
|
query: moreStoriesQuery,
|
|
params,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-32 grid grid-cols-1 gap-y-20 md:grid-cols-2 md:gap-x-16 md:gap-y-32 lg:gap-x-32">
|
|
{data?.map((post) => {
|
|
const { _id, title, slug, coverImage, excerpt, author } = post;
|
|
return (
|
|
<article key={_id}>
|
|
<Link href={`/posts/${slug}`} className="group mb-5 block">
|
|
<CoverImage image={coverImage} priority={false} />
|
|
</Link>
|
|
<h3 className="text-balance mb-3 text-3xl leading-snug">
|
|
<Link href={`/posts/${slug}`} className="hover:underline">
|
|
{title}
|
|
</Link>
|
|
</h3>
|
|
<div className="mb-4 text-lg">
|
|
<DateComponent dateString={post.date} />
|
|
</div>
|
|
{excerpt && (
|
|
<p className="text-pretty mb-4 text-lg leading-relaxed">
|
|
{excerpt}
|
|
</p>
|
|
)}
|
|
{author && <Avatar name={author.name} picture={author.picture} />}
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|