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:
Ilia Mashkov
2026-05-12 13:58:17 +03:00
parent 0a99a37bca
commit 301e7a2555
8 changed files with 201 additions and 17 deletions
@@ -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" />;
}