@san-siva/blogkit 1.0.12 → 1.1.0

package/src/components/Mermaid.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { lazy, Suspense } from 'react';
+import MermaidStatic from '../staticComponents/MermaidStatic';
 
-import mermaid from 'mermaid';
-
-import styles from '../styles/Mermaid.module.scss';
+const MermaidDynamic = lazy(
+	() => import('../dynamicComponents/MermaidDynamic')
+);
 
 interface MermaidProperties {
 	code: string;
@@ -13,65 +14,30 @@ interface MermaidProperties {
 	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'] : ''}`}
+		<Suspense
+			fallback={
+				<MermaidStatic
+					code={code}
+					id={id}
+					hasMarginUp={hasMarginUp}
+					hasMarginDown={hasMarginDown}
+				/>
+			}
 		>
-			{enabled ? null : <p>Diagram Loading...</p>}
-			<div ref={mermaidReference} id={id}></div>
-		</div>
+			<MermaidDynamic
+				code={code}
+				id={id}
+				hasMarginUp={hasMarginUp}
+				hasMarginDown={hasMarginDown}
+			/>
+		</Suspense>
 	);
 };
 

package/src/components/Table.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import styles from '../styles/Table.module.scss';
+import TableDynamic from '../dynamicComponents/TableDynamic';
 
 interface TableProperties {
 	rows?: ReactNode[][];
@@ -14,40 +14,13 @@ const Table = ({
 	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>
+		<TableDynamic
+			rows={rows}
+			headers={headers}
+			hasMarginUp={hasMarginUp}
+			hasMarginDown={hasMarginDown}
+		/>
 	);
 };
 

package/src/components/index.ts

@@ -6,5 +6,3 @@ export { default as Callout } from './Callout';
 export { default as Mermaid } from './Mermaid';
 export { default as BlogLink } from './BlogLink';
 export { default as Table } from './Table';
-
-export type { ForwardedReference } from './Blog';

package/src/dynamicComponents/BlogDynamic.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import {
+	Children,
+	cloneElement,
+	isValidElement,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+
+import type { MouseEvent, ReactNode, RefAttributes } from 'react';
+
+import styles from '../styles/Blog.module.scss';
+
+interface BlogProperties {
+	children: ReactNode;
+	title?: string;
+}
+
+export interface ForwardedReference {
+	parentRef: HTMLDivElement;
+	childRefs: HTMLDivElement[];
+}
+
+interface SectionReferenceValue {
+	el: HTMLElement;
+	title: string;
+	isSubSection: boolean;
+}
+
+type SectionReference = Map<string, SectionReferenceValue>;
+
+interface CategoryTitleValue extends SectionReferenceValue {
+	lastUpdatedAt: number;
+}
+
+type CategoryTitle = Map<string, CategoryTitleValue>;
+
+type AddPaddingTopTimerReference = ReturnType<typeof setTimeout> | null;
+
+const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
+	const addPaddingTopTimerReference = useRef<AddPaddingTopTimerReference>(null);
+	const highlightCategoryTimerReference =
+		useRef<AddPaddingTopTimerReference>(null);
+
+	const clearTimers = (
+		addPaddingTopTimerReference_: AddPaddingTopTimerReference,
+		highlightCategoryTimerReference_: AddPaddingTopTimerReference
+	) => {
+		if (addPaddingTopTimerReference_) {
+			clearTimeout(addPaddingTopTimerReference_);
+		}
+		if (highlightCategoryTimerReference_) {
+			clearTimeout(highlightCategoryTimerReference_);
+		}
+	};
+
+	const sectionReferences = useRef<SectionReference>(new Map());
+	const [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(
+		new Map()
+	);
+	const [visibleTitle, setVisibleTitle] = useState<string | null>(null);
+	const updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const sortByDomPosition = useCallback(
+		([, a]: [string, SectionReferenceValue], [, b]: [string, SectionReferenceValue]) => {
+			const position = a.el.compareDocumentPosition(b.el);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+				return -1; // a comes before b
+			} else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+				return 1; // b comes before a
+			}
+			return 0;
+		},
+		[]
+	);
+
+	const updateCategoryTitles = useCallback(() => {
+		const now = Date.now();
+		const newCategoryTitles = new Map<string, CategoryTitleValue>();
+
+		// Sort sections by their DOM position to maintain correct order
+		const sectionsArray = Array.from(sectionReferences.current.entries());
+		sectionsArray.sort(sortByDomPosition);
+
+		let firstSectionId: string | null = null;
+		for (const [id, { title, el, isSubSection }] of sectionsArray) {
+			if (!firstSectionId) {
+				firstSectionId = id;
+			}
+			newCategoryTitles.set(id, {
+				el,
+				title,
+				lastUpdatedAt: now,
+				isSubSection,
+			});
+		}
+
+		if (newCategoryTitles.size > 0) {
+			setCategoryTitles(newCategoryTitles);
+			if (!visibleTitle) {
+				setVisibleTitle(firstSectionId);
+			}
+		}
+	}, [visibleTitle, sortByDomPosition]);
+
+	const debounceUpdateCategoryTitles = useCallback(() => {
+		// Clear existing timer and set a new one to batch updates
+		if (updateTimerRef.current) {
+			clearTimeout(updateTimerRef.current);
+		}
+		updateTimerRef.current = setTimeout(() => {
+			updateCategoryTitles();
+		}, 50);
+	}, [updateCategoryTitles]);
+
+	useEffect(() => {
+		const observers = new Map<string, IntersectionObserver>();
+		for (const [id, { el }] of categoryTitles) {
+			const observer = new IntersectionObserver(
+				([entry]) => {
+					if (!entry.isIntersecting) return;
+					setVisibleTitle(visibleId => {
+						if (visibleId === id && !entry.isIntersecting) return null;
+						if (entry.isIntersecting) return id;
+						return visibleId;
+					});
+				},
+				{ threshold: 0.1 }
+			);
+			observers.set(id, observer);
+			observer.observe(el);
+		}
+		return () => {
+			for (const observer of observers.values()) {
+				observer.disconnect();
+			}
+		};
+	}, [categoryTitles.size]);
+
+	useEffect(() => {
+		return () => {
+			clearTimers(
+				addPaddingTopTimerReference.current,
+				highlightCategoryTimerReference.current
+			);
+			if (updateTimerRef.current) {
+				clearTimeout(updateTimerRef.current);
+			}
+		};
+	}, []);
+
+	const handleSectionReference = useCallback((element: ForwardedReference) => {
+		if (!element) return;
+		const { parentRef, childRefs } = element;
+
+		// Add parent section reference
+		if (parentRef) {
+			const id = parentRef.dataset.id;
+			const title = parentRef.dataset.title;
+			if (id && title) {
+				sectionReferences.current.set(id, {
+					el: parentRef,
+					title,
+					isSubSection: false,
+				});
+			}
+		}
+
+		// Add child section references
+		if (Array.isArray(childRefs)) {
+			for (const childRef of childRefs) {
+				if (!childRef) continue;
+				const id = childRef.dataset.id;
+				const title = childRef.dataset.title;
+				if (id && title) {
+					sectionReferences.current.set(id, {
+						el: childRef,
+						title,
+						isSubSection: true,
+					});
+				}
+			}
+		}
+
+		debounceUpdateCategoryTitles();
+	}, [debounceUpdateCategoryTitles]);
+
+	const handleClickCategoryTitle = (
+		error: MouseEvent<HTMLParagraphElement>
+	) => {
+		const id = error.currentTarget.dataset.id;
+		const index = error.currentTarget.dataset.idx;
+		if (!id || !index) return;
+
+		const { el } = categoryTitles.get(id) || {};
+		if (!el) return;
+
+		const top = el.getBoundingClientRect().top + document.body.scrollTop - 100;
+		document.body.scrollTo({
+			top,
+			behavior: 'smooth',
+		});
+
+		const timer = setTimeout(() => {
+			setVisibleTitle(id);
+			clearTimeout(timer);
+		}, 1000);
+	};
+
+
+	return (
+		<div className={styles.blog}>
+			<div className={styles['blog__content']}>
+				{Children.map(children, child => {
+					if (!isValidElement(child)) return child;
+					return cloneElement(child, {
+						ref: handleSectionReference,
+					} as RefAttributes<ForwardedReference>);
+				})}
+			</div>
+			<div className={styles['blog__sidebar']}>
+				<p
+					className={`${styles['margin-bottom--3']} ${styles['category__header']}`}
+				>
+					{title}
+				</p>
+				{[...categoryTitles].map(
+					([id, { title, isSubSection }], index, array) => {
+						const isNextSectionSubSection = array[index + 1]?.[1]?.isSubSection;
+						return (
+							<p
+								key={id}
+								data-idx={index}
+								data-id={id}
+								className={`${styles['category__title']} ${
+									id === visibleTitle ? styles['category__title--active'] : ''
+								} ${isSubSection ? styles['category__title--sub'] : ''} ${
+									isSubSection && !isNextSectionSubSection
+										? styles['margin-bottom-imp--2']
+										: ''
+								}`}
+								onClick={handleClickCategoryTitle}
+							>
+								{title}
+							</p>
+						);
+					}
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Blog;

package/src/dynamicComponents/BlogHeaderDynamic.tsx

@@ -0,0 +1,32 @@
+import { Fragment } from 'react';
+
+import styles from '../styles/BlogHeader.module.scss';
+
+interface BlogProperties {
+	title: string[];
+	desc: string[];
+	isDescCite?: boolean;
+}
+
+const renderLineBreaks = (array: string[]) =>
+	array.map((element, index, array) => (
+		<Fragment key={element}>
+			{element}
+			{index === array.length - 1 ? null : <br />}
+		</Fragment>
+	));
+
+const BlogHeader = ({ title, desc, isDescCite = true }: BlogProperties) => (
+		<>
+			<h1 className={`${styles['blog-header']}`}>{renderLineBreaks(title)}</h1>
+			{isDescCite ? (
+				<cite className={`${styles['blog-date']}`}>
+					{renderLineBreaks(desc)}
+				</cite>
+			) : (
+				<p className={`${styles['blog-date']}`}>{renderLineBreaks(desc)}</p>
+			)}
+		</>
+	);
+
+export default BlogHeader;

package/src/dynamicComponents/BlogLinkDynamic.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+
+import { animated, useSpring } from '@react-spring/web';
+
+import styles from '../styles/BlogLink.module.scss';
+
+import { generateUrlForBlogTitle } from '../utils';
+
+interface Properties {
+	title: string;
+	desc?: string;
+	isInProgress?: boolean;
+	href?: string;
+}
+
+const DEFAULT_LINE_END = 18;
+const DEFAULT_POLYLINE_POINTS = '12 5, 19 12, 12 19';
+const MOVED_POLYLINE_POINTS = '15 5, 22 12, 15 19';
+
+const BlogLink = ({ title = '', desc = '', isInProgress = false, href }: Properties) => {
+	const [isHovered, setIsHovered] = useState(false);
+
+	const link = href || `/blog/${generateUrlForBlogTitle(title)}`;
+
+	const svgColor = useSpring({
+		stroke: isHovered ? '#4242fa' : 'transparent',
+	});
+
+	const polyLine = useSpring({
+		points: isHovered ? MOVED_POLYLINE_POINTS : DEFAULT_POLYLINE_POINTS,
+		config: { duration: 200 },
+	});
+
+	const lineEnd = useSpring({
+		x2: isHovered ? `${DEFAULT_LINE_END + 2}` : `${DEFAULT_LINE_END}`,
+		config: { duration: 200 },
+	});
+
+	if (isInProgress) return null;
+
+	return (
+		<a
+			className={styles['blog-link']}
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
+			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>
+				<animated.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"
+					style={svgColor as any}
+				>
+					<animated.line x1="5" y1="12" y2="12" x2={lineEnd.x2 as any}></animated.line>
+					<animated.polyline points={polyLine.points as any} />
+				</animated.svg>
+			</div>
+		</a>
+	);
+};
+
+export default BlogLink;

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -0,0 +1,90 @@
+import {
+	Children,
+	cloneElement,
+	forwardRef,
+	isValidElement,
+	useImperativeHandle,
+	useRef,
+} from 'react';
+
+import type { ReactNode, RefAttributes } from 'react';
+
+import styles from '../styles/BlogSection.module.scss';
+
+import type { ForwardedReference } from './BlogDynamic';
+import { generateIdForBlogTitle } from '../utils';
+
+interface BlogProperties {
+	title?: string;
+	category?: string;
+	children?: ReactNode;
+	increaseMarginBottom?: boolean;
+}
+
+const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
+	(
+		{
+			title = '',
+			category = '',
+			children = null,
+			increaseMarginBottom = false,
+		}: BlogProperties,
+		forwardedReference
+	) => {
+		const titleWithCategory = category ? `${category} - ${title}` : title;
+		const id = generateIdForBlogTitle(titleWithCategory);
+
+		const parentReference = useRef<ForwardedReference['parentRef']>(null);
+		const childReferences = useRef<ForwardedReference['childRefs']>([]);
+		const imperativeHandleRef = useRef<ForwardedReference | null>(null);
+
+		useImperativeHandle(forwardedReference, () => {
+			const handle = {
+				parentRef: parentReference.current!,
+				childRefs: childReferences.current!,
+			};
+			imperativeHandleRef.current = handle;
+			return handle;
+		});
+
+		const handleChildReferences = (element: ForwardedReference | null) => {
+			if (!element) return;
+			const { parentRef: subParentReference } = element;
+			if (!subParentReference) return;
+			childReferences.current.push(subParentReference);
+
+			// Re-trigger parent ref callback with updated children
+			if (typeof forwardedReference === 'function' && imperativeHandleRef.current) {
+				forwardedReference(imperativeHandleRef.current);
+			}
+		};
+
+		return (
+			<div
+				className={`${styles['blog-section']}
+					${
+						increaseMarginBottom
+							? styles['margin-bottom--9']
+							: styles['margin-bottom--6']
+					}`}
+				data-title={title}
+				data-id={id}
+				ref={parentReference}
+			>
+				{title ? (
+					<h4 className={styles['blog-section__title']}>{title}</h4>
+				) : null}
+				{Children.map(children, child => {
+					if (!isValidElement(child)) return child;
+					return cloneElement(child, {
+						ref: handleChildReferences,
+					} as RefAttributes<ForwardedReference>);
+				})}
+			</div>
+		);
+	}
+);
+
+BlogSection.displayName = 'BlogSection';
+
+export default BlogSection;

package/src/dynamicComponents/CalloutDynamic.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+import styles from '../styles/Callout.module.scss';
+
+interface CalloutProperties {
+	children?: ReactNode;
+	type: 'info' | 'warning' | 'error' | 'success';
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+}
+
+const Callout = ({ children, type = 'info',
+	hasMarginUp = false,
+	hasMarginDown = false
+}: CalloutProperties) => {
+	const className = `${styles.callout} ${styles[`callout--${type}`]} ${
+		hasMarginUp ? styles['margin-top--1'] : ''
+	} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`;
+	return (
+		<div className={className}>
+			<div className={styles.callout__icon}/>
+			<div className={styles.callout__wrapper}>{children}</div>
+		</div>
+	);
+};
+
+export default Callout;