@san-siva/blogkit 1.1.41 → 1.1.43

package/src/hooks/useCategoryTitles.ts

@@ -18,7 +18,11 @@ export interface CategoryTitleValue extends SectionReferenceValue {
 
 export type CategoryTitle = Map<string, CategoryTitleValue>;
 
-type SectionReference = Map<string, SectionReferenceValue>;
+interface SectionReferenceEntry extends SectionReferenceValue {
+	baseId: string;
+}
+
+type SectionReference = Map<HTMLElement, SectionReferenceEntry>;
 
 interface Options {
 	visibleTitle: string | null;
@@ -39,8 +43,8 @@ export function useCategoryTitles({
 
 	const sortByDomPosition = useCallback(
 		(
-			[, a]: [string, SectionReferenceValue],
-			[, b]: [string, SectionReferenceValue]
+			[, a]: [HTMLElement, SectionReferenceEntry],
+			[, b]: [HTMLElement, SectionReferenceEntry]
 		) => {
 			const position = a.el.compareDocumentPosition(b.el);
 			if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -61,7 +65,12 @@ export function useCategoryTitles({
 		sectionsArray.sort(sortByDomPosition);
 
 		let firstSectionId: string | null = null;
-		for (const [id, { title, el, depth }] of sectionsArray) {
+		const baseIdCounts = new Map<string, number>();
+		for (const [, { title, el, depth, baseId }] of sectionsArray) {
+			const occurrence = (baseIdCounts.get(baseId) ?? 0) + 1;
+			baseIdCounts.set(baseId, occurrence);
+			const id = occurrence === 1 ? baseId : `${baseId}-${occurrence}`;
+
 			if (!firstSectionId) {
 				firstSectionId = id;
 			}
@@ -91,20 +100,10 @@ export function useCategoryTitles({
 		}, 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 baseId = ref.dataset.id;
 		const title = ref.dataset.title;
-		if (!id || !title) return;
+		if (!baseId || !title) return;
 
 		let depth = 0;
 		let parent = ref.parentElement;
@@ -113,8 +112,7 @@ export function useCategoryTitles({
 			parent = parent.parentElement;
 		}
 
-		removeStaleRefs(ref);
-		sectionReferences.current.set(id, { el: ref, title, depth });
+		sectionReferences.current.set(ref, { el: ref, title, depth, baseId });
 	};
 
 	const processSection = (element: ForwardedReference) => {

package/src/staticComponents/BlogStatic.tsx

@@ -5,11 +5,13 @@ import styles from '../styles/Blog.module.scss';
 interface BlogStaticProperties {
 	children: ReactNode;
 	jsonLd?: WithContext<Thing>;
+	increasedWidthMode?: boolean;
 }
 
-const BlogStatic = ({ children, jsonLd }: BlogStaticProperties) => {
+const BlogStatic = ({ children, jsonLd, increasedWidthMode = false }: BlogStaticProperties) => {
 	return (
-		<div className={styles.blog}>
+		<div className={`${styles.blog} ${increasedWidthMode ? styles['blog--increased-width'] : ''}`}>
+
 			{jsonLd && (
 				<script
 					type="application/ld+json"

package/src/staticComponents/TocNodeStatic.tsx

@@ -37,7 +37,7 @@ const TocNode = ({ node, index, visibleTitle, onClick }: TocNodeProperties) => (
 			>
 				{node.children.map((child, i) => (
 					<TocNode
-						key={child.id}
+						key={`${node.id}-${child.id}`}
 						node={child}
 						index={i}
 						visibleTitle={visibleTitle}

package/src/styles/Blog.module.scss

@@ -1,10 +1,18 @@
-@use '@san-siva/stylekit/styles/index.module.scss' as styles;
+@use '@san-siva/stylekit/styles/utils.module.scss' as utils;
+@use '@san-siva/stylekit/styles/index.module.scss' as styles with (
+	$max-width--page-contents: utils.rem(1200)
+);
+
+$sidebar-width: 22rem;
+$content-width: styles.rem(780);
+$total-width: calc(#{$content-width} + #{styles.space(8)} + #{$sidebar-width});
 
 .blog {
 	width: 100%;
-	max-width: 100%;
+	max-width: $total-width;
+	margin: 0 auto;
 	display: grid;
-	grid-template-columns: #{styles.rem(780)} minmax(#{styles.rem(320)}, 1fr);
+	grid-template-columns: $content-width $sidebar-width;
 	grid-gap: styles.space(8);
 
 	&__content {
@@ -23,11 +31,21 @@
 		padding-right: 0;
 		border-radius: styles.$border-radius--1;
 	}
+
+	&--increased-width {
+		max-width: 100%;
+		grid-template-columns: minmax(0, 1fr) $sidebar-width;
+
+		.blog__content {
+			max-width: none;
+			min-width: 0;
+		}
+	}
 }
 
 $breakpoint: calc(
 	#{styles.rem(120)} + #{styles.rem(780)} + #{styles.space(8)} +
-		#{styles.rem(320)} + #{styles.rem(120)}
+		#{$sidebar-width} + #{styles.rem(120)}
 );
 
 @media (max-width: $breakpoint) {

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly blog: string;
+  readonly 'blog--increased-width': string;
   readonly 'blog__content': string;
   readonly 'blog__sidebar': string;
   readonly 'margin-bottom--3': string;