@datagouv/components-next 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",
@@ -29,16 +29,25 @@
     "dompurify": "^3.2.5",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "maplibre-gl": "^5.5.0",
-    "markdown-it": "^14.1.0",
     "ofetch": "^1.4.1",
     "ol": "^10.6.1",
     "pdf-vue3": "^1.0.12",
     "pmtiles": "^4.3.0",
     "popmotion": "^8.7.6",
-    "remark": "^15.0.1",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-behead": "^3.1.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "strip-markdown": "^6.0.0",
     "swagger-ui": "^5.20.1",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
     "vue-i18n": "^10.0.6",

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -219,7 +219,7 @@
             >
               <div
                 class="fr-mt-0 markdown fr-text--sm text-mention-grey"
-                v-html="markdown(resource.description || '')"
+                v-html="formatMarkdown(resource.description || '')"
               />
             </div>
             <div
@@ -340,7 +340,7 @@ import { useI18n } from 'vue-i18n'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine } from '@remixicon/vue'
 import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { markdown } from '../../functions/markdown'
+import { formatMarkdown } from '../../functions/markdown'
 import { useFormatDate } from '../../functions/dates'
 import type { CommunityResource, Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'

package/src/functions/markdown.ts

@@ -1,45 +1,68 @@
-import markdownit from 'markdown-it'
-import { remark } from 'remark'
+import type hast from 'hast'
+import behead, { type Options } from 'remark-behead'
+import remarkBreaks from 'remark-breaks'
+import rehypeHighlight from 'rehype-highlight'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeSlug from 'rehype-slug'
+import rehypeStringify from 'rehype-stringify'
+import { unified, type Processor, type Transformer } from 'unified'
+import type { Node } from 'unist'
+import { visit } from 'unist-util-visit'
 import remarkGfm from 'remark-gfm'
 import strip from 'strip-markdown'
 
-const markdownParser = markdownit({
-  html: false,
-  linkify: true,
-  typographer: true,
-  breaks: true,
-})
-
-// Disable mail linkification
-markdownParser.linkify.add('mailto:', null)
-
-markdownParser.use(function (md) {
-  md.renderer.rules.link_open = function (tokens, idx, options, _env, self) {
-    const link_open = tokens[idx]
-    link_open.attrs?.push(['rel', 'ugc nofollow noopener'])
-    return self.renderToken(tokens, idx, options)
+// Copied from https://github.com/potato4d/rehype-plugin-image-native-lazy-loading/blob/v1.2.0/src/index.ts
+function lazyLoadPlugin(this: Processor): Transformer {
+  function visitor(el: hast.Element) {
+    if (el.tagName !== 'img') {
+      return
+    }
+    el.properties = {
+      ...(el.properties || {}),
+      loading: 'lazy',
+    }
   }
-  // Render ~~<text>~~ as del tag
-  md.renderer.rules.s_open = function (tokens, idx, options, _env, self) {
-    const s_open = tokens[idx]
-    s_open.type = 'del_open'
-    s_open.tag = 'del'
-    return self.renderToken(tokens, idx, options)
-  }
-  md.renderer.rules.s_close = function (tokens, idx, options, _env, self) {
-    const s_close = tokens[idx]
-    s_close.type = 'del_close'
-    s_close.tag = 'del'
-    return self.renderToken(tokens, idx, options)
+
+  function transformer(htmlAST: Node): Node {
+    visit(htmlAST, 'element', visitor)
+    return htmlAST
   }
-})
 
-export function markdown(text: string): string {
-  return markdownParser.render(text).trim()
+  return transformer
+}
+
+export function formatMarkdown(md: string, minDepth = 3) {
+  const result = unified()
+    .use(behead, { minDepth: minDepth > 1 ? minDepth : undefined } as Options)
+    // Take Markdown as input and turn it into MD syntax tree
+    .use(remarkParse, { fragment: true })
+    .use(remarkBreaks)
+    .use(remarkGfm)
+    // Switch from MD syntax tree to HTML syntax tree (remark -> rehype)
+    .use(remarkRehype, {
+    // Necessary for support HTML embeds (see next plugin)
+      allowDangerousHtml: true,
+    })
+    // Support HTML embedded inside markdown
+    .use(rehypeRaw)
+    // Improve code highlighting
+    .use(rehypeHighlight)
+    .use(rehypeSlug)
+    .use(rehypeSanitize)
+    // Serialize syntax tree to HTML
+    .use(rehypeStringify)
+    .use(lazyLoadPlugin)
+    // And finally, process the input
+    .processSync(md)
+
+  return String(result)
 }
 
 export async function removeMarkdown(text: string) {
-  const file = await remark()
+  const file = await unified()
     .use(remarkGfm)
     .use(strip)
     .process(text)

package/dist/Swagger.client-DwYQ-RDs.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./main-CLgZLazG.js";
-export {
-  f as default
-};