General publication fixes (#214)

* feat: refactor table of contents to use processed headings in different langs and avoid re-parsing body

* fix: add collapse/expand toc toggle

Author: itsmohmans

components/Publication/ToC.vue

@@ -1,44 +1,59 @@
 <script setup lang="ts">
-  const props = defineProps<{
-    body: string | undefined
-  }>()
-
-  const toc = ref<{ id: string; text: string; level: number }[]>([])
-
-  watchEffect(() => {
-    if (!props.body) {
-      toc.value = []
-      return
-    }
+  import type { PublicationHeading } from '~/types/publication'
 
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(props.body, 'text/html')
-    const headings = doc.querySelectorAll('h1, h2, h3, h4')
+  defineProps<{
+    headings: PublicationHeading[]
+  }>()
 
-    toc.value = Array.from(headings).map((el) => {
-      return {
-        id: el.id,
-        text: el.textContent || '',
-        level: parseInt(el.tagName.substring(1)), // e.g. "h2" -> 2
-      }
-    })
-  })
+  const isOpen = ref(true)
+  const listId = useId()
 </script>
 
 <template>
-  <nav v-if="toc.length" class="toc font-LTZarid">
+  <nav v-if="headings.length" class="toc font-LTZarid">
     <h4
-      class="mb-2 border-b border-b-colors-neutral-placeholder border-opacity-20 pb-1 font-bold"
+      class="flex items-center justify-between gap-2 border-b border-b-colors-neutral-placeholder border-opacity-20 pb-1 font-bold"
     >
       {{ $t('publications.single.tableOfContent') }}
+      <UiButton
+        variant="ghost"
+        size="sm"
+        class="aspect-square shrink-0 !rounded-full !p-1"
+        :title="
+          isOpen
+            ? $t('publications.single.collapseToC')
+            : $t('publications.single.expandToC')
+        "
+        :aria-expanded="isOpen"
+        :aria-controls="listId"
+        @click="isOpen = !isOpen"
+      >
+        <Icon
+          name="mdi:chevron-down"
+          size="20"
+          class="transition-transform"
+          :class="{ 'rotate-180': isOpen }"
+        />
+      </UiButton>
     </h4>
-    <ul class="list-inside list-disc">
-      <li v-for="item in toc" :key="item.id" :class="`toc-level-${item.level}`">
-        <NuxtLink class="hover:underline" :href="`#${item.id}`">{{
-          item.text
-        }}</NuxtLink>
-      </li>
-    </ul>
+    <div
+      :id="listId"
+      class="grid transition-[grid-template-rows] duration-200 ease-out"
+      :class="isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+      :inert="!isOpen"
+    >
+      <ul class="list-inside list-disc overflow-hidden pt-2">
+        <li
+          v-for="item in headings"
+          :key="item.id"
+          :class="`toc-level-${item.level}`"
+        >
+          <NuxtLink class="hover:underline" :href="`#${item.id}`">{{
+            item.text
+          }}</NuxtLink>
+        </li>
+      </ul>
+    </div>
   </nav>
 </template>
 

composables/publications.ts

@@ -1,28 +1,41 @@
+import type {
+  ProcessedPublicationBody,
+  PublicationHeading,
+} from '~/types/publication'
+
 export const usePublications = () => {
   // const strapiUrl = useStrapiUrl()
 
-  const addHeadingIds = (html: string | undefined) => {
-    if (!html) return
+  // Adds ids to headings and returns html with toc
+  const processBody = (html: string | undefined): ProcessedPublicationBody => {
+    if (!html) return { html: '', headings: [] }
+
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
     const headings = doc.querySelectorAll('h1, h2, h3, h4')
 
-    headings.forEach((el, idx) => {
+    const toc: PublicationHeading[] = Array.from(headings).map((el, idx) => {
       if (!el.id) {
         // add id for each heading
-        const slug =
-          el.textContent
-            ?.toLowerCase()
-            // FIXME: text should be trimmed before replace spaces with '-'
-            .replace(/\s+/g, '-')
-            // FIXME: this does not work with arabic characters
-            .replace(/[^\w-]/g, '') || `heading-${idx}`
-
-        el.id = slug
+        const slug = el.textContent
+          ?.trim()
+          .toLowerCase()
+          .replace(/\s+/g, '-')
+          .replace(/[^\p{L}\p{N}-]/gu, '') // match anything other than letters, numbers, and hyphens
+
+        // HTML ids must begin with a letter and contain at least one char;
+        // fall back to a unique id when the derived slug is unusable
+        el.id = slug && /^\p{L}/u.test(slug) ? slug : `heading-${idx}`
+      }
+
+      return {
+        id: el.id,
+        text: el.textContent || '',
+        level: parseInt(el.tagName.substring(1)),
       }
     })
 
-    return doc.body.innerHTML
+    return { html: doc.body.innerHTML, headings: toc }
   }
 
   const getPublicationCoverUrl = (coverUrl?: string | null): string | null => {
@@ -41,7 +54,7 @@ export const usePublications = () => {
     // return `${baseUrl}${coverUrl.startsWith('/') ? '' : '/'}${coverUrl}`
   }
   return {
-    addHeadingIds,
+    processBody,
     getPublicationCoverUrl,
   }
 }

i18n/locales/ar.json

@@ -291,6 +291,8 @@
     "single": {
       "authors": "المؤلفون:",
       "tableOfContent": "جدول المحتويات",
+      "collapseToC": "إخفاء جدول المحتويات",
+      "expandToC": "عرض جدول المحتويات",
       "lastUpdated": "تاريخ آخر تحديث",
       "share": {
         "copyUrl": "نسْخ الرابط",

i18n/locales/ckb.json

@@ -291,6 +291,8 @@
     "single": {
       "authors": "نووسەران:",
       "tableOfContent": "پێرستی بابەتەکان",
+      "collapseToC": "شاردنەوەی پێرستی بابەتەکان",
+      "expandToC": "پێرستی بابەتەکان فراوان بکە",
       "lastUpdated": "دوایین نوێکردنەوە",
       "share": {
         "copyUrl": "کۆپیکردنی بەستەر",

i18n/locales/en.json

@@ -291,6 +291,8 @@
     "single": {
       "authors": "Authors:",
       "tableOfContent": "Table of Content",
+      "collapseToC": "Collapse table of content",
+      "expandToC": "Expand table of content",
       "lastUpdated": "Last Updated",
       "share": {
         "copyUrl": "Copy Link",

i18n/locales/fr.json

@@ -220,6 +220,8 @@
     "single": {
       "authors": "Auteurs :",
       "tableOfContent": "Table des Matières",
+      "collapseToC": "Masquer la table des matières",
+      "expandToC": "Afficher la table des matières",
       "lastUpdated": "Dernière mise à jour",
       "share": {
         "copyUrl": "Copier le Lien",

pages/[[region]]/publications/[slug].vue

@@ -39,7 +39,7 @@
           <!-- Side Table of Content -->
           <PublicationToC
             class="rounded-md border border-colors-neutral-placeholder border-opacity-20 p-4"
-            :body="processedBody"
+            :headings="processedBody.headings"
           />
 
           <!-- Authors and Meta Row -->
@@ -96,15 +96,15 @@
         <div class="mx-auto max-w-lg px-2 md:hidden">
           <PublicationToC
             class="rounded-md border border-colors-neutral-placeholder border-opacity-20 p-4"
-            :body="processedBody"
+            :headings="processedBody.headings"
           />
         </div>
 
         <!-- Publication Body -->
         <div
           v-if="publication.body"
           class="publication-body mx-auto max-w-lg text-pretty font-LTZarid text-base leading-relaxed text-colors-neutral-foreground"
-          v-html="processedBody"
+          v-html="processedBody.html"
         />
       </div>
     </article>
@@ -115,11 +115,10 @@
   import type { StrapiLocale } from '@nuxtjs/strapi'
   import type { Publication } from '~/types/strapi'
 
-  const { addHeadingIds } = usePublications()
+  const { processBody, getPublicationCoverUrl } = usePublications()
   const { locale } = useI18n()
   const { find } = useStrapi()
   const route = useRoute()
-  const { getPublicationCoverUrl } = usePublications()
   // const { region } = useGeolocation()
 
   const slug = computed(() => route.params.slug as string)
@@ -156,7 +155,7 @@
   )
 
   const publication = computed(() => data.value?.data?.[0])
-  const processedBody = computed(() => addHeadingIds(publication.value?.body))
+  const processedBody = computed(() => processBody(publication.value?.body))
 
   // URL for back to publications
   const publicationsUrl = computed(() => {

types/publication.ts

@@ -4,4 +4,15 @@ import type {
   PublicationAuthor as Author,
 } from './strapi'
 
+export interface PublicationHeading {
+  id: string
+  text: string
+  level: number
+}
+
+export interface ProcessedPublicationBody {
+  html: string
+  headings: PublicationHeading[]
+}
+
 export type { Category, Region, Author }