{"id":13725738,"url":"https://github.com/fabe/gatsby-universal","last_synced_at":"2025-04-04T14:07:50.382Z","repository":{"id":33265672,"uuid":"138096617","full_name":"fabe/gatsby-universal","owner":"fabe","description":"🔮 An opinionated Gatsby v2 starter for state-of-the-art marketing sites.","archived":false,"fork":false,"pushed_at":"2023-01-11T19:03:59.000Z","size":5573,"stargazers_count":612,"open_issues_count":38,"forks_count":96,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-28T13:07:46.581Z","etag":null,"topics":["boilerplate","gatsby","gatsby-starter","jamstack","pwa","static-site","universal"],"latest_commit_sha":null,"homepage":"https://gatsby-universal.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fabe.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-20T23:34:15.000Z","updated_at":"2025-03-21T20:24:14.000Z","dependencies_parsed_at":"2023-01-15T00:15:44.655Z","dependency_job_id":null,"html_url":"https://github.com/fabe/gatsby-universal","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabe%2Fgatsby-universal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabe%2Fgatsby-universal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabe%2Fgatsby-universal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabe%2Fgatsby-universal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabe","download_url":"https://codeload.github.com/fabe/gatsby-universal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190250,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","gatsby","gatsby-starter","jamstack","pwa","static-site","universal"],"created_at":"2024-08-03T01:02:33.069Z","updated_at":"2025-04-04T14:07:50.339Z","avatar_url":"https://github.com/fabe.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/fabe/gatsby-universal\"\u003e\n    \u003cimg\n      src=\"https://i.imgur.com/MFWrZSx.png\"\n      height=\"80\"\n      alt=\"gatsby-universal\"\n      title=\"gatsby-universal\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/fabe/gatsby-universal\"\u003e\n    \u003cimg\n      src=\"https://circleci.com/gh/fabe/gatsby-universal.svg?style=svg\"\n      alt=\"CircleCI\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://greenkeeper.io/\"\u003e\n    \u003cimg\n      src=\"https://badges.greenkeeper.io/fabe/gatsby-universal.svg\"\n      alt=\"Greenkeeper badge\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg\n      src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\"\n      alt=\"styled with prettier\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://app.netlify.com/sites/gatsby-universal/deploys\"\u003e\n    \u003cimg\n      src=\"https://api.netlify.com/api/v1/badges/3e49bb6e-c385-4807-a7e8-70eea491cfdf/deploy-status\"\n      alt=\"Netlify Status\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  An \u003cem\u003eopinionated\u003c/em\u003e Gatsby v2 starter with React Context, styled-components, page transitions, scroll events with \u003ccode\u003eIntersectionObserver\u003c/code\u003e and a focus on accessibility and SEO. Made for state-of-the-art marketing sites.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    You can access a demo of this starter online at \u003ca href=\"https://gatsby-universal.netlify.com\"\u003egatsby-universal.netlify.com\u003c/a\u003e.\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n***\n\n## Features\n\n- [X] 🤩 Page Transitions, component-based (with no-js support)\n- [X] 👮‍♂️ `IntersectionObserver`, component-based (with polyfill)\n- [X] 🌿 React Context for global UI state, with SSR\n- [X] 💅 [`styled-components`](https://www.styled-components.com/) v4\n- [X] 💯 Optimized with [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/) (including test)\n- [X] 🔥 Code Splitting of CSS and JS (component based)\n- [X] 🔪 Inline SVG support\n- [X] ⚙️ One config file for site-wide settings\n- [X] 💙 Most social + meta tags in one component\n- [X] 🖼 All favicons generated, only one icon file needed\n- [X] 🌐 Offline support\n- [X] 📄 Manifest support\n- [X] 🗺 Sitemap support\n- [X] 📱 Generated media queries for easy use\n- [X] 😎 [Prettier](https://prettier.io/) for code style\n- [X] 👷‍♂️ [CircleCI](https://circleci.com/) support\n- [X] 🐙 Schema JSONLD\n- [X] 🔎 [`size-plugin`](https://github.com/GoogleChromeLabs/size-plugin) to keep an eye on your bundle sizes\n- [X] 👨‍🏫 ESLint (based on [`eslint-plugin-react`](./.eslintrc))\n\nDo you have suggestions or feedback? [Open an issue](https://github.com/fabe/gatsby-universal/issues/new)!\n\n## Lighthouse scores (on [Netlify](https://netlify.com))\n\n[![Lighthouse scores (on Netlify)](https://lighthouse.now.sh/?perf=100\u0026pwa=100\u0026a11y=100\u0026bp=100\u0026seo=100)](https://circleci.com/gh/fabe/gatsby-universal)\n\n## Usage\n\n[![Edit on CodeSandbox](https://cdn.rawgit.com/fabe/1dd805eed0153b47aba2b50cea2469ec/raw/64b0ea90c2a425d3847da908053f5f337128259b/edit-on-codesandbox-32px.svg)](https://codesandbox.io/s/github/fabe/gatsby-universal)\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/fabe/gatsby-universal)\n\n```bash\n# Installation with `gatsby-cli`\ngatsby new my-site https://github.com/fabe/gatsby-universal\n\n# Installation with `git clone`\ngit clone git@github.com:fabe/gatsby-universal.git my-site\ncd my-site\nyarn install\n\n# To develop\nyarn develop\n\n# To build\nyarn build\n\n# To test SSR (for Lighthouse etc.)\nyarn ssr\n\n# To format JS (precommit)\nyarn format\n\n# To generate favicons (included in `build`)\nyarn build:favicons\n```\n\n## Configuration\n\nFind the site-wide configuration in `site-config.js`.\n\n```js\nmodule.exports = {\n  siteTitle: `Gatsby Universal`,\n  siteTitleShort: `GatsbyU`,\n  siteDescription: `An opinionated starter for Gatsby.`,\n  siteUrl: `https://gu.fabianschultz.com`,\n  themeColor: `#000`,\n  backgroundColor: `#fff`,\n  pathPrefix: null,\n  logo: path.resolve(__dirname, 'src/images/icon.png'),\n  social: {\n    twitter: `gatsbyjs`,\n    fbAppId: `966242223397117`,\n  },\n};\n```\n\n\u003e 🚨 Don't forget to update your `robots.txt` inside `static/`!\n\n## Folder structure\n```bash\n├── gatsby-browser.js # Specify how Gatsby renders pages in the browser\n├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`\n├── gatsby-node.js # Modify webpack config\n├── gatsby-ssr.js # Specify how Gatsby builds pages\n├── site-config.js # Global settings for the whole site, used by multiple scripts\n├── content # Content \u0026 data, in both json and markdown\n├── src\n│   ├── components\n│   │   ├── head # All meta tags etc.\n│   │   ├── io # Intersection Observer component, uses render props\n│   │   ├── layout # Layout component\n│   │   │   ├── layout.css.js # .css.js for component's `styled-components`\n│   │   │   └── layout.js\n│   │   └── transition # Page Transition component, used by Gatsby APIs\n│   ├── constants # Site-wide constants (breakpoints, colors, etc.)\n│   ├── containers # Container components if store is needed\n│   ├── helpers\n│   │   ├── schemaGenerator.js # Generates JSON-LD schema.org snippets\n│   │   └── mediaTemplates.js # Creates media queries for styled-components\n│   ├── images # Images needed by the site/theme (not content)\n│   ├── pages\n│   ├── store # Store and provider of a React.createContext instance\n│   └── global.css.js # Global CSS\n└── scripts\n    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)\n    └── favicons.js # Generates favicons and manifest using one png only.\n```\n\n## Author\n\n* Fabian Schultz ([@fschultz_](https://twitter.com/fschultz_)) - [Stink Studios](https://stinkstudios.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabe%2Fgatsby-universal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabe%2Fgatsby-universal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabe%2Fgatsby-universal/lists"}