@san-siva/blogkit 1.0.11 → 1.1.0

package/src/dynamicComponents/CodeBlockDynamic.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import 'prismjs/themes/prism-tomorrow.css';
+
+const SH = SyntaxHighlighter as any;
+
+import styles from '../styles/CodeBlock.module.scss';
+
+interface Properties {
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+	language?: string;
+	code?: string;
+}
+
+const CodeBlock = ({
+	language = 'javascript',
+	code = '',
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: Properties) => {
+	const [isCopyMode, setCopyMode] = useState(false);
+
+	const copyToClipboard = async () => {
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopyMode(true);
+			setTimeout(() => {
+				setCopyMode(false);
+			}, 1000);
+		} catch (error) {
+			console.error('Failed to copy:', error);
+		}
+	};
+
+	const lineNumberStyle = {
+		color: '#95a1b1',
+		fontSize: '0.9em',
+		paddingRight: '1em',
+		marginRight: '8px',
+	};
+
+	return (
+		<div
+			className={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${
+				hasMarginDown ? styles['margin-bottom--2'] : ''
+			}`}
+		>
+			<div className={styles['code-block__header']}>
+				<div className={styles['code-block__header__title']}>{language}</div>
+				<div
+					className={`${styles['code-block__header__copy']} ${
+						isCopyMode ? styles['code-block__header__copy--active'] : ''
+					}`}
+					onClick={copyToClipboard}
+				/>
+			</div>
+			<div className={styles['code-block__wrapper']}>
+				<SH
+					language={language}
+					style={dracula}
+					showLineNumbers
+					lineNumberStyle={lineNumberStyle}
+				>
+					{code}
+				</SH>
+			</div>
+		</div>
+	);
+};
+
+export default CodeBlock;

package/src/dynamicComponents/MermaidDynamic.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import mermaid from 'mermaid';
+
+import styles from '../styles/Mermaid.module.scss';
+
+interface MermaidProperties {
+	code: string;
+	id: string;
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+}
+
+mermaid.initialize({
+	startOnLoad: false,
+	theme: 'default',
+	timeline: {
+		useMaxWidth: true,
+		diagramMarginX: 0,
+	},
+	flowchart: {
+		useMaxWidth: true,
+		diagramPadding: 0,
+	},
+	sequence: {
+		useMaxWidth: true,
+		diagramMarginX: 0,
+	},
+});
+
+const Mermaid = ({
+	code = '',
+	id = '',
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: MermaidProperties) => {
+	const [enabled, setEnabled] = useState(false);
+	const mermaidReference = useRef<HTMLDivElement>(null);
+
+	const initializeMermaid = useCallback(async () => {
+		try {
+			if (!mermaidReference.current || !code) return;
+			const { svg, bindFunctions } = await mermaid.render(
+				`mermaid-diagram-${id}`,
+				code
+			);
+			if (!svg) return;
+			mermaidReference.current.innerHTML = svg || '';
+			bindFunctions?.(mermaidReference.current);
+			setEnabled(true);
+		} catch (error) {
+			console.error('Failed to render Mermaid diagram:', error);
+		}
+	}, [code, id]);
+
+	useEffect(() => {
+		if (!code || !mermaidReference.current) return;
+		const timer = setTimeout(async () => {
+			await initializeMermaid();
+		}, 100);
+		return () => clearTimeout(timer);
+	}, [code, initializeMermaid]);
+
+	return (
+		<div
+			className={`${styles.mermaid}
+				${hasMarginUp ? styles['margin-top--1'] : ''}
+				${hasMarginDown ? styles['margin-bottom--2'] : ''}`}
+		>
+			{enabled ? null : <p>Diagram Loading...</p>}
+			<div ref={mermaidReference} id={id}></div>
+		</div>
+	);
+};
+
+export default Mermaid;

package/src/dynamicComponents/TableDynamic.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import styles from '../styles/Table.module.scss';
+
+interface TableProperties {
+	rows?: ReactNode[][];
+	headers?: ReactNode[];
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+}
+
+const Table = ({
+	rows = [],
+	headers = [],
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: TableProperties) => {
+	const columnCount = headers.length;
+
+	return (
+		<div
+			className={`${styles.table}
+				${hasMarginUp ? styles['margin-top--1'] : ''}
+				${hasMarginDown ? styles['margin-bottom--2'] : ''}`}
+			style={{
+				gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+			}}
+		>
+			<div className={`${styles['table__header']}`}>
+				{headers.map((header, index) => (
+					<div
+						key={typeof header === 'string' ? header : index}
+						className={`${styles['table__header__cell']}`}
+					>
+						{header}
+					</div>
+				))}
+			</div>
+			{rows.map((row, index) => (
+				<div key={index} className={`${styles['table__row']}`}>
+					{row.map((cell, cellIndex) => (
+						<div
+							key={typeof cell === 'string' ? cell : cellIndex}
+							className={`${styles['table__row__cell']}`}
+						>
+							{cell}
+						</div>
+					))}
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default Table;

package/src/index.ts

@@ -8,8 +8,5 @@ export { default as Mermaid } from './components/Mermaid';
 export { default as BlogLink } from './components/BlogLink';
 export { default as Table } from './components/Table';
 
-// Types
-export type { ForwardedReference } from './components/Blog';
-
 // Utilities
 export { generateIdForBlogTitle, generateUrlForBlogTitle } from './utils';

package/src/staticComponents/BlogLinkStatic.tsx

@@ -0,0 +1,45 @@
+import styles from '../styles/BlogLink.module.scss';
+import { generateUrlForBlogTitle } from '../utils';
+
+interface Properties {
+	title: string;
+	desc?: string;
+	isInProgress?: boolean;
+	href?: string;
+}
+
+const BlogLinkStatic = ({ title = '', desc = '', isInProgress = false, href }: Properties) => {
+	const link = href || `/blog/${generateUrlForBlogTitle(title)}`;
+
+	if (isInProgress) return null;
+
+	return (
+		<a
+			className={styles['blog-link']}
+			href={link}
+			rel="noopener noreferrer"
+		>
+			<h6 className={styles['blog-link__title']}>{title}</h6>
+			<p className={styles['blog-link__description']}>{desc}</p>
+			<div className={styles['blog-link__read-more']}>
+				<p>Read More</p>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18px"
+					height="18px"
+					viewBox="0 0 24 24"
+					fill="none"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					stroke="transparent"
+				>
+					<line x1="5" y1="12" y2="12" x2="18"></line>
+					<polyline points="12 5, 19 12, 12 19" />
+				</svg>
+			</div>
+		</a>
+	);
+};
+
+export default BlogLinkStatic;

package/src/staticComponents/BlogSectionStatic.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import styles from '../styles/BlogSection.module.scss';
+import { generateIdForBlogTitle } from '../utils';
+
+interface BlogSectionStaticProperties {
+	title?: string;
+	category?: string;
+	children?: ReactNode;
+	increaseMarginBottom?: boolean;
+}
+
+const BlogSectionStatic = ({
+	title = '',
+	category = '',
+	children = null,
+	increaseMarginBottom = false,
+}: BlogSectionStaticProperties) => {
+	const titleWithCategory = category ? `${category} - ${title}` : title;
+	const id = generateIdForBlogTitle(titleWithCategory);
+
+	return (
+		<div
+			className={`${styles['blog-section']}
+				${
+					increaseMarginBottom
+						? styles['margin-bottom--9']
+						: styles['margin-bottom--6']
+				}`}
+			data-title={title}
+			data-id={id}
+		>
+			{title ? (
+				<h4 className={styles['blog-section__title']}>{title}</h4>
+			) : null}
+			{children}
+		</div>
+	);
+};
+
+export default BlogSectionStatic;

package/src/staticComponents/BlogStatic.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import styles from '../styles/Blog.module.scss';
+
+interface BlogStaticProperties {
+	children: ReactNode;
+}
+
+const BlogStatic = ({ children }: BlogStaticProperties) => {
+	return (
+		<div className={styles.blog}>
+			<div className={styles['blog__content']}>{children}</div>
+		</div>
+	);
+};
+
+export default BlogStatic;

package/src/staticComponents/CodeBlockStatic.tsx

@@ -0,0 +1,34 @@
+import styles from '../styles/CodeBlock.module.scss';
+
+interface Properties {
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+	language?: string;
+	code?: string;
+}
+
+const CodeBlockStatic = ({
+	language = 'javascript',
+	code = '',
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: Properties) => {
+	return (
+		<div
+			className={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${
+				hasMarginDown ? styles['margin-bottom--2'] : ''
+			} ${styles['code-block--static']}`}
+		>
+			<div className={styles['code-block__header']}>
+				<div className={styles['code-block__header__title']}>{language}</div>
+			</div>
+			<div className={styles['code-block__wrapper']}>
+				<pre>
+					<code>{code}</code>
+				</pre>
+			</div>
+		</div>
+	);
+};
+
+export default CodeBlockStatic;

package/src/staticComponents/MermaidStatic.tsx

@@ -0,0 +1,26 @@
+import CodeBlockStatic from './CodeBlockStatic';
+
+interface MermaidStaticProperties {
+	code: string;
+	id: string;
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+}
+
+const MermaidStatic = ({
+	code = '',
+	id = '',
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: MermaidStaticProperties) => {
+	return (
+		<CodeBlockStatic
+			language="mermaid"
+			code={code}
+			hasMarginUp={hasMarginUp}
+			hasMarginDown={hasMarginDown}
+		/>
+	);
+};
+
+export default MermaidStatic;

package/src/styles/Blog.module.scss

@@ -17,9 +17,15 @@
 	}
 
 	&__sidebar {
-		min-width: 400px;
 		position: sticky;
 		top: calc(var(--topbar-height) + #{styles.space(6)});
+		padding: styles.space(6);
+		min-width: calc(
+			#{styles.rem(380)} - #{styles.space(6)} - #{styles.space(6)}
+		);
+		border-radius: styles.$border-radius--1;
+		background-color: styles.$color--code;
+    box-shadow: 0 0 0 1px styles.$color--border, 0 styles.space(1) styles.space(2) 0 styles.$color--border;
 
 		margin-left: styles.space(9);
 
@@ -31,7 +37,7 @@
 			cursor: pointer;
 
 			animation: fadeInDown 0.3s ease-in-out;
-      transition: all 0.3s ease-in-out;
+			transition: all 0.3s ease-in-out;
 
 			&--active,
 			&:hover {
@@ -47,13 +53,17 @@
 				font-size: styles.$font-size--small;
 				font-weight: styles.$font-weight--400;
 			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 }
 
 @media (max-width: styles.rem(1302)) {
 	.blog {
-    display: block;
+		display: block;
 		&__sidebar {
 			display: none;
 		}
@@ -62,17 +72,17 @@
 
 // Margin utilities
 .margin-bottom--3 {
-  margin-bottom: styles.space(3);
+	margin-bottom: styles.space(3);
 }
 
 .margin-bottom-imp--2 {
-  margin-bottom: styles.space(2) !important;
+	margin-bottom: styles.space(2) !important;
 }
 
 .category__header {
-  font-weight: styles.$font-weight--500;
+	font-weight: styles.$font-weight--500;
 }
 
 .category__title {
-  // Styles defined in &__sidebar > .category__title above
+	// Styles defined in &__sidebar > .category__title above
 }

package/src/styles/CodeBlock.module.scss

@@ -1,11 +1,10 @@
 @use '@san-siva/stylekit/index.module.scss' as stylekit;
 
 .code-block {
-
 	code {
 		font-size: unset;
-    font-weight: unset;
-    background-color: unset;
+		font-weight: unset;
+		background-color: unset;
 		padding: unset;
 	}
 
@@ -49,52 +48,58 @@
 				font-style: unset;
 				line-height: stylekit.$line-height--normal;
 				color: unset;
-        text-align: left !important;
+				text-align: left !important;
 			}
 		}
 	}
 
-  &__header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: stylekit.rem(4);
-    padding-left: stylekit.rem(18);
-
-    &__title {
-      font-size: stylekit.$font-size--small;
-      color: stylekit.$color--code;
-      text-transform: capitalize;
-    }
-
-    &__copy {
-      height: stylekit.rem(32);
-      width: stylekit.rem(32);
-      background-image: url('../assets/copy.svg');
-      background-size: stylekit.rem(14) stylekit.rem(14);
-      background-position: center;
-      background-repeat: no-repeat;
-      cursor: pointer;
-      transition: all 0.2s ease-in-out;
-
-      &:hover {
-        background-color: stylekit.$color--grey-dark;
-        border-radius: 100%;
-      }
-
-      &--active {
-        background-image: url('../assets/done_copying.svg');
-        pointer-events: none;
-      }
-    }
-  }
+	&__header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: stylekit.rem(4);
+		padding-left: stylekit.rem(18);
+
+		&__title {
+			font-size: stylekit.$font-size--small;
+			color: stylekit.$color--code;
+			text-transform: capitalize;
+		}
+
+		&__copy {
+			height: stylekit.rem(32);
+			width: stylekit.rem(32);
+			background-image: url('../assets/copy.svg');
+			background-size: stylekit.rem(14) stylekit.rem(14);
+			background-position: center;
+			background-repeat: no-repeat;
+			cursor: pointer;
+			transition: all 0.2s ease-in-out;
+
+			&:hover {
+				background-color: stylekit.$color--grey-dark;
+				border-radius: 100%;
+			}
+
+			&--active {
+				background-image: url('../assets/done_copying.svg');
+				pointer-events: none;
+			}
+		}
+	}
 }
 
 .margin-top--1 {
-  margin-top: stylekit.space(1);
+	margin-top: stylekit.space(1);
 }
 
 .margin-bottom--2 {
-  margin-bottom: stylekit.space(2);
+	margin-bottom: stylekit.space(2);
+}
+
+.code-block--static code {
+	color: stylekit.$color--base !important;
+  font-family: stylekit.$font-family--code !important;
+  font-size: stylekit.$font-size--small !important;
 }

package/src/styles/CodeBlock.module.scss.d.ts

@@ -7,6 +7,7 @@ declare const styles: {
   readonly 'code-block__header__title': string;
   readonly 'code-block__header__copy': string;
   readonly 'code-block__header__copy--active': string;
+	readonly 'code-block--static': string;
   readonly 'margin-top--1': string;
   readonly 'margin-bottom--2': string;
 };

package/dist/cjs/node_modules/style-inject/dist/style-inject.es.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-exports.default = styleInject;
-//# sourceMappingURL=style-inject.es.js.map

package/dist/cjs/node_modules/style-inject/dist/style-inject.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-inject.es.js","sources":["../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;","x_google_ignoreList":[0]}

package/dist/esm/node_modules/style-inject/dist/style-inject.es.js

@@ -1,29 +0,0 @@
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-export { styleInject as default };
-//# sourceMappingURL=style-inject.es.js.map

package/dist/esm/node_modules/style-inject/dist/style-inject.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-inject.es.js","sources":["../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;","x_google_ignoreList":[0]}