feat: RichText component for safe PocketBase HTML rendering
Add html-react-parser-backed RichText component that converts HTML strings from PocketBase rich-text fields into React elements without dangerouslySetInnerHTML. Replace raw <p> render in IntroSection and BioSection, and drop the invalid slug filters those collections lacked.
This commit is contained in:
@@ -1,23 +1,18 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import type { PageContentRecord } from '$shared/api';
|
||||
import { getFirstRecord } from '$shared/api';
|
||||
import { RichText } from '$shared/ui';
|
||||
|
||||
/**
|
||||
* Intro section component.
|
||||
* Displays primary introduction content from PocketBase.
|
||||
*/
|
||||
export default async function IntroSection() {
|
||||
const data = await getFirstRecord<PageContentRecord>('intro', {
|
||||
filter: 'slug = "intro"',
|
||||
});
|
||||
const data = await getFirstRecord<PageContentRecord>('intro');
|
||||
|
||||
if (!data) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p>{data.content}</p>
|
||||
</div>
|
||||
);
|
||||
return <RichText html={data.content} className="prose prose-lg max-w-none" />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user