polynux
/
pchl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

parse and render content from pocketbase

This commit is contained in:
Guillaume Dorce 2023-05-24 22:56:08 +02:00
parent 23d6930bd6
commit 83558dbe50
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/test/[slug].tsx
View File

@ -15,11 +15,11 @@ function parseBoldText(text: string) {
return result; return result;
} }
function Paragraph({text}: {text: string}) { function Paragraph({ text }: { text: string }) {
return <p className='text-xl'>{parseBoldText(text)}</p> return <p className='text-xl'>{parseBoldText(text)}</p>
} }
function Heading({text, level}: {text: string, level: number}) { function Heading({ text, level }: { text: string, level: number }) {
switch (level) { switch (level) {
case 1: case 1:
return ( return (
@ -62,22 +62,22 @@ type Content = {
time: number, time: number,
} }
export default function Page({data}: {slug: string, data: PagesRecord<Content>}) { export default function Page({ data }: { slug: string, data: PagesRecord<Content> }) {
return ( return (
<Layout title={data.title}> <Layout title={data.title}>
<div className="container mx-auto p-8"> <div className="container mx-auto p-8">
<p>Here is the content rendered:</p> <p>Here is the content rendered:</p>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{data.content && data.content.blocks.map((block, index): (JSX.Element | null) => { {data.content && data.content.blocks.map((block, index): (JSX.Element | null) => {
switch (block.type) { switch (block.type) {
case 'paragraph': case 'paragraph':
return <Paragraph key={index} text={block.data.text} /> return <Paragraph key={index} text={block.data.text} />
case 'header': case 'header':
return <Heading key={index} text={block.data.text} level={block.data.level} /> return <Heading key={index} text={block.data.text} level={block.data.level} />
default: default:
return <p key={index}>Unknown block type: <pre>{JSON.stringify(block, null, 2)}</pre></p> return <p key={index}>Unknown block type: <pre>{JSON.stringify(block, null, 2)}</pre></p>
} }
})} })}
</div> </div>
</div> </div>
<pre>{JSON.stringify(data.content, null, 2)}</pre> <pre>{JSON.stringify(data.content, null, 2)}</pre>
@ -85,8 +85,8 @@ export default function Page({data}: {slug: string, data: PagesRecord<Content>})
) )
} }
export async function getServerSideProps({params}: {params: {slug: string}}) { export async function getServerSideProps({ params }: { params: { slug: string } }) {
const {data, error} = await getPageBySlug(params.slug); const { data, error } = await getPageBySlug(params.slug);
if (error || !data) { if (error || !data) {
return { return {
notFound: true, notFound: true,