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