@san-siva/blogkit 1.1.20 → 1.1.21

package/src/hooks/useCategoryTitles.ts

@@ -0,0 +1,148 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+
+import type { ForwardedReference } from '../dynamicComponents/BlogDynamic';
+
+export interface SectionReferenceValue {
+	el: HTMLElement;
+	title: string;
+	depth: number;
+}
+
+export interface CategoryTitleValue extends SectionReferenceValue {
+	lastUpdatedAt: number;
+}
+
+export type CategoryTitle = Map<string, CategoryTitleValue>;
+
+type SectionReference = Map<string, SectionReferenceValue>;
+
+interface Options {
+	visibleTitle: string | null;
+	setVisibleTitle: Dispatch<SetStateAction<string | null>>;
+	setShowTOC: Dispatch<SetStateAction<boolean>>;
+}
+
+export function useCategoryTitles({
+	visibleTitle,
+	setVisibleTitle,
+	setShowTOC,
+}: Options) {
+	const sectionReferences = useRef<SectionReference>(new Map());
+	const [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(
+		new Map()
+	);
+	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;
+			} else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+				return 1;
+			}
+			return 0;
+		},
+		[]
+	);
+
+	const updateCategoryTitles = useCallback(() => {
+		const now = Date.now();
+		const newCategoryTitles = new Map<string, CategoryTitleValue>();
+
+		const sectionsArray = Array.from(sectionReferences.current.entries());
+		sectionsArray.sort(sortByDomPosition);
+
+		let firstSectionId: string | null = null;
+		for (const [id, { title, el, depth }] of sectionsArray) {
+			if (!firstSectionId) {
+				firstSectionId = id;
+			}
+			newCategoryTitles.set(id, {
+				el,
+				title,
+				lastUpdatedAt: now,
+				depth,
+			});
+		}
+
+		if (newCategoryTitles.size === 0) return;
+
+		setCategoryTitles(newCategoryTitles);
+		setShowTOC(true);
+
+		if (visibleTitle) return;
+		setVisibleTitle(firstSectionId);
+	}, [visibleTitle, sortByDomPosition, setShowTOC, setVisibleTitle]);
+
+	const debounceUpdateCategoryTitles = useCallback(() => {
+		if (updateTimerRef.current) {
+			clearTimeout(updateTimerRef.current);
+		}
+		updateTimerRef.current = setTimeout(() => {
+			updateCategoryTitles();
+		}, 200);
+	}, [updateCategoryTitles]);
+
+	const removeStaleRefs = (ref: HTMLDivElement) => {
+		for (const [existingId, { el }] of sectionReferences.current) {
+			if (el !== ref) {
+				continue;
+			}
+			sectionReferences.current.delete(existingId);
+			break;
+		}
+	};
+
+	const handleCategoryTitle = (ref: HTMLDivElement) => {
+		const id = ref.dataset.id;
+		const title = ref.dataset.title;
+		if (!id || !title) return;
+
+		let depth = 0;
+		let parent = ref.parentElement;
+		while (parent) {
+			if (parent.hasAttribute('data-id')) depth++;
+			parent = parent.parentElement;
+		}
+
+		removeStaleRefs(ref);
+		sectionReferences.current.set(id, { el: ref, title, depth });
+	};
+
+	const processSection = (element: ForwardedReference) => {
+		const { parentRef, childRefs } = element;
+		if (parentRef) handleCategoryTitle(parentRef);
+		if (Array.isArray(childRefs)) {
+			for (const childRef of childRefs) {
+				processSection(childRef);
+			}
+		}
+	};
+
+	const handleSectionReference = useCallback(
+		(element: ForwardedReference) => {
+			if (!element) return;
+			processSection(element);
+			debounceUpdateCategoryTitles();
+		},
+		[debounceUpdateCategoryTitles]
+	);
+
+	useEffect(() => {
+		return () => {
+			if (updateTimerRef.current) {
+				clearTimeout(updateTimerRef.current);
+			}
+		};
+	}, []);
+
+	return { categoryTitles, handleSectionReference };
+}

package/src/hooks/useSectionObserver.ts

@@ -0,0 +1,102 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+
+import type { Dispatch, MouseEvent, SetStateAction } from 'react';
+
+import lockScrollUpdates from '../utils/lockScrollUpdates';
+import type { CategoryTitle } from './useCategoryTitles';
+
+const getSectionFromUrl = () => {
+	const url = new URL(window.location.href);
+	return url.searchParams.get('section');
+};
+
+const updateUrl = (id: string) => {
+	const url = new URL(window.location.href);
+	url.searchParams.set('section', id);
+	window.history.replaceState({}, '', url.toString());
+};
+
+const scrollIntoView = (element: HTMLElement) => {
+	if (!element) return;
+	const top =
+		element.getBoundingClientRect().top + document.body.scrollTop - 100;
+	document.body.scrollTo({ top, behavior: 'smooth' });
+};
+
+interface Options {
+	categoryTitles: CategoryTitle;
+	setVisibleTitle: Dispatch<SetStateAction<string | null>>;
+}
+
+export function useSectionObserver({ categoryTitles, setVisibleTitle }: Options) {
+	const isClickScrolling = useRef(false);
+	const scrollEndHandlerRef = useRef<(() => void) | null>(null);
+	const intersectionObserversRef = useRef<Map<string, IntersectionObserver>>(
+		new Map()
+	);
+
+	// Set up IntersectionObservers whenever the set of sections changes
+	useEffect(() => {
+		for (const [id, { el }] of categoryTitles) {
+			const observer = new IntersectionObserver(
+				([entry]) => {
+					if (!entry.isIntersecting) return;
+					if (isClickScrolling.current) return;
+					if (document.body.scrollTop === 0) return;
+					setVisibleTitle(visibleId => {
+						if (visibleId === id && !entry.isIntersecting) return null;
+						if (entry.isIntersecting) return id;
+						return visibleId;
+					});
+					updateUrl(id);
+				},
+				{ threshold: 0.1 }
+			);
+			intersectionObserversRef.current.set(id, observer);
+			observer.observe(el as HTMLElement);
+		}
+	}, [categoryTitles.size, setVisibleTitle]);
+
+	// On initial load, scroll to section specified in URL
+	useEffect(() => {
+		if (categoryTitles.size === 0) return;
+		const section = getSectionFromUrl();
+		if (!section) return;
+		const entry = categoryTitles.get(section);
+		if (!entry) return;
+		scrollIntoView(entry.el);
+		lockScrollUpdates(section, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
+	}, [categoryTitles.size, setVisibleTitle]);
+
+	// Cleanup observers on unmount
+	useEffect(() => {
+		return () => {
+			if (scrollEndHandlerRef.current) {
+				document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
+			}
+			for (const observer of intersectionObserversRef.current.values()) {
+				observer.disconnect();
+			}
+		};
+	}, []);
+
+	const handleClickCategoryTitle = useCallback(
+		(event: MouseEvent<HTMLParagraphElement>) => {
+			const id = event.currentTarget.dataset.id;
+			const index = event.currentTarget.dataset.idx;
+			if (!id || !index) return;
+
+			const { el } = categoryTitles.get(id) || {};
+			if (!el) return;
+
+			updateUrl(id);
+			scrollIntoView(el);
+			lockScrollUpdates(id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
+		},
+		[categoryTitles, setVisibleTitle]
+	);
+
+	return { handleClickCategoryTitle };
+}

package/src/staticComponents/TocNodeStatic.tsx

@@ -0,0 +1,52 @@
+import type { MouseEvent } from 'react';
+
+import styles from '../styles/TocNode.module.scss';
+
+export interface TocNode {
+	id: string;
+	title: string;
+	depth: number;
+	children: TocNode[];
+}
+
+interface TocNodeProperties {
+	node: TocNode;
+	index: number;
+	visibleTitle: string | null;
+	onClick: (e: MouseEvent<HTMLParagraphElement>) => void;
+}
+
+const TocNode = ({ node, index, visibleTitle, onClick }: TocNodeProperties) => (
+	<div>
+		<p
+			data-idx={index}
+			data-id={node.id}
+			className={[
+				styles['toc-node__title'],
+				node.id === visibleTitle ? styles['toc-node__title--active'] : '',
+				node.depth === 1 ? styles['toc-node__title--sub'] : '',
+				node.depth === 2 ? styles['toc-node__title--sub-sub'] : '',
+			].join(' ')}
+			onClick={onClick}
+		>
+			{node.title}
+		</p>
+		{node.children.length > 0 && (
+			<div
+				className={`${styles['toc-node__children']} ${styles[`toc-node__children--${node.depth === 0 ? 'sub' : 'sub-sub'}`]}`}
+			>
+				{node.children.map((child, i) => (
+					<TocNode
+						key={child.id}
+						node={child}
+						index={i}
+						visibleTitle={visibleTitle}
+						onClick={onClick}
+					/>
+				))}
+			</div>
+		)}
+	</div>
+);
+
+export default TocNode;

package/src/styles/Blog.module.scss

@@ -22,36 +22,6 @@
 		padding-top: $top;
 		padding-right: 0;
 		border-radius: styles.$border-radius--1;
-
-		> .category__title {
-			display: block;
-			margin-bottom: styles.space(1);
-			font-size: styles.$font-size--p-small;
-			font-weight: styles.$font-weight--500;
-			cursor: pointer;
-
-			animation: fadeInDown 0.3s ease-in-out;
-			transition: all 0.3s ease-in-out;
-
-			&--active,
-			&:hover {
-				text-decoration: underline;
-				text-decoration-color: styles.$color--primary;
-			}
-
-			&--active {
-				color: styles.$color--primary;
-			}
-
-			&--sub {
-				font-size: styles.$font-size--small;
-				font-weight: styles.$font-weight--400;
-			}
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
 	}
 }
 

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

@@ -3,11 +3,7 @@ declare const styles: {
   readonly 'blog__content': string;
   readonly 'blog__sidebar': string;
   readonly 'margin-bottom--3': string;
-  readonly 'margin-bottom-imp--2': string;
   readonly 'category__header': string;
-  readonly 'category__title': string;
-  readonly 'category__title--active': string;
-  readonly 'category__title--sub': string;
 };
 
 export default styles;

package/src/styles/BlogLink.module.scss

@@ -29,7 +29,7 @@
 		> p {
 			font-weight: stylekit.$font-weight--500;
 			font-family: stylekit.$font-family--primary;
-			font-size: stylekit.$font-size--p-small;
+			font-size: stylekit.$font-size--small;
 			margin-right: stylekit.space(0);
 		}
 	}

package/src/styles/BlogSection.module.scss

@@ -18,23 +18,46 @@
 			text-decoration-color: stylekit.$color--primary;
 		}
 	}
-}
 
-.blog-section .blog-section > .blog-section__title {
-	font-size: stylekit.$font-size--h6;
-	margin-bottom: stylekit.space(2);
-}
+	// Sub-section (depth 1)
+	.blog-section {
+		> .blog-section__title {
+			font-size: stylekit.$font-size--h6;
+			margin-bottom: stylekit.space(2);
+		}
 
-.blog-section .blog-section > *:first-child {
-	margin-top: stylekit.space(4);
-}
+		> *:first-child {
+			margin-top: stylekit.space(4);
+		}
 
-.blog-section .blog-section:not(:last-child) {
-	margin-bottom: stylekit.space(4);
-}
+		&:not(:last-child) {
+			margin-bottom: stylekit.space(4);
+		}
 
-.blog-section .blog-section:last-child {
-	margin-bottom: stylekit.space(8);
+		&:last-child {
+			margin-bottom: stylekit.space(8);
+		}
+
+		// Sub-sub-section (depth 2)
+		.blog-section {
+			> .blog-section__title {
+				font-size: stylekit.$font-size--p;
+				margin-bottom: stylekit.space(1);
+			}
+
+			> *:first-child {
+				margin-top: stylekit.space(2);
+			}
+
+			&:not(:last-child) {
+				margin-bottom: stylekit.space(2);
+			}
+
+			&:last-child {
+				margin-bottom: stylekit.space(4);
+			}
+		}
+	}
 }
 
 .margin-bottom--6 {

package/src/styles/CodeBlock.module.scss

@@ -62,7 +62,7 @@ $code-block-background-color: #282a36;
 			> code,
 			> code > * {
 				font-family: stylekit.$font-family--code;
-				font-size: stylekit.$font-size--p-small;
+				font-size: stylekit.$font-size--small;
 				font-weight: unset;
 				font-style: unset;
 				line-height: stylekit.$line-height--normal;
@@ -120,5 +120,5 @@ $code-block-background-color: #282a36;
 .code-block--static code {
 	color: stylekit.$color--base !important;
   font-family: stylekit.$font-family--code !important;
-  font-size: stylekit.$font-size--p-small !important;
+  font-size: stylekit.$font-size--small !important;
 }

package/src/styles/Table.module.scss

@@ -2,7 +2,7 @@
 
 @mixin cell-base {
 	padding: styles.rem(12) styles.rem(16);
-	font-size: styles.$font-size--p-small;
+	font-size: styles.$font-size--small;
 	font-family: styles.$font-family--code;
 	word-wrap: break-word;
 	overflow-wrap: break-word;

package/src/styles/TocNode.module.scss

@@ -0,0 +1,49 @@
+@use '@san-siva/stylekit/styles/index.module.scss' as styles;
+
+.toc-node {
+	&__title {
+		display: block;
+		margin-bottom: styles.space(1);
+		font-size: styles.$font-size--small;
+		font-weight: styles.$font-weight--500;
+		cursor: pointer;
+
+		animation: fadeInDown 0.3s ease-in-out;
+		transition: all 0.3s ease-in-out;
+
+		&--active,
+		&:hover {
+			text-decoration: underline;
+			text-decoration-color: styles.$color--primary;
+		}
+
+		&--active {
+			color: styles.$color--primary;
+		}
+
+		&--sub {
+			font-size: styles.$font-size--very-small;
+		}
+
+		&--sub-sub {
+			font-size: styles.$font-size--very-small;
+			font-weight: styles.$font-weight--400;
+		}
+
+		&:not(:last-child) {
+			margin-bottom: 0;
+		}
+	}
+
+	&__children {
+		&--sub-sub,
+		&--sub {
+			padding: styles.space(1) styles.space(2);
+			margin: styles.space(1);
+			border-left: 1px solid styles.$color--border;
+		}
+
+		&--sub-sub {
+		}
+	}
+}

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

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly 'toc-node__title': string;
+  readonly 'toc-node__title--active': string;
+  readonly 'toc-node__title--sub': string;
+  readonly 'toc-node__title--sub-sub': string;
+  readonly 'toc-node__children': string;
+  readonly 'toc-node__children--sub': string;
+  readonly 'toc-node__children--sub-sub': string;
+};
+
+export default styles;