gatsby-universal

An opinionated starter for using Gatsby v2 with React Context, tag-agnostic styled-components, page transitions, scroll events with IntersectionObserver. Made for state-of-the-art marketing sites.

Features

• 💅 styled-components, tag agnostic if needed
• 🤩 Page Transitions, component-based (with no-js support)

  Following Gatsby's switch to @reach/router, page transitions are currently not supported. Follow the progress at #8.

• 👮‍♂️ IntersectionObserver, component-based (with polyfill)
• 🌿 React Context for global UI state, with SSR
• 💯 Optimized with Google Lighthouse
• 🔥 Code Splitting of CSS and JS (component based)
• ⚙️ One config file for site-wide settings
• 💙 Most social + meta tags in one component
• 🖼 All favicons generated, only one icon file needed
• 🌐 Offline support
• 📄 Manifest support
• 🗺 Sitemap support
• 📱 Generated media queries for easy use
• 😎 Prettier for code style
• 👷‍♂️ CircleCI support
• 🐙 Schema JSONLD

Lighthouse scores (on Netlify)

Usage

To make sure you have the correct beta versions of Gatsby, please use yarn to install the dependencies.

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

# 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

Find the site-wide configuration 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`,
  },
};

Folder structure

├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
├── src
│   ├── components
│   │   ├── head # All meta tags etc.
│   │   │   └── head.js
│   │   ├── io # Intersection Observer component, uses render props
│   │   │   └── io.js
│   │   ├── layout # Layout component
│   │   │   ├── layout.css.js # .css.js for component's styled-components
│   │   │   └── layout.js
│   │   └── transition # Page Transition component, can be used with any other
│   │       └── transition.js
│   ├── constants
│   ├── containers
│   ├── helpers
│   │   ├── agnosticStyled.js # Tag-agnostic styled-component
│   │   ├── mediaTemplates.js # Creates media queries for styled-components
│   │   └── toFallbackStyleString.js # Creates fallback styles for no-js page transitions
│   ├── images
│   ├── pages
│   ├── reset.css.js # Global CSS
│   └── store
└── yarn.lock

Author

• Fabian Schultz (@fschultz_) - Stink Studios