@san-siva/blogkit-md 0.3.4 → 0.3.6

package/README.md

@@ -3,6 +3,8 @@ title: blogkit-md
 description: A React component library that converts markdown files into rendered blog posts for `@san-siva/blogkit`.
 ---
 
+# Hello world
+
 A React component library that converts markdown files into rendered blog posts for [`@san-siva/blogkit`](https://blogkit.santhoshsiva.dev).
 
 > Live preview of this README is available here [blogkit-md.santhoshsiva.dev](https://blogkit-md.santhoshsiva.dev)

package/dist/index.js

@@ -369,9 +369,18 @@ function renderSection(section, counters, key = -1) {
     )
   ] }, key);
 }
-var renderMarkdownAst = (ast) => {
+function stripRedundantSectionTitle(grouped, isTitleEmpty) {
+  if (!isTitleEmpty && grouped.length === 1) {
+    const [{ title, nodes, subsections }] = grouped;
+    if (title.length > 0 && (nodes.length > 0 || subsections.length > 0)) {
+      grouped[0].title = "";
+    }
+  }
+}
+var renderMarkdownAst = (ast, isTitleEmpty) => {
   const counters = { mermaid: 0 };
   const grouped = groupSections(ast.children);
+  stripRedundantSectionTitle(grouped, isTitleEmpty);
   return {
     sections: grouped.map(
       (section, index) => renderSection(section, counters, index)
@@ -404,9 +413,10 @@ var BlogPost = async ({ filePath, jsonLd }) => {
     ] }) });
   }
   const { ast, frontmatter } = parseMarkdown(content);
-  const rendered = renderMarkdownAst(ast);
   const title = frontmatter.title;
   const desc = frontmatter.description;
+  const isTitleEmpty = !title || title.trim() === "";
+  const rendered = renderMarkdownAst(ast, isTitleEmpty);
   return /* @__PURE__ */ jsxs2(Blog, { jsonLd, children: [
     title && /* @__PURE__ */ jsx3(BlogHeader, { title: [title], desc: desc ? [desc] : [] }),
     /* @__PURE__ */ jsx3(MarkdownSections, { rendered })
@@ -435,7 +445,7 @@ var readMarkdownFile = async (filePath) => {
     return { success: false, error: `File "${filePath}" is empty.` };
   }
   const { ast, frontmatter } = parseMarkdown(content);
-  const rendered = renderMarkdownAst(ast);
+  const rendered = renderMarkdownAst(ast, !frontmatter.title);
   return __spreadValues({ success: true, rendered }, frontmatter);
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit-md",
-	"version": "0.3.4",
+	"version": "0.3.6",
 	"description": "Converts markdown files into JSX blog posts for Blogkit",
 	"main": "./dist/index.js",
 	"exports": {
@@ -21,7 +21,7 @@
 		"fix": "eslint . --config eslint.config.ts --fix"
 	},
 	"dependencies": {
-		"@san-siva/blogkit": "^1.1.28",
+		"@san-siva/blogkit": "^1.1.29",
 		"@san-siva/stylekit": "^1.0.12",
 		"next": "^16.0.10",
 		"react": "^19.0.0",

package/src/components/BlogPost.tsx

@@ -41,11 +41,13 @@ const BlogPost = async ({ filePath, jsonLd }: BlogPostProperties) => {
 	}
 
 	const { ast, frontmatter } = parseMarkdown(content);
-	const rendered = renderMarkdownAst(ast);
-
 	const title = frontmatter.title;
 	const desc = frontmatter.description;
 
+	const isTitleEmpty = !title || title.trim() === '';
+
+	const rendered = renderMarkdownAst(ast, isTitleEmpty);
+
 	return (
 		<Blog jsonLd={jsonLd}>
 			{title && <BlogHeader title={[title]} desc={desc ? [desc] : []} />}

package/src/hooks/readMarkdownFile.ts

@@ -36,7 +36,7 @@ export const readMarkdownFile = async (
 	}
 
 	const { ast, frontmatter } = parseMarkdown(content);
-	const rendered = renderMarkdownAst(ast);
+	const rendered = renderMarkdownAst(ast, !frontmatter.title);
 
 	return { success: true, rendered, ...frontmatter };
 };

package/src/utils/renderMarkdown.test.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
+import type { Root } from 'mdast';
+
+vi.mock('@san-siva/stylekit/styles/index.module.scss', () => ({ default: {} }));
+vi.mock('@san-siva/blogkit', () => ({
+	BlogSection: 'BlogSection',
+	Callout: 'Callout',
+	CheckList: 'CheckList',
+	CodeBlock: 'CodeBlock',
+	Mermaid: 'Mermaid',
+	Table: 'Table',
+}));
+
+import { renderMarkdownAst, stripRedundantSectionTitle } from './renderMarkdown';
+import type { Section } from './groupSections';
+
+const makeSection = (
+	title: string,
+	nodes: Section['nodes'] = [],
+	subsections: Section[] = []
+): Section => ({
+	title,
+	headingLevel: 2,
+	nodes,
+	subsections,
+});
+
+const parse = (md: string): Root =>
+	unified().use(remarkParse).use(remarkGfm).parse(md) as Root;
+
+describe('stripRedundantSectionTitle', () => {
+	it('clears the section title when isTitleEmpty is false and the section has nodes', () => {
+		const grouped = [makeSection('My Title', [{ type: 'paragraph', children: [] }])];
+		stripRedundantSectionTitle(grouped, false);
+		expect(grouped[0].title).toBe('');
+	});
+
+	it('clears the section title when isTitleEmpty is false and the section has subsections', () => {
+		const sub = makeSection('Sub', [{ type: 'paragraph', children: [] }]);
+		const grouped = [makeSection('My Title', [], [sub])];
+		stripRedundantSectionTitle(grouped, false);
+		expect(grouped[0].title).toBe('');
+	});
+
+	it('does not clear the title when isTitleEmpty is true', () => {
+		const grouped = [makeSection('My Title', [{ type: 'paragraph', children: [] }])];
+		stripRedundantSectionTitle(grouped, true);
+		expect(grouped[0].title).toBe('My Title');
+	});
+
+	it('does not clear the title when there are multiple sections', () => {
+		const grouped = [
+			makeSection('Title A', [{ type: 'paragraph', children: [] }]),
+			makeSection('Title B', [{ type: 'paragraph', children: [] }]),
+		];
+		stripRedundantSectionTitle(grouped, false);
+		expect(grouped[0].title).toBe('Title A');
+		expect(grouped[1].title).toBe('Title B');
+	});
+
+	it('does not clear the title when the section has no nodes or subsections', () => {
+		const grouped = [makeSection('My Title')];
+		stripRedundantSectionTitle(grouped, false);
+		expect(grouped[0].title).toBe('My Title');
+	});
+
+	it('does not clear the title when it is already empty', () => {
+		const grouped = [makeSection('', [{ type: 'paragraph', children: [] }])];
+		stripRedundantSectionTitle(grouped, false);
+		expect(grouped[0].title).toBe('');
+	});
+});
+
+describe('renderMarkdownAst', () => {
+	it('returns an empty sections array for empty markdown', () => {
+		const result = renderMarkdownAst(parse(''), false);
+		expect(result.sections).toHaveLength(0);
+	});
+
+	it('returns one section for single-section markdown', () => {
+		const result = renderMarkdownAst(parse('## Section\n\nSome content'), false);
+		expect(result.sections).toHaveLength(1);
+	});
+
+	it('returns multiple sections for multi-section markdown', () => {
+		const result = renderMarkdownAst(parse('## One\n\n## Two\n\n## Three'), false);
+		expect(result.sections).toHaveLength(3);
+	});
+
+	it('strips the section title when isTitleEmpty is false and there is a single titled section', () => {
+		const result = renderMarkdownAst(parse('## Section\n\nSome content'), false);
+		const section = result.sections[0] as React.ReactElement;
+		expect(section.props.title).toBe('');
+	});
+
+	it('preserves the section title when isTitleEmpty is true', () => {
+		const result = renderMarkdownAst(parse('## Section\n\nSome content'), true);
+		const section = result.sections[0] as React.ReactElement;
+		expect(section.props.title).toBe('Section');
+	});
+
+	it('preserves titles of all sections when there are multiple sections', () => {
+		const result = renderMarkdownAst(parse('## One\n\n## Two'), false);
+		const titles = (result.sections as React.ReactElement[]).map(s => s.props.title);
+		expect(titles).toEqual(['One', 'Two']);
+	});
+});

package/src/utils/renderMarkdown.tsx

@@ -221,9 +221,27 @@ export type RenderedMarkdown = {
 	sections: React.ReactNode[];
 };
 
-export const renderMarkdownAst = (ast: Root): RenderedMarkdown => {
+export function stripRedundantSectionTitle(
+	grouped: Section[],
+	isTitleEmpty: boolean
+): void {
+	if (!isTitleEmpty && grouped.length === 1) {
+		const [{ title, nodes, subsections }] = grouped;
+		if (title.length > 0 && (nodes.length > 0 || subsections.length > 0)) {
+			grouped[0].title = '';
+		}
+	}
+}
+
+export const renderMarkdownAst = (
+	ast: Root,
+	isTitleEmpty: boolean
+): RenderedMarkdown => {
 	const counters: Counters = { mermaid: 0 };
 	const grouped = groupSections(ast.children);
+
+	stripRedundantSectionTitle(grouped, isTitleEmpty);
+
 	return {
 		sections: grouped.map((section, index) =>
 			renderSection(section, counters, index)