2024-05-08

Je souhaite publier mes pages de journal directement sur le site. Pour cela, j'aimerais lire les fichiers markdown et les rendre en tant que pages. Pour Vue, je sais qu'il existe VuePress mais cela bootstrap un projet complet. Il existe aussi Nuxt Content, mais il faut être sous Nuxt.js.

Je trouve un transformer Parcel pour importer des Markdown : parcel-transformer-markdown-front-matter. Je vois qu'il est maintenu par François un ancien collègue, c'est donc un bon choix. Grâce à ça, je peux importer facilement du Markdown comme suit : import markdown from './content.md'.

Cependant, j'aimerais lister tous les billets de journal disponibles, on est dans le navigateur, donc je ne peux pas utiliser les outils de Node.js comme fs, mais Parcel permet de résoudre des globs comme import all from './content/*.md'. Cela me permet de récupérer tous les fichiers markdown dans le dossier. Il me reste alors à ajouter dans le front matter les date des pages et leur titre, pour afficher correctement la liste.

Du côté du billet de journal en lui-même, j'ai essayé de faire un import dynamique avec un template string, mais cela ne fonctionne pas :

const markdown = await import(`./content/${date}.md`);

Je suis donc passé par l'import de glob, et ensuite je récupère le fichier qui m'intéresse :

import * as posts from '../../docs/diary/*.md';

const route = useRoute();

const date = route.params.date;
const markdown = posts[date].default;

Maintenant, un souci que j'ai est la gestion des assets comment gérer leurs imports ?

Je fais quelque chose rapidement avec la librairie parcel-reporter-static-files-copy

Que je configure pour simplement copier les assets dans le bon sous-dossier :

// package.json
  "staticFiles": [
    {
      "staticPath": "./docs/diary/assets",
      "staticOutPath": "/posts/assets"
    }
  ]