feat(posts): show a side menu of the post headings when enabled on the post (#1285)

- Part of datagouv/data.gouv.fr#2073
- Require opendatateam/udata#4021

Author: ThibaudDauce

components/Pages/BlocWithTitleAndSubtitle.vue

@@ -8,8 +8,10 @@
         :placeholder="$t('Titre du bloc')"
         @update:model-value="bloc.title = $event || null"
       />
+      <!-- The id is rendered server-side so that the router finds the anchor of the URL on load -->
       <h2
         v-else-if="bloc.title"
+        :id="slugify(bloc.title)"
         class="text-gray-title text-3xl font-extrabold"
       >
         {{ bloc.title }}

components/Pages/EditoBlocs.vue

@@ -15,101 +15,136 @@
       </BrandedButton>
     </div>
 
-    <div
-      v-for="(bloc, index) in workingBlocs"
-      :key="bloc.id"
-      class="relative"
-      :class="bloc.class !== 'HeroBloc' && (striped ? 'py-24 odd:bg-gray-some even:bg-white' : 'py-12')"
-    >
-      <!-- Add button above the bloc (absolute positioned) -->
-      <div
-        v-if="isEditing"
-        class="absolute -top-4 left-0 right-0 flex items-center justify-center"
-      >
-        <AddBlocDropdown
-          :for-organization="forOrganization"
-          @new-bloc="workingBlocs.splice(index, 0, $event)"
-        >
-          <BrandedButton
-            color="tertiary"
-            size="xs"
-            class="bg-white shadow-sm"
-            :icon="RiAddLine"
-          >
-            {{ $t('Ajouter un bloc') }}
-          </BrandedButton>
-        </AddBlocDropdown>
-      </div>
-      <!-- Bloc toolbar in edit mode -->
-      <div
-        v-if="isEditing"
-        class="absolute left-4 top-4 flex flex-row gap-2 z-10 min-[1530px]:left-8 min-[1530px]:top-1/2 min-[1530px]:-translate-y-1/2 min-[1530px]:flex-col"
-      >
-        <BrandedButton
-          color="tertiary"
-          :icon="RiArrowUpLine"
-          :disabled="index === 0"
-          :title="$t('Monter')"
-          @click="moveBloc(index, -1)"
-        />
-        <BrandedButton
-          color="tertiary"
-          :icon="RiArrowDownLine"
-          :disabled="index === workingBlocs.length - 1"
-          :title="$t('Descendre')"
-          @click="moveBloc(index, 1)"
-        />
-        <BrandedButton
-          color="tertiary"
-          :icon="RiDeleteBinLine"
-          :title="$t('Supprimer')"
-          @click="workingBlocs.splice(index, 1)"
-        />
-      </div>
-
-      <!-- Full-width blocs (like HeroBloc) -->
+    <!-- Side menu, outside of the edit mode whose toolbar lives in the side margins: the
+         full-width blocs opening the page stay above it, the others go next to it -->
+    <template v-if="sidemenu && !isEditing">
       <component
         :is="blocsTypes[bloc.class].component"
-        v-if="blocsTypes[bloc.class] && 'fullWidth' in blocsTypes[bloc.class] && blocsTypes[bloc.class].component"
-        v-model="(workingBlocs[index] as any)"
-        :edit="isEditing"
-        v-bind="bloc.class === 'LinksListBloc' ? { 'main-color': mainColor } : {}"
+        v-for="bloc in leadingFullWidthBlocs"
+        :key="bloc.id"
+        :model-value="(bloc as any)"
+        :edit="false"
       />
+      <div class="container md:flex md:gap-8 py-12">
+        <HeadingsSidemenu
+          v-if="sidemenuHeadings.length"
+          :headings="sidemenuHeadings"
+          class="md:w-1/4 shrink-0"
+        />
+        <div class="flex-1 min-w-0 space-y-12">
+          <template
+            v-for="bloc in workingBlocs.slice(leadingFullWidthBlocs.length)"
+            :key="bloc.id"
+          >
+            <component
+              :is="blocsTypes[bloc.class].component"
+              v-if="blocsTypes[bloc.class]?.component"
+              :model-value="(bloc as any)"
+              :edit="false"
+              v-bind="bloc.class === 'LinksListBloc' ? { 'main-color': mainColor } : {}"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
 
-      <!-- Other blocs use container layout -->
+    <template v-else>
       <div
-        v-else
-        class="container"
+        v-for="(bloc, index) in workingBlocs"
+        :key="bloc.id"
+        class="relative"
+        :class="bloc.class !== 'HeroBloc' && (striped ? 'py-24 odd:bg-gray-some even:bg-white' : 'py-12')"
       >
+        <!-- Add button above the bloc (absolute positioned) -->
+        <div
+          v-if="isEditing"
+          class="absolute -top-4 left-0 right-0 flex items-center justify-center"
+        >
+          <AddBlocDropdown
+            :for-organization="forOrganization"
+            @new-bloc="workingBlocs.splice(index, 0, $event)"
+          >
+            <BrandedButton
+              color="tertiary"
+              size="xs"
+              class="bg-white shadow-sm"
+              :icon="RiAddLine"
+            >
+              {{ $t('Ajouter un bloc') }}
+            </BrandedButton>
+          </AddBlocDropdown>
+        </div>
+        <!-- Bloc toolbar in edit mode -->
+        <div
+          v-if="isEditing"
+          class="absolute left-4 top-4 flex flex-row gap-2 z-10 min-[1530px]:left-8 min-[1530px]:top-1/2 min-[1530px]:-translate-y-1/2 min-[1530px]:flex-col"
+        >
+          <BrandedButton
+            color="tertiary"
+            :icon="RiArrowUpLine"
+            :disabled="index === 0"
+            :title="$t('Monter')"
+            @click="moveBloc(index, -1)"
+          />
+          <BrandedButton
+            color="tertiary"
+            :icon="RiArrowDownLine"
+            :disabled="index === workingBlocs.length - 1"
+            :title="$t('Descendre')"
+            @click="moveBloc(index, 1)"
+          />
+          <BrandedButton
+            color="tertiary"
+            :icon="RiDeleteBinLine"
+            :title="$t('Supprimer')"
+            @click="workingBlocs.splice(index, 1)"
+          />
+        </div>
+
+        <!-- Full-width blocs (like HeroBloc) -->
         <component
           :is="blocsTypes[bloc.class].component"
-          v-if="blocsTypes[bloc.class]?.component"
+          v-if="blocsTypes[bloc.class] && 'fullWidth' in blocsTypes[bloc.class] && blocsTypes[bloc.class].component"
           v-model="(workingBlocs[index] as any)"
           :edit="isEditing"
           v-bind="bloc.class === 'LinksListBloc' ? { 'main-color': mainColor } : {}"
         />
-      </div>
 
-      <!-- Add button below the last bloc -->
-      <div
-        v-if="isEditing && index === workingBlocs.length - 1"
-        class="absolute -bottom-4 left-0 right-0 flex items-center justify-center"
-      >
-        <AddBlocDropdown
-          :for-organization="forOrganization"
-          @new-bloc="workingBlocs.push($event)"
+        <!-- Other blocs use container layout -->
+        <div
+          v-else
+          class="container"
         >
-          <BrandedButton
-            color="tertiary"
-            size="xs"
-            class="bg-white shadow-sm"
-            :icon="RiAddLine"
+          <component
+            :is="blocsTypes[bloc.class].component"
+            v-if="blocsTypes[bloc.class]?.component"
+            v-model="(workingBlocs[index] as any)"
+            :edit="isEditing"
+            v-bind="bloc.class === 'LinksListBloc' ? { 'main-color': mainColor } : {}"
+          />
+        </div>
+
+        <!-- Add button below the last bloc -->
+        <div
+          v-if="isEditing && index === workingBlocs.length - 1"
+          class="absolute -bottom-4 left-0 right-0 flex items-center justify-center"
+        >
+          <AddBlocDropdown
+            :for-organization="forOrganization"
+            @new-bloc="workingBlocs.push($event)"
           >
-            {{ $t('Ajouter un bloc') }}
-          </BrandedButton>
-        </AddBlocDropdown>
+            <BrandedButton
+              color="tertiary"
+              size="xs"
+              class="bg-white shadow-sm"
+              :icon="RiAddLine"
+            >
+              {{ $t('Ajouter un bloc') }}
+            </BrandedButton>
+          </AddBlocDropdown>
+        </div>
       </div>
-    </div>
+    </template>
 
     <!-- Empty state. In edit mode it invites adding a first bloc; in view mode it
          is only shown when the host opts in via `emptyCtaLabel` (e.g. an org admin
@@ -177,10 +212,12 @@
 <script setup lang="ts">
 import type { ComponentProps } from 'vue-component-type-helpers'
 import * as Sentry from '@sentry/nuxt'
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, formatMarkdown } from '@datagouv/components-next'
 import { RiAddLine, RiArrowDownLine, RiArrowUpLine, RiDeleteBinLine, RiEdit2Line } from '@remixicon/vue'
 import AddBlocDropdown from './AddBlocDropdown.vue'
+import HeadingsSidemenu from '~/components/Sidemenu/HeadingsSidemenu.vue'
 import type { PageBloc } from '~/types/pages'
+import type { Heading } from '~/utils/headings'
 import { isMeAdmin } from '~/utils/auth'
 
 const blocsTypes = useBlocsTypes()
@@ -190,6 +227,7 @@ const props = withDefaults(defineProps<{
   edit?: boolean
   editable?: boolean
   striped?: boolean
+  sidemenu?: boolean
   hideEditButton?: boolean
   // Trims the "add bloc" menu for organization presentation pages (no Hero, Markdown
   // moved into the layout group). See AddBlocDropdown.
@@ -204,6 +242,7 @@ const props = withDefaults(defineProps<{
   edit: false,
   editable: false,
   striped: true,
+  sidemenu: false,
   hideEditButton: false,
   forOrganization: false,
   mainColor: 'primary',
@@ -238,6 +277,21 @@ watchEffect(() => {
 
 const workingBlocs = computed(() => localBlocs.value ?? props.blocs)
 
+const isFullWidth = (bloc: PageBloc) => 'fullWidth' in (blocsTypes[bloc.class] ?? {})
+const leadingFullWidthBlocs = computed(() => {
+  const index = workingBlocs.value.findIndex(bloc => !isFullWidth(bloc))
+  return workingBlocs.value.slice(0, index === -1 ? workingBlocs.value.length : index)
+})
+// The title of each bloc, then the headings of its Markdown, rendered with the same options
+// as MarkdownBloc so that their ids are the ones on the page
+const sidemenuHeadings = computed<Array<Heading>>(() => workingBlocs.value
+  .filter(bloc => !isFullWidth(bloc))
+  .flatMap(bloc => [
+    ...(bloc.title ? [{ id: slugify(bloc.title), label: bloc.title, level: 2 }] : []),
+    ...(bloc.class === 'MarkdownBloc' ? anchorHeadings(formatMarkdown(bloc.content, { minDepth: 2, noHeadings: false })).headings : []),
+  ]),
+)
+
 // Check if there are unsaved changes
 const hasUnsavedChanges = computed(() => {
   return localBlocs.value !== null && JSON.stringify(toRaw(localBlocs.value)) !== JSON.stringify(toRaw(props.blocs))

components/Posts/DescribePost.vue

@@ -86,6 +86,14 @@
           ]"
         />
       </div>
+      <div class="fr-fieldset__element">
+        <ToggleSwitch
+          v-model="form.sidemenu"
+          :label="t('Menu latéral')"
+          :label-true="t('Un menu à côté du contenu renvoie vers chacun de ses titres.')"
+          :label-false="t('Pas de menu à côté du contenu.')"
+        />
+      </div>
       <div class="fr-fieldset__element">
         <TagsSelect
           v-model="form.tags"
@@ -145,6 +153,7 @@
 
 <script setup lang="ts">
 import { BrandedButton, SearchableSelect } from '@datagouv/components-next'
+import ToggleSwitch from '~/components/Form/ToggleSwitch.vue'
 import type { PaginatedArray } from '~/types/types'
 import type { Post, PostAncestor, PostForm } from '~/types/posts'
 

components/Posts/PostView.vue

@@ -43,6 +43,7 @@
       v-if="isFullPageBlocs"
       :blocs="post.blocs ?? []"
       editable
+      :sidemenu="post.sidemenu"
       :on-save="saveBlocs"
     />
 
@@ -101,29 +102,33 @@
             :blocs="post.blocs ?? []"
             editable
             hide-edit-button
+            :sidemenu="post.sidemenu"
             :on-save="saveBlocs"
           />
         </div>
-        <div
-          v-else-if="post.body_type === 'markdown'"
-          class="container"
-        >
-          <MarkdownViewer
-            :content="post.content"
-            :min-heading="2"
-            size="md"
-            class="max-w-4xl"
-          />
-        </div>
         <div
           v-else
           class="container"
+          :class="{ 'md:flex md:gap-8': anchoredBody?.headings.length }"
         >
-          <div
-            class="max-w-4xl"
-            :class="markdownClasses"
-            v-html="post.content"
+          <HeadingsSidemenu
+            v-if="anchoredBody?.headings.length"
+            :headings="anchoredBody.headings"
+            class="md:w-1/4 shrink-0"
           />
+          <div class="max-w-4xl min-w-0 flex-1">
+            <MarkdownViewer
+              v-if="post.body_type === 'markdown'"
+              :content="post.content"
+              :min-heading="2"
+              size="md"
+            />
+            <div
+              v-else
+              :class="markdownClasses"
+              v-html="anchoredBody?.html ?? post.content"
+            />
+          </div>
         </div>
 
         <div class="container">
@@ -140,11 +145,12 @@
 </template>
 
 <script setup lang="ts">
-import { markdownClasses, MarkdownViewer, BrandedButton, toast, FormattedDate, TranslationT } from '@datagouv/components-next'
+import { formatMarkdown, markdownClasses, MarkdownViewer, BrandedButton, toast, FormattedDate, TranslationT } from '@datagouv/components-next'
 import { RiEdit2Line } from '@remixicon/vue'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import EditButton from '~/components/Buttons/EditButton.vue'
 import EditoBlocs from '~/components/Pages/EditoBlocs.vue'
+import HeadingsSidemenu from '~/components/Sidemenu/HeadingsSidemenu.vue'
 import type { PageBloc } from '~/types/pages'
 import type { Post } from '~/types/posts'
 
@@ -163,6 +169,15 @@ const absoluteUrlToRelative = useAbsoluteUrlToRelative()
 
 const blocsSection = ref<HTMLElement | null>(null)
 
+// Only with the side menu: an HTML body is then rendered again with ids on its headings.
+// Markdown goes through the options of the MarkdownViewer below to get the same ids.
+const anchoredBody = computed(() => {
+  if (!props.post.sidemenu || props.post.body_type === 'blocs') return null
+  return anchorHeadings(props.post.body_type === 'markdown'
+    ? formatMarkdown(props.post.content, { minDepth: 2, noHeadings: false })
+    : props.post.content)
+})
+
 // Enter edit mode and scroll to the blocs, which start below the article image:
 // with a tall image the user would otherwise see no visible change on click.
 async function editContent() {