Gatsby Themes 101

A presentation at JAMstack Paris Meetup #4 L’édition estivale in July 2019 in Paris, France by Matthieu Auger

Slide 1

Slide 1

LES THEMES GATSBY 101

Slide 2

Slide 2

LA JAMSTACK FAIT DE NOUS DE SUPER DEVELOPPEURS 🦸 Des sites rapides ⚡, fiables 🧱, et sécurisés 🔐 Développés ultra rapidement 🏎

Slide 3

Slide 3

GRACE À DES SERVICES ET DES OUTILS EXCEPTIONNELS ✨ Et beaucoup d’autres… https://github.com/automata/awesome-jamstack

Slide 4

Slide 4

GATSBY

Slide 5

Slide 5

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

Slide 6

Slide 6

LES STARTERS GATSBY POUR PARTAGER

Slide 7

Slide 7

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.

Slide 8

Slide 8

ENTER GATSBY THEMES

Slide 9

Slide 9

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 ! *

Slide 10

Slide 10

Hi + I’m Matthieu VP of Engineering chez Theodo ❤ JAMstack - 💍 21/09/2019 - 🎨 Daltonien @matthieuauger

Slide 11

Slide 11

QUEL THÈME DÉVELOPPER ?

Slide 12

Slide 12

MEETUP JAMSTACK.PARIS 18 Décembre 2018

Slide 13

Slide 13

Notre nom JAMSTACK.PARIS Menu vers nos vidéos et CFP Récupère les meetup depuis l’API

Slide 14

Slide 14

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

Slide 15

Slide 15

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é

Slide 16

Slide 16

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 💂

Slide 17

Slide 17

GÉNÉRER UN NOUVEAU SITE HÔTE gatsby-config.js du site hôte module.exports = { plugins: [ { resolve: “@matthieuauger/gatsby-theme-meetup” } ] };

Slide 18

Slide 18

🥖

Slide 19

Slide 19

PERSONNALISER LE SITE HÔTE Gatsby propose 2 mécanismes pour personnaliser un site hôte 1. Le forward de configuration 📻 2. Le shadowing 👻

Slide 20

Slide 20

FORWARD DE CONFIGURATION 📻

Slide 21

Slide 21

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: [], })

Slide 22

Slide 22

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 🍵 ” } } ] };

Slide 23

Slide 23

🍵

Slide 24

Slide 24

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” } } ] };

Slide 25

Slide 25

Slide 26

Slide 26

COMMENT GÉRER LES PERSONNALISATIONS JAMstack London ne PLUS POUSSÉES ? filme pas ses talks

Slide 27

Slide 27

LE SHADOWING DE COMPOSANT 👻

Slide 28

Slide 28

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

Slide 29

Slide 29

LE SHADOWING EN PRATIQUE 👻 Arborescence de fichiers du thème Arborescence de fichiers du site hôte

Slide 30

Slide 30

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;

Slide 31

Slide 31

6

Slide 32

Slide 32

LE BILAN 🥁

Slide 33

Slide 33

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 🌱

Slide 34

Slide 34

MAIS ONT UN FORT POTENTIEL

Slide 35

Slide 35

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