The PlayWell web platform. Based off of the LMNTS-Gatsby v2 starter using the lmnts methodology of building websites. Includes React Context, styled-components, page transitions, scroll events with IntersectionObserver and a focus on accessibility and SEO. Made for state-of-the-art marketing sites.
- ✨ Page Transitions, component-based (with no-js support)
- 👀
IntersectionObserver, component-based (with polyfill) - 🌌 React Context for global UI state, with SSR
- 💅
styled-componentsv4 - 💯 Optimized with Google Lighthouse (including test)
- 🔥 Code Splitting of CSS and JS (component based)
- 🔪 Inline SVG support
- ⚙️ 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
- 🔎
size-pluginto keep an eye on your bundle sizes - 👨🏫 ESLint (based on
eslint-plugin-react) - 📈 Google Analytics with
gatsby-plugin-google-analytics - 🧠 Machine-learning based prerendering and prefetching with
guess.js
⚠️ Typescript⚠️ Further Schema.org generation⚠️ Contextual page Schema.org & Keyword generation⚠️ Lazy load all images using IntersectionObserver⚠️ Add Favicon Script tonpm run buildto automate Favicon Generation⚠️ Contentful Support⚠️ Wordpress Support⚠️ Shopify Support⚠️ NetlifyCMS Support⚠️ Drupal Support
Do you have suggestions or feedback? Open an issue!
Lighthouse scores (on Netlify)
We're building this on Gatsby and utilizing (Sanity.io)[sanity.io] for the CMS. Therefor, there is two structures in this repository -- meaning we have two separate node packages going on, requiring the usage of (Lerna)[https://lerna.js.org/]
# Clone the repo
npm i
# Option 1: Run Lerna to run both Sanity Studio and the Gatsby site at the same time.
# Caveats: No eslint errors in your terminal.
lerna run dev
# Option 2: Open /web/ and /studio/ in two separate tabs on your terminal and run your node scripts.
npm run devFind the site-wide configuration in Theme.js.
├── src
│ ├── constants
│ │ ├── site # Core site information.
│ │ ├── styles # Style information: global variables, palette, fonts, etc.
│ │ └── Theme.js # Consolidated delivery of the above constants. I.e. adding 'px' to the end of integer values.🚨 Don't forget to update your
robots.txtinsidestatic/!
For further reading on methodolgy, keep sscrolling.
├── 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
│ ├── assets
│ ├── components
│ ├── elements
│ ├── constants # Site-wide constants (breakpoints, colors, etc.)
│ ├── helpers
│ │ ├── SchemaGenerator.js # Generates JSON-LD schema.org snippets
│ │ └── MediaQueries.js # Creates media queries for styled-components
│ ├── pages
│ ├── store # Store and provider of a React.createContext instance
└── 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.Elements are static, logic-less building blocks.
├── src
│ ├── elements
│ │ ├── Block
│ │ ├── Inner
│ │ └── SectionComponents are collections of Elements and often contain logic.
├── src
│ ├── components
│ │ ├── core # <Head> tag, transitions, Layout, IntersectionObserver, SEO generation
│ │ ├── library # Various components needed for the site pages.
│ │ └── sitewide # Visible sitewide components: Navigation, footer, etc.We follow the guidelines below for typical generation and nesting of Elements:
<Section>
<Inner>
<Block>
# Content Here
</Block>
</Inner>
</Section><Section>: The wrapper of the elements. Uses the site's Base.js gutters. Always fullwidth.<Inner>: The inner part of the section. Only one of these exist at all times. Alwaysrelative, and also can be various widths if needed.<Block>: Various, repeatable elements. This is the core content container.
TODO: Pete will write this...
- Clone this repo
- Install Docker for your operating system
- Create .env for environment variables
touch .env
- Copy .env for local changes
cp .env .env.local
- Install dependencies for the Gatsby site (
appservice)docker-compose run app install
- Install dependencies for Sanity Studio (
studioservice)docker-compose run studio install
- Start the Gatsby site and Sanity Studio
docker-compose up app studio
TLS certificates has been generated for local development at hosts lvh.me and studio.lvh.me.
A Root certificate has also been generated and added to 1Password, which can be added to the local OS trust store for full HTTPS support. See the following article for more information: Guide to add self-generated root certificate authorities for 8 operating systems and browsers.
- Run the Gatsby development server
docker-compose run app
- Run Sanity Studio
docker-compose run studio
- Run a yarn command for the Gatsby app
docker-compose run app $COMMAND
- Run a yarn command for Sanity Studio
docker-compose run studio $COMMAND
We use Docker Compose to configure and build services. See docker-compose.yml for configuration details.
The services provided are:
app- Service configured to run Gatsby development server on startup and mount the project directory to/app, so host file changes are visible to the container. Used in: [development]studio- Service configured to run Sanity start on startup and mount the/studiodirectory to/app, so host file changes are visible to the container. Used in: [development]proxy- Caddy reverse proxy to provide a deployment-like environment in development. Used .shell- Shell access for container. Used in: [development]
- Peter Laxalt (@peterlaxalt) - Laxalt & McIver