@san-siva/blogkit 1.1.0 → 1.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAYA,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;AAkBD,QAAA,MAAM,IAAI,GAAI,qBAAyC,cAAc,4CAoNpE,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,4CA4NpE,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@san-siva/blogkit",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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/dynamicComponents/BlogDynamic.tsx

@@ -9,6 +9,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { useSpring, animated } from '@react-spring/web';
 
 import type { MouseEvent, ReactNode, RefAttributes } from 'react';
 
@@ -38,34 +39,22 @@ interface CategoryTitleValue extends SectionReferenceValue {
 
 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 [showTOC, setShowTOC] = useState(false);
+
 	const updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const showTOCTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	const sortByDomPosition = useCallback(
-		([, a]: [string, SectionReferenceValue], [, b]: [string, SectionReferenceValue]) => {
+		(
+			[, 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
@@ -77,6 +66,16 @@ 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>();
@@ -98,12 +97,13 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 			});
 		}
 
-		if (newCategoryTitles.size > 0) {
-			setCategoryTitles(newCategoryTitles);
-			if (!visibleTitle) {
-				setVisibleTitle(firstSectionId);
-			}
-		}
+		if (newCategoryTitles.size === 0) return;
+
+		setCategoryTitles(newCategoryTitles);
+		debounceShowTOC();
+
+		if (visibleTitle) return;
+		setVisibleTitle(firstSectionId);
 	}, [visibleTitle, sortByDomPosition]);
 
 	const debounceUpdateCategoryTitles = useCallback(() => {
@@ -142,51 +142,53 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 
 	useEffect(() => {
 		return () => {
-			clearTimers(
-				addPaddingTopTimerReference.current,
-				highlightCategoryTimerReference.current
-			);
 			if (updateTimerRef.current) {
 				clearTimeout(updateTimerRef.current);
 			}
+			if (showTOCTimerRef.current) {
+				clearTimeout(showTOCTimerRef.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,
-				});
-			}
-		}
+	const handleSectionReference = useCallback(
+		(element: ForwardedReference) => {
+			if (!element) return;
+			const { parentRef, childRefs } = element;
 
-		// 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;
+			// Add parent section reference
+			if (parentRef) {
+				const id = parentRef.dataset.id;
+				const title = parentRef.dataset.title;
 				if (id && title) {
 					sectionReferences.current.set(id, {
-						el: childRef,
+						el: parentRef,
 						title,
-						isSubSection: true,
+						isSubSection: false,
 					});
 				}
 			}
-		}
 
-		debounceUpdateCategoryTitles();
-	}, [debounceUpdateCategoryTitles]);
+			// 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>
@@ -210,6 +212,11 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 		}, 1000);
 	};
 
+	const sidebarStyle = useSpring({
+		opacity: showTOC ? 1 : 0,
+		transform: showTOC ? 'translateX(0)' : 'translateX(80px)',
+		config: { tension: 280, friction: 60 },
+	});
 
 	return (
 		<div className={styles.blog}>
@@ -221,7 +228,7 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 					} as RefAttributes<ForwardedReference>);
 				})}
 			</div>
-			<div className={styles['blog__sidebar']}>
+			<animated.div className={styles['blog__sidebar']} style={sidebarStyle}>
 				<p
 					className={`${styles['margin-bottom--3']} ${styles['category__header']}`}
 				>
@@ -249,7 +256,7 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 						);
 					}
 				)}
-			</div>
+			</animated.div>
 		</div>
 	);
 };

package/src/styles/Blog.module.scss

@@ -21,11 +21,13 @@
 		top: calc(var(--topbar-height) + #{styles.space(6)});
 		padding: styles.space(6);
 		min-width: calc(
-			#{styles.rem(380)} - #{styles.space(6)} - #{styles.space(6)}
+			#{styles.rem(320)} - #{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;
+		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);