Gatsby Source Google Docs
Objectif
Gatsby, c’est quoi ?
Gatsby Js est un générateur de sites statiques codé en React. Ce que j’aime avec Gatsby c’est qu’il est possible de récupérer du contenu depuis de nombreuses sources de données grâce à un système de plugins qui est enrichi par la communauté.
Pourquoi un nouveau plugin ?
Depuis le retour en force des sites statiques ces dernières années et l’émergence des solutions JAMStack, j’ai essayé de nombreuses solutions à la recherche du CMS ultime pour gérer le contenu des sites que je développais.
Aucune solution de ma complètement satisfait. Je code la plupart de mes sites pour le plaisir et n’ai aucun intérêt à payer pour rédiger mon contenu. La plupart des CMS proposent des offres gratuites mais sont souvent limités en terme de contenu, de collaborateurs, d’images ou de traduction. Aussi, je souhaite garder une séparation bien distincte entre mon code source et mon contenu pour éviter de polluer mon historique de commits.
Il n’existait aucun plugin pour gérer son contenu depuis Google Docs. Etant moi même un grand utilisateur de Google Docs, j’ai décidé de créer un nouveau plugin open-source afin d’en faire bénéficier la communauté.
Pourquoi Google Docs ?
Google Docs est pour moi le meilleur outil WYSIWYG sur internet.
Il me permet de rédiger du contenu depuis mon ordinateur, mon téléphone ou même les deux à la fois grâce à son mode collaboratif en temps réel.
Je peux ajouter des photos directement depuis Google Photos.
Son mode hors-ligne est une de ses plus grandes forces et me permet de continuer à rédiger même lorsque ma connection à internet est limitée ou que je suis en mode avion.
L’historique des modifications me permet de revenir à une version plus ancienne d’un document en cas de mauvaise manipulation.
Les document Google Docs ne sont pas décomptés de mon espace de stockage Google Drive. Je peux donc créer sans crainte une infinité de documents sans avoir peur de dépasser le quotas gratuit.
Le correcteur orthographique me permet d’éviter les erreur d’étourderie.
Je peux même noter mes idées avec la voix à l’aide de l’outil intégré.
Le plugin
Génération d’un token
L’accès à l’API Google Docs nécessite un token d’authentification OAuth 2.0. Seulement, sa génération pouvait rebuter certains utilisateurs car elle nécessite de nombreuses manoeuvres dans la Google Developer Console.
J’ai donc développé un script permettant de guider l’utilisateur à travers les différentes étapes.
Fonctionnement
- L’utilisateur organise ses pages grâce à l'arborescence de Google Drive.
- L’utilisateur rédige le contenu de son site dans des documents Google Docs. Il peut utiliser les outils de formatages intégrés pour mettre en forme son contenu, ajouter des photos, des graphiques, des tableaux, des extraits de code, des liens externes ou vers d’autres documents...
- Lorsque l’utilisateur lance la génération de son site, le plugin va récupérer les tous documents Google Docs inclus dans un dossier spécifié en configuration, transformer le contenu en HTML, remplacer les liens inter-documents par des urls relatives avant de créer les pages.
Pour plus d’informations, n’hésitez pas à aller voir mon article Utiliser Google Docs pour rédiger le contenu de son site Gatsby.
Ajout de tests
Les tests sont essentiels pour s’assurer de ne pas introduire de régression lors de l’ajout d’une nouvelle fonctionnalité.
J’ai utilisé les Snapshots Jest qui permettent de comparer le résultat produit par un morceau de code avant et après modification afin de s’assurer que rien n’a été cassé.