gatsby universal

Pemula Gatsby v2 dengan React Context, komponen gaya, transisi halaman, acara gulir dengan IntersectionObserver dan fokus pada aksesibilitas dan SEO. Dibuat untuk situs pemasaran canggih.

Anda dapat mengakses demo starter ini secara online di gatsby-universal.netlify.com.

---

Fitur

• ? Transisi Halaman, berbasis komponen (dengan dukungan no-js)
• ?‍♂️ IntersectionObserver , berbasis komponen (dengan polyfill)
• ? React Context untuk status UI global, dengan SSR
• ? styled-components v4
• ? Dioptimalkan dengan Google Lighthouse (termasuk pengujian)
• Pemisahan Kode CSS dan JS (berbasis komponen)
• ? Dukungan SVG sebaris
• Satu file konfigurasi untuk pengaturan seluruh situs
• ? Kebanyakan tag sosial + meta dalam satu komponen
• ? Semua favicon dihasilkan, hanya diperlukan satu file ikon
• Dukungan luring
• ? Dukungan nyata
• ? Dukungan peta situs
• Kueri media yang dihasilkan agar mudah digunakan
• ? Lebih cantik untuk gaya kode
• dukungan CircleCI
• ? Skema JSONLD
• ? size-plugin untuk mengawasi ukuran paket Anda
• ?‍? ESLint (berdasarkan eslint-plugin-react )

Apakah Anda punya saran atau masukan? Buka terbitan!

Skor Lighthouse (di Netlify)

Penggunaan

 # 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

Konfigurasi

Temukan konfigurasi seluruh situs di 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` ,
  } ,
} ;

Jangan lupa untuk memperbarui robots.txt Anda di dalam static/ !

Struktur folder

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

Pengarang

• Fabian Schultz (@fschultz_) - Studio Bau