gatsby universal

Ein eigensinniger Gatsby v2-Starter mit React Context, gestalteten Komponenten, Seitenübergängen, Scroll-Events mit IntersectionObserver und einem Fokus auf Barrierefreiheit und SEO. Entwickelt für hochmoderne Marketing-Websites.

Sie können online unter gatsby-universal.netlify.com auf eine Demo dieses Starters zugreifen.

---

Merkmale

• ? Seitenübergänge, komponentenbasiert (ohne JS-Unterstützung)
• ?‍♂️ IntersectionObserver , komponentenbasiert (mit Polyfill)
• ? Reaktionskontext für den globalen UI-Status mit SSR
• ? styled-components v4
• ? Optimiert mit Google Lighthouse (inkl. Test)
• Code-Splitting von CSS und JS (komponentenbasiert)
• ? Inline-SVG-Unterstützung
• Eine Konfigurationsdatei für standortweite Einstellungen
• ? Die meisten Social- und Meta-Tags in einer Komponente
• ? Alle Favoriten generiert, nur eine Symboldatei erforderlich
• Offline-Unterstützung
• ? Offensichtliche Unterstützung
• ? Sitemap-Unterstützung
• Generierte Medienabfragen zur einfachen Verwendung
• ? Hübscher für den Codestil
• CircleCI-Unterstützung
• ? Schema JSONLD
• ? size-plugin um Ihre Bundle-Größen im Auge zu behalten
• ?‍? ESLint (basierend auf eslint-plugin-react )

Haben Sie Vorschläge oder Feedback? Eröffnen Sie ein Problem!

Lighthouse-Scores (auf Netlify)

Verwendung

 # 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

Konfiguration

Finden Sie die Site-weite Konfiguration in 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` ,
  } ,
} ;

Vergessen Sie nicht, Ihre robots.txt in static/ zu aktualisieren!

Ordnerstruktur

├── 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. 

Autor

• Fabian Schultz (@fschultz_) – Stink Studios