feat: add initial toc

package.json

@@ -55,7 +55,7 @@
     "@fontsource/baskervville": "^5.1.0",
     "@hookform/resolvers": "^3.9.0",
     "@million/lint": "1.0.0-rc.84",
-    "algoliasearch": "^5.6.0",
+    "algoliasearch": "^5.6.1",
     "astro": "^4.15.9",
     "clsx": "^2.1.1",
     "contentful": "^11.0.3",
@@ -89,7 +89,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/add": "^2.0.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.7.0",
+    "@types/node": "^22.7.2",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.168.0",

src/application/dto/article/articleDTO.ts

@@ -1,6 +1,7 @@
 import type { ArticleDTO, RawArticle } from "@application/dto/article/types";
 import { ArticleType } from "@application/dto/article/types";
 import { createRelatedArticles } from "@application/dto/article/utils/createRelatedArticles";
+import { generateTableOfContents } from "@application/dto/article/utils/generateTableOfContents";
 import { getRelatedArticles } from "@application/dto/article/utils/getRelatedArticles/getRelatedArticles";
 import { DEFAULT_DATE_FORMAT } from "@const/index";
 import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
@@ -19,14 +20,15 @@ const PARSER: MarkdownIt = new MarkdownIt();
 export const articleDTO: BaseDTO<RawArticle[], ArticleDTO[]> = {
 	create: (raw) => {
 		return raw.map((rawArticle) => {
+			const contentHtml = documentToHtmlString(rawArticle.fields.content as unknown as Document);
+
 			const description =
 				rawArticle.fields.description ??
 				generateExcerpt({
 					parser: PARSER,
-					content: documentToHtmlString(rawArticle.fields.content as unknown as Document),
+					content: contentHtml,
 				});
 
-			const tags = createTags(rawArticle.fields.tags);
 			const relatedArticles = rawArticle.fields.relatedArticles
 				? createRelatedArticles(rawArticle.fields.relatedArticles)
 				: getRelatedArticles({ rawArticle, allRawArticles: raw });
@@ -44,8 +46,9 @@ export const articleDTO: BaseDTO<RawArticle[], ArticleDTO[]> = {
 				content,
 				isFeaturedArticle: rawArticle.fields.featuredArticle,
 				readingTime: getReadingTime(content),
-				tags,
+				tag: createTags(rawArticle.fields.tags),
 				relatedArticles,
+				tableOfContents: generateTableOfContents(contentHtml),
 			} as unknown as ArticleDTO;
 		});
 	},

src/application/dto/article/utils/generateTableOfContents/generateTableOfContents.ts

@@ -0,0 +1,21 @@
+import type { CollectionEntry } from "astro:content";
+import { slugify } from "@modules/core/utils/slugify";
+
+type TableOfContentsReturnType = CollectionEntry<"articles">["data"]["tableOfContents"];
+
+const HEADINGS_REGEX = /<h([1-6])>(.*?)<\/h\1>/g;
+
+export function generateTableOfContents(html: string): TableOfContentsReturnType {
+	const items: TableOfContentsReturnType = [];
+	const matches = html.matchAll(HEADINGS_REGEX);
+
+	for (const match of matches) {
+		const level = Number.parseInt(match[1]);
+		const heading = match[2];
+		const id = slugify(heading);
+
+		items.push({ id, heading, level });
+	}
+
+	return items;
+}

src/application/dto/article/utils/generateTableOfContents/index.ts

@@ -0,0 +1 @@
+export * from "./generateTableOfContents";

src/application/entities/articles/articles.ts

@@ -12,6 +12,7 @@ export const articles = defineCollection({
 		});
 
 		const articles = articleDTO.create(rawArticles as unknown as RawArticle[]);
+
 		return articles.map((article) => ({
 			id: article.slug,
 			...article,

src/application/entities/articles/schema.ts

@@ -17,4 +17,14 @@ export const articleSchema = z.object({
 	readingTime: z.number(),
 	tags: z.array(tagSchema).optional(),
 	relatedArticles: z.array(reference("articles")).default([]),
+	tableOfContents: z
+		.array(
+			z.object({
+				id: z.string(),
+				heading: z.string(),
+				level: z.number(),
+			}),
+		)
+		.optional()
+		.default([]),
 });

src/pages/articles/[...slug].astro

@@ -5,6 +5,7 @@ import { SITE_URL } from "astro:env/client";
 import { PAGES_ROUTES } from "@const/index";
 import type { SeoMetadata } from "@const/types";
 import ArticleDetails from "@modules/article/components/articleDetails/ArticleDetails.astro";
+import TableOfContents from "@modules/article/components/tableOfContents/TableOfContents.astro";
 import ReadingProgress from "@modules/articles/components/readingProgress/ReadingProgress.astro";
 import BaseLayout from "@modules/core/components/baseLayout/BaseLayout.astro";
 import Breadcrumbs from "@modules/core/components/breadcrumbs/Breadcrumbs.astro";
@@ -56,6 +57,7 @@ const metadata: Partial<SeoMetadata> = {
     <Breadcrumbs />
     <ReadingProgress />
     <ArticleDetails article={article} />
+    <TableOfContents tableOfContents={article.data.tableOfContents} />
     <article class="article__wrapper" set:html={article.data.content} />
     <script is:inline type="application/ld+json" set:html={JSON.stringify({
       '@context': 'https://schema.org',

src/pages/articles/_article.css

@@ -8,7 +8,7 @@
 	gap: 0 1rem;
 	grid: ". Article-Content ." / 1fr min(var(--grid-article), 100%) 1fr;
 	line-height: var(--base-line-height);
-	margin-block: 4rem;
+	margin-block: 2rem 4rem;
 
 	@supports (initial-letter: 3 2) {
 		& > p:first-of-type::first-letter {

src/ui/modules/article/components/tableOfContents/TableOfContents.astro

@@ -0,0 +1,21 @@
+---
+import type { CollectionEntry } from "astro:content";
+import "./table-of-contents.css";
+
+interface TableOfContentsProps {
+	tableOfContents: CollectionEntry<"articles">["data"]["tableOfContents"];
+}
+
+const { tableOfContents } = Astro.props as TableOfContentsProps;
+---
+<aside class="article__table-of-contents__wrapper" role="complementary">
+    <nav class="article__table-of-contents__nav"  aria-label="Table of contents">
+        <ul class="article__table-of-contents__list flex column-nowrap">
+            {tableOfContents.map(({ id, heading, level}) => (
+                <li class="article__table-of-contents__item --underline-on-hover --is-clickable" style={`--inline-level: ${level};`}>
+                    <a class="article__table-of-contents__item__link" href={`#${id}`}>{heading}</a>
+                </li>
+            ))}
+        </ul>
+    </nav>
+</aside>

src/ui/modules/article/components/tableOfContents/table-of-contents.css

@@ -0,0 +1,25 @@
+.article__table-of-contents__wrapper {
+	position: sticky;
+	top: calc(var(--header-height) + 2rem);
+}
+
+.article__table-of-contents__nav {
+	position: absolute;
+	right: 1rem;
+}
+.article__table-of-contents__list {
+	gap: 0.25rem 0;
+}
+.article__table-of-contents__item {
+	margin-inline-start: calc(0.25rem * var(--inline-level));
+	width: fit-content;
+
+	&:hover {
+		color: var(--primary-main);
+	}
+}
+
+.article__table-of-contents__item__link {
+	position: relative;
+	z-index: 1;
+}