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.

3 files changed, 59 insertions, 52 deletions

diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index 789ef2b..82bde41 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -1,19 +1,20 @@
-import {
-  type Article,
-  type ArticleCard,
-  type EdgesResponse,
-  type EndCursorResponse,
-  type GraphQLEdgesInput,
-  type GraphQLPageInfo,
-  type RawArticle,
-  type RawArticlePreview,
-  type Slug,
-  type TotalItems,
+import type {
+  Article,
+  ArticleCard,
+  EdgesResponse,
+  EndCursorResponse,
+  GraphQLEdgesInput,
+  GraphQLPageInfo,
+  RawArticle,
+  RawArticlePreview,
+  Slug,
+  TotalItems,
 } from '../../types';
 import {
   getAuthorFromRawData,
   getImageFromRawData,
   getPageLinkFromRawData,
+  updateContentTree,
 } from '../../utils/helpers';
 import { fetchAPI } from './api';
 import {
@@ -50,7 +51,9 @@ export type GetArticlesReturn = {
  * @param {RawArticle} data - The page raw data.
  * @returns {Article} The page data.
  */
-export const getArticleFromRawData = (data: RawArticle): Article => {
+export const getArticleFromRawData = async (
+  data: RawArticle
+): Promise<Article> => {
   const {
     acfPosts,
     author,
@@ -67,19 +70,19 @@ export const getArticleFromRawData = (data: RawArticle): Article => {
   } = data;
 
   return {
-    content: contentParts.afterMore,
+    content: await updateContentTree(contentParts.afterMore),
     id: databaseId,
     intro: contentParts.beforeMore,
     meta: {
       author: author && getAuthorFromRawData(author.node, 'page'),
-      commentsCount: commentCount || 0,
+      commentsCount: commentCount ?? 0,
       cover: featuredImage?.node
         ? getImageFromRawData(featuredImage.node)
         : undefined,
       dates: { publication: date, update: modified },
       seo: {
-        description: seo?.metaDesc || '',
-        title: seo?.title || '',
+        description: seo?.metaDesc ?? '',
+        title: seo?.title ?? '',
       },
       thematics: acfPosts.postsInThematic?.map((thematic) =>
         getPageLinkFromRawData(thematic, 'thematic')
diff --git a/src/services/graphql/thematics.ts b/src/services/graphql/thematics.ts
index 7a57824..c02a42c 100644
--- a/src/services/graphql/thematics.ts
+++ b/src/services/graphql/thematics.ts
@@ -1,13 +1,13 @@
-import {
-  type EdgesResponse,
-  type GraphQLEdgesInput,
-  type PageLink,
-  type RawArticle,
-  type RawThematic,
-  type RawThematicPreview,
-  type Slug,
-  type Thematic,
-  type TotalItems,
+import type {
+  EdgesResponse,
+  GraphQLEdgesInput,
+  PageLink,
+  RawArticle,
+  RawThematic,
+  RawThematicPreview,
+  Slug,
+  Thematic,
+  TotalItems,
 } from '../../types';
 import {
   getImageFromRawData,
@@ -59,7 +59,9 @@ export const getThematicsPreview = async (
  * @param {RawThematic} data - The page raw data.
  * @returns {Thematic} The page data.
  */
-export const getThematicFromRawData = (data: RawThematic): Thematic => {
+export const getThematicFromRawData = async (
+  data: RawThematic
+): Promise<Thematic> => {
   const {
     acfThematics,
     contentParts,
@@ -84,9 +86,9 @@ export const getThematicFromRawData = (data: RawThematic): Thematic => {
 
     posts.forEach((post) => {
       if (post.acfPosts.postsInTopic) {
-        post.acfPosts.postsInTopic.forEach((topic) =>
-          topics.push(getPageLinkFromRawData(topic, 'topic'))
-        );
+        for (const topic of post.acfPosts.postsInTopic) {
+          topics.push(getPageLinkFromRawData(topic, 'topic'));
+        }
       }
     });
 
@@ -103,16 +105,18 @@ export const getThematicFromRawData = (data: RawThematic): Thematic => {
     id: databaseId,
     intro: contentParts.beforeMore,
     meta: {
-      articles: acfThematics.postsInThematic.map((post) =>
-        getArticleFromRawData(post)
+      articles: await Promise.all(
+        acfThematics.postsInThematic.map(async (post) =>
+          getArticleFromRawData(post)
+        )
       ),
       cover: featuredImage?.node
         ? getImageFromRawData(featuredImage.node)
         : undefined,
       dates: { publication: date, update: modified },
       seo: {
-        description: seo?.metaDesc || '',
-        title: seo?.title || '',
+        description: seo?.metaDesc ?? '',
+        title: seo?.title ?? '',
       },
       topics: getRelatedTopics(acfThematics.postsInThematic),
       wordsCount: info.wordsCount,
diff --git a/src/services/graphql/topics.ts b/src/services/graphql/topics.ts
index 921b10d..d8a9b6a 100644
--- a/src/services/graphql/topics.ts
+++ b/src/services/graphql/topics.ts
@@ -1,13 +1,13 @@
-import {
-  type EdgesResponse,
-  type GraphQLEdgesInput,
-  type PageLink,
-  type RawArticle,
-  type RawTopic,
-  type RawTopicPreview,
-  type Slug,
-  type Topic,
-  type TotalItems,
+import type {
+  EdgesResponse,
+  GraphQLEdgesInput,
+  PageLink,
+  RawArticle,
+  RawTopic,
+  RawTopicPreview,
+  Slug,
+  Topic,
+  TotalItems,
 } from '../../types';
 import {
   getImageFromRawData,
@@ -59,7 +59,7 @@ export const getTopicsPreview = async (
  * @param {RawTopic} data - The page raw data.
  * @returns {Topic} The page data.
  */
-export const getTopicFromRawData = (data: RawTopic): Topic => {
+export const getTopicFromRawData = async (data: RawTopic): Promise<Topic> => {
   const {
     acfTopics,
     contentParts,
@@ -84,9 +84,9 @@ export const getTopicFromRawData = (data: RawTopic): Topic => {
 
     posts.forEach((post) => {
       if (post.acfPosts.postsInThematic) {
-        post.acfPosts.postsInThematic.forEach((thematic) =>
-          thematics.push(getPageLinkFromRawData(thematic, 'thematic'))
-        );
+        for (const thematic of post.acfPosts.postsInThematic) {
+          thematics.push(getPageLinkFromRawData(thematic, 'thematic'));
+        }
       }
     });
 
@@ -103,8 +103,8 @@ export const getTopicFromRawData = (data: RawTopic): Topic => {
     id: databaseId,
     intro: contentParts.beforeMore,
     meta: {
-      articles: acfTopics.postsInTopic.map((post) =>
-        getArticleFromRawData(post)
+      articles: await Promise.all(
+        acfTopics.postsInTopic.map(async (post) => getArticleFromRawData(post))
       ),
       cover: featuredImage?.node
         ? getImageFromRawData(featuredImage.node)
@@ -112,8 +112,8 @@ export const getTopicFromRawData = (data: RawTopic): Topic => {
       dates: { publication: date, update: modified },
       website: acfTopics.officialWebsite,
       seo: {
-        description: seo?.metaDesc || '',
-        title: seo?.title || '',
+        description: seo?.metaDesc ?? '',
+        title: seo?.title ?? '',
       },
       thematics: getRelatedThematics(acfTopics.postsInTopic),
       wordsCount: info.wordsCount,