A presentation at JAMstack Paris Meetup #4 L’édition estivale in in Paris, France by Matthieu Auger
LES THEMES GATSBY 101
LA JAMSTACK FAIT DE NOUS DE SUPER DEVELOPPEURS 🦸 Des sites rapides ⚡, fiables 🧱, et sécurisés 🔐 Développés ultra rapidement 🏎
GRACE À DES SERVICES ET DES OUTILS EXCEPTIONNELS ✨ Et beaucoup d’autres… https://github.com/automata/awesome-jamstack
GATSBY
LA COLONNE VERTÉBRALE : GATSBY-CONFIG.JS Méta-données module.exports = { siteMetadata: { title: Gatsby Default Starter, description: Kick off your next, great Gatsby project., author: @gatsbyjs, }, plugins: [ gatsby-plugin-react-helmet, { resolve: gatsby-source-filesystem, options: { name: images, path: ${__dirname}/src/images, }, }, ], }
Configuration
Plugins + Des composants React
LES STARTERS GATSBY POUR PARTAGER
LES LIMITES DES STARTERS Les sites générés depuis un starter sont éjectés. Il n’ont plus aucun lien avec le starter une fois générés. Ils ne peuvent pas bénéficier des améliorations futures du starter.
ENTER GATSBY THEMES
LES PROMESSES DES THEMES GATSBY ’ Générer vite un nouveau site à partir d’un thème ( Personnaliser facilement un site créé à partir d’un thème ) Faire toujours bénéficier le site des améliorations du thème Développons un thème ! *
Hi + I’m Matthieu VP of Engineering chez Theodo ❤ JAMstack - 💍 21/09/2019 - 🎨 Daltonien @matthieuauger
QUEL THÈME DÉVELOPPER ?
MEETUP JAMSTACK.PARIS 18 Décembre 2018
Notre nom JAMSTACK.PARIS Menu vers nos vidéos et CFP Récupère les meetup depuis l’API
CODE DU SITE JAMSTACK PARIS
Notre nom
Menu vers nos vidéos et CFP
Arborescence du site
gatsby-config.js du site module.exports = { siteMetadata: { meetupName: “JAMstack Paris Meetup”, meetupHomepageHeadline: “Le meetup bimestriel autour de la JAMstack” }, plugins: [ … { resolve: gatsby-source-meetup, options: { key: process.env.MEETUP_API_KEY, groupUrlName: “https://www.meetup.com/fr-FR/jamstack-paris”, status: “upcoming,past”, desc: “true”, page: 10 } } … ] };
Récupère les meetup depuis l’API
IDÉE DE THÈME 💡 Permettre à tout organisateur de meetup de lancer son site avec ses meetups, son contenu et son identité en moins d’1h 0 gatsby-theme-meetup est né
CE QUE NOUS ALLONS VOIR ’ Générer un nouveau site à partir de gatsby-theme-meetup ( Personnaliser le site créé à partir du thème ) Comment rendre personnalisable un thème CRÉONS ENSEMBLE LE SITE DU MEETUP JAMSTACK LONDON 💂
GÉNÉRER UN NOUVEAU SITE HÔTE gatsby-config.js du site hôte module.exports = { plugins: [ { resolve: “@matthieuauger/gatsby-theme-meetup” } ] };
🥖
PERSONNALISER LE SITE HÔTE Gatsby propose 2 mécanismes pour personnaliser un site hôte 1. Le forward de configuration 📻 2. Le shadowing 👻
FORWARD DE CONFIGURATION 📻
RENDRE LE THÈME CONFIGURABLE gatsby-config.js du thème module.exports = { siteMetadata: { meetupName: ‘JAMstack Paris’, meetupHomepageHeadline: ‘Le meetup bimestriel autour de la JAMstack’, }, plugins: [], } module.exports = ({ meetupName = ‘JAMstack Paris’, meetupHomepageHeadline = ‘Le meetup bimestriel autour de la JAMstack’, }) => ({ siteMetadata: { meetupName: meetupName, meetupHomepageHeadline: meetupHomepageHeadline, }, plugins: [], })
CONFIGURATION DU SITE HÔTE gatsby-config.js du site hôte module.exports = { plugins: [@matthieuauger/gatsby-theme-meetup] }
module.exports = { plugins: [ { resolve: “@matthieuauger/gatsby-theme-meetup”, options: { meetupName: “JAMstack London”, meetupHomepageHeadline: “The JAMstack meetup with a cup of tea 🍵 ” } } ] };
🍵
FORWARD DE CONFIGURATION POUR LES PLUGINS gatsby-config.js du thème
gatsby-config.js du site hôte
module.exports = ({
module.exports = { plugins: [ { resolve: “@matthieuauger/gatsby-theme-meetup”, options: { meetupName: “JAMstack London”, meetupHomepageHeadline: “The JAMstack meetup with
meetupName = “JAMstack Paris”, meetupHomepageHeadline = “Le meetup bimestriel autour de la JAMstack”, meetupDotComGroupUrlName = “jamstack-paris” }) => ({ siteMetadata: { meetupName: meetupName, meetupHomepageHeadline: meetupHomepageHeadline }, plugins: [ { resolve: gatsby-source-meetup, options: { key: process.env.MEETUP_API_KEY, groupUrlName: meetupDotComGroupUrlName, status: “upcoming,past”, desc: “true”, page: 10 } } ] });
a cup of tea 🍵 ”, meetupDotComGroupUrlName: “JAMstack-London” } } ] };
COMMENT GÉRER LES PERSONNALISATIONS JAMstack London ne PLUS POUSSÉES ? filme pas ses talks
LE SHADOWING DE COMPOSANT 👻
THÉORIE DU SHADOWING Un site hôte peut surcharger n’importe quel composant d’un thème En réécrivant le composant sous la même arborescence
LE SHADOWING EN PRATIQUE 👻 Arborescence de fichiers du thème Arborescence de fichiers du site hôte
RÉÉCRIVONS LE MENU Menu.component.js du site hôte const Menu = () => ( <StaticQuery // graphql query render={data => ( <ul> <li> <Button url=”https://www.royal.uk/contact” text=”Say hi to the Queen 6 ” type=”neutral” /> </li> <li> <Button url=”#” text={data.site.siteMetadata.translations.PROPOSE_A_TALK} type=”primary” /> </li> </ul> )} /> ); export default Menu;
6
LE BILAN 🥁
LES THÈMES GATSBY SONT PROD-READY MAIS ENCORE JEUNES La documentation pour créer un thème est encore peu variée 🤓 Le shadowing contient quelques bugs et difficile à débugger 🔧 J’attends aussi de voir comment sur le long terme, l’évolution d’un thème et les surcharges de l’hôte cohabitent 🌱
MAIS ONT UN FORT POTENTIEL
MERCI 🍕 Ressources de la présentation Site de démo JAMstack London : https://jamstack-london-theme-demo.netlify.com/ Code source du site de démo : https://github.com/matthieuauger/jamstack-london-theme-demo Code source du thème : https://github.com/matthieuauger/gatsby-theme-meetup Documentation sur les thèmes https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/ https://egghead.io/courses/gatsby-theme-authoring https://www.gatsbyjs.org/tutorial/building-a-theme
for free. You
can too.