Live site: tompluess.ch Deployed on: vercel.com
- 🌊 Tailwind CSS
- 🍔 Responsive Hamburger Menu
- 🤩 Page Transitions, component-based (with no-js support)
- 💯 Optimized with Google Lighthouse (including test)
- 🔪 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
- ✨ Mend Renovate configuration
- 🐙 Schema JSONLD
- 🔎
size-pluginto keep an eye on your bundle sizes - 👨🏫 ESLint (based on
eslint-plugin-react)
Do you have suggestions or feedback? Open an issue!
# 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
🚨 Don't forget to update your
robots.txtinsidestatic/!
├── 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 # Main CSS for Layout
│ │ │ └── layout.js
│ │ └── transition # Page Transition component, used by Gatsby APIs
│ ├── constants # Site-wide constants (breakpoints, colors, etc.)
│ ├── 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)
│ │ ├── icon.png
│ ├── 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.The Gatsby Universal template used for this website is from Fabian Schultz (@fschultz_) - Thank you very much!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent