@san-siva/blogkit-md 0.2.1 → 0.2.2

package/dist/index.d.mts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WithContext, Thing } from 'schema-dts';
+import React from 'react';
+
+type BlogPostProperties = {
+    filePath: string;
+    jsonLd?: WithContext<Thing>;
+};
+declare const BlogPost: ({ filePath, jsonLd }: BlogPostProperties) => Promise<react_jsx_runtime.JSX.Element>;
+
+type Frontmatter = {
+    title?: string;
+    description?: string;
+};
+
+type RenderedMarkdown = {
+    sections: React.ReactNode[];
+};
+declare const MarkdownSections: ({ rendered, }: {
+    rendered: RenderedMarkdown;
+}) => React.ReactNode;
+
+type MarkdownFileResult = {
+    success: true;
+    rendered: RenderedMarkdown;
+    frontmatter: Frontmatter;
+} | {
+    success: false;
+    error: string;
+};
+declare const readMarkdownFile: (filePath: string | undefined) => Promise<MarkdownFileResult>;
+
+export { BlogPost, MarkdownSections, readMarkdownFile };

package/dist/index.mjs

@@ -0,0 +1,413 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/BlogPost.tsx
+import { Blog, BlogHeader, Callout as Callout2 } from "@san-siva/blogkit";
+import { readFile } from "fs/promises";
+import path from "path";
+
+// src/utils/parseMarkdown.ts
+import remarkFrontmatter from "remark-frontmatter";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
+import { parse as parseYaml } from "yaml";
+var parseMarkdown = (content) => {
+  var _a, _b;
+  const processor = unified().use(remarkParse).use(remarkGfm).use(remarkFrontmatter, ["yaml"]);
+  const ast = processor.parse(content);
+  let frontmatter = {};
+  if (((_a = ast.children[0]) == null ? void 0 : _a.type) === "yaml") {
+    const raw = ast.children[0].value;
+    const parsed = parseYaml(raw);
+    const title = (_b = parsed.title) != null ? _b : parsed.name;
+    frontmatter = {
+      title: typeof title === "string" ? title : void 0,
+      description: typeof parsed.description === "string" ? parsed.description : void 0
+    };
+    ast.children.shift();
+  }
+  return { ast, frontmatter };
+};
+
+// src/utils/renderMarkdown.tsx
+import {
+  BlogSection,
+  Callout,
+  CodeBlock,
+  Mermaid,
+  Table
+} from "@san-siva/blogkit";
+
+// src/utils/extractText.ts
+var extractText = (nodes) => nodes.map((node) => {
+  if (node.type === "text") return node.value;
+  if ("children" in node)
+    return extractText(node.children);
+  return "";
+}).join("");
+
+// src/utils/groupSections.ts
+var consumeNode = (nodes, index, sections, section) => {
+  const node = nodes.at(index);
+  if (!node) {
+    return sections;
+  }
+  const isHeading = node.type === "heading";
+  if (!isHeading) {
+    section.nodes.push(node);
+    return consumeNode(nodes, index + 1, sections, section);
+  }
+  const headingLevel = node.depth;
+  const isIncrementingHeading = headingLevel > section.headingLevel;
+  if (isIncrementingHeading) {
+    const subsection = {
+      title: extractText(node.children),
+      headingLevel,
+      nodes: [],
+      subsections: [],
+      previousSection: section
+    };
+    section.subsections.push(subsection);
+    return consumeNode(nodes, index + 1, sections, subsection);
+  }
+  if (!section.previousSection) {
+    const subSection = {
+      title: extractText(node.children),
+      headingLevel,
+      nodes: [],
+      subsections: [],
+      previousSection: void 0
+    };
+    sections.push(subSection);
+    return consumeNode(nodes, index + 1, sections, subSection);
+  }
+  return consumeNode(nodes, index, sections, section.previousSection);
+};
+var groupSections = (nodes) => {
+  const initialSection = {
+    title: "",
+    headingLevel: Infinity,
+    nodes: [],
+    subsections: [],
+    previousSection: void 0
+  };
+  const sections = [initialSection];
+  consumeNode(nodes, 0, sections, initialSection);
+  return sections.filter((s) => s.title !== "" || s.nodes.length > 0);
+};
+
+// src/utils/renderPhrasingContent.tsx
+import styles from "@san-siva/stylekit/styles/index.module.scss";
+import { jsx } from "react/jsx-runtime";
+function escapeHtml(text) {
+  return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function toHtmlString(nodes) {
+  return nodes.map((node) => {
+    var _a;
+    switch (node.type) {
+      case "text": {
+        return escapeHtml(node.value);
+      }
+      case "html": {
+        return node.value;
+      }
+      case "strong": {
+        return `<strong>${toHtmlString(node.children)}</strong>`;
+      }
+      case "emphasis": {
+        return `<em>${toHtmlString(node.children)}</em>`;
+      }
+      case "inlineCode": {
+        return `<code>${escapeHtml(node.value)}</code>`;
+      }
+      case "link": {
+        return `<a href="${escapeHtml(node.url)}">${toHtmlString(node.children)}</a>`;
+      }
+      case "break": {
+        return "<br>";
+      }
+      case "image": {
+        return `<img src="${escapeHtml(node.url)}" alt="${escapeHtml((_a = node.alt) != null ? _a : "")}" style="max-width:300px">`;
+      }
+      default: {
+        return "";
+      }
+    }
+  }).join("");
+}
+function renderPhrasingContent(nodes) {
+  if (nodes.some((node) => node.type === "html")) {
+    return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: toHtmlString(nodes) } });
+  }
+  return nodes.map((node, index) => {
+    var _a;
+    switch (node.type) {
+      case "text": {
+        return node.value;
+      }
+      case "strong": {
+        return /* @__PURE__ */ jsx("strong", { children: renderPhrasingContent(node.children) }, index);
+      }
+      case "emphasis": {
+        return /* @__PURE__ */ jsx("em", { children: renderPhrasingContent(node.children) }, index);
+      }
+      case "inlineCode": {
+        return /* @__PURE__ */ jsx("code", { children: node.value }, index);
+      }
+      case "link": {
+        return /* @__PURE__ */ jsx("a", { href: node.url, className: styles["a--highlighted"], children: renderPhrasingContent(node.children) }, index);
+      }
+      case "break": {
+        return /* @__PURE__ */ jsx("br", {}, index);
+      }
+      case "image": {
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: node.url,
+            alt: (_a = node.alt) != null ? _a : "",
+            style: { maxWidth: "300px" }
+          },
+          index
+        );
+      }
+      default: {
+        return null;
+      }
+    }
+  });
+}
+
+// src/utils/renderMarkdown.tsx
+import styles2 from "@san-siva/stylekit/styles/index.module.scss";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function renderNode({
+  node,
+  key,
+  nextNode,
+  inList = false,
+  inCallout = false
+}) {
+  var _a;
+  switch (node.type) {
+    case "paragraph": {
+      if (inList) {
+        return /* @__PURE__ */ jsx2("p", { children: renderPhrasingContent(node.children) }, key);
+      }
+      const isFollowedByParagraph = (nextNode == null ? void 0 : nextNode.type) === "paragraph";
+      const isLastInCallout = !nextNode && inCallout;
+      const marginClass = isFollowedByParagraph ? styles2["margin-bottom--1"] : isLastInCallout ? void 0 : styles2["margin-bottom--2"];
+      return /* @__PURE__ */ jsx2("p", { className: marginClass, children: renderPhrasingContent(node.children) }, key);
+    }
+    case "code": {
+      if (node.lang === "mermaid") {
+        return /* @__PURE__ */ jsx2(
+          Mermaid,
+          {
+            id: `mermaid-${key}`,
+            code: node.value,
+            hasMarginUp: true,
+            hasMarginDown: true
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsx2(
+        CodeBlock,
+        {
+          language: (_a = node.lang) != null ? _a : "text",
+          code: node.value,
+          hasMarginUp: true,
+          hasMarginDown: true
+        },
+        key
+      );
+    }
+    case "heading": {
+      return /* @__PURE__ */ jsx2("p", { className: styles2["margin-bottom--2"], children: /* @__PURE__ */ jsx2("strong", { children: renderPhrasingContent(node.children) }) }, key);
+    }
+    case "thematicBreak": {
+      return /* @__PURE__ */ jsx2("hr", { className: styles2["margin-bottom--2"] }, key);
+    }
+    case "table": {
+      const [headerRow, ...bodyRows] = node.children;
+      const headers = headerRow == null ? void 0 : headerRow.children.map(
+        (cell) => renderPhrasingContent(cell.children)
+      );
+      const rows = bodyRows.map(
+        (row) => row.children.map((cell, index) => /* @__PURE__ */ jsx2("p", { children: renderPhrasingContent(cell.children) }, index))
+      );
+      return /* @__PURE__ */ jsx2(
+        Table,
+        {
+          headers,
+          rows,
+          hasMarginUp: true,
+          hasMarginDown: true
+        },
+        key
+      );
+    }
+    case "blockquote": {
+      const children = node.children;
+      let calloutType = "info";
+      let strippedChildren = children;
+      const firstChild = children[0];
+      if ((firstChild == null ? void 0 : firstChild.type) === "paragraph") {
+        const firstInline = firstChild.children[0];
+        if ((firstInline == null ? void 0 : firstInline.type) === "text") {
+          if (firstInline.value.startsWith("!")) {
+            calloutType = "error";
+            const trimmed = firstInline.value.slice(1).trimStart();
+            strippedChildren = [
+              __spreadProps(__spreadValues({}, firstChild), {
+                children: [
+                  __spreadProps(__spreadValues({}, firstInline), { value: trimmed }),
+                  ...firstChild.children.slice(1)
+                ]
+              }),
+              ...children.slice(1)
+            ];
+          } else if (firstInline.value.startsWith("~")) {
+            calloutType = "warning";
+            const trimmed = firstInline.value.slice(1).trimStart();
+            strippedChildren = [
+              __spreadProps(__spreadValues({}, firstChild), {
+                children: [
+                  __spreadProps(__spreadValues({}, firstInline), { value: trimmed }),
+                  ...firstChild.children.slice(1)
+                ]
+              }),
+              ...children.slice(1)
+            ];
+          }
+        }
+      }
+      return /* @__PURE__ */ jsx2(Callout, { type: calloutType, hasMarginUp: true, hasMarginDown: true, children: strippedChildren.map(
+        (child, index) => renderNode({
+          node: child,
+          key: index,
+          nextNode: strippedChildren[index + 1],
+          inCallout: true
+        })
+      ) }, key);
+    }
+    case "list": {
+      const Tag = node.ordered ? "ol" : "ul";
+      return /* @__PURE__ */ jsx2(Tag, { className: styles2["margin-bottom--2"], children: node.children.map((item, index) => /* @__PURE__ */ jsx2("li", { children: item.children.map(
+        (child, index2) => renderNode({
+          node: child,
+          key: index2,
+          inList: true
+        })
+      ) }, index)) }, key);
+    }
+    default: {
+      return null;
+    }
+  }
+}
+function renderNodes(nodes) {
+  return nodes.map(
+    (node, index) => renderNode({ node, key: index, nextNode: nodes[index + 1] })
+  );
+}
+function renderSection(section, key = -1) {
+  var _a;
+  return /* @__PURE__ */ jsxs(BlogSection, { title: (_a = section == null ? void 0 : section.title) != null ? _a : "", children: [
+    renderNodes(section.nodes),
+    section.subsections.map(
+      (subsection, index) => renderSection(subsection, index)
+    )
+  ] }, key);
+}
+var renderMarkdownAst = (ast) => {
+  const grouped = groupSections(ast.children);
+  return {
+    sections: grouped.map((section, index) => renderSection(section, index))
+  };
+};
+var MarkdownSections = ({
+  rendered
+}) => /* @__PURE__ */ jsx2(Fragment, { children: rendered.sections });
+
+// src/components/BlogPost.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var BlogPost = async ({ filePath, jsonLd }) => {
+  const absolutePath = path.isAbsolute(filePath) ? filePath : path.join(process.cwd(), filePath);
+  let content;
+  try {
+    content = await readFile(absolutePath, "utf8");
+  } catch (e) {
+    return /* @__PURE__ */ jsx3(Blog, { children: /* @__PURE__ */ jsxs2(Callout2, { type: "warning", children: [
+      'Could not read file: "',
+      filePath,
+      '". Make sure the path is correct and the file exists.'
+    ] }) });
+  }
+  if (!content.trim()) {
+    return /* @__PURE__ */ jsx3(Blog, { children: /* @__PURE__ */ jsxs2(Callout2, { type: "warning", children: [
+      'File "',
+      filePath,
+      '" is empty.'
+    ] }) });
+  }
+  const { ast, frontmatter } = parseMarkdown(content);
+  const rendered = renderMarkdownAst(ast);
+  const title = frontmatter.title;
+  const desc = frontmatter.description;
+  return /* @__PURE__ */ jsxs2(Blog, { jsonLd, children: [
+    title && /* @__PURE__ */ jsx3(BlogHeader, { title: [title], desc: desc ? [desc] : [] }),
+    /* @__PURE__ */ jsx3(MarkdownSections, { rendered })
+  ] });
+};
+var BlogPost_default = BlogPost;
+
+// src/hooks/readMarkdownFile.ts
+import { readFile as readFile2 } from "fs/promises";
+import path2 from "path";
+var readMarkdownFile = async (filePath) => {
+  if (!filePath) {
+    return { success: false, error: "No file path provided." };
+  }
+  const absolutePath = path2.isAbsolute(filePath) ? filePath : path2.join(process.cwd(), filePath);
+  let content;
+  try {
+    content = await readFile2(absolutePath, "utf8");
+  } catch (e) {
+    return {
+      success: false,
+      error: `Could not read file: "${filePath}". Make sure the path is correct and the file exists.`
+    };
+  }
+  if (!content.trim()) {
+    return { success: false, error: `File "${filePath}" is empty.` };
+  }
+  const { ast, frontmatter } = parseMarkdown(content);
+  const rendered = renderMarkdownAst(ast);
+  return { success: true, rendered, frontmatter };
+};
+export {
+  BlogPost_default as BlogPost,
+  MarkdownSections,
+  readMarkdownFile
+};

package/package.json

@@ -1,12 +1,21 @@
 {
 	"name": "@san-siva/blogkit-md",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "Converts markdown files into JSX blog posts for Blogkit",
-	"main": "index.ts",
+	"main": "./dist/index.js",
 	"exports": {
-		".": "./index.ts"
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
 	},
+	"files": [
+		"dist",
+		"src"
+	],
 	"scripts": {
+		"build": "tsup",
+		"prepublishOnly": "npm ci && npm run lint && npm run test && npm run build",
 		"test": "vitest run",
 		"lint": "eslint . --config eslint.config.ts",
 		"fix": "eslint . --config eslint.config.ts --fix"
@@ -30,6 +39,7 @@
 		"@types/eslint": "^9.6.1",
 		"@types/eslint__js": "^9.14.0",
 		"@types/mdast": "^4.0.4",
+		"tsup": "^8.0.0",
 		"@types/node": "^22",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+	const styles: Record<string, string>;
+	export default styles;
+}

package/{utils → src/utils}/parseMarkdown.ts

@@ -24,8 +24,9 @@ export const parseMarkdown = (content: string): ParseResult => {
 	if (ast.children[0]?.type === 'yaml') {
 		const raw = (ast.children[0] as Yaml).value;
 		const parsed = parseYaml(raw) as Record<string, unknown>;
+		const title = parsed.title ?? parsed.name;
 		frontmatter = {
-			title: typeof parsed.title === 'string' ? parsed.title : undefined,
+			title: typeof title === 'string' ? title : undefined,
 			description: typeof parsed.description === 'string' ? parsed.description : undefined,
 		};
 		ast.children.shift();

package/.prettierrc.json

@@ -1,9 +0,0 @@
-{
-	"printWidth": 80,
-	"tabWidth": 2,
-	"singleQuote": true,
-	"trailingComma": "es5",
-	"useTabs": true,
-	"arrowParens": "avoid",
-	"semi": true
-}

package/eslint/common.config.ts

@@ -1,29 +0,0 @@
-import tseslint, { configs as tseslintConfigs } from 'typescript-eslint';
-
-import {
-	defaultExtends,
-	defaultPlugins,
-	defaultRules,
-	defaultSettings,
-	languageOptions,
-	testFiles,
-} from './utilities';
-
-export default tseslint.config(
-	{
-		ignores: ['node_modules/**', 'dist/**', '.next/**', 'next-env.d.ts'],
-	},
-	{
-		files: ['**/*.ts', '**/*.js'],
-		ignores: testFiles,
-		plugins: defaultPlugins,
-		extends: defaultExtends,
-		rules: defaultRules,
-		settings: defaultSettings,
-		languageOptions,
-	},
-	{
-		files: ['eslint.config.ts', 'eslint/**/*.ts'],
-		extends: [tseslintConfigs.disableTypeChecked],
-	}
-);

package/eslint/react.config.ts

@@ -1,20 +0,0 @@
-import tseslint from 'typescript-eslint';
-
-import {
-	languageOptions,
-	reactExtends,
-	reactPlugins,
-	reactRules,
-	reactSettings,
-	testFiles,
-} from './utilities';
-
-export default tseslint.config({
-	files: ['**/*.tsx', '**/*.jsx'],
-	ignores: testFiles,
-	plugins: reactPlugins,
-	extends: reactExtends,
-	rules: reactRules,
-	settings: reactSettings,
-	languageOptions,
-});