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
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).
Options de configuration (back-end)
Plusieurs éléments de configuration
Header DSFR
Footer DSFR
TOC
Coloration syntaxique
Par exemple, pour la configuration du header
Rendu final (front-end)
Si ca t’intéresse de tester ce widget, je peux t’avertir dès que j’aurais publié une version stable.
Pour faire un peu plus simple qu’un widget custom, il y a possibilité de stocker un code HTML/CSS dans une table et d’utiliser la vue HTML pour visualiser.
J’ai publié le widget, en version alpha (non stabilisé) sur Github, si vous voulez le tester. Je serais preneur de vos retours/critiques.
Attention : Ce widget n’est pas encore finalisé. Il s’agit pour le moment d’un prototype toujours en cours de développement. Il est fortement déconseillé de l’utiliser en production !
Bonjour @vincent.blain ,
Merci pour ce super outil !
Petit bémol : lorsque je reviens sur la page, il ouvre d’office l’éditeur. Y compris pour les personnes n’ayant que des droits de lecture. Comment forcer l’affichage du rendu et pas du panneau d’édition?
Par avance, merci,
G.
En effet, par defaut c’est l’éditeur qui s’ouvre.. car il est en mode « dev », plus pratique pour tester les fonctionnalités en cours de conception. Evidement, lorsqu’une version « stablisée » de prod sera publier, ce n’est pas la vue de config qui sera chargé par défaut.
Pour afficher le rendu par défaut, il faut activer showWidgetPanel('main'); à la place du panneau de configuration showWidgetPanel('configuration');. Autrement dit, ca resemble à ça.
grist.onOptions((customOptions) => {
(...)
if (isFirstLoad) {
showWidgetPanel('main');
}
}
Pour modifier la visibilité du panneau de config par défaut, vous devez le faire depuis le code directement, comme dit précédemment dans le fichier ./assets/js/app.js à la ligne 50-54… ce qui implique qu’il est nécessaire de cloner/forker le projet et de l’héberger dans votre propre serveur web avec vos modifications.
A défaut, est-ce qu’une commande (format Booléen, par ex.) pour savoir quelle version afficher par défaut est envisageable prochainement dans l’outil ? Si oui, à quelle échéance ?
C’est tout à fait possible ! Dans le panneau de config, il est possible d’ajouter une option pour définir quelle est la « vue » par défaut.
Attention : Ce widget n’est pas encore finalisé. Il s’agit pour le moment d’un prototype toujours en cours de développement. Il est fortement déconseillé de l’utiliser en production !