gatsby universal

Un démarreur avisé de Gatsby v2 avec React Context, des composants stylisés, des transitions de page, des événements de défilement avec IntersectionObserver et un accent sur l'accessibilité et le référencement. Conçu pour les sites marketing de pointe.

Vous pouvez accéder à une démo de ce démarreur en ligne sur gatsby-universal.netlify.com.

---

Caractéristiques

• ? Transitions de page, basées sur des composants (avec prise en charge sans js)
• ?‍♂️ IntersectionObserver , basé sur des composants (avec polyfill)
• ? React Context pour l'état global de l'interface utilisateur, avec SSR
• ? styled-components v4
• ? Optimisé avec Google Lighthouse (y compris test)
• Séparation du code CSS et JS (basé sur les composants)
• ? Prise en charge SVG en ligne
• Un fichier de configuration pour les paramètres à l'échelle du site
• ? La plupart des balises sociales + méta dans un seul composant
• ? Toutes les favicons générées, un seul fichier d'icône nécessaire
• Assistance hors ligne
• ? Manifester son soutien
• ? Prise en charge du plan du site
• Requêtes multimédias générées pour une utilisation facile
• ? Plus joli pour le style de code
• Prise en charge de CircleCI
• ? Schéma JSONLD
• ? size-plugin pour garder un œil sur la taille de vos bundles
• ?‍? ESLint (basé sur eslint-plugin-react )

Avez-vous des suggestions ou des commentaires? Ouvrez un problème !

Scores Lighthouse (sur Netlify)

Usage

 # Installation with `gatsby-cli`
gatsby new my-site https://github.com/fabe/gatsby-universal

# Installation with `git clone`
git clone [email protected]:fabe/gatsby-universal.git my-site
cd my-site
yarn install

# To develop
yarn develop

# To build
yarn build

# To test SSR (for Lighthouse etc.)
yarn ssr

# To format JS (precommit)
yarn format

# To generate favicons (included in `build`)
yarn build:favicons

Configuration

Recherchez la configuration à l'échelle du site dans site-config.js .

 module . exports = {
  siteTitle : `Gatsby Universal` ,
  siteTitleShort : `GatsbyU` ,
  siteDescription : `An opinionated starter for Gatsby.` ,
  siteUrl : `https://gu.fabianschultz.com` ,
  themeColor : `#000` ,
  backgroundColor : `#fff` ,
  pathPrefix : null ,
  logo : path . resolve ( __dirname , 'src/images/icon.png' ) ,
  social : {
    twitter : `gatsbyjs` ,
    fbAppId : `966242223397117` ,
  } ,
} ;

N'oubliez pas de mettre à jour votre robots.txt dans static/ !

Structure des dossiers

├── gatsby-browser.js # Specify how Gatsby renders pages in the browser
├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
├── gatsby-node.js # Modify webpack config
├── gatsby-ssr.js # Specify how Gatsby builds pages
├── site-config.js # Global settings for the whole site, used by multiple scripts
├── content # Content & data, in both json and markdown
├── src
│   ├── components
│   │   ├── head # All meta tags etc.
│   │   ├── io # Intersection Observer component, uses render props
│   │   ├── layout # Layout component
│   │   │   ├── layout.css.js # .css.js for component's `styled-components`
│   │   │   └── layout.js
│   │   └── transition # Page Transition component, used by Gatsby APIs
│   ├── constants # Site-wide constants (breakpoints, colors, etc.)
│   ├── containers # Container components if store is needed
│   ├── helpers
│   │   ├── schemaGenerator.js # Generates JSON-LD schema.org snippets
│   │   └── mediaTemplates.js # Creates media queries for styled-components
│   ├── images # Images needed by the site/theme (not content)
│   ├── pages
│   ├── store # Store and provider of a React.createContext instance
│   └── global.css.js # Global CSS
└── scripts
    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    └── favicons.js # Generates favicons and manifest using one png only. 

Auteur

• Fabian Schultz (@fschultz_) - Stink Studios