je dispose de plusieurs formulaires interne (via le widget du meme nom) que j’ai positionné en onglets dans la partie supérieure de l’écran de grist.
Je souhaiterais maintenant pouvoir mettre en place une vue de type « page d’accueil » pour afficher les informations permettant de présenter les différents onglets à disposition.
Je n’ai pas trouvé de widget permettant de faire cela directement (sauf à en détourner leur usage comme utiliser un formulaire interne).
Je ne sais pas si d’autres personnes ont le même besoin ?
Dans notre équipe, nous avons eu le même besoin pour plusieurs document Grist, d’avoir une page de « présentation / about / landing page ».
Voici plusieurs pistes :
1. Construire une page web from scratch avec le custom widget builder
C’est la solution la plus flexible… mais nécessite de rédiger son contenu en HTML et de construire le rendu de sa page avec CSS (et en option avec du Js).
2. Rédiger du markdown directement dans un custom widget builder
Pour éviter d’avoir à rédiger en HTML, j’ai conçu un premier protoype qui permet de rédiger son contenu en markdown directement dans une application SPA. Son intégration se fait dans Grist à l’aide du custom widget builder. Il a pour fonctions principales :
Implémentation par CDN du DSFR
Header, Footer à configurer en HTML.
Moteur de rendu markdown javascript
Le texte n’est pas écrit directement en HTML, mais rédigé en markdown et stocké dans la balise <script type="text/markdown" id="markdown-source">...</script>. Lors du rendu de la page, elle utilise la bibliothèque markdown-it pour transformer ce texte Markdown en contenu HTML lisible par le navigateur dès son chargement.
Sommaire automatique et interactif
Utilisation de la bibliothèque tocbot qui génère automatiquement un sommaire dans la barre latérale à partir des titres (<h2>, <h3>) présents dans le document. Le sommaire met en évidence la section que l’utilisateur est en train de lire et permet de naviguer rapidement vers une autre partie.
Support des diagrammes Mermaid
Le contenu markdown peut transformer du texte brut en diagrammes complexes grâce à la bibliothèque https://mermaid.js.org/. Cela se fait en insérant un bloc de code markdown avec l’intitulé mermaid.
Support de la coloration syntaxique de code
Implémentation de la librairie Prism.js pour colorer automatiquement du code informatique, ce qui le rend plus lisible pour les développeurs.
📂 Voir le code source sur GitHub: grist-spa-landing-page.html
3. Widget Markdown-DSFR
J’ai commencé le développement de ce widget, il y a qq jours. Je n’ai aucune idée quand j’aurais le temps de le finir. Ce widgeta été imaginé pour simplifier la création d’une page, sans passer par du HTML brut, et sans passer par le custom widget builder.
Il permet :
de saisir le contenu directement en Markdown grâce à un éditeur WYSIWYG ;
de configurer, en quelques clics, les éléments récurrents d’une page conforme au Design System du Gouvernement Français (DSFR) ;
d’obtenir un rendu final full‑DSFR (header, footer, sommaire, coloration du code) en un seul clic.
Rédaction de contenu markdown (back-end)
Dans le panneau de configuration du widget, un éditeur What‑You‑See‑Is‑What‑You‑Get vous invite à écrire votre texte en Markdown. Il est possible d’écrire en markdown directement ou bien d’utiliser le code html (et notamment les composants DSFR directement).
