@san-siva/blogkit 1.1.1 → 1.1.3

package/dist/esm/staticComponents/BlogHeaderStatic.js

@@ -0,0 +1,9 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
+import styles from '../styles/BlogHeader.module.scss.js';
+
+const renderLineBreaks = (array) => array.map((element, index, array) => (jsxs(Fragment$1, { children: [element, index === array.length - 1 ? null : jsx("br", {})] }, element)));
+const BlogHeader = ({ title, desc, isDescCite = true }) => (jsxs(Fragment, { children: [jsx("h1", { className: `${styles['blog-header']}`, children: renderLineBreaks(title) }), isDescCite ? (jsx("cite", { className: `${styles['blog-date']}`, children: renderLineBreaks(desc) })) : (jsx("p", { className: `${styles['blog-date']}`, children: renderLineBreaks(desc) }))] }));
+
+export { BlogHeader as default };
+//# sourceMappingURL=BlogHeaderStatic.js.map

package/dist/esm/staticComponents/BlogHeaderStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogHeaderStatic.js","sources":["../../../src/staticComponents/BlogHeaderStatic.tsx"],"sourcesContent":["import { Fragment } from 'react';\n\nimport styles from '../styles/BlogHeader.module.scss';\n\ninterface BlogProperties {\n\ttitle: string[];\n\tdesc: string[];\n\tisDescCite?: boolean;\n}\n\nconst renderLineBreaks = (array: string[]) =>\n\tarray.map((element, index, array) => (\n\t\t<Fragment key={element}>\n\t\t\t{element}\n\t\t\t{index === array.length - 1 ? null : <br />}\n\t\t</Fragment>\n\t));\n\nconst BlogHeader = ({ title, desc, isDescCite = true }: BlogProperties) => (\n\t\t<>\n\t\t\t<h1 className={`${styles['blog-header']}`}>{renderLineBreaks(title)}</h1>\n\t\t\t{isDescCite ? (\n\t\t\t\t<cite className={`${styles['blog-date']}`}>\n\t\t\t\t\t{renderLineBreaks(desc)}\n\t\t\t\t</cite>\n\t\t\t) : (\n\t\t\t\t<p className={`${styles['blog-date']}`}>{renderLineBreaks(desc)}</p>\n\t\t\t)}\n\t\t</>\n\t);\n\nexport default BlogHeader;\n"],"names":["_jsxs","Fragment","_jsx","_Fragment"],"mappings":";;;;AAUA,MAAM,gBAAgB,GAAG,CAAC,KAAe,KACxC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,MAC/BA,IAAA,CAACC,UAAQ,eACP,OAAO,EACP,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,GAAGC,GAAA,CAAA,IAAA,EAAA,EAAA,CAAM,KAF7B,OAAO,CAGX,CACX,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAkB,MACpEF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACCD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,EAAE,EAAA,QAAA,EAAG,gBAAgB,CAAC,KAAK,CAAC,EAAA,CAAM,EACxE,UAAU,IACVA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,CAAC,CAAA,CAAE,EAAA,QAAA,EACvC,gBAAgB,CAAC,IAAI,CAAC,EAAA,CACjB,KAEPA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,CAAC,CAAA,CAAE,EAAA,QAAA,EAAG,gBAAgB,CAAC,IAAI,CAAC,EAAA,CAAK,CACpE,CAAA,EAAA,CACC;;;;"}

package/dist/esm/staticComponents/CalloutStatic.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from '../styles/Callout.module.scss.js';
+
+const Callout = ({ children, type = 'info', hasMarginUp = false, hasMarginDown = false }) => {
+    const className = `${styles.callout} ${styles[`callout--${type}`]} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`;
+    return (jsxs("div", { className: className, children: [jsx("div", { className: styles.callout__icon }), jsx("div", { className: styles.callout__wrapper, children: children })] }));
+};
+
+export { Callout as default };
+//# sourceMappingURL=CalloutStatic.js.map

package/dist/esm/staticComponents/CalloutStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutStatic.js","sources":["../../../src/staticComponents/CalloutStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from '../styles/Callout.module.scss';\n\ninterface CalloutProperties {\n\tchildren?: ReactNode;\n\ttype: 'info' | 'warning' | 'error' | 'success';\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Callout = ({ children, type = 'info',\n\thasMarginUp = false,\n\thasMarginDown = false\n}: CalloutProperties) => {\n\tconst className = `${styles.callout} ${styles[`callout--${type}`]} ${\n\t\thasMarginUp ? styles['margin-top--1'] : ''\n\t} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`;\n\treturn (\n\t\t<div className={className}>\n\t\t\t<div className={styles.callout__icon}/>\n\t\t\t<div className={styles.callout__wrapper}>{children}</div>\n\t\t</div>\n\t);\n};\n\nexport default Callout;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAWA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,EACzC,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACF,KAAI;AACvB,IAAA,MAAM,SAAS,GAAG,CAAA,EAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,CAAA,SAAA,EAAY,IAAI,EAAE,CAAC,CAAA,CAAA,EAChE,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EACzC,CAAA,CAAA,EAAI,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE;IACrD,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,aACxBC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAG,EACvCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CACpD;AAER;;;;"}

package/dist/esm/staticComponents/TableStatic.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from '../styles/Table.module.scss.js';
+
+const Table = ({ rows = [], headers = [], hasMarginUp = false, hasMarginDown = false, }) => {
+    const columnCount = headers.length;
+    return (jsxs("div", { className: `${styles.table}
+				${hasMarginUp ? styles['margin-top--1'] : ''}
+				${hasMarginDown ? styles['margin-bottom--2'] : ''}`, style: {
+            gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+        }, children: [jsx("div", { className: `${styles['table__header']}`, children: headers.map((header, index) => (jsx("div", { className: `${styles['table__header__cell']}`, children: header }, typeof header === 'string' ? header : index))) }), rows.map((row, index) => (jsx("div", { className: `${styles['table__row']}`, children: row.map((cell, cellIndex) => (jsx("div", { className: `${styles['table__row__cell']}`, children: cell }, typeof cell === 'string' ? cell : cellIndex))) }, index)))] }));
+};
+
+export { Table as default };
+//# sourceMappingURL=TableStatic.js.map

package/dist/esm/staticComponents/TableStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStatic.js","sources":["../../../src/staticComponents/TableStatic.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styles from '../styles/Table.module.scss';\n\ninterface TableProperties {\n\trows?: ReactNode[][];\n\theaders?: ReactNode[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Table = ({\n\trows = [],\n\theaders = [],\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: TableProperties) => {\n\tconst columnCount = headers.length;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.table}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateColumns: `repeat(${columnCount}, 1fr)`,\n\t\t\t}}\n\t\t>\n\t\t\t<div className={`${styles['table__header']}`}>\n\t\t\t\t{headers.map((header, index) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={typeof header === 'string' ? header : index}\n\t\t\t\t\t\tclassName={`${styles['table__header__cell']}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{header}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{rows.map((row, index) => (\n\t\t\t\t<div key={index} className={`${styles['table__row']}`}>\n\t\t\t\t\t{row.map((cell, cellIndex) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={typeof cell === 'string' ? cell : cellIndex}\n\t\t\t\t\t\t\tclassName={`${styles['table__row__cell']}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cell}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default Table;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAUA,MAAM,KAAK,GAAG,CAAC,EACd,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACJ,KAAI;AACrB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM;AAElC,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,KAAK;MACvB,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE;AAC1C,IAAA,EAAA,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAA,CAAE,EACpD,KAAK,EAAE;YACN,mBAAmB,EAAE,CAAA,OAAA,EAAU,WAAW,CAAA,MAAA,CAAQ;SAClD,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,eAAe,CAAC,CAAA,CAAE,EAAA,QAAA,EAC1C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,GAAA,CAAA,KAAA,EAAA,EAEC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,qBAAqB,CAAC,CAAA,CAAE,EAAA,QAAA,EAE5C,MAAM,EAAA,EAHF,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,KAAK,CAI3C,CACN,CAAC,EAAA,CACG,EACL,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACpBA,GAAA,CAAA,KAAA,EAAA,EAAiB,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAE,EAAA,QAAA,EACnD,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MACxBA,GAAA,CAAA,KAAA,EAAA,EAEC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,kBAAkB,CAAC,CAAA,CAAE,EAAA,QAAA,EAEzC,IAAI,EAAA,EAHA,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,SAAS,CAI3C,CACN,CAAC,EAAA,EARO,KAAK,CAST,CACN,CAAC,CAAA,EAAA,CACG;AAER;;;;"}

package/dist/types/dynamicComponents/BlogDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,SAAS,EAAiB,MAAM,OAAO,CAAC;AAIlE,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC5B;AAgBD,QAAA,MAAM,IAAI,GAAI,qBAAyC,cAAc,4CA4NpE,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,SAAS,EAAiB,MAAM,OAAO,CAAC;AAIlE,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC5B;AAgBD,QAAA,MAAM,IAAI,GAAI,qBAAyC,cAAc,4CAkNpE,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/dynamicComponents/BlogSectionDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,+FA8DhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,+FA8DhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/staticComponents/BlogHeaderStatic.d.ts

@@ -0,0 +1,8 @@
+interface BlogProperties {
+    title: string[];
+    desc: string[];
+    isDescCite?: boolean;
+}
+declare const BlogHeader: ({ title, desc, isDescCite }: BlogProperties) => import("react/jsx-runtime").JSX.Element;
+export default BlogHeader;
+//# sourceMappingURL=BlogHeaderStatic.d.ts.map

package/dist/types/staticComponents/BlogHeaderStatic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogHeaderStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogHeaderStatic.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACvB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAUD,QAAA,MAAM,UAAU,GAAI,6BAAoC,cAAc,4CAWpE,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/types/staticComponents/CalloutStatic.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+interface CalloutProperties {
+    children?: ReactNode;
+    type: 'info' | 'warning' | 'error' | 'success';
+    hasMarginUp?: boolean;
+    hasMarginDown?: boolean;
+}
+declare const Callout: ({ children, type, hasMarginUp, hasMarginDown }: CalloutProperties) => import("react/jsx-runtime").JSX.Element;
+export default Callout;
+//# sourceMappingURL=CalloutStatic.d.ts.map

package/dist/types/staticComponents/CalloutStatic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/CalloutStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,iBAAiB;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,OAAO,GAAI,gDAGd,iBAAiB,4CAUnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/staticComponents/TableStatic.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface TableProperties {
+    rows?: ReactNode[][];
+    headers?: ReactNode[];
+    hasMarginUp?: boolean;
+    hasMarginDown?: boolean;
+}
+declare const Table: ({ rows, headers, hasMarginUp, hasMarginDown, }: TableProperties) => import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=TableStatic.d.ts.map

package/dist/types/staticComponents/TableStatic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/TableStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,UAAU,eAAe;IACxB,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,KAAK,GAAI,gDAKZ,eAAe,4CAoCjB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@san-siva/blogkit",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/BlogHeader.tsx

@@ -1,4 +1,4 @@
-import BlogHeaderDynamic from '../dynamicComponents/BlogHeaderDynamic';
+import BlogHeaderStatic from '../staticComponents/BlogHeaderStatic';
 
 interface BlogHeaderProperties {
 	title: string[];
@@ -12,7 +12,7 @@ const BlogHeader = ({
 	isDescCite = true,
 }: BlogHeaderProperties) => {
 	return (
-		<BlogHeaderDynamic title={title} desc={desc} isDescCite={isDescCite} />
+		<BlogHeaderStatic title={title} desc={desc} isDescCite={isDescCite} />
 	);
 };
 

package/src/components/Callout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import CalloutDynamic from '../dynamicComponents/CalloutDynamic';
+import CalloutStatic from '../staticComponents/CalloutStatic';
 
 interface CalloutProperties {
 	children?: ReactNode;
@@ -15,13 +15,13 @@ const Callout = ({
 	hasMarginDown = false,
 }: CalloutProperties) => {
 	return (
-		<CalloutDynamic
+		<CalloutStatic
 			type={type}
 			hasMarginUp={hasMarginUp}
 			hasMarginDown={hasMarginDown}
 		>
 			{children}
-		</CalloutDynamic>
+		</CalloutStatic>
 	);
 };
 

package/src/components/Table.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import TableDynamic from '../dynamicComponents/TableDynamic';
+import TableStatic from '../staticComponents/TableStatic';
 
 interface TableProperties {
 	rows?: ReactNode[][];
@@ -15,7 +15,7 @@ const Table = ({
 	hasMarginDown = false,
 }: TableProperties) => {
 	return (
-		<TableDynamic
+		<TableStatic
 			rows={rows}
 			headers={headers}
 			hasMarginUp={hasMarginUp}

package/src/dynamicComponents/BlogDynamic.tsx

@@ -66,16 +66,6 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 		[]
 	);
 
-	const debounceShowTOC = useCallback(() => {
-		if (showTOC) return;
-		if (showTOCTimerRef.current) {
-			clearTimeout(showTOCTimerRef.current);
-		}
-		showTOCTimerRef.current = setTimeout(() => {
-			setShowTOC(true);
-		}, 200);
-	}, [showTOC]);
-
 	const updateCategoryTitles = useCallback(() => {
 		const now = Date.now();
 		const newCategoryTitles = new Map<string, CategoryTitleValue>();
@@ -100,11 +90,11 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 		if (newCategoryTitles.size === 0) return;
 
 		setCategoryTitles(newCategoryTitles);
-		debounceShowTOC();
+		if (!showTOC) setShowTOC(true);
 
 		if (visibleTitle) return;
 		setVisibleTitle(firstSectionId);
-	}, [visibleTitle, sortByDomPosition]);
+	}, [visibleTitle, sortByDomPosition, showTOC, setShowTOC]);
 
 	const debounceUpdateCategoryTitles = useCallback(() => {
 		// Clear existing timer and set a new one to batch updates
@@ -113,7 +103,7 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 		}
 		updateTimerRef.current = setTimeout(() => {
 			updateCategoryTitles();
-		}, 50);
+		}, 200);
 	}, [updateCategoryTitles]);
 
 	useEffect(() => {

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
 	Children,
 	cloneElement,

package/src/styles/Blog.module.scss

@@ -1,12 +1,10 @@
 @use '@san-siva/stylekit/index.module.scss' as styles;
 
 .blog {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	justify-content: flex-start;
-	max-width: unset;
 	width: 100%;
+	display: grid;
+	grid-template-columns: max-content #{styles.rem(320)};
+	grid-gap: styles.space(8);
 
 	> * {
 		max-width: unset;
@@ -18,6 +16,7 @@
 
 	&__sidebar {
 		position: sticky;
+		height: fit-content;
 		top: calc(var(--topbar-height) + #{styles.space(6)});
 		padding: styles.space(6);
 		min-width: calc(
@@ -29,8 +28,6 @@
 			0 0 0 1px styles.$color--border,
 			0 styles.space(1) styles.space(2) 0 styles.$color--border;
 
-		margin-left: styles.space(9);
-
 		> .category__title {
 			display: block;
 			margin-bottom: styles.space(1);
@@ -63,7 +60,12 @@
 	}
 }
 
-@media (max-width: styles.rem(1302)) {
+$breakpoint: calc(
+	#{styles.rem(120)} + #{styles.rem(780)} + #{styles.space(8)} +
+		#{styles.rem(320)} + #{styles.rem(120)}
+);
+
+@media (max-width: $breakpoint) {
 	.blog {
 		display: block;
 		&__sidebar {

package/src/styles/CodeBlock.module.scss

@@ -1,5 +1,7 @@
 @use '@san-siva/stylekit/index.module.scss' as stylekit;
 
+$code-block-background-color: #282a36;
+
 .code-block {
 	code {
 		font-size: unset;
@@ -8,7 +10,7 @@
 		padding: unset;
 	}
 
-	background-color: #282a36 !important;
+	background-color: $code-block-background-color !important;
 	filter: stylekit.$color--shadow-dark;
 	border-radius: stylekit.$border-radius;
 
@@ -26,6 +28,23 @@
 
 		overflow-x: auto;
 
+		// Custom scrollbar styling
+		scrollbar-width: thin;
+		scrollbar-color: stylekit.$color--grey-dark $code-block-background-color;
+
+		&::-webkit-scrollbar {
+			height: 8px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: $code-block-background-color;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: stylekit.$color--grey-dark;
+			border-radius: 4px;
+		}
+
 		padding-top: 0px;
 		padding-right: stylekit.rem(18);
 		padding-bottom: stylekit.rem(18);
@@ -101,5 +120,5 @@
 .code-block--static code {
 	color: stylekit.$color--base !important;
   font-family: stylekit.$font-family--code !important;
-  font-size: stylekit.$font-size--small !important;
+  font-size: stylekit.$font-size--p-small !important;
 }