gatsby universal
1.0.0
بداية Gatsby v2 عنيد مع سياق React، والمكونات المصممة، وانتقالات الصفحة، وأحداث التمرير مع IntersectionObserver والتركيز على إمكانية الوصول وتحسين محركات البحث. مصممة لمواقع التسويق الحديثة.
يمكنك الوصول إلى العرض التوضيحي لهذا المبدئ عبر الإنترنت على gatsby-universal.netlify.com.
IntersectionObserver ، قائم على المكونات (مع polyfill) styled-components v4 size-plugin لمراقبة أحجام حزمتك eslint-plugin-react )هل لديك اقتراحات أو ملاحظات؟ افتح قضية!
# 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 ابحث عن التكوين على مستوى الموقع في 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` ,
} ,
} ;لا تنسَ تحديث
robots.txtالخاص بك داخلstatic/!
├── 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. 
