feat(blog): switch blog content rendering from Markdown to HTML

package.json

@@ -39,6 +39,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "astro": "^5.17.1",
     "astro-custom-toc": "^3.0.2",
+    "rehype-parse": "^9.0.1",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",

src/lib/content/types.ts

@@ -28,7 +28,7 @@ export interface BlogPost {
   tags: string[];
   categories: string[];
   category?: { name: string; slug: string } | undefined;
-  content: string;
+  content: string; // HTML (CMS) or Markdown (local)
   rendered?: { html: string; headings: BlogPostHeading[] } | undefined;
   seo?: BlogPostSeo | undefined;
   sitemapEligible: boolean;

src/lib/directus/markdown.ts

@@ -2,6 +2,7 @@ import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkGfm from 'remark-gfm';
 import remarkRehype from 'remark-rehype';
+import rehypeParse from 'rehype-parse';
 import rehypeSanitize from 'rehype-sanitize';
 import rehypeSlug from 'rehype-slug';
 import rehypeStringify from 'rehype-stringify';
@@ -64,6 +65,21 @@ const sanitizationSchema: Parameters<typeof rehypeSanitize>[0] & object = {
   },
 };
 
+const blogHtmlSanitizationSchema: Parameters<typeof rehypeSanitize>[0] & object = {
+  strip: ['script', 'style'],
+  tagNames: [
+    ...sanitizationSchema.tagNames!,
+    'iframe', 'mark', 'aside',
+  ],
+  attributes: {
+    ...sanitizationSchema.attributes,
+    '*': ['id', 'className', 'style'],
+    iframe: ['src', 'title', 'width', 'height', 'frameBorder', 'allowFullScreen', 'loading', 'allow'],
+    img: ['src', 'alt', 'title', 'width', 'height', 'loading'],
+  },
+  protocols: sanitizationSchema.protocols,
+};
+
 function extractHeadings(tree: Root): Heading[] {
   const headings: Heading[] = [];
 
@@ -123,3 +139,23 @@ export async function renderMarkdown(
     headings,
   };
 }
+
+const htmlProcessor = unified()
+  .use(rehypeParse, { fragment: true })
+  .use(rehypeSanitize, blogHtmlSanitizationSchema)
+  .use(rehypeSlug)
+  .use(rehypeStringify);
+
+export async function renderHtml(
+  content: string
+): Promise<{ html: string; headings: Heading[] }> {
+  const hast = htmlProcessor.parse(content);
+  const processed = await htmlProcessor.run(hast);
+  const headings = extractHeadings(processed as Root);
+  const html = htmlProcessor.stringify(processed as Parameters<typeof htmlProcessor.stringify>[0]);
+
+  return {
+    html: String(html),
+    headings,
+  };
+}

src/lib/directus/normalize.ts

@@ -1,7 +1,7 @@
 import type { DirectusBlogArticle, DirectusBlogCategory } from './types.js';
 import type { BlogPost, BlogCategory, ImageMeta } from '../content/types.js';
 import { resolveAssetUrl, assertNoTokenLeakage } from './assets.js';
-import { renderMarkdown } from './markdown.js';
+import { renderHtml } from './markdown.js';
 import { logger } from './logger.js';
 
 function resolveImage(
@@ -45,7 +45,7 @@ export async function normalizeArticle(raw: DirectusBlogArticle): Promise<BlogPo
       : new Date();
 
   const content = raw.content ?? '';
-  const rendered = content ? await renderMarkdown(content) : undefined;
+  const rendered = content ? await renderHtml(content) : undefined;
 
   const image = resolveImage(raw, 'featured_image_file', 'featured_image', 'Featured image');
 

src/lib/directus/types.ts

@@ -24,7 +24,7 @@ export interface DirectusBlogArticle {
   title: string;
   slug: string;
   short_description: string | null;
-  content: string | null;
+  content: string | null; // HTML
   author_slug: string | null;
   category: DirectusBlogCategory | null;
   featured_image_file: DirectusFile | null;

tests/directus/normalize.test.ts

@@ -7,15 +7,15 @@ vi.mock('../../src/lib/directus/assets', () => ({
 }));
 
 vi.mock('../../src/lib/directus/markdown', () => ({
-  renderMarkdown: vi.fn(),
+  renderHtml: vi.fn(),
 }));
 
 vi.mock('../../src/lib/directus/logger', () => ({
   logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
 }));
 
 import { resolveAssetUrl, assertNoTokenLeakage } from '../../src/lib/directus/assets';
-import { renderMarkdown } from '../../src/lib/directus/markdown';
+import { renderHtml } from '../../src/lib/directus/markdown';
 import { logger } from '../../src/lib/directus/logger';
 import {
   normalizeArticle,
@@ -24,15 +24,15 @@ import {
 } from '../../src/lib/directus/normalize';
 
 const mockResolveAssetUrl = resolveAssetUrl as ReturnType<typeof vi.fn>;
-const mockRenderMarkdown = renderMarkdown as ReturnType<typeof vi.fn>;
+const mockRenderHtml = renderHtml as ReturnType<typeof vi.fn>;
 const mockAssertNoTokenLeakage = assertNoTokenLeakage as ReturnType<typeof vi.fn>;
 const mockLoggerWarn = logger.warn as ReturnType<typeof vi.fn>;
 
 describe('CMS data normalization', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockResolveAssetUrl.mockReturnValue(null);
-    mockRenderMarkdown.mockResolvedValue({ html: '<p>rendered</p>', headings: [] });
+    mockRenderHtml.mockResolvedValue({ html: '<p>rendered</p>', headings: [] });
   });
 
   describe('normalizeArticle', () => {
@@ -101,13 +101,13 @@ describe('CMS data normalization', () => {
 
     it('renders content via markdown pipeline', async () => {
       console.log('[TEST:normalize] markdown rendering');
-      mockRenderMarkdown.mockResolvedValue({
+      mockRenderHtml.mockResolvedValue({
         html: '<h2>Hello</h2>',
         headings: [{ depth: 2, slug: 'hello', text: 'Hello' }],
       });
       const raw = createArticle({ content: '## Hello' });
       const post = await normalizeArticle(raw);
-      expect(mockRenderMarkdown).toHaveBeenCalledWith('## Hello');
+      expect(mockRenderHtml).toHaveBeenCalledWith('## Hello');
       expect(post.rendered).toEqual({
         html: '<h2>Hello</h2>',
         headings: [{ depth: 2, slug: 'hello', text: 'Hello' }],
@@ -127,7 +127,7 @@ describe('CMS data normalization', () => {
       const post = await normalizeArticle(raw);
       expect(post.content).toBe('');
       expect(post.rendered).toBeUndefined();
-      expect(mockRenderMarkdown).not.toHaveBeenCalled();
+      expect(mockRenderHtml).not.toHaveBeenCalled();
     });
 
     it('maps featured_image_file via resolveAssetUrl', async () => {