@san-siva/blogkit 1.1.15 → 1.1.16

package/dist/esm/styles/BlogSection.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"margin-bottom--6":"BlogSection-module_margin-bottom--6__-hlAO","margin-bottom--9":"BlogSection-module_margin-bottom--9__xU5rE","blog-section__title":"BlogSection-module_blog-section__title__5-4Oy","blog-section":"BlogSection-module_blog-section__NTDM4"};
+var styles = {"margin-bottom--6":"BlogSection-module_margin-bottom--6__-hlAO","margin-bottom--9":"BlogSection-module_margin-bottom--9__xU5rE","blog-section__title":"BlogSection-module_blog-section__title__5-4Oy","blog-section__title-link":"BlogSection-module_blog-section__title-link__Q4R5T","blog-section":"BlogSection-module_blog-section__NTDM4"};
 
 export { styles as default };
 //# sourceMappingURL=BlogSection.module.scss.js.map

package/dist/esm/utils/index.js

@@ -1,5 +1,6 @@
 const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
 const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
+const generateSectionHref = (id) => `?section=${id}`;
 
-export { generateIdForBlogTitle, generateUrlForBlogTitle };
+export { generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n"],"names":[],"mappings":"MAAa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":"MAAa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;"}

package/dist/esm/utils/lockScrollUpdates.js

@@ -0,0 +1,20 @@
+const lockScrollUpdates = (id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle) => {
+    if (scrollEndHandlerRef.current) {
+        document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
+    }
+    isClickScrolling.current = true;
+    scrollEndHandlerRef.current = () => {
+        isClickScrolling.current = false;
+        scrollEndHandlerRef.current = null;
+        setVisibleTitle(id);
+        const url = new URL(window.location.href);
+        url.searchParams.set('section', id);
+        window.history.replaceState({}, '', url.toString());
+    };
+    document.body.addEventListener('scrollend', scrollEndHandlerRef.current, {
+        once: true,
+    });
+};
+
+export { lockScrollUpdates as default };
+//# sourceMappingURL=lockScrollUpdates.js.map

package/dist/esm/utils/lockScrollUpdates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lockScrollUpdates.js","sources":["../../../src/utils/lockScrollUpdates.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nconst lockScrollUpdates = (\n\tid: string,\n\tisClickScrolling: MutableRefObject<boolean>,\n\tscrollEndHandlerRef: MutableRefObject<(() => void) | null>,\n\tsetVisibleTitle: (id: string) => void\n) => {\n\tif (scrollEndHandlerRef.current) {\n\t\tdocument.body.removeEventListener('scrollend', scrollEndHandlerRef.current);\n\t}\n\n\tisClickScrolling.current = true;\n\n\tscrollEndHandlerRef.current = () => {\n\t\tisClickScrolling.current = false;\n\t\tscrollEndHandlerRef.current = null;\n\t\tsetVisibleTitle(id);\n\t\tconst url = new URL(window.location.href);\n\t\turl.searchParams.set('section', id);\n\t\twindow.history.replaceState({}, '', url.toString());\n\t};\n\n\tdocument.body.addEventListener('scrollend', scrollEndHandlerRef.current, {\n\t\tonce: true,\n\t});\n};\n\nexport default lockScrollUpdates;\n"],"names":[],"mappings":"AAEA,MAAM,iBAAiB,GAAG,CACzB,EAAU,EACV,gBAA2C,EAC3C,mBAA0D,EAC1D,eAAqC,KAClC;AACH,IAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;QAChC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,CAAC;IAC5E;AAEA,IAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;AAE/B,IAAA,mBAAmB,CAAC,OAAO,GAAG,MAAK;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,KAAK;AAChC,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI;QAClC,eAAe,CAAC,EAAE,CAAC;QACnB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QACzC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC;AACnC,QAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AACpD,IAAA,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE;AACxE,QAAA,IAAI,EAAE,IAAI;AACV,KAAA,CAAC;AACH;;;;"}

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

@@ -9,6 +9,6 @@ export interface ForwardedReference {
     parentRef: HTMLDivElement;
     childRefs: HTMLDivElement[];
 }
-declare const Blog: ({ children, title, jsonLd }: BlogProperties) => import("react/jsx-runtime").JSX.Element;
+declare const Blog: ({ children, title, jsonLd, }: BlogProperties) => import("react/jsx-runtime").JSX.Element;
 export default Blog;
 //# sourceMappingURL=BlogDynamic.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,SAAS,EAAiB,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAIrD,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC5B;AAgBD,QAAA,MAAM,IAAI,GAAI,6BAAiD,cAAc,4CAwN5E,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;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKrD,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC5B;AAgBD,QAAA,MAAM,IAAI,GAAI,8BAIX,cAAc,4CAiPhB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/dynamicComponents/lockScrollUpdates.d.ts

@@ -0,0 +1,4 @@
+import type { MutableRefObject } from 'react';
+declare const lockScrollUpdates: (id: string, isClickScrolling: MutableRefObject<boolean>, scrollEndHandlerRef: MutableRefObject<(() => void) | null>, setVisibleTitle: (id: string) => void) => void;
+export default lockScrollUpdates;
+//# sourceMappingURL=lockScrollUpdates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lockScrollUpdates.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/lockScrollUpdates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,QAAA,MAAM,iBAAiB,GACtB,IAAI,MAAM,EACV,kBAAkB,gBAAgB,CAAC,OAAO,CAAC,EAC3C,qBAAqB,gBAAgB,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,EAC1D,iBAAiB,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,SAoBrC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.15",
+	"version": "1.1.16",
 	"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

@@ -15,6 +15,7 @@ import type { MouseEvent, ReactNode, RefAttributes } from 'react';
 import type { Thing, WithContext } from 'schema-dts';
 
 import styles from '../styles/Blog.module.scss';
+import lockScrollUpdates from '../utils/lockScrollUpdates';
 
 interface BlogProperties {
 	children: ReactNode;
@@ -41,7 +42,11 @@ interface CategoryTitleValue extends SectionReferenceValue {
 
 type CategoryTitle = Map<string, CategoryTitleValue>;
 
-const Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) => {
+const Blog = ({
+	children,
+	title = 'In this article',
+	jsonLd,
+}: BlogProperties) => {
 	const sectionReferences = useRef<SectionReference>(new Map());
 	const [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(
 		new Map()
@@ -51,6 +56,9 @@ const Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) =
 
 	const updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const showTOCTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const hasScrolledToInitialSection = useRef(false);
+	const isClickScrolling = useRef(false);
+	const scrollEndHandlerRef = useRef<(() => void) | null>(null);
 
 	const sortByDomPosition = useCallback(
 		(
@@ -114,6 +122,7 @@ const Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) =
 			const observer = new IntersectionObserver(
 				([entry]) => {
 					if (!entry.isIntersecting) return;
+					if (isClickScrolling.current) return;
 					setVisibleTitle(visibleId => {
 						if (visibleId === id && !entry.isIntersecting) return null;
 						if (entry.isIntersecting) return id;
@@ -140,9 +149,28 @@ const Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) =
 			if (showTOCTimerRef.current) {
 				clearTimeout(showTOCTimerRef.current);
 			}
+			if (scrollEndHandlerRef.current) {
+				document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
+			}
 		};
 	}, []);
 
+	// On initial load, scroll to section specified in URL
+	useEffect(() => {
+		if (hasScrolledToInitialSection.current) return;
+		if (categoryTitles.size === 0) return;
+		const url = new URL(window.location.href);
+		const section = url.searchParams.get('section');
+		if (!section) return;
+		const entry = categoryTitles.get(section);
+		if (!entry) return;
+		hasScrolledToInitialSection.current = true;
+		const top =
+			entry.el.getBoundingClientRect().top + document.body.scrollTop - 100;
+		document.body.scrollTo({ top, behavior: 'smooth' });
+		lockScrollUpdates(section, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
+	}, [categoryTitles]);
+
 	const handleSectionReference = useCallback(
 		(element: ForwardedReference) => {
 			if (!element) return;
@@ -193,15 +221,17 @@ const Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) =
 		if (!el) return;
 
 		const top = el.getBoundingClientRect().top + document.body.scrollTop - 100;
+
+		const url = new URL(window.location.href);
+		url.searchParams.set('section', id);
+		window.history.replaceState({}, '', url.toString());
+
 		document.body.scrollTo({
 			top,
 			behavior: 'smooth',
 		});
 
-		const timer = setTimeout(() => {
-			setVisibleTitle(id);
-			clearTimeout(timer);
-		}, 1000);
+		lockScrollUpdates(id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
 	};
 
 	const sidebarStyle = useSpring({

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -14,7 +14,7 @@ import type { ReactNode, RefAttributes } from 'react';
 import styles from '../styles/BlogSection.module.scss';
 
 import type { ForwardedReference } from './BlogDynamic';
-import { generateIdForBlogTitle } from '../utils';
+import { generateIdForBlogTitle, generateSectionHref } from '../utils';
 
 interface BlogProperties {
 	title?: string;
@@ -74,7 +74,11 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
 				ref={parentReference}
 			>
 				{title ? (
-					<h4 className={styles['blog-section__title']}>{title}</h4>
+					<h4 className={styles['blog-section__title']}>
+						<a href={generateSectionHref(id)} className={styles['blog-section__title-link']} onClick={e => e.preventDefault()}>
+							{title}
+						</a>
+					</h4>
 				) : null}
 				{Children.map(children, child => {
 					if (!isValidElement(child)) return child;

package/src/styles/BlogSection.module.scss

@@ -4,6 +4,20 @@
 	&__title {
 		margin-bottom: stylekit.space(2);
 	}
+
+	&__title-link {
+		color: inherit;
+		text-decoration: none;
+		font-size: inherit;
+		font-weight: inherit;
+		font-family: inherit;
+
+		&:hover {
+			color: stylekit.$color--dark;
+			text-decoration: underline;
+			text-decoration-color: stylekit.$color--primary;
+		}
+	}
 }
 
 .blog-section .blog-section > .blog-section__title {
@@ -24,9 +38,9 @@
 }
 
 .margin-bottom--6 {
-  margin-bottom: stylekit.space(6);
+	margin-bottom: stylekit.space(6);
 }
 
 .margin-bottom--9 {
-  margin-bottom: stylekit.space(9);
+	margin-bottom: stylekit.space(9);
 }

package/src/utils/index.ts

@@ -1,3 +1,5 @@
 export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\w\d]/g, '-');
 
 export const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
+
+export const generateSectionHref = (id: string) => `?section=${id}`;

package/src/utils/lockScrollUpdates.ts

@@ -0,0 +1,29 @@
+import type { MutableRefObject } from 'react';
+
+const lockScrollUpdates = (
+	id: string,
+	isClickScrolling: MutableRefObject<boolean>,
+	scrollEndHandlerRef: MutableRefObject<(() => void) | null>,
+	setVisibleTitle: (id: string) => void
+) => {
+	if (scrollEndHandlerRef.current) {
+		document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
+	}
+
+	isClickScrolling.current = true;
+
+	scrollEndHandlerRef.current = () => {
+		isClickScrolling.current = false;
+		scrollEndHandlerRef.current = null;
+		setVisibleTitle(id);
+		const url = new URL(window.location.href);
+		url.searchParams.set('section', id);
+		window.history.replaceState({}, '', url.toString());
+	};
+
+	document.body.addEventListener('scrollend', scrollEndHandlerRef.current, {
+		once: true,
+	});
+};
+
+export default lockScrollUpdates;