feat(seo): use getDescriptionShort to handle long description

components/Organization/New/Step3CompleteTheOrganization.vue

@@ -41,14 +41,12 @@
               <small v-if="organization.acronym">{{ organization.acronym }}</small>
             </a>
           </h4>
-          <Suspense>
-            <AsyncTextClamp
-              class="fr-mt-1w fr-mb-2w fr-hidden fr-unhidden-sm overflow-wrap-anywhere"
-              :auto-resize="true"
-              :text="removeMarkdown(organization.description)"
-              :max-lines="2"
-            />
-          </Suspense>
+          <TextClamp
+            class="fr-mt-1w fr-mb-2w fr-hidden fr-unhidden-sm overflow-wrap-anywhere"
+            :auto-resize="true"
+            :text="removeMarkdownSync(organization.description)"
+            :max-lines="2"
+          />
         </div>
       </div>
     </article>
@@ -97,7 +95,7 @@
 
 <script setup lang="ts">
 import { BrandedButton, OrganizationLogo, PaddedContainer } from '@datagouv/components-next'
-import { removeMarkdown, SimpleBanner, type Organization } from '@datagouv/components-next'
+import { removeMarkdownSync, SimpleBanner, type Organization } from '@datagouv/components-next'
 
 defineProps<{
   organization: Organization

datagouv-components/src/components/DataserviceCard.vue

@@ -117,23 +117,23 @@
     </div>
     <component
       :is="config.textClamp"
-      v-if="config.textClamp && description && showDescription"
+      v-if="config.textClamp && dataservice.description && showDescription"
       class="text-sm mt-2 mb-0"
       :auto-resize="true"
-      :text="description"
+      :text="removeMarkdownSync(dataservice.description)"
       :max-lines="2"
     />
   </article>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
 import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
-import { removeMarkdown } from '../functions/markdown'
+import { removeMarkdownSync } from '../functions/markdown'
 import { getOwnerName } from '../functions/owned'
 import type { Dataservice } from '../types/dataservices'
 import { useTranslation } from '../composables/useTranslation'
@@ -173,11 +173,6 @@ const config = useComponentsConfig()
 const isTabularApi = computed(() => {
   return config.tabularApiDataserviceId === props.dataservice.id
 })
-
-const description = ref('')
-watchEffect(async () => {
-  description.value = await removeMarkdown(props.dataservice.description)
-})
 </script>
 
   <style scoped>

datagouv-components/src/components/DatasetCard.vue

@@ -148,10 +148,10 @@
         </div>
         <component
           :is="config.textClamp"
-          v-if="showDescriptionShort && config && config.textClamp && descriptionShort"
+          v-if="showDescriptionShort && config && config.textClamp"
           class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere hidden sm:block"
           :auto-resize="true"
-          :text="descriptionShort"
+          :text="getDescriptionShort(props.dataset)"
           :max-lines="2"
         />
       </div>
@@ -161,13 +161,13 @@
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
-import { computed, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { RiDownloadLine, RiEyeLine, RiLineChartLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import { summarize } from '../functions/helpers'
 import { useFormatDate } from '../functions/dates'
 import { getOwnerName } from '../functions/owned'
-import { getDescriptionShort } from '../functions/datasets'
+import { getDescriptionShort } from '../functions/description'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
 import DatasetQualityInline from './DatasetQualityInline.vue'
@@ -204,10 +204,4 @@ const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
 const ownerName = computed(() => getOwnerName(props.dataset))
 const config = useComponentsConfig()
-
-const descriptionShort = ref('')
-watchEffect(async () => {
-  if (!props.showDescriptionShort) return
-  descriptionShort.value = await getDescriptionShort(props.dataset.description, props.dataset.description_short)
-})
 </script>

datagouv-components/src/components/OrganizationCard.vue

@@ -60,8 +60,8 @@
       </div>
       <p class="mt-1 mb-0">
         <TextClamp
-          v-if="description"
-          :text="description"
+          v-if="organization.description"
+          :text="removeMarkdownSync(organization.description)"
           :max-lines="3"
         />
       </p>
@@ -71,8 +71,8 @@
 
 <script setup lang="ts">
 import { RiLineChartLine, RiDatabase2Line, RiTerminalLine, RiSubtractLine } from '@remixicon/vue'
-import { computed, ref, watchEffect } from 'vue'
-import { removeMarkdown } from '../functions/markdown'
+import { computed } from 'vue'
+import { removeMarkdownSync } from '../functions/markdown'
 import { getOrganizationType } from '../functions/organizations'
 import type { Organization } from '../types/organizations'
 import OwnerType from './OwnerType.vue'
@@ -87,9 +87,4 @@ const props = defineProps<{
 const { t } = useTranslation()
 
 const type = computed(() => getOrganizationType(props.organization))
-
-const description = ref('')
-watchEffect(async () => {
-  description.value = await removeMarkdown(props.organization.description)
-})
 </script>

datagouv-components/src/functions/datasets.ts

@@ -1,11 +1,6 @@
 import { useComponentsConfig } from '../config'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { CommunityResource, Resource } from '../types/resources'
-import { removeMarkdown } from './markdown'
-
-// Dataset description constants
-export const DESCRIPTION_SHORT_MAX_LENGTH = 200
-export const DESCRIPTION_MIN_LENGTH = 200
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -28,29 +23,6 @@ export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Datas
   return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
 }
 
-/**
- * Returns the short description to display.
- * If description_short is provided, it is used.
- * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
- */
-export async function getDescriptionShort(
-  description: string | null | undefined,
-  descriptionShort: string | null | undefined,
-): Promise<string> {
-  if (descriptionShort?.trim()) {
-    return descriptionShort
-  }
-  if (description?.trim()) {
-    // description field is a markdown field that may contain HTML tags, so we should trim it
-    const plainText = (await removeMarkdown(description)).trim()
-    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
-      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
-    }
-    return plainText
-  }
-  return ''
-}
-
 export function getResourceFilesize(resource: Resource): null | number {
   if (resource.filesize) return resource.filesize
   if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number

datagouv-components/src/functions/description.ts

@@ -0,0 +1,28 @@
+import { removeMarkdownSync } from './markdown'
+
+// Dataset description constants
+export const DESCRIPTION_SHORT_MAX_LENGTH = 200
+export const DESCRIPTION_MIN_LENGTH = 200
+
+/**
+ * Returns the short description to display.
+ * If description_short is provided, it is used.
+ * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
+ */
+export function getDescriptionShort({ description, descriptionShort }: {
+  description: string | null | undefined
+  descriptionShort?: string | null | undefined
+}) {
+  if (descriptionShort?.trim()) {
+    return descriptionShort
+  }
+  if (description?.trim()) {
+    // description field is a markdown field that may contain HTML tags, so we should trim it
+    const plainText = removeMarkdownSync(description).trim()
+    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
+      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
+    }
+    return plainText
+  }
+  return ''
+}

datagouv-components/src/functions/markdown.ts

@@ -62,7 +62,7 @@ export function formatMarkdown(md: string, minDepth = 3) {
   return String(result)
 }
 
-export async function removeMarkdown(text: string) {
+export async function removeMarkdownAsync(text: string) {
   const file = await unified()
     // Take Markdown as input and turn it into MD syntax tree
     .use(remarkParse, { fragment: true })
@@ -73,6 +73,19 @@ export async function removeMarkdown(text: string) {
   return String(file)
 }
 
+export function removeMarkdownSync(text: string) {
+  const file = unified()
+    // Take Markdown as input and turn it into MD syntax tree
+    .use(remarkParse, { fragment: true })
+    .use(remarkGfm)
+    .use(strip)
+    .use(remarkStringify)
+    .processSync(text)
+  return String(file)
+}
+
+export { removeMarkdownAsync as removeMarkdown }
+
 const prose = 'prose prose-neutral max-w-none prose-strong:text-gray-plain'
 const proseSm = 'prose-p:text-sm prose-sm'
 const proseTable = 'prose-table:bg-gray-some prose-table:overflow-visible prose-thead:border-b-2 prose-thead:border-black prose-tr:data-[is-header=true]:border-b-2 prose-tr:data-[is-header=true]:border-black prose-tr:even:bg-gray-lower prose-tr:border-b-0 *:prose-th:m-0 *:prose-td:m-0 prose-th:p-4 prose-td:p-4'

datagouv-components/src/main.ts

@@ -82,6 +82,7 @@ export * from './composables/useTranslation'
 export * from './functions/activities'
 export * from './functions/datasets'
 export * from './functions/dates'
+export * from './functions/description'
 export * from './functions/helpers'
 export * from './functions/markdown'
 export * from './functions/matomo'

pages/dataservices/[did].vue

@@ -245,7 +245,7 @@
 </template>
 
 <script setup lang="ts">
-import { isOrganizationCertified, BrandedButton, LoadingBlock, Swagger, ReadMore, SimpleBanner, type Dataservice, AvatarWithName, useFormatDate, StatBox, MarkdownViewer } from '@datagouv/components-next'
+import { isOrganizationCertified, BrandedButton, LoadingBlock, Swagger, ReadMore, SimpleBanner, type Dataservice, AvatarWithName, useFormatDate, StatBox, MarkdownViewer, getDescriptionShort } from '@datagouv/components-next'
 import { RiArrowDownSLine, RiArrowUpSLine, RiDeleteBinLine, RiExternalLinkLine, RiLockLine } from '@remixicon/vue'
 import AdminBadge from '~/components/AdminBadge/AdminBadge.vue'
 import EditButton from '~/components/Buttons/EditButton.vue'
@@ -275,7 +275,7 @@ const url = computed(() => `/api/1/dataservices/${route.params.did}/`)
 const { data: dataservice, status } = await useAPI<Dataservice>(url, { redirectOn404: true, redirectOnSlug: 'did' })
 
 const title = computed(() => `API - ${dataservice.value?.title} | ${config.public.title}`)
-const description = computed(() => dataservice.value?.description)
+const description = computed(() => dataservice.value ? getDescriptionShort(dataservice.value) : '')
 const robots = computed(() => dataservice.value && dataservice.value.archived_at ? 'noindex' : 'all')
 
 useSeoMeta({

pages/datasets/[did].vue

@@ -468,6 +468,7 @@ import {
   useMetrics,
   type DatasetMetrics,
   TranslationT,
+  getDescriptionShort,
 } from '@datagouv/components-next'
 import {
   RiDeleteBinLine,
@@ -510,7 +511,7 @@ const { data: dataset, status } = await useAPI<DatasetV2WithFullObject>(url, {
 
 const title = computed(() => t('Jeu de données - {title} | {site}', { title: dataset.value?.title ?? '', site: config.public.title }))
 const robots = computed(() => dataset.value && dataset.value.archived ? 'noindex' : 'all')
-const description = computed(() => dataset.value?.description_short)
+const description = computed(() => dataset.value ? getDescriptionShort(dataset.value) : '')
 
 useSeoMeta({
   title,

pages/reuses/[rid].vue

@@ -170,7 +170,7 @@
 </template>
 
 <script setup lang="ts">
-import { isOrganizationCertified, Avatar, BrandedButton, LoadingBlock, OrganizationNameWithCertificate, ReuseDetails, type Reuse, OrganizationLogo } from '@datagouv/components-next'
+import { isOrganizationCertified, Avatar, BrandedButton, LoadingBlock, OrganizationNameWithCertificate, ReuseDetails, type Reuse, OrganizationLogo, getDescriptionShort } from '@datagouv/components-next'
 import { RiDeleteBinLine, RiLockLine } from '@remixicon/vue'
 import AdminBadge from '~/components/AdminBadge/AdminBadge.vue'
 import EditButton from '~/components/Buttons/EditButton.vue'
@@ -188,7 +188,7 @@ const url = computed(() => `/api/1/reuses/${route.params.rid}/`)
 const { data: reuse, status } = await useAPI<Reuse>(url, { redirectOn404: true, redirectOnSlug: 'rid' })
 
 const title = computed(() => `Réutilisation - ${reuse.value?.title} | ${config.public.title}`)
-const description = computed(() => reuse.value?.description ?? '')
+const description = computed(() => reuse.value ? getDescriptionShort(reuse.value) : '')
 const robots = computed(() => reuse.value && !reuse.value.metrics.datasets && !reuse.value.metrics.datasets ? 'noindex, nofollow' : 'all')
 
 useSeoMeta({

server/routes/nuxt-api/albert/generate-short-description.post.ts

@@ -1,4 +1,4 @@
-import { DESCRIPTION_SHORT_MAX_LENGTH } from '~/datagouv-components/src/functions/datasets'
+import { DESCRIPTION_SHORT_MAX_LENGTH } from '~/datagouv-components/src/functions/description'
 import { createChatCompletion, useAlbertConfig, type ChatResponse } from '~/server/utils/albert-api-client'
 
 export default defineEventHandler(async (event) => {