0718aec93b
This PR updates the `cms-contentful` example to use: - App Router - TypeScript - Draft Mode (previously Preview Mode) - ISR / Data Cache (revalidations through `revalidateTag`) Further, it combines many separate files into more manageable single files, and tries to better bucket provider-specific logic into the `lib/` folder. I'm hoping this can be the foundation for re-writing the rest of the `cms-*` examples to use App Router. Overall, the code is much easier to reason about IMO. Pretty happy with the change. I sprinkled some `any`'s throughout here, but if someone wants to make it better, go for it! https://app-router-contentful.vercel.app/
51 lines
959 B
TypeScript
51 lines
959 B
TypeScript
import Image from 'next/image'
|
|
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
|
|
import { BLOCKS } from '@contentful/rich-text-types'
|
|
|
|
interface Asset {
|
|
sys: {
|
|
id: string
|
|
}
|
|
url: string
|
|
description: string
|
|
}
|
|
|
|
interface AssetLink {
|
|
block: Asset[]
|
|
}
|
|
|
|
interface Content {
|
|
json: any
|
|
links: {
|
|
assets: AssetLink
|
|
}
|
|
}
|
|
|
|
function RichTextAsset({
|
|
id,
|
|
assets,
|
|
}: {
|
|
id: string
|
|
assets: Asset[] | undefined
|
|
}) {
|
|
const asset = assets?.find((asset) => asset.sys.id === id)
|
|
|
|
if (asset?.url) {
|
|
return <Image src={asset.url} layout="fill" alt={asset.description} />
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
export function Markdown({ content }: { content: Content }) {
|
|
return documentToReactComponents(content.json, {
|
|
renderNode: {
|
|
[BLOCKS.EMBEDDED_ASSET]: (node: any) => (
|
|
<RichTextAsset
|
|
id={node.data.target.sys.id}
|
|
assets={content.links.assets.block}
|
|
/>
|
|
),
|
|
},
|
|
})
|
|
}
|