fix: generate an id for each headings in the page main contents

Since #be4d907 the ids was no longer addded to headings in
useHeadingsTree hook. It was a bad practice to manipulate the DOM
that way. However, I did not move the implementation elsewhere...
To fix this, I now use rehype-slug on both markdown contents and
html string coming from WordPress.
I'm not sure the dynamic imports are really useful here since the
table of contents is on almost all pages but Jest was failing with
regular import because of ESM. It is the only thing that makes the
tests functional again so... However if we want to test the
`updateContentTree` function, Jest fails for the same reason. So I
decided to not test this function. I've already spend too much time
on this issue.
Another problem: the ToC on projects page. Currently we use the ref
on the body but the page contents are imported dynamically so the
hook is executed before the contents are loaded. It makes the ToC
empty... We should refactor the pages so we can use the ref
directly on the imported contents.

4 files changed, 31 insertions, 5 deletions

diff --git a/src/utils/helpers/index.ts b/src/utils/helpers/index.ts
index 79077de..92f9424 100644
--- a/src/utils/helpers/index.ts
+++ b/src/utils/helpers/index.ts
@@ -3,6 +3,7 @@ export * from './images';
 export * from './pages';
 export * from './reading-time';
 export * from './refs';
+export * from './rehype';
 export * from './rss';
 export * from './schema-org';
 export * from './strings';
diff --git a/src/utils/helpers/pages.tsx b/src/utils/helpers/pages.tsx
index 62a582f..7b6bdca 100644
--- a/src/utils/helpers/pages.tsx
+++ b/src/utils/helpers/pages.tsx
@@ -109,9 +109,9 @@ export const getPostsWithUrl = (posts: Article[]): PostData[] =>
  * @param {EdgesResponse<RawArticle>[]} rawData - The raw data.
  * @returns {PostData[]} An array of posts.
  */
-export const getPostsList = (
+export const getPostsList = async (
   rawData: EdgesResponse<RawArticle>[]
-): PostData[] => {
+): Promise<PostData[]> => {
   const articlesList: RawArticle[] = [];
   rawData.forEach((articleData) => {
     articleData.edges.forEach((edge) => {
@@ -120,6 +120,8 @@ export const getPostsList = (
   });
 
   return getPostsWithUrl(
-    articlesList.map((article) => getArticleFromRawData(article))
+    await Promise.all(
+      articlesList.map(async (article) => getArticleFromRawData(article))
+    )
   );
 };
diff --git a/src/utils/helpers/rehype.ts b/src/utils/helpers/rehype.ts
new file mode 100644
index 0000000..2716c62
--- /dev/null
+++ b/src/utils/helpers/rehype.ts
@@ -0,0 +1,23 @@
+/**
+ * Update a stringified HTML tree using unified plugins.
+ *
+ * It will parse the provided content to add id to each headings.
+ *
+ * @param {string} content - The page contents.
+ * @returns {string} The updated page contents.
+ */
+export const updateContentTree = async (content: string): Promise<string> => {
+  const { unified } = await import('unified');
+  const rehypeParse = (await import('rehype-parse')).default;
+  const rehypeSanitize = (await import('rehype-sanitize')).default;
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeStringify = (await import('rehype-stringify')).default;
+
+  return unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeSlug)
+    .use(() => rehypeSanitize({ clobberPrefix: 'h-' }))
+    .use(rehypeStringify)
+    .processSync(content)
+    .toString();
+};
diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts
index 6de60cc..d9c3b1e 100644
--- a/src/utils/helpers/rss.ts
+++ b/src/utils/helpers/rss.ts
@@ -18,8 +18,8 @@ const getAllArticles = async (): Promise<Article[]> => {
   const rawArticles = await getArticles({ first: totalArticles });
   const articles: Article[] = [];
 
-  rawArticles.edges.forEach((edge) => {
-    articles.push(getArticleFromRawData(edge.node));
+  rawArticles.edges.forEach(async (edge) => {
+    articles.push(await getArticleFromRawData(edge.node));
   });
 
   return articles;