@san-siva/blogkit 1.0.12 → 1.1.0

package/src/components/Blog.tsx

@@ -1,209 +1,21 @@
 'use client';
 
-import {
-	Children,
-	cloneElement,
-	isValidElement,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
+import { lazy, Suspense } from 'react';
+import type { ReactNode } from 'react';
+import BlogStatic from '../staticComponents/BlogStatic';
 
-import type { MouseEvent, ReactNode, RefAttributes } from 'react';
-
-import styles from '../styles/Blog.module.scss';
+const BlogDynamic = lazy(() => import('../dynamicComponents/BlogDynamic'));
 
 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);
-
-	useEffect(() => {
-		let firstSectionId: string | null = null;
-		const now = Date.now();
-		for (const [id, { title, el, isSubSection }] of sectionReferences.current) {
-			if (!firstSectionId) {
-				firstSectionId = id;
-			}
-			setCategoryTitles((previous: CategoryTitle) => {
-				const newState = new Map(previous);
-				newState.set(id, {
-					el,
-					title,
-					lastUpdatedAt: now,
-					isSubSection,
-				});
-				return newState;
-			});
-		}
-		setVisibleTitle(firstSectionId);
-	}, []);
-
-	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(
-		() =>
-			clearTimers(
-				addPaddingTopTimerReference.current,
-				highlightCategoryTimerReference.current
-			),
-		[addPaddingTopTimerReference, highlightCategoryTimerReference]
-	);
-
-	const addSectionReferences = (element: HTMLElement, isSubSection = false) => {
-		if (!element) return;
-		const id = element.dataset.id;
-		if (!id) return;
-		const title = element.dataset.title;
-		if (!title) return;
-
-		sectionReferences.current.set(id, {
-			el: element,
-			title,
-			isSubSection,
-		});
-	};
-
-	const handleSectionReference = (element: ForwardedReference) => {
-		if (!element) return;
-		const { parentRef, childRefs } = element;
-		if (!parentRef) return;
-		addSectionReferences(parentRef);
-		if (!Array.isArray(childRefs)) return;
-		for (const childReference of childRefs) {
-			if (!childReference) continue;
-			addSectionReferences(childReference, true);
-		}
-	};
-
-	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>
+		<Suspense fallback={<BlogStatic>{children}</BlogStatic>}>
+			<BlogDynamic title={title}>{children}</BlogDynamic>
+		</Suspense>
 	);
 };
 

package/src/components/BlogHeader.tsx

@@ -1,32 +1,19 @@
-import { Fragment } from 'react';
+import BlogHeaderDynamic from '../dynamicComponents/BlogHeaderDynamic';
 
-import styles from '../styles/BlogHeader.module.scss';
-
-interface BlogProperties {
+interface BlogHeaderProperties {
 	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>
-			)}
-		</>
+const BlogHeader = ({
+	title,
+	desc,
+	isDescCite = true,
+}: BlogHeaderProperties) => {
+	return (
+		<BlogHeaderDynamic title={title} desc={desc} isDescCite={isDescCite} />
 	);
+};
 
 export default BlogHeader;

package/src/components/BlogLink.tsx

@@ -1,73 +1,43 @@
 'use client';
 
-import { useState } from 'react';
+import { lazy, Suspense } from 'react';
+import BlogLinkStatic from '../staticComponents/BlogLinkStatic';
 
-import { animated, useSpring } from '@react-spring/web';
+const BlogLinkDynamic = lazy(
+	() => import('../dynamicComponents/BlogLinkDynamic')
+);
 
-import styles from '../styles/BlogLink.module.scss';
-
-import { generateUrlForBlogTitle } from '../utils';
-
-interface Properties {
+interface BlogLinkProperties {
 	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;
-
+const BlogLink = ({
+	title = '',
+	desc = '',
+	isInProgress = false,
+	href,
+}: BlogLinkProperties) => {
 	return (
-		<a
-			className={styles['blog-link']}
-			onMouseEnter={() => setIsHovered(true)}
-			onMouseLeave={() => setIsHovered(false)}
-			href={link}
-			rel="noopener noreferrer"
+		<Suspense
+			fallback={
+				<BlogLinkStatic
+					title={title}
+					desc={desc}
+					isInProgress={isInProgress}
+					href={href}
+				/>
+			}
 		>
-			<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>
+			<BlogLinkDynamic
+				title={title}
+				desc={desc}
+				isInProgress={isInProgress}
+				href={href}
+			/>
+		</Suspense>
 	);
 };
 

package/src/components/BlogSection.tsx

@@ -1,78 +1,53 @@
 'use client';
 
-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 './Blog';
-import { generateIdForBlogTitle } from '../utils';
+import { forwardRef, lazy, Suspense } from 'react';
+import type { ReactNode } from 'react';
+import BlogSectionStatic from '../staticComponents/BlogSectionStatic';
+import type { ForwardedReference } from '../dynamicComponents/BlogDynamic';
+export type { ForwardedReference };
+
+const BlogSectionDynamic = lazy(
+	() => import('../dynamicComponents/BlogSectionDynamic')
+);
 
-interface BlogProperties {
+interface BlogSectionProperties {
 	title?: string;
 	category?: string;
 	children?: ReactNode;
 	increaseMarginBottom?: boolean;
 }
 
-const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
+const BlogSection = forwardRef<ForwardedReference, BlogSectionProperties>(
 	(
 		{
 			title = '',
 			category = '',
 			children = null,
 			increaseMarginBottom = false,
-		}: BlogProperties,
-		forwardedReference
+		},
+		ref
 	) => {
-		const titleWithCategory = category ? `${category} - ${title}` : title;
-		const id = generateIdForBlogTitle(titleWithCategory);
-
-		const parentReference = useRef<ForwardedReference['parentRef']>(null);
-		const childReferences = useRef<ForwardedReference['childRefs']>([]);
-
-		useImperativeHandle(forwardedReference, () => ({
-			parentRef: parentReference.current!,
-			childRefs: childReferences.current!,
-		}));
-
-		const handleChildReferences = (element: ForwardedReference | null) => {
-			if (!element) return;
-			const { parentRef: subParentReference } = element;
-			if (!subParentReference) return;
-			childReferences.current.push(subParentReference);
-		};
-
 		return (
-			<div
-				className={`${styles['blog-section']}
-					${
-						increaseMarginBottom
-							? styles['margin-bottom--9']
-							: styles['margin-bottom--6']
-					}`}
-				data-title={title}
-				data-id={id}
-				ref={parentReference}
+			<Suspense
+				fallback={
+					<BlogSectionStatic
+						title={title}
+						category={category}
+						increaseMarginBottom={increaseMarginBottom}
+					>
+						{children}
+					</BlogSectionStatic>
+				}
 			>
-				{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>
+				<BlogSectionDynamic
+					ref={ref}
+					title={title}
+					category={category}
+					increaseMarginBottom={increaseMarginBottom}
+				>
+					{children}
+				</BlogSectionDynamic>
+			</Suspense>
 		);
 	}
 );

package/src/components/Callout.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
-
-import styles from '../styles/Callout.module.scss';
+import CalloutDynamic from '../dynamicComponents/CalloutDynamic';
 
 interface CalloutProperties {
 	children?: ReactNode;
@@ -9,18 +8,20 @@ interface CalloutProperties {
 	hasMarginDown?: boolean;
 }
 
-const Callout = ({ children, type = 'info',
+const Callout = ({
+	children,
+	type = 'info',
 	hasMarginUp = false,
-	hasMarginDown = 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>
+		<CalloutDynamic
+			type={type}
+			hasMarginUp={hasMarginUp}
+			hasMarginDown={hasMarginDown}
+		>
+			{children}
+		</CalloutDynamic>
 	);
 };
 

package/src/components/CodeBlock.tsx

@@ -1,16 +1,13 @@
 '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 { lazy, Suspense } from 'react';
+import CodeBlockStatic from '../staticComponents/CodeBlockStatic';
 
-import 'prismjs/themes/prism-tomorrow.css';
+const CodeBlockDynamic = lazy(
+	() => import('../dynamicComponents/CodeBlockDynamic')
+);
 
-const SH = SyntaxHighlighter as any;
-
-import styles from '../styles/CodeBlock.module.scss';
-
-interface Properties {
+interface CodeBlockProperties {
 	hasMarginUp?: boolean;
 	hasMarginDown?: boolean;
 	language?: string;
@@ -22,54 +19,25 @@ const CodeBlock = ({
 	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',
-	};
-
+}: CodeBlockProperties) => {
 	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
+		<Suspense
+			fallback={
+				<CodeBlockStatic
 					language={language}
-					style={dracula}
-					showLineNumbers
-					lineNumberStyle={lineNumberStyle}
-				>
-					{code}
-				</SH>
-			</div>
-		</div>
+					code={code}
+					hasMarginUp={hasMarginUp}
+					hasMarginDown={hasMarginDown}
+				/>
+			}
+		>
+			<CodeBlockDynamic
+				language={language}
+				code={code}
+				hasMarginUp={hasMarginUp}
+				hasMarginDown={hasMarginDown}
+			/>
+		</Suspense>
 	);
 };