@san-siva/blogkit-md 0.3.22 → 0.3.24

package/dist/index.d.mts

@@ -1,13 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
 import { WithContext, Thing } from 'schema-dts';
-import React from 'react';
+
+type BlogPageProperties = {
+    children: ReactNode;
+};
+declare const BlogPage: ({ children }: BlogPageProperties) => react_jsx_runtime.JSX.Element;
 
 type BlogPostProperties = {
     filePath: string;
     jsonLd?: WithContext<Thing>;
     increasedWidthMode?: boolean;
+    isTocEnabled?: boolean;
 };
-declare const BlogPost: ({ filePath, jsonLd, increasedWidthMode, }: BlogPostProperties) => Promise<react_jsx_runtime.JSX.Element>;
+declare const BlogPost: ({ filePath, jsonLd, increasedWidthMode, isTocEnabled, }: BlogPostProperties) => Promise<react_jsx_runtime.JSX.Element>;
 
 type RenderedMarkdown = {
     sections: React.ReactNode[];
@@ -27,4 +33,4 @@ type MarkdownFileResult = {
 };
 declare const readMarkdownFile: (filePath: string | undefined) => Promise<MarkdownFileResult>;
 
-export { BlogPost, MarkdownSections, readMarkdownFile };
+export { BlogPage, BlogPost, MarkdownSections, readMarkdownFile };

package/dist/index.js

@@ -1,5 +1,43 @@
+// src/components/BlogPage.tsx
+import { Blog, CheckList } from "@san-siva/blogkit";
+import { useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STORAGE_KEY = "blogkit-md:increased-width-mode";
+var increasedWidthMode = typeof localStorage === "undefined" ? false : localStorage.getItem(STORAGE_KEY) === "true";
+var listeners = /* @__PURE__ */ new Set();
+var subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var getSnapshot = () => increasedWidthMode;
+var setIncreasedWidthMode = (value) => {
+  increasedWidthMode = value;
+  localStorage.setItem(STORAGE_KEY, String(value));
+  for (const listener of listeners) listener();
+};
+var BlogPage = ({ children }) => {
+  const checked = useSyncExternalStore(subscribe, getSnapshot, () => false);
+  return /* @__PURE__ */ jsxs(Blog, { increasedWidthMode: checked, children: [
+    /* @__PURE__ */ jsx(
+      CheckList,
+      {
+        items: [
+          {
+            id: "increased-width-mode",
+            isChecked: checked,
+            onClick: () => setIncreasedWidthMode(!checked),
+            children: /* @__PURE__ */ jsx("p", { children: "Increased width mode" })
+          }
+        ]
+      }
+    ),
+    children
+  ] });
+};
+var BlogPage_default = BlogPage;
+
 // src/components/BlogPost.tsx
-import { Blog, BlogHeader, Callout as Callout2 } from "@san-siva/blogkit";
+import { Blog as Blog2, BlogHeader, Callout as Callout2 } from "@san-siva/blogkit";
 import { readFile } from "fs/promises";
 import path from "path";
 
@@ -63,7 +101,7 @@ var parseMarkdown = (content) => {
 import {
   BlogSection,
   Callout,
-  CheckList,
+  CheckList as CheckList2,
   CodeBlock,
   Mermaid,
   Table
@@ -132,7 +170,7 @@ var groupSections = (nodes) => {
 
 // src/utils/renderPhrasingContent.tsx
 import styles from "@san-siva/stylekit/styles/index.module.scss";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function escapeHtml(text) {
   return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
@@ -172,7 +210,7 @@ function toHtmlString(nodes) {
 }
 function renderPhrasingContent(nodes) {
   if (nodes.some((node) => node.type === "html")) {
-    return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: toHtmlString(nodes) } });
+    return /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: toHtmlString(nodes) } });
   }
   return nodes.map((node, index) => {
     var _a;
@@ -181,22 +219,22 @@ function renderPhrasingContent(nodes) {
         return node.value;
       }
       case "strong": {
-        return /* @__PURE__ */ jsx("strong", { children: renderPhrasingContent(node.children) }, index);
+        return /* @__PURE__ */ jsx2("strong", { children: renderPhrasingContent(node.children) }, index);
       }
       case "emphasis": {
-        return /* @__PURE__ */ jsx("em", { children: renderPhrasingContent(node.children) }, index);
+        return /* @__PURE__ */ jsx2("em", { children: renderPhrasingContent(node.children) }, index);
       }
       case "inlineCode": {
-        return /* @__PURE__ */ jsx("code", { children: node.value }, index);
+        return /* @__PURE__ */ jsx2("code", { children: node.value }, index);
       }
       case "link": {
-        return /* @__PURE__ */ jsx("a", { href: node.url, className: styles["a--highlighted"], children: renderPhrasingContent(node.children) }, index);
+        return /* @__PURE__ */ jsx2("a", { href: node.url, className: styles["a--highlighted"], children: renderPhrasingContent(node.children) }, index);
       }
       case "break": {
-        return /* @__PURE__ */ jsx("br", {}, index);
+        return /* @__PURE__ */ jsx2("br", {}, index);
       }
       case "image": {
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           "img",
           {
             src: node.url,
@@ -215,7 +253,7 @@ function renderPhrasingContent(nodes) {
 
 // src/utils/renderMarkdown.tsx
 import styles2 from "@san-siva/stylekit/styles/index.module.scss";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function renderNode({
   node,
   key,
@@ -228,17 +266,17 @@ function renderNode({
   switch (node.type) {
     case "paragraph": {
       if (inList) {
-        return /* @__PURE__ */ jsx2("p", { children: renderPhrasingContent(node.children) }, key);
+        return /* @__PURE__ */ jsx3("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);
+      return /* @__PURE__ */ jsx3("p", { className: marginClass, children: renderPhrasingContent(node.children) }, key);
     }
     case "code": {
       if (node.lang === "mermaid") {
         const mermaidId = counters.mermaid++;
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(
           Mermaid,
           {
             id: `mermaid-${mermaidId}`,
@@ -249,7 +287,7 @@ function renderNode({
           key
         );
       }
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         CodeBlock,
         {
           language: (_a = node.lang) != null ? _a : "text",
@@ -261,10 +299,10 @@ function renderNode({
       );
     }
     case "heading": {
-      return /* @__PURE__ */ jsx2("p", { className: styles2["margin-bottom--2"], children: /* @__PURE__ */ jsx2("strong", { children: renderPhrasingContent(node.children) }) }, key);
+      return /* @__PURE__ */ jsx3("p", { className: styles2["margin-bottom--2"], children: /* @__PURE__ */ jsx3("strong", { children: renderPhrasingContent(node.children) }) }, key);
     }
     case "thematicBreak": {
-      return /* @__PURE__ */ jsx2("hr", { className: styles2["margin-bottom--2"] }, key);
+      return /* @__PURE__ */ jsx3("hr", { className: styles2["margin-bottom--2"] }, key);
     }
     case "table": {
       const [headerRow, ...bodyRows] = node.children;
@@ -272,9 +310,9 @@ function renderNode({
         (cell) => renderPhrasingContent(cell.children)
       );
       const rows = bodyRows.map(
-        (row) => row.children.map((cell, index) => /* @__PURE__ */ jsx2("p", { children: renderPhrasingContent(cell.children) }, index))
+        (row) => row.children.map((cell, index) => /* @__PURE__ */ jsx3("p", { children: renderPhrasingContent(cell.children) }, index))
       );
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         Table,
         {
           headers,
@@ -303,7 +341,7 @@ function renderNode({
           }
         }
       }
-      return /* @__PURE__ */ jsx2(Callout, { type: calloutType, hasMarginUp: true, hasMarginDown: true, children: /* @__PURE__ */ jsx2("div", { children: strippedChildren.map(
+      return /* @__PURE__ */ jsx3(Callout, { type: calloutType, hasMarginUp: true, hasMarginDown: true, children: /* @__PURE__ */ jsx3("div", { children: strippedChildren.map(
         (child, index) => renderNode({
           node: child,
           key: index,
@@ -320,17 +358,17 @@ function renderNode({
       if (isTaskList) {
         const items = node.children.map((item, index) => {
           const para = item.children.find((c) => c.type === "paragraph");
-          const children = (para == null ? void 0 : para.type) === "paragraph" ? /* @__PURE__ */ jsx2("p", { children: renderPhrasingContent(para.children) }) : /* @__PURE__ */ jsx2("p", {});
+          const children = (para == null ? void 0 : para.type) === "paragraph" ? /* @__PURE__ */ jsx3("p", { children: renderPhrasingContent(para.children) }) : /* @__PURE__ */ jsx3("p", {});
           return {
             id: String(index),
             isChecked: item.checked === true,
             children
           };
         });
-        return /* @__PURE__ */ jsx2(CheckList, { items, hasMarginUp: true, hasMarginDown: true }, key);
+        return /* @__PURE__ */ jsx3(CheckList2, { items, hasMarginUp: true, hasMarginDown: true }, key);
       }
       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(
+      return /* @__PURE__ */ jsx3(Tag, { className: styles2["margin-bottom--2"], children: node.children.map((item, index) => /* @__PURE__ */ jsx3("li", { children: item.children.map(
         (child, index2) => renderNode({
           node: child,
           key: index2,
@@ -350,8 +388,8 @@ function renderNodes(nodes, counters) {
   );
 }
 function renderSection(section, counters, key = -1) {
-  const title = section.titleNodes.length > 0 ? /* @__PURE__ */ jsx2("p", { children: renderPhrasingContent(section.titleNodes) }) : "";
-  return /* @__PURE__ */ jsxs(BlogSection, { title, children: [
+  const title = section.titleNodes.length > 0 ? /* @__PURE__ */ jsx3("p", { children: renderPhrasingContent(section.titleNodes) }) : "";
+  return /* @__PURE__ */ jsxs2(BlogSection, { title, children: [
     renderNodes(section.nodes, counters),
     section.subsections.map(
       (subsection, index) => renderSection(subsection, counters, index)
@@ -369,28 +407,29 @@ var renderMarkdownAst = (ast) => {
 };
 var MarkdownSections = ({
   rendered
-}) => /* @__PURE__ */ jsx2(Fragment, { children: rendered.sections });
+}) => /* @__PURE__ */ jsx3(Fragment, { children: rendered.sections });
 
 // src/components/BlogPost.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var BlogPost = async ({
   filePath,
   jsonLd,
-  increasedWidthMode
+  increasedWidthMode: increasedWidthMode2,
+  isTocEnabled
 }) => {
   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, { increasedWidthMode, children: /* @__PURE__ */ jsx3(Callout2, { type: "warning", children: /* @__PURE__ */ jsxs2("p", { children: [
+    return /* @__PURE__ */ jsx4(Blog2, { increasedWidthMode: increasedWidthMode2, isTocEnabled, children: /* @__PURE__ */ jsx4(Callout2, { type: "warning", children: /* @__PURE__ */ jsxs3("p", { children: [
       'Could not read file: "',
       filePath,
       '". Make sure the path is correct and the file exists.'
     ] }) }) });
   }
   if (!content.trim()) {
-    return /* @__PURE__ */ jsx3(Blog, { increasedWidthMode, children: /* @__PURE__ */ jsxs2(Callout2, { type: "warning", children: [
+    return /* @__PURE__ */ jsx4(Blog2, { increasedWidthMode: increasedWidthMode2, isTocEnabled, children: /* @__PURE__ */ jsxs3(Callout2, { type: "warning", children: [
       'File "',
       filePath,
       '" is empty.'
@@ -398,9 +437,9 @@ var BlogPost = async ({
   }
   const { ast, title, description: desc } = parseMarkdown(content);
   const rendered = renderMarkdownAst(ast);
-  return /* @__PURE__ */ jsxs2(Blog, { jsonLd, increasedWidthMode, children: [
-    title && /* @__PURE__ */ jsx3(BlogHeader, { title: [title], desc: desc ? [desc] : [] }),
-    /* @__PURE__ */ jsx3(MarkdownSections, { rendered })
+  return /* @__PURE__ */ jsxs3(Blog2, { jsonLd, increasedWidthMode: increasedWidthMode2, isTocEnabled, children: [
+    title && /* @__PURE__ */ jsx4(BlogHeader, { title: [title], desc: desc ? [desc] : [] }),
+    /* @__PURE__ */ jsx4(MarkdownSections, { rendered })
   ] });
 };
 var BlogPost_default = BlogPost;
@@ -430,6 +469,7 @@ var readMarkdownFile = async (filePath) => {
   return { success: true, rendered, title, description };
 };
 export {
+  BlogPage_default as BlogPage,
   BlogPost_default as BlogPost,
   MarkdownSections,
   readMarkdownFile

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit-md",
-	"version": "0.3.22",
+	"version": "0.3.24",
 	"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.43",
+		"@san-siva/blogkit": "^1.1.44",
 		"@san-siva/stylekit": "^1.0.14",
 		"next": "^16.0.10",
 		"react": "^19.0.0",

package/src/client.ts

@@ -0,0 +1 @@
+export { default as BlogPage } from './components/BlogPage';

package/src/components/BlogPage.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { Blog, CheckList } from '@san-siva/blogkit';
+import { useSyncExternalStore } from 'react';
+import type { ReactNode } from 'react';
+
+const STORAGE_KEY = 'blogkit-md:increased-width-mode';
+
+let increasedWidthMode =
+	typeof localStorage === 'undefined'
+		? false
+		: localStorage.getItem(STORAGE_KEY) === 'true';
+
+const listeners = new Set<() => void>();
+
+const subscribe = (listener: () => void) => {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+
+const getSnapshot = () => increasedWidthMode;
+
+const setIncreasedWidthMode = (value: boolean) => {
+	increasedWidthMode = value;
+	localStorage.setItem(STORAGE_KEY, String(value));
+	for (const listener of listeners) listener();
+};
+
+type BlogPageProperties = {
+	children: ReactNode;
+};
+
+const BlogPage = ({ children }: BlogPageProperties) => {
+	const checked = useSyncExternalStore(subscribe, getSnapshot, () => false);
+
+	return (
+		<Blog increasedWidthMode={checked}>
+			<CheckList
+				items={[
+					{
+						id: 'increased-width-mode',
+						isChecked: checked,
+						onClick: () => setIncreasedWidthMode(!checked),
+						children: <p>Increased width mode</p>,
+					},
+				]}
+			/>
+			{children}
+		</Blog>
+	);
+};
+
+export default BlogPage;

package/src/components/BlogPost.tsx

@@ -10,12 +10,14 @@ type BlogPostProperties = {
 	filePath: string;
 	jsonLd?: WithContext<Thing>;
 	increasedWidthMode?: boolean;
+	isTocEnabled?: boolean;
 };
 
 const BlogPost = async ({
 	filePath,
 	jsonLd,
 	increasedWidthMode,
+	isTocEnabled,
 }: BlogPostProperties) => {
 	const absolutePath = path.isAbsolute(filePath)
 		? filePath
@@ -26,7 +28,7 @@ const BlogPost = async ({
 		content = await readFile(absolutePath, 'utf8');
 	} catch {
 		return (
-			<Blog increasedWidthMode={increasedWidthMode}>
+			<Blog increasedWidthMode={increasedWidthMode} isTocEnabled={isTocEnabled}>
 				<Callout type="warning">
 					<p>
 						Could not read file: &quot;{filePath}&quot;. Make sure the path is
@@ -39,7 +41,7 @@ const BlogPost = async ({
 
 	if (!content.trim()) {
 		return (
-			<Blog increasedWidthMode={increasedWidthMode}>
+			<Blog increasedWidthMode={increasedWidthMode} isTocEnabled={isTocEnabled}>
 				<Callout type="warning">File &quot;{filePath}&quot; is empty.</Callout>
 			</Blog>
 		);
@@ -50,7 +52,7 @@ const BlogPost = async ({
 	const rendered = renderMarkdownAst(ast);
 
 	return (
-		<Blog jsonLd={jsonLd} increasedWidthMode={increasedWidthMode}>
+		<Blog jsonLd={jsonLd} increasedWidthMode={increasedWidthMode} isTocEnabled={isTocEnabled}>
 			{title && <BlogHeader title={[title]} desc={desc ? [desc] : []} />}
 			<MarkdownSections rendered={rendered} />
 		</Blog>

package/src/index.ts

@@ -1,3 +1,4 @@
+export { default as BlogPage } from './components/BlogPage';
 export { default as BlogPost } from './components/BlogPost';
 export { readMarkdownFile } from './hooks/readMarkdownFile';
 export { MarkdownSections } from './utils/renderMarkdown';