Gatsby Themes 101

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