diff --git a/.babel-preset.js b/.babel-preset.js new file mode 100644 index 0000000000000..22e7839689e6d --- /dev/null +++ b/.babel-preset.js @@ -0,0 +1,57 @@ +const r = m => require.resolve(m) + +function preset(context, options = {}) { + const { browser = false, debug = false } = options + const { NODE_ENV, BABEL_ENV } = process.env + + const PRODUCTION = (BABEL_ENV || NODE_ENV) === "production" + + const browserConfig = { + useBuiltIns: false, + targets: { + browsers: PRODUCTION + ? [`last 4 versions`, `safari >= 7`, "ie >= 9"] + : [`last 2 versions`, `not ie <= 11`, `not android 4.4.3`], + }, + } + + const nodeConfig = { + targets: { + node: PRODUCTION ? 6.0 : "current", + }, + } + + return { + presets: [ + [ + r("@babel/preset-env"), + Object.assign( + { + loose: true, + debug: !!debug, + useBuiltIns: "entry", + shippedProposals: true, + modules: "commonjs", + }, + browser ? browserConfig : nodeConfig + ), + ], + [r("@babel/preset-react"), { development: !PRODUCTION }], + r("@babel/preset-flow"), + ], + plugins: [ + r("@babel/plugin-proposal-class-properties"), + r("@babel/plugin-proposal-optional-chaining"), + [ + r("@babel/plugin-transform-runtime"), + { + // we are only polyfilling the node environment + // so we need to enable the runtime replacements for the browser preset + polyfill: !!browser, + }, + ], + ], + } +} + +module.exports = preset diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 91b6bc71e0a86..0000000000000 --- a/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "sourceMaps": true, - "presets": [ - "./.babelrc.js" - ], - "ignore": ["dist"], - "env": { - "production": { - "ignore": ["__tests__", "dist"], - } - }, -} diff --git a/.babelrc.js b/.babelrc.js index 8bdb7b261d848..666c1a0efb70a 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,57 +1,15 @@ -const r = m => require.resolve(m) +let ignore = [`**/dist`] -function preset(context, options = {}) { - const { browser = false, debug = false } = options - const { NODE_ENV, BABEL_ENV } = process.env - - const PRODUCTION = (BABEL_ENV || NODE_ENV) === "production" - - const browserConfig = { - useBuiltIns: false, - targets: { - browsers: PRODUCTION - ? [`last 4 versions`, `safari >= 7`, "ie >= 9"] - : [`last 2 versions`, `not ie <= 11`, `not android 4.4.3`], - uglify: PRODUCTION, - }, - } +// Jest needs to compile this code, but generally we don't want this copied +// to output folders +if (process.env.NODE_ENV !== `test`) { + ignore.push(`**/__tests__`) +} - const nodeConfig = { - targets: { - node: PRODUCTION ? 4.0 : "current", - }, - } +const presetAbsPath = require(`path`).join(__dirname, '.babel-preset.js') - return { - presets: [ - [ - r("babel-preset-env"), - Object.assign( - { - loose: true, - debug: !!debug, - useBuiltIns: true, - modules: "commonjs", - }, - browser ? browserConfig : nodeConfig - ), - ], - r("babel-preset-react"), - r("babel-preset-flow"), - ], - plugins: [ - r("babel-plugin-transform-object-rest-spread"), - [ - r("babel-plugin-transform-runtime"), - { - // we are only polyfilling the node environment - // so we need to enable the runtime replacements for the browser preset - polyfill: !!browser, - }, - ], - r(`babel-plugin-transform-flow-strip-types`), - ], - } +module.exports = { + sourceMaps: true, + presets: [presetAbsPath], + ignore, } - -module.exports = preset diff --git a/.flowconfig b/.flowconfig index 75e66a13c27be..5db59cc75f4d7 100644 --- a/.flowconfig +++ b/.flowconfig @@ -4,11 +4,12 @@ [ignore] .*/test/.* .*/node_modules/documentation/.* -.*/node_modules/typography/.* +.*/node_modules/emotion/.* .*/node_modules/fbjs/.* +.*/node_modules/jss/.* +.*/node_modules/preact/.* .*/node_modules/react-side-effect/.* .*/node_modules/styled-components/.* -.*/node_modules/preact/.* -.*/node_modules/jss/.* +.*/node_modules/typography/.* .*/www/.* .*/examples/.* diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index 94eba915c52f7..518296b179b6c 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -20,18 +20,19 @@ about: Usage question or discussion about Gatsby. ## Summary - ## Relevant information - + ### Environment (if relevant) -* Gatsby version (`npm list gatsby`): -* gatsby-cli version (`gatsby --version`): -* Node.js version: -* Operating System: + + ### File contents (if changed) + `gatsby-config.js`: N/A `package.json`: N/A `gatsby-node.js`: N/A diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000000000..4b00ead876a2d --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,12 @@ + diff --git a/.gitignore b/.gitignore index d35570228536c..a63e7f82d5c4b 100644 --- a/.gitignore +++ b/.gitignore @@ -51,3 +51,5 @@ node_modules/ *.sw* .serverless/ +yarn.lock +package-lock.json diff --git a/.travis.yml b/.travis.yml index d9a707362a211..e79c4ef105ca9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -26,7 +26,6 @@ jobs: - yarn run bootstrap script: - yarn test - - yarn danger ci - stage: gatsbygram ui tests language: node_js diff --git a/Breaking Changes.md b/Breaking Changes.md new file mode 100644 index 0000000000000..69ed11f48f843 --- /dev/null +++ b/Breaking Changes.md @@ -0,0 +1,12 @@ +- Remove postcss plugins (cssnext, cssimport) from default css loader config +- boundActionCreators => actions +- pathContext => pageContext +- Source & transformer plugins now use UUIDs for ids. If you used glob or regex to query nodes by id then you'll need to query something else. +- Mixed commonjs/es6 modules fail +- Remove explicit polyfill and use the new builtins: usage support in babel 7. +- Changed `modifyBabelrc` to `onCreateBabelConfig` +- Changed `modifyWebpackConfig` to `onCreateWebpackConfig` +- Inlining CSS changed — remove it from any custom html.js as done automatically by core now. +- Manually install `react` and `react-dom`, along with any dependencies required by your plugins. +- Layouts have been removed. To achieve the same behavior as v1, you have to wrap your pages and page templates with your own Layout component. Since Layout is a non-page component, making query has to be done with StaticQuery. +- `graphql` package is exported from `gatsby`. If you use `setFieldsOnGraphQLNodeType` node API, please import graphql types from `gatsby/graphql` to prevent `Schema must contain unique named types but contains multiple types named ""` errors. diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f77e73861c46..22a68a523cbde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,306 +4,306 @@ ### Added -* Add gatsby-source-mongodb plugin to gatsby (#1570) @jorishermans -* [www] Refactor Homepage and Navigation & convert diagram to html/css (#1605) +- Add gatsby-source-mongodb plugin to gatsby (#1570) @jorishermans +- [www] Refactor Homepage and Navigation & convert diagram to html/css (#1605) @fk -* Included example with WP-API-MENUS items (#1619) @sebastienfi -* added new site to showcase (#1616) @dvzrd -* Docs: add grommet starter (#1626) @alampros -* add a bunch of tests for various plugins (#1581) @DSchau +- Included example with WP-API-MENUS items (#1619) @sebastienfi +- added new site to showcase (#1616) @dvzrd +- Docs: add grommet starter (#1626) @alampros +- add a bunch of tests for various plugins (#1581) @DSchau ### Fixed -* fix broken gatsby link definition for typescript 2.4.2 (#1628) @DominikGuzei -* test: fix failing test due to missing argyle image (#1636) @DSchau -* Revise part one of tutorial to use hello-world starter (#1630) @KyleAMathews -* Fix passing createNode as argument (#1629) @sebastienfi -* Don't mutate page context (#1537) @okcoker -* Updated instructions for Windows (#1621) @sebastienfi -* Tweak JSS links + add it to plugins page (#1615) @KyleAMathews +- fix broken gatsby link definition for typescript 2.4.2 (#1628) @DominikGuzei +- test: fix failing test due to missing argyle image (#1636) @DSchau +- Revise part one of tutorial to use hello-world starter (#1630) @KyleAMathews +- Fix passing createNode as argument (#1629) @sebastienfi +- Don't mutate page context (#1537) @okcoker +- Updated instructions for Windows (#1621) @sebastienfi +- Tweak JSS links + add it to plugins page (#1615) @KyleAMathews ## [1.4.0] - 2017-07-25 ### Added -* Add gatsby-plugin-feed to www #1569 @nicholaswyoung -* Implement gatsby-plugin-jss #1431 @wizardzloy -* gatsby-transformer-sharp: Added the option to use the original image #1556 +- Add gatsby-plugin-feed to www #1569 @nicholaswyoung +- Implement gatsby-plugin-jss #1431 @wizardzloy +- gatsby-transformer-sharp: Added the option to use the original image #1556 @chiedo ### Fixed -* [www] Blog post meta styles #1561 @fk -* Fix unsupported method in IE #1573 @variadicintegrity -* Don't set a default title in html.js as not overriden by react-helmet #1578 +- [www] Blog post meta styles #1561 @fk +- Fix unsupported method in IE #1573 @variadicintegrity +- Don't set a default title in html.js as not overriden by react-helmet #1578 @KyleAMathews -* Downgrade Glamor to v2 as v3 unstable #1580 @KyleAMathews -* Remove the slash between the pathPrefix and pathname when navigating #1574 +- Downgrade Glamor to v2 as v3 unstable #1580 @KyleAMathews +- Remove the slash between the pathPrefix and pathname when navigating #1574 @DaleWebb -* Fix url in Contentful example #1596 @axe312ger -* Small fixes to tutorial #1586 @benmathews -* Add missing dep to gatsby-source-filesystem #1607 @jquense -* Wordpress -> WordPress #1608 @Alaev -* Fix typo #1609 @fk -* Update modifyWebpackConfig docs #1613 @KyleAMathews -* Fix broken links #1614 @KyleAMathews +- Fix url in Contentful example #1596 @axe312ger +- Small fixes to tutorial #1586 @benmathews +- Add missing dep to gatsby-source-filesystem #1607 @jquense +- Wordpress -> WordPress #1608 @Alaev +- Fix typo #1609 @fk +- Update modifyWebpackConfig docs #1613 @KyleAMathews +- Fix broken links #1614 @KyleAMathews ## [1.3.0] - 2017-07-19 ### Added -* docs: add "creating a static blog with gatsby" blog post #1560 @DSchau -* add tests to gatsby-remark-images #1559 @DSchau -* add glitch-gatsby-starter-blog #1554 @100ideas -* use consistent chunk ids #1534 @stevensurgnier -* Enhance API for multiple feeds #1548 @nicholaswyoung -* Add new plugin to handle csv files #1496 @ssonal -* Adds showcase segment for starters/websites built with Gatsby. #1535 @Vagr9K -* Fancy Javascript Example #1492 @jbolda -* Add sitemap plugin to www #1541 @nicholaswyoung +- docs: add "creating a static blog with gatsby" blog post #1560 @DSchau +- add tests to gatsby-remark-images #1559 @DSchau +- add glitch-gatsby-starter-blog #1554 @100ideas +- use consistent chunk ids #1534 @stevensurgnier +- Enhance API for multiple feeds #1548 @nicholaswyoung +- Add new plugin to handle csv files #1496 @ssonal +- Adds showcase segment for starters/websites built with Gatsby. #1535 @Vagr9K +- Fancy Javascript Example #1492 @jbolda +- Add sitemap plugin to www #1541 @nicholaswyoung ### Fixed -* Clone context to prevent mutations #1553 @kyleamathews -* Update dependencies to avoid hoisting errors #1552 @kyleamathews -* Set pathPrefix if not defined to an empty string to avoid undefined #1551 +- Clone context to prevent mutations #1553 @kyleamathews +- Update dependencies to avoid hoisting errors #1552 @kyleamathews +- Set pathPrefix if not defined to an empty string to avoid undefined #1551 @kyleamathews -* Fix prefixes in gatsby-link + navigateTo #1550 @kyleamathews -* Make path to packages the same on website as github #1549 @kyleamathews -* Fixing sw.js 404-ing because of pathPrefix not being prefixed to sw.js +- Fix prefixes in gatsby-link + navigateTo #1550 @kyleamathews +- Make path to packages the same on website as github #1549 @kyleamathews +- Fixing sw.js 404-ing because of pathPrefix not being prefixed to sw.js properly. Fixing #1539 #1540 @gregsqueeb -* [gatsby-plugin-sharp] Fix PNG generation when using the "duotone" option #1506 +- [gatsby-plugin-sharp] Fix PNG generation when using the "duotone" option #1506 @fk -* fix: ensure pathPrefix is added to responsive images #1510 @DSchau -* Fix the onClick override logic #1489 @jakedeichert -* Check if node.value is set as otherwise cheerio throws an error #1543 +- fix: ensure pathPrefix is added to responsive images #1510 @DSchau +- Fix the onClick override logic #1489 @jakedeichert +- Check if node.value is set as otherwise cheerio throws an error #1543 @kyleamathews -* Fix docs referencing outdated React Router API #1523 @ahfarmer -* Fixes component-renderer to allow for use of internal routing #1542 @scottyeck -* Center .twitter-tweet-rendered #1529 @fk -* double '... use use ...' word #1528 @GoreStarry +- Fix docs referencing outdated React Router API #1523 @ahfarmer +- Fixes component-renderer to allow for use of internal routing #1542 @scottyeck +- Center .twitter-tweet-rendered #1529 @fk +- double '... use use ...' word #1528 @GoreStarry ## [1.2.0] - 2017-07-13 ### Added -* Watch for changes to html.js #1473 @felixjung -* Add stylus example #1479 @iansinnott -* Added support for nested img tags in html nodes #1485 @chiedo -* Prism plugin bugfix alt #1491 @bvaughn -* Allow for env files #1462 @okcoker -* Create deploy-gatsby.md #1480 @couturecraigj +- Watch for changes to html.js #1473 @felixjung +- Add stylus example #1479 @iansinnott +- Added support for nested img tags in html nodes #1485 @chiedo +- Prism plugin bugfix alt #1491 @bvaughn +- Allow for env files #1462 @okcoker +- Create deploy-gatsby.md #1480 @couturecraigj ### Fixed -* Fix Contentful example URL #1483 @oscar-b -* Fix reference to program.directory #1490 @jakedeichert -* Fixes docs referencing removed "1.0" branch source code instead of master. +- Fix Contentful example URL #1483 @oscar-b +- Fix reference to program.directory #1490 @jakedeichert +- Fixes docs referencing removed "1.0" branch source code instead of master. #1495 @Vagr9K -* fix(gatsby-source-contentful): missing host param in createClient #1487 +- fix(gatsby-source-contentful): missing host param in createClient #1487 @Smiter -* use program directory over cwd #1478 @craig-mulligan +- use program directory over cwd #1478 @craig-mulligan ## [1.1.0] - 2017-07-11 ### Added -* Add gatsby-plugin-twitter for embedding Tweets #1389 @KyleAMathews -* Document promise/callback interface for async plugins #1409 @KyleAMathews -* Add an example of a config query to migration docs #1429 @benmccormick -* Adds more information to documentation pages. #1428 @Vagr9K -* Add new plugin `gatsby-plugin-emotion` #1447 @rawrmonstar -* Gatsby remark images default alt tags and optional linking #1451 @chiedo -* Add stylus support #1437 @iansinnott -* [gatsby-source-contentful] Add Support for preview api #1464 @Khaledgarbaya +- Add gatsby-plugin-twitter for embedding Tweets #1389 @KyleAMathews +- Document promise/callback interface for async plugins #1409 @KyleAMathews +- Add an example of a config query to migration docs #1429 @benmccormick +- Adds more information to documentation pages. #1428 @Vagr9K +- Add new plugin `gatsby-plugin-emotion` #1447 @rawrmonstar +- Gatsby remark images default alt tags and optional linking #1451 @chiedo +- Add stylus support #1437 @iansinnott +- [gatsby-source-contentful] Add Support for preview api #1464 @Khaledgarbaya ### Fixed -* Update init-starter.js #1393 @kimown -* fix URL for packages, using the master branch #1399 @bmackinney -* Use latest instead of next for versions in examples #1404 @KyleAMathews -* Update www dependencies #1402 @KyleAMathews -* Fix frontpage copy issues #1401 @KyleAMathews -* Add missing return statement #1405 @ahmedlhanafy -* Fixed documentation #1406 @chiedo -* fix: Update examples directory URL due to 404 with current link #1410 +- Update init-starter.js #1393 @kimown +- fix URL for packages, using the master branch #1399 @bmackinney +- Use latest instead of next for versions in examples #1404 @KyleAMathews +- Update www dependencies #1402 @KyleAMathews +- Fix frontpage copy issues #1401 @KyleAMathews +- Add missing return statement #1405 @ahmedlhanafy +- Fixed documentation #1406 @chiedo +- fix: Update examples directory URL due to 404 with current link #1410 @bencodezen -* Add link to gatsby-dev-cli + we're stable + copy editing @KyleAMathews -* fix glamor + babel modification #1416 @jaredly -* Typo, grammar and standardising flags #1426 @IrregularShed -* Fix bug where the target is incorrectly set #1427 @samzhao -* Fix "gastsby" to "gatsby" on line 34 #1433 @trautlein -* Fix "Creating Pages" example's variable reference #1430 @benmccormick -* Fixes the example for navigateTo. #1440 @Vagr9K -* Properly load options for Remark #1441 @benmccormick -* Use lowercase require for "rss" #1444 @nicholaswyoung -* fix issue with ssr for redux example #1445 lemuelbarango -* Update .nvmrc, Node 8 #1446 @nicholaswyoung -* Set a key on pages so when switching between pages, the same component +- Add link to gatsby-dev-cli + we're stable + copy editing @KyleAMathews +- fix glamor + babel modification #1416 @jaredly +- Typo, grammar and standardising flags #1426 @IrregularShed +- Fix bug where the target is incorrectly set #1427 @samzhao +- Fix "gastsby" to "gatsby" on line 34 #1433 @trautlein +- Fix "Creating Pages" example's variable reference #1430 @benmccormick +- Fixes the example for navigateTo. #1440 @Vagr9K +- Properly load options for Remark #1441 @benmccormick +- Use lowercase require for "rss" #1444 @nicholaswyoung +- fix issue with ssr for redux example #1445 lemuelbarango +- Update .nvmrc, Node 8 #1446 @nicholaswyoung +- Set a key on pages so when switching between pages, the same component instance isn't reusued #1460 @KyleAMathews -* Removed `owner` assignation to prevent error #1454 @sebastienfi -* Update gatsby-node.js #1452 @sebastienfi -* Update README.md #1453 @sebastienfi -* Improve typescript example #1466 @fabien0102 -* Remove react-helmet from src/html.js fixes #1443 #1474 @KyleAMathews -* Updates add-custom-webpack-config.md to fix broken links #1420 @marcustisater -* Fix source-wordpress npmignore #1476 @KyleAMathews +- Removed `owner` assignation to prevent error #1454 @sebastienfi +- Update gatsby-node.js #1452 @sebastienfi +- Update README.md #1453 @sebastienfi +- Improve typescript example #1466 @fabien0102 +- Remove react-helmet from src/html.js fixes #1443 #1474 @KyleAMathews +- Updates add-custom-webpack-config.md to fix broken links #1420 @marcustisater +- Fix source-wordpress npmignore #1476 @KyleAMathews ## [1.0.0] - 2017-07-06 ### Added -* Adds Material Blog starter to the list of starters. #1344 @Vagr9K committed +- Adds Material Blog starter to the list of starters. #1344 @Vagr9K committed with KyleAMathews 4 days ago -* Continuation: WIP update home page with new design #1355 @fk -* Wordpress source plugin and example site #1321 @sebastienfi -* [v1.0] Documentation improvements. #1370 @Vagr9K -* 1.0.0 announcement blog post #1379 @KyleAMathews -* Adds gatsby-transformer-toml to the core. ##1382 @Vagr9K +- Continuation: WIP update home page with new design #1355 @fk +- Wordpress source plugin and example site #1321 @sebastienfi +- [v1.0] Documentation improvements. #1370 @Vagr9K +- 1.0.0 announcement blog post #1379 @KyleAMathews +- Adds gatsby-transformer-toml to the core. ##1382 @Vagr9K ### Fixed -* Update README to make it clearer about deploying to gh pages #1343 @jsfeb26 -* Call next() after serving HTML #1349 @levibuzolic -* Use int for defaultValue of int field #1352 @KyleAMathews -* Make default sitemap meet expectations #1351 @chiedo -* Guard against calling ga function if it doesn't (yet) exist #1361 +- Update README to make it clearer about deploying to gh pages #1343 @jsfeb26 +- Call next() after serving HTML #1349 @levibuzolic +- Use int for defaultValue of int field #1352 @KyleAMathews +- Make default sitemap meet expectations #1351 @chiedo +- Guard against calling ga function if it doesn't (yet) exist #1361 @KyleAMathews -* Namespace type names for Contentful #1374 @KyleAMathews -* Add missing parens in code examples #1376 @okcoker -* Fix gatsby-transformer-react-docgen dependencies #1377 @jquense +- Namespace type names for Contentful #1374 @KyleAMathews +- Add missing parens in code examples #1376 @okcoker +- Fix gatsby-transformer-react-docgen dependencies #1377 @jquense ## [1.0.0-beta.6] - 2017-07-01 ### Added -* Use the sync endpoint to pull data from Contentful #1241 @Khaledgarbaya -* Use localized space #1266 @Khaledgarbaya -* gatsby-transformer-javascript-static-exports #1253 @jbolda -* Added support for HTML img tags #1285 @chiedo -* [gatsby-source-contentful] support creating localized nodes #1279 +- Use the sync endpoint to pull data from Contentful #1241 @Khaledgarbaya +- Use localized space #1266 @Khaledgarbaya +- gatsby-transformer-javascript-static-exports #1253 @jbolda +- Added support for HTML img tags #1285 @chiedo +- [gatsby-source-contentful] support creating localized nodes #1279 @kyleamathews -* Link pages to their plugin creators for easier understanding/debugging fixes +- Link pages to their plugin creators for easier understanding/debugging fixes #1281 #1297 @kyleamathews -* Support NavLink in gatsby-link #1302 @abi -* Add an example for using the sass plugin #1312 @danielfarrell -* Add CSS Modules example site #1314 @kyleamathews -* Add Typescript example #1319 @kyleamathews -* Support using browserslist for setting per-site browser targeting for JS/CSS +- Support NavLink in gatsby-link #1302 @abi +- Add an example for using the sass plugin #1312 @danielfarrell +- Add CSS Modules example site #1314 @kyleamathews +- Add Typescript example #1319 @kyleamathews +- Support using browserslist for setting per-site browser targeting for JS/CSS transformations #1336 @kyleamathews -* Add gatsby-plugin-canonical-url #1337 @kyleamathews -* [source-contentful] Allow for querying gifs & when user queries for image +- Add gatsby-plugin-canonical-url #1337 @kyleamathews +- [source-contentful] Allow for querying gifs & when user queries for image height, actually crop #1339 @kyleamathews ### Changed -* Replace build-images with just images @kyleamathews -* Make mediaType optional #1299 @kyleamathews -* Just use name/value for createNodeField #1325 @kyleamathews -* Renamed remark-responsive-image-plugin to gatsby-remark-images @chiedo -* Write images processed by sharp to public/static along with other assets #1332 +- Replace build-images with just images @kyleamathews +- Make mediaType optional #1299 @kyleamathews +- Just use name/value for createNodeField #1325 @kyleamathews +- Renamed remark-responsive-image-plugin to gatsby-remark-images @chiedo +- Write images processed by sharp to public/static along with other assets #1332 @kyleamathews ### Fixed -* using-remark fixes #1250 @fk -* Broken example commands in DOCS / Getting Started page #1252 @sebastienfi -* Don't catch links to files #1260 @kyleamathews -* Improve develop-html stage #1254 @craig-mulligan -* Make various tweaks to the tutorial #1262 @kyleamathews -* Add tests for parsing regex args + fix bug #1267 @kyleamathews -* Fixes for feed plugin README #1273 @kyleamathews -* [gatsby-source-contentful] Add testing for existing API processing #1274 +- using-remark fixes #1250 @fk +- Broken example commands in DOCS / Getting Started page #1252 @sebastienfi +- Don't catch links to files #1260 @kyleamathews +- Improve develop-html stage #1254 @craig-mulligan +- Make various tweaks to the tutorial #1262 @kyleamathews +- Add tests for parsing regex args + fix bug #1267 @kyleamathews +- Fixes for feed plugin README #1273 @kyleamathews +- [gatsby-source-contentful] Add testing for existing API processing #1274 @kyleamathews -* Throw error and quit if there's a JS parse error for gatsby-config.js #1296 +- Throw error and quit if there's a JS parse error for gatsby-config.js #1296 @kyleamathews -* Add missing npmignore files #1298 @kyleamathews -* Move creating 404.html page into plugin so can enforce pages only created by +- Add missing npmignore files #1298 @kyleamathews +- Move creating 404.html page into plugin so can enforce pages only created by plugins #1300 @kyleamathews -* Fix occassionally out-of-order query watching which would throw errors #1301 +- Fix occassionally out-of-order query watching which would throw errors #1301 @kyleamathews -* Waiting for query extraction wasn't actually waiting #1303 @kyleamathews -* Improved plugin error without exit #1309 @0x80 -* Fixed a small typo in gatsby-plugin-postcss-sass that prevented CSS modules +- Waiting for query extraction wasn't actually waiting #1303 @kyleamathews +- Improved plugin error without exit #1309 @0x80 +- Fixed a small typo in gatsby-plugin-postcss-sass that prevented CSS modules from working #1307 @levibuzolic -* Don't use the sass loader on build-javascript #1278 @danielfarrell -* Fixes 1317 Google Analytics plugin; updates attachHistory listener logic #1318 +- Don't use the sass loader on build-javascript #1278 @danielfarrell +- Fixes 1317 Google Analytics plugin; updates attachHistory listener logic #1318 @camsjams -* Call onRouteUpdate on initial page load #1320 @kyleamathews -* Fix check if there's a sw plugin added #1323 @kyleamathews -* Only build 1 html page in development and always serve it #1324 @kyleamathews -* Fix server/client rendering mismatch #1326 @kyleamathews -* update gatsby-remark-responsive-iframe readme #1328 @eddywashere -* Use memory lowdb as it is significantly faster. Also snuck in yurnalist for +- Call onRouteUpdate on initial page load #1320 @kyleamathews +- Fix check if there's a sw plugin added #1323 @kyleamathews +- Only build 1 html page in development and always serve it #1324 @kyleamathews +- Fix server/client rendering mismatch #1326 @kyleamathews +- update gatsby-remark-responsive-iframe readme #1328 @eddywashere +- Use memory lowdb as it is significantly faster. Also snuck in yurnalist for better console output #1329 @kyleamathews -* Quit on ctrl-c #1334 @kyleamathews -* Set keys on head/body components #1335 @kyleamathews +- Quit on ctrl-c #1334 @kyleamathews +- Set keys on head/body components #1335 @kyleamathews ## [1.0.0-beta.4] - 2017-06-23 ### Added -* Add using-remark example site #1230 @fk -* Add friendly webpack ouput #1240 @craig-mulligan -* Add documentation on how to use custom webpack-config #1242 @bananenmannfrau -* Add graphql fields for creating responsive images using Contentful image API +- Add using-remark example site #1230 @fk +- Add friendly webpack ouput #1240 @craig-mulligan +- Add documentation on how to use custom webpack-config #1242 @bananenmannfrau +- Add graphql fields for creating responsive images using Contentful image API #1228 @kyleamathews ### Changed -* Refactor Contentful data processing into own module + use more standard +- Refactor Contentful data processing into own module + use more standard GraphQL type names @kyleamathews -* Prefer floats over integers when inferring a GraphQL field #1229 @kyleamathews +- Prefer floats over integers when inferring a GraphQL field #1229 @kyleamathews ### Fixed -* Fix babel compilation so targets uglify #1244 @kyleamathews -* Open external image link with rel='noopener' #1227 @wangsongiam -* Update index.d.ts for gatsby-link #1232 @timsuchanek +- Fix babel compilation so targets uglify #1244 @kyleamathews +- Open external image link with rel='noopener' #1227 @wangsongiam +- Update index.d.ts for gatsby-link #1232 @timsuchanek ## [1.0.0-beta.3] - 2017-06-21 ### Added -* Show better errors when there's a graphql compilation problem #1222 +- Show better errors when there's a graphql compilation problem #1222 @kyleamathews -* Add google tagmanager plugin #1123 @0x80 -* Support path prefixes for service workers @kyleamathews -* When a new service worker is loaded, force reload #1217 @kyleamathews -* www: Make the header fixed for tablets and up #1215 @fk -* Update on Gatsby Windows instructions #1216 @sebastienfi -* Improve GQL query error handling #1214 @0x80 -* An array of linked nodes linking to heterogeneous node types is now converted +- Add google tagmanager plugin #1123 @0x80 +- Support path prefixes for service workers @kyleamathews +- When a new service worker is loaded, force reload #1217 @kyleamathews +- www: Make the header fixed for tablets and up #1215 @fk +- Update on Gatsby Windows instructions #1216 @sebastienfi +- Improve GQL query error handling #1214 @0x80 +- An array of linked nodes linking to heterogeneous node types is now converted to a union type #1211 @kyleamathews ### Fixed -* Final fixes to highlight code line whitespace, doc #1207 @fk -* Increase contentful fetch limit to max of 1000 #1209 @kyleamathews -* Fix broken links on website #1205 @kyleamathews -* Merge sidebar components #1191 @fk -* absolute resolves for gatsby config files #1195 @craig-mulligan -* Update the default sitemap query #1204 @nicholaswyoung -* For Contentful, filter out unresolvable entries and create markdown text nodes +- Final fixes to highlight code line whitespace, doc #1207 @fk +- Increase contentful fetch limit to max of 1000 #1209 @kyleamathews +- Fix broken links on website #1205 @kyleamathews +- Merge sidebar components #1191 @fk +- absolute resolves for gatsby config files #1195 @craig-mulligan +- Update the default sitemap query #1204 @nicholaswyoung +- For Contentful, filter out unresolvable entries and create markdown text nodes #1202 @kyleamathews -* Reduce font-size of the mobile menu labels #1201 @fk -* gatsby-remark-responsive-image: fix misaligned images #1196 @rstacruz -* Fix 100% width code highlight background only being drawn for the vis… #1192 +- Reduce font-size of the mobile menu labels #1201 @fk +- gatsby-remark-responsive-image: fix misaligned images #1196 @rstacruz +- Fix 100% width code highlight background only being drawn for the vis… #1192 @fk ## [1.0.0-beta.2] - 2017-06-16 ### Added -* Add beta 1 blog post #1183 @kyleamathews +- Add beta 1 blog post #1183 @kyleamathews ### Fixed -* Fix prism line highlighting #1187 @kyleamathews -* Add .npmignore to source-drupal plugin so it'll publish @kyleamathews -* Fix building thumbnails when an image is processed multiple times #1185 +- Fix prism line highlighting #1187 @kyleamathews +- Add .npmignore to source-drupal plugin so it'll publish @kyleamathews +- Fix building thumbnails when an image is processed multiple times #1185 @kyleamathews -* Add event when all plugins are finished running so know when to start running +- Add event when all plugins are finished running so know when to start running queries #1182 @kyleamathews | Fix a typo on gatby-link updating #1181 @danielfarrell @@ -313,61 +313,61 @@ Our first beta!!! 🎉 ### Added -* Allow for gatsby-remark-smartypants options #1166 @mitchejj -* New design (for gatsbyjs.org) + new home page #1170 @kyleamathews -* Add ability to locally define plugins #1126 @0x80 -* Add rough draft for docs for creating source plugins #1159 @kyleamathews -* Optimizations around prefetching page resources #1133 @kyleamathews -* Redux example site #1081 @scottyeck -* Sitemap Generator Plugin #1115 @nicholaswyoung -* Add documentation to gatsby-remark-prism @kyleamathews +- Allow for gatsby-remark-smartypants options #1166 @mitchejj +- New design (for gatsbyjs.org) + new home page #1170 @kyleamathews +- Add ability to locally define plugins #1126 @0x80 +- Add rough draft for docs for creating source plugins #1159 @kyleamathews +- Optimizations around prefetching page resources #1133 @kyleamathews +- Redux example site #1081 @scottyeck +- Sitemap Generator Plugin #1115 @nicholaswyoung +- Add documentation to gatsby-remark-prism @kyleamathews ### Changed -* Move all filter operators for connections under a top-level "filter" field +- Move all filter operators for connections under a top-level "filter" field #1177 @kyleamathews -* Change `linkPrefix` to `pathPrefix` and add an example site #1155 +- Change `linkPrefix` to `pathPrefix` and add an example site #1155 @kyleamathews -* Make the plugin options for remark plugins the second argument (like +- Make the plugin options for remark plugins the second argument (like everywhere else) #1167 @kyleamathews -* Start using next instead of canary in example sites for package versions +- Start using next instead of canary in example sites for package versions @kyleamathews ### Fixed -* Fix graphql compiler on typescript #949 @fabien0102 -* Replace react.createClass with ES6 classes in examples html.js, add PropTypes +- Fix graphql compiler on typescript #949 @fabien0102 +- Replace react.createClass with ES6 classes in examples html.js, add PropTypes #1169 @abachuk -* Fix windows build issue #1158 @kyleamathews -* Use custom delimiter when flattening example values for enum fields so easy to +- Fix windows build issue #1158 @kyleamathews +- Use custom delimiter when flattening example values for enum fields so easy to convert back @kyleamathews -* gatsby-remark-responsive-images: use span instead of div #1151 @rstacruz -* Add check that we can actually find a linked image file node @kyleamathews -* Ignore SVGs in gatsby-remark-responsive-image #1157 @fk -* Replace using levelup for caching with lowdb to avoid native dependency #1142 +- gatsby-remark-responsive-images: use span instead of div #1151 @rstacruz +- Add check that we can actually find a linked image file node @kyleamathews +- Ignore SVGs in gatsby-remark-responsive-image #1157 @fk +- Replace using levelup for caching with lowdb to avoid native dependency #1142 @kyleamathews -* Fix Appveyor bug regarding build all examples on release #1118 @jbolda +- Fix Appveyor bug regarding build all examples on release #1118 @jbolda ## [1.0.0-alpha20] - 2017-06-05 ### Added -* RSS Feed plugin #1073 @nicholaswyoung -* Contentful source plugin #1084 @mericsson -* MVP part 1 of new community Gatsby tutorial #1107 @kyleamathews -* Debuggin help when building HTML fails #1109 @kyleamathews -* Default `html.js` component #1107 @kyleamathews -* Can now highlight specific line numbers in markdown code blocks #1107 +- RSS Feed plugin #1073 @nicholaswyoung +- Contentful source plugin #1084 @mericsson +- MVP part 1 of new community Gatsby tutorial #1107 @kyleamathews +- Debuggin help when building HTML fails #1109 @kyleamathews +- Default `html.js` component #1107 @kyleamathews +- Can now highlight specific line numbers in markdown code blocks #1107 @kyleamathews ## Changed -* `gatsby-config.js` is no longer required #1107 @kyleamathews -* The Gatsby `serve-build` command is now just `serve` #1107 @kyleamathews +- `gatsby-config.js` is no longer required #1107 @kyleamathews +- The Gatsby `serve-build` command is now just `serve` #1107 @kyleamathews ## Fixed -* Windows builds on Appveyor #1049 @jbolda +- Windows builds on Appveyor #1049 @jbolda ## [1.0.0-alpha19] - 2017-06-02 @@ -375,24 +375,24 @@ Our first beta!!! 🎉 ### Added -* Add a helpful 404 page during development that lists the page you might have +- Add a helpful 404 page during development that lists the page you might have wanted @kyleamathews to link to or how to create a new page at that link #1051 @kyleamathews -* Add "Plop" script for quickly creating new packages #1059 @kyleamathews -* Add new plugin supporting server rendering of Styled Components #1060 @gutenye -* Add new plugin supporting server rendering of react-helmet #1085 @kyleamathews -* Add new plugin for extracting JSDocs information from JavaScript files using +- Add "Plop" script for quickly creating new packages #1059 @kyleamathews +- Add new plugin supporting server rendering of Styled Components #1060 @gutenye +- Add new plugin supporting server rendering of react-helmet #1085 @kyleamathews +- Add new plugin for extracting JSDocs information from JavaScript files using documentation.js #1053 @kyleamathews -* Add new API spec (rough draft) @kyleamathews +- Add new API spec (rough draft) @kyleamathews https://www.gatsbyjs.org/docs/api-specification/ -* Add new API reference pages @kyleamathews e.g. +- Add new API reference pages @kyleamathews e.g. https://www.gatsbyjs.org/docs/node-apis/ -* Add "duotone" image processing option to gatsby-plugin-sharp #1047 @fk -* Add example site for image processing @fk +- Add "duotone" image processing option to gatsby-plugin-sharp #1047 @fk +- Add example site for image processing @fk https://image-processing.gatsbyjs.org/ -* Add example site for css-in-js library Glamor @kyleamathews +- Add example site for css-in-js library Glamor @kyleamathews https://using-glamor.gatsbyjs.org/ -* Add example site for css-in-js library Styled Components @kyleamathews +- Add example site for css-in-js library Styled Components @kyleamathews https://using-styled-components.gatsbyjs.org/ ### Changed @@ -403,119 +403,119 @@ API changes: [Action creators](https://www.gatsbyjs.org/docs/bound-action-creators/): -* `upsertPage` is now `createPage` -* `addFieldToNode` is now `createNodeField` -* `deletePageByPath` is now `deletePage` -* `addNodeToParent` is now `createParentChildLink` +- `upsertPage` is now `createPage` +- `addFieldToNode` is now `createNodeField` +- `deletePageByPath` is now `deletePage` +- `addNodeToParent` is now `createParentChildLink` [gatsby-browser.js APIs](https://www.gatsbyjs.org/docs/browser-apis/): -* `clientEntry` is now `onClientEntry` +- `clientEntry` is now `onClientEntry` [gatsby-node.js APIs](https://www.gatsbyjs.org/docs/node-apis/): -* `onNodeCreate` is now `onCreateNode` -* `onUpsertPage` is now `onCreatePage` -* `extendNodeType` is now `setFieldsOnGraphQLNodeType` +- `onNodeCreate` is now `onCreateNode` +- `onUpsertPage` is now `onCreatePage` +- `extendNodeType` is now `setFieldsOnGraphQLNodeType` [gatsby-ssr.js APIs](https://www.gatsbyjs.org/docs/ssr-apis/): -* `modifyHeadComponents` and `modifyPostBodyComponents` were removed in favor of +- `modifyHeadComponents` and `modifyPostBodyComponents` were removed in favor of a new API [`onRenderBody`](https://www.gatsbyjs.org/docs/ssr-apis/#onRenderBody). -* `replaceServerBodyRender` is now `replaceRenderer` +- `replaceServerBodyRender` is now `replaceRenderer` ### Fixed -* Fix sharp image quality and force file format #1054 @0x80 -* Expose crop focus parameter and make consistent with base64 #1055 @0x80 -* Clean up TravisCI config #1066 @hawkrives -* Fix inference bug #1087 @jquense -* Provide default context for GraphQL #1052 @kyleamathews -* Make determining when a given stage is finished much more reliable #1080 +- Fix sharp image quality and force file format #1054 @0x80 +- Expose crop focus parameter and make consistent with base64 #1055 @0x80 +- Clean up TravisCI config #1066 @hawkrives +- Fix inference bug #1087 @jquense +- Provide default context for GraphQL #1052 @kyleamathews +- Make determining when a given stage is finished much more reliable #1080 @kyleamathews -* Pick values off plugin's package.json to avoid weird metadata from NPM #1090 +- Pick values off plugin's package.json to avoid weird metadata from NPM #1090 @kyleamathews ### New 1.0 sites launched -* https://www.vauxlab.com -* https://meetfabric.com +- https://www.vauxlab.com +- https://meetfabric.com ## [1.0.0-alpha16] - 2017-05-26 ### Added -* Migration guide @kyleamathews #1032 -* Made nodes fully immutable @kyleamathews #1035 -* Add no-plugins example @scottyeck #1028 -* Add support for "internal" plugins #1010 -* Expose internal Gatsby data through GraphQL @kyleamathews #1014 +- Migration guide @kyleamathews #1032 +- Made nodes fully immutable @kyleamathews #1035 +- Add no-plugins example @scottyeck #1028 +- Add support for "internal" plugins #1010 +- Expose internal Gatsby data through GraphQL @kyleamathews #1014 ### Changed -* Removed `updateNode` action creator as part of making nodes immutable in +- Removed `updateNode` action creator as part of making nodes immutable in #1035. Now sites/plugins should use `addFieldToNode` for adding fields to nodes created by other plugins and `addNodeToParent` for adding a new node as a child to an existing node. ### Fixed -* Don't override the default onClick handler in gatsby-link @scottyeck #1019 +- Don't override the default onClick handler in gatsby-link @scottyeck #1019 ## [1.0.0-alpha15] - 2017-05-15 ### Added -* Update version of React Router to v4 #940 -* API proxy for use during development #957 -* "static" directory for files to be copied directly into the "public" directory +- Update version of React Router to v4 #940 +- API proxy for use during development #957 +- "static" directory for files to be copied directly into the "public" directory #956 -* Add `toFormat` argument to the ImageSharp GraphQL type so can change format of +- Add `toFormat` argument to the ImageSharp GraphQL type so can change format of image e.g. from `png` to `jpg`. -* React Docgen transformer plugin for parsing propType info from React +- React Docgen transformer plugin for parsing propType info from React components #928 ### Changed -* Change node format to hide most node-specific fields under an "internal" key. +- Change node format to hide most node-specific fields under an "internal" key. Any code referencing `node.type` and others will need changed to `node.internal.type` #960 -* Changed the id for the root `
` used by Gatsby to mount React to +- Changed the id for the root `
` used by Gatsby to mount React to `___gatsby` -* The default layout component should be at `layouts/index.js` not +- The default layout component should be at `layouts/index.js` not `layouts/default.js` https://github.com/gatsbyjs/gatsby/pull/940#issuecomment-300537162 -* `this.props.children` in layout components is now a _function_ +- `this.props.children` in layout components is now a _function_ https://github.com/gatsbyjs/gatsby/pull/940#issuecomment-300878300 -* Change the default port for serve-build to 9000 -* Change the path to GraphiQL to `/___graphql` +- Change the default port for serve-build to 9000 +- Change the path to GraphiQL to `/___graphql` ### Chore -* Upgrade Jest to v20 #935 +- Upgrade Jest to v20 #935 ## [1.0.0-alpha14] - 2017-05-05 ### Added -* Use the Relay Modern compiler for extracting GraphQL queries from components. +- Use the Relay Modern compiler for extracting GraphQL queries from components. This allows us to now support components being added to _all_ components. This means you can now write queries next to the views that use them. #912 -* Hook for modifying pages #863 -* New Drupal source plugin and example site #890 -* Detect if a site's plugins have changed and when they do, delete the site +- Hook for modifying pages #863 +- New Drupal source plugin and example site #890 +- Detect if a site's plugins have changed and when they do, delete the site cache as it might now be invalid #927 -* New way to make connections between nodes e.g. article --> author #902 +- New way to make connections between nodes e.g. article --> author #902 ### Changed -* Combine transformer and typegen plugins. The distinction between the two types +- Combine transformer and typegen plugins. The distinction between the two types of plugins has proved somewhat artificial so they were combined. Any typegen plugins in your `package.json` and `gatsby-config.js` need to be removed. #918 -* Gatsby now garbage collects old nodes. Source plugins should now "touch" -* nodes that haven't changed #861 -* Due to adopting the Relay compiler, GraphQL query template strings need named +- Gatsby now garbage collects old nodes. Source plugins should now "touch" +- nodes that haven't changed #861 +- Due to adopting the Relay compiler, GraphQL query template strings need named "graphql" plus must be named. So if previously you wrote: ```js @@ -529,7 +529,7 @@ export const pageQuery = ` } } } -`; +` ``` You must now write: @@ -545,18 +545,18 @@ export const pageQuery = graphql` } } } -`; +` ``` ## [1.0.0-alpha10] - 2016-11-17 ### Added -* Did the intitial build of the new gatsbyjs.org! It's in the `www` subdirectory +- Did the intitial build of the new gatsbyjs.org! It's in the `www` subdirectory on the 1.0 branch and is built on each push! That's my kind of integration testing :-) You can see the early version of the site at https://gatsbyjs.netlify.com/. PRs welcome! -* Added for page scripts. This speeds up loading scripts slightly +- Added for page scripts. This speeds up loading scripts slightly by telling the browser to start downloading the scripts when the HTML first starts being parsed instead of when the browser reaches the end. This is especially helpful for large HTML documents on slow mobile networks. @@ -564,7 +564,7 @@ export const pageQuery = graphql` ## Changed -* Use namedmodulesplugin instead of recordsPath for ensuring deterministic +- Use namedmodulesplugin instead of recordsPath for ensuring deterministic builds and long-term cachability. The [previous PR adding support for recordsPath](https://github.com/gatsbyjs/gatsby/pull/533) proved unpleasant as you had to build locally and commit the outputted @@ -575,13 +575,13 @@ export const pageQuery = graphql` ### Added -* Put the routes module on `window` to support experimental idea. See this issue +- Put the routes module on `window` to support experimental idea. See this issue for more](https://github.com/gatsbyjs/gatsby/issues/537). [commit](https://github.com/gatsbyjs/gatsby/commit/28e84f3aed480d1f5a8f9859172d1c6f531696d4) ### Changed -* Removed the package `sharp` as it's not used and is preventing Gatsby 1.0 from +- Removed the package `sharp` as it's not used and is preventing Gatsby 1.0 from being installed on Windows. [commit](https://github.com/gatsbyjs/gatsby/commit/34fff74e6fb3cae88010b42f74d784382ead4031) @@ -589,17 +589,17 @@ export const pageQuery = graphql` ### Added -* Extension API `swOnUpdated` for when a service worker finishes updating. Use +- Extension API `swOnUpdated` for when a service worker finishes updating. Use this to alert users of your app to reload to see the latest version. [commit](https://github.com/gatsbyjs/gatsby/commit/5173bdc5424e7c874b3f2abfad706cea2e38ebc3) ### Fixed -* hot reloading now fully works. Apparently you can't use function components +- hot reloading now fully works. Apparently you can't use function components for top-level routes on react-router with react-hot-loader 3.0 `¯\_( ツ )_/¯` [#532](https://github.com/gatsbyjs/gatsby/pull/532) and [commit](https://github.com/gatsbyjs/gatsby/commit/36f2c169586ea30518639d7b1493e08e05befb73) -* Webpack needs the help of an obscure setting `recordsPath` to preserve module +- Webpack needs the help of an obscure setting `recordsPath` to preserve module ids across builds. Big thanks to @NekR for pointing this out to me. Previous to this change, loading changed JS chunks could cause a JS error as the module ids the new chunk expects wouldn't match the module ids from the older chunks. @@ -607,14 +607,14 @@ export const pageQuery = graphql` ### Changed -* Disabled hard-source-webpack-plugin. It speeds up builds significantly but has +- Disabled hard-source-webpack-plugin. It speeds up builds significantly but has been causing hard-to-debug errors while developing. We'll circle back to it down the road. [commit](https://github.com/gatsbyjs/gatsby/commit/4bc9660ac8c371d23c0295cde52002775eee5aa1) -* Restored using ChunkManifestPlugin. It was disabled while trying to debug the +- Restored using ChunkManifestPlugin. It was disabled while trying to debug the mismatched module id bug but that being fixed, we're using it again. [commit](https://github.com/gatsbyjs/gatsby/commit/8d16905f31b80ca56db225904d60ed78c6091ca9) -* Name modules ids in development for easier debugging. Primary benefit is you +- Name modules ids in development for easier debugging. Primary benefit is you can see which modules are getting hot reloaded. [commit](https://github.com/gatsbyjs/gatsby/commit/93f6bd2c4206e71623c1a7fa007322f8dc9887be) @@ -622,7 +622,7 @@ export const pageQuery = graphql` ### Fixed -* Removed entries from the webpack config looking for +- Removed entries from the webpack config looking for `node_modules/gatsby/node_modules`. This was added to help when developing Gatsby using `npm link` but when Gatsby is installed regularly, it then fails the Webpack validation as `node_modules/gatsby/node_modules` doesn't now @@ -632,12 +632,12 @@ export const pageQuery = graphql` ### Added -* extension API for adding types to the GraphQL schema +- extension API for adding types to the GraphQL schema [commit](https://github.com/gatsbyjs/gatsby/commit/18b8b64ed4cbe3399fb262395c0c6e6a5a16099a) ### Fixed -* Use babel-traverse instead of using babel-plugin so that don't say done early +- Use babel-traverse instead of using babel-plugin so that don't say done early when running graphql queries that have async resolvers [commit](https://github.com/gatsbyjs/gatsby/commit/a19677e38d1ce8ba4fb39ddff75482904f168db6) @@ -645,16 +645,16 @@ export const pageQuery = graphql` ### Added -* hard-source-webpack-plugin +- hard-source-webpack-plugin [commit](https://github.com/gatsbyjs/gatsby/commit/2c48e5c42887fecabc01c5f5b6f3dd8e06d3372f) -* New replacement API to wrap root component (useful for Redux, et al.) +- New replacement API to wrap root component (useful for Redux, et al.) [commit](https://github.com/gatsbyjs/gatsby/commit/ebd57d2bd6c39b51a455b76018737e2957e146ef) -* yarn.lock +- yarn.lock [commit](https://github.com/gatsbyjs/gatsby/commit/5ce3321b84e912925c4705ececef6f2c817b0684) ### Changed -* Disable extracting the Webpack chunk manifest until understand why this breaks +- Disable extracting the Webpack chunk manifest until understand why this breaks updates when using Service Workers [commit](https://github.com/gatsbyjs/gatsby/commit/07ed5b010ad27b1816084b361f06fd0ae6a017ba) @@ -662,77 +662,77 @@ export const pageQuery = graphql` ### Added -* Add more file extensions to file/url loader config. Default to url loader +- Add more file extensions to file/url loader config. Default to url loader unless it never makes sense to use data-uri e.g. favicons. -* Use api-runner-browser for calling browser extension APIs/replacements. Prep +- Use api-runner-browser for calling browser extension APIs/replacements. Prep for plugin system. -* Add extension API `clientEntry` that let's site code and plugins to run code +- Add extension API `clientEntry` that let's site code and plugins to run code at the very start of client app. ### Changed -* Add config to uglify to ignore ie8. -* Disable building AppCache until can research if useful. -* Turn on screw_ie8 options in UglifyJS. +- Add config to uglify to ignore ie8. +- Disable building AppCache until can research if useful. +- Turn on screw_ie8 options in UglifyJS. ### Fixed -* Actually use the "sources" key from gatsby-config.js for looking for markdown +- Actually use the "sources" key from gatsby-config.js for looking for markdown files. This will be getting an overhaul soon. -* Don't use null-loader for css during the build-js stage as this prevents +- Don't use null-loader for css during the build-js stage as this prevents offline-plugin from caching files referenced in your CSS. -* Add missing publicPath for build-html step. +- Add missing publicPath for build-html step. ## [1.0.0-alpha3] - 2016-10-05 ### Added -* Introduce way to programmatically add components to `` + API to take +- Introduce way to programmatically add components to `` + API to take over SSR rendering [a39c2a5](https://github.com/gatsbyjs/gatsby/commit/a39c2a5) -* Extract webpack manifest from commons.js so it doesn't change on every build +- Extract webpack manifest from commons.js so it doesn't change on every build improving its cachability [0941d33](https://github.com/gatsbyjs/gatsby/commit/0941d33) -* Always add babel-plugin-add-module-exports +- Always add babel-plugin-add-module-exports [97f083d](https://github.com/gatsbyjs/gatsby/commit/97f083d) ### Changed -* Upgraded React Hot Loader to 3.0-beta5 +- Upgraded React Hot Loader to 3.0-beta5 [5185c3a](https://github.com/gatsbyjs/gatsby/commit/5185c3a) ### Fixed -* Ensure bundle names for components and paths are unique +- Ensure bundle names for components and paths are unique [342030d](https://github.com/gatsbyjs/gatsby/commit/342030d) [a1dfe19](https://github.com/gatsbyjs/gatsby/commit/a1dfe19) -* Remove old code loading config.toml +- Remove old code loading config.toml [66f901](https://github.com/gatsbyjs/gatsby/commit/66f901) ## [1.0.0-alpha2] - 2016-09-21 ### Added -* New system for specifying page layouts inspired by Jekyll. -* `` and `` helper components for rendering correct +- New system for specifying page layouts inspired by Jekyll. +- `` and `` helper components for rendering correct scripts and styles in your html.js, -* Validate at runtime gatsby-config.js and page objects. -* Start of new plugin system. -* New extension API: `onPostCreatePages` — called with pages after all pages are +- Validate at runtime gatsby-config.js and page objects. +- Start of new plugin system. +- New extension API: `onPostCreatePages` — called with pages after all pages are created. Useful for programmatically modifying pages created in plugins. ### Changed -* Removed remaining 0.x code -* Exit if can't find local install of Gatsby. +- Removed remaining 0.x code +- Exit if can't find local install of Gatsby. [030f655](https://github.com/gatsbyjs/gatsby/commit/030f655075be5ad91af1dc12a05e6bd153a861df) -* Fix folder hierarchy for looking for loaders and modules #435 -* Changed default `Config` GraphQL type to `Site` and added some Jekyll-inspired +- Fix folder hierarchy for looking for loaders and modules #435 +- Changed default `Config` GraphQL type to `Site` and added some Jekyll-inspired fields. ## [1.0.0-alpha1] - 2016-09-02 ### Added -* Initial versions of new GraphQL data layer, PRPL pattern, programmatic routes, +- Initial versions of new GraphQL data layer, PRPL pattern, programmatic routes, code splitting, supporting long-term caching of JS files. diff --git a/README.md b/README.md index 0d06cc22654d5..98dafa2b14203 100644 --- a/README.md +++ b/README.md @@ -8,232 +8,253 @@ Gatsby -# Gatsby +# Gatsby V2 Beta -⚛️📄🚀 Blazing-fast static site generator for React +⚛️📄🚀 Blazing-fast site generator for React + +**NOTE:** This branch is the beta version of Gatsby V2. You can find documentation at [next.gatsbyjs.org](https://next.gatsbyjs.org/). + +For `gatsby@1`, please see [the v1 branch](https://github.com/gatsbyjs/gatsby/tree/v1). + +**Are you using V1 and want to try upgrading and help prepare Gatsby for v2? Check out [our V1 => V2 migration guide](https://next.gatsbyjs.org//docs/migrating-from-v1-to-v2/).** + +**How are pull requests being handled during the v2 beta?** + +The following policy will be in place during the v2 beta: + +- We will only accept _bug fixes_ for Gatsby v1. Any PRs opened against v1 that are not bug fixes will be closed + +- If the bug fix is applicable to v2, we will open an additional issue to track porting the change to v2 + +- All _new features_ should be opened as pull requests against v2 (the `master` branch) + +We're using this policy as the Gatsby team currently spends a significant amount of time maintaining two active branches - the v1 branch and the v2 branch - we'd like to limit this work to focus on getting v2 released and start working on oft-requested new features like schema snapshots and schema stitching. ## Showcase Websites built with Gatsby: -* [React](https://reactjs.org/) +- [React](https://reactjs.org/) ([source](https://github.com/reactjs/reactjs.org)) -* [Sourcegraph](https://about.sourcegraph.com) -* [Simply](https://simply.co.za) -* [The freeCodeCamp Guide](https://guide.freecodecamp.org) +- [Sourcegraph](https://about.sourcegraph.com) +- [Simply](https://simply.co.za) +- [The freeCodeCamp Guide](https://guide.freecodecamp.org) ([source](https://github.com/freeCodeCamp/guides)) -* [Storybook](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) -* [Learn Storybook](https://learnstorybook.com) ([source](https://github.com/hichroma/learnstorybook.com)) -* [FloydHub's Blog](https://blog.floydhub.com) -* [mParticle's Documentation](https://docs.mparticle.com) -* [Segment's Blog](https://segment.com/blog/) -* [Fabric](https://meetfabric.com/) -* [Formidable](https://formidable.com/) -* [Ledgy](https://www.ledgy.com/) +- [Storybook](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) +- [Learn Storybook](https://learnstorybook.com) ([source](https://github.com/hichroma/learnstorybook.com)) +- [FloydHub's Blog](https://blog.floydhub.com) +- [mParticle's Documentation](https://docs.mparticle.com) +- [Segment's Blog](https://segment.com/blog/) +- [Fabric](https://meetfabric.com/) +- [Formidable](https://formidable.com/) +- [Ledgy](https://www.ledgy.com/) ([source](https://github.com/morloy/ledgy.com)) -* [openFDA](https://open.fda.gov/) +- [openFDA](https://open.fda.gov/) ([source](https://github.com/FDA/open.fda.gov)) -* [Bricolage.io](https://www.bricolage.io/) +- [Bricolage.io](https://www.bricolage.io/) ([source](https://github.com/KyleAMathews/blog)) -* [Hack Club](https://hackclub.com/) +- [Hack Club](https://hackclub.com/) ([source](https://github.com/hackclub/site)) -* [High School Hackathons](https://hackathons.hackclub.com/) +- [High School Hackathons](https://hackathons.hackclub.com/) ([source](https://github.com/hackclub/hackathons)) -* [Jamie Henson's Blog](http://jamiehenson.com/) +- [Jamie Henson's Blog](http://jamiehenson.com/) ([source](https://github.com/jamiehenson/jh47-gatsby)) -* [Sean Coker's Blog](https://sean.is/) -* [Dustin Schau's Blog](https://dustinschau.com/blog/) +- [Sean Coker's Blog](https://sean.is/) +- [Dustin Schau's Blog](https://dustinschau.com/blog/) ([source](https://github.com/dschau/blog)) -* [The Chiedo Companies Website](https://www.chiedo.com) -* [Damir.io](http://damir.io/) +- [The Chiedo Companies Website](https://www.chiedo.com) +- [Damir.io](http://damir.io/) ([source](https://github.com/dvzrd/gatsby-sfiction)) -* [Ruben's Blog](https://vagr9k.me/) ([source](https://github.com/Vagr9K/Blog)) -* [Kostas Bariotis' Blog](https://kostasbariotis.com/) +- [Ruben's Blog](https://vagr9k.me/) ([source](https://github.com/Vagr9K/Blog)) +- [Kostas Bariotis' Blog](https://kostasbariotis.com/) ([source](https://github.com/kbariotis/kostasbariotis.com)) -* [Thao Am Private Enterprise](http://thaoam.com/) -* [Bakadono](http://bakadono.com/) -* [Travellers.cafe](https://travellers.cafe/) -* [Oliver Benns' Portfolio](https://oliverbenns.com) +- [Thao Am Private Enterprise](http://thaoam.com/) +- [Bakadono](http://bakadono.com/) +- [Travellers.cafe](https://travellers.cafe/) +- [Oliver Benns' Portfolio](https://oliverbenns.com) ([source](https://github.com/oliverbenns/oliverbenns.com)) -* [angeloocana.com](https://angeloocana.com) +- [angeloocana.com](https://angeloocana.com) ([source](https://github.com/angeloocana/angeloocana)) -* [knpw.rs](https://knpw.rs) ([source](https://github.com/knpwrs/knpw.rs)) -* [Overlap.show](https://overlap.show) +- [knpw.rs](https://knpw.rs) ([source](https://github.com/knpwrs/knpw.rs)) +- [Overlap.show](https://overlap.show) ([source](https://github.com/pouretrebelle/overlap.show)) -* [smartive Company Website](https://smartive.ch) -* [Haboba Find Jobs at Phu Quoc Island](http://haboba.com) -* [Charlie Harrington's Blog](https://charlieharrington.com) +- [smartive Company Website](https://smartive.ch) +- [Haboba Find Jobs at Phu Quoc Island](http://haboba.com) +- [Charlie Harrington's Blog](https://charlieharrington.com) ([source](https://github.com/whatrocks/blog)) -* [Song Wang’s website](https://songwang.io/) +- [Song Wang’s website](https://songwang.io/) ([source](https://github.com/wangsongiam/songwang.io)) -* [Digital Psychology](http://digitalpsychology.io) +- [Digital Psychology](http://digitalpsychology.io) ([source](https://github.com/danistefanovic/digitalpsychology.io)) -* [Magicly's blog](https://magicly.me/) +- [Magicly's blog](https://magicly.me/) ([source](https://github.com/magicly/gatsby-blog)) -* [Dalbinaco's website](http://dalbinaco.com/) +- [Dalbinaco's website](http://dalbinaco.com/) ([source](https://github.com/dalbinaco/dalbinaco.github.io)) -* [Phu Quoc Works](http://phuquocworks.net) -* [Kabir Goel's website](https://kbrgl.github.io) +- [Phu Quoc Works](http://phuquocworks.net) +- [Kabir Goel's website](https://kbrgl.github.io) ([source](https://github.com/kbrgl/kbrgl.github.io)) -* [Gabriel Adorf's Portfolio](https://gabrieladorf.com/) +- [Gabriel Adorf's Portfolio](https://gabrieladorf.com/) ([source](https://github.com/gabdorf/gabriel-adorf-portfolio)) -* [CSS Grid Playground by MozillaDev](https://mozilladevelopers.github.io/playground/) +- [CSS Grid Playground by MozillaDev](https://mozilladevelopers.github.io/playground/) ([source](https://github.com/MozillaDevelopers/playground)) -* [David James' Portfolio](http://dfjames.com) +- [David James' Portfolio](http://dfjames.com) ([source](https://github.com/daviddeejjames/dfjames-gatsby)) -* [Tic Tac Toe AI](https://tic-tac-toe-ai.surge.sh) +- [Tic Tac Toe AI](https://tic-tac-toe-ai.surge.sh) ([source](https://github.com/angeloocana/tic-tac-toe-ai)) -* [Etcetera Design](https://etcetera.design) +- [Etcetera Design](https://etcetera.design) ([source](https://github.com/etceteradesign/website)) -* [Azer Koçulu](http://azer.bike) -* [Random Screencast](https://randomscreencast.com) -* [Phu Quoc Tea & Coffee Store](http://trasuaphuquoc.com) -* [Steven Natera's blog](https://www.stevennatera.com) -* [LekoArts - Graphic Designer Portfolio](https://www.lekoarts.de) ([source](https://github.com/LeKoArts/portfolio)) -* [Georgi Yanev](https://blog.georgi-yanev.com) +- [Azer Koçulu](http://azer.bike) +- [Random Screencast](https://randomscreencast.com) +- [Phu Quoc Tea & Coffee Store](http://trasuaphuquoc.com) +- [Steven Natera's blog](https://www.stevennatera.com) +- [LekoArts - Graphic Designer Portfolio](https://www.lekoarts.de) ([source](https://github.com/LeKoArts/portfolio)) +- [Georgi Yanev](https://blog.georgi-yanev.com) ([source](https://github.com/jumpalottahigh/blog.georgi-yanev.com)) -* [OnCallogy.com](https://www.oncallogy.com) -* [doopoll's marketing site](https://doopoll.co) -* [Design Systems Weekly](https://designsystems.email/) -* [Slite landing pages](https://slite.com/) -* [Hallingdata](http://hallingdata.no/) -* [@swyx](http://swyx.io) ([source](https://github.com/sw-yx/swyxdotio)) -* [Portfolio of Piotr Fedorczyk](https://piotrf.pl) -* [JavaScript Stuff](https://www.javascriptstuff.com) -* [GRANDstack - GraphQL, React, Apollo, Neo4j Database](http://grandstack.io/) -* [GraphCMS's website](https://graphcms.com) -* [Mannequin.io](https://mannequin.io) +- [OnCallogy.com](https://www.oncallogy.com) +- [doopoll's marketing site](https://doopoll.co) +- [Design Systems Weekly](https://designsystems.email/) +- [Slite landing pages](https://slite.com/) +- [Hallingdata](http://hallingdata.no/) +- [@swyx](http://swyx.io) ([source](https://github.com/sw-yx/swyxdotio)) +- [Portfolio of Piotr Fedorczyk](https://piotrf.pl) +- [JavaScript Stuff](https://www.javascriptstuff.com) +- [GRANDstack - GraphQL, React, Apollo, Neo4j Database](http://grandstack.io/) +- [GraphCMS's website](https://graphcms.com) +- [Mannequin.io](https://mannequin.io) ([source](https://github.com/LastCallMedia/Mannequin/tree/master/site)) -* [Calpa's Blog](https://calpa.me) [(source)](https://github.com/calpa/blog) -* [API Platform](https://api-platform.com) +- [Calpa's Blog](https://calpa.me) [(source)](https://github.com/calpa/blog) +- [API Platform](https://api-platform.com) ([source](https://github.com/api-platform/website)) -* [Bottender Docs](https://bottender.js.org/) +- [Bottender Docs](https://bottender.js.org/) ([source](https://github.com/bottenderjs/bottenderjs.github.io)) -* [How to GraphQL](https://www.howtographql.com/) +- [How to GraphQL](https://www.howtographql.com/) ([source](https://github.com/howtographql/howtographql)) -* [greglobinski.com](https://greglobinski.com) +- [greglobinski.com](https://greglobinski.com) ([source](https://github.com/greglobinski/greglobinski-com)) -* [Vibert Thio's Portfolio](https://vibertthio.com/portfolio/)([source](https://github.com/vibertthio/portfolio)) -* [YouFoundRon.com](https://youfoundron.com) +- [Vibert Thio's Portfolio](https://vibertthio.com/portfolio/)([source](https://github.com/vibertthio/portfolio)) +- [YouFoundRon.com](https://youfoundron.com) ([source](https://github.com/rongierlach/yfr-dot-com)) -* [heml.io](https://heml.io) +- [heml.io](https://heml.io) ([source](https://github.com/SparkPost/heml.io)) -* [伊撒尔の窝](https://www.yisaer.com) -* [Artivest's Public Website](https://artivest.co) -* [William Owen UK](http://william-owen.co.uk) -* [NYC Planning Labs (New York City Department of City Planning)](https://planninglabs.nyc)([source](https://github.com/nycplanning/labs-planninglabs-home)) -* [The State of European Tech 2017](https://2017.stateofeuropeantech.com) -* [Santa Compañía Creativa](https://santacc.es) ([source](https://github.com/DesarrolloWebSantaCC/santacc-web)) -* [Pravdomil](https://pravdomil.com) ([source](https://github.com/pravdomil/pravdomil.com)) -* [Fabian Schultz' Portfolio](https://fabianschultz.com) +- [伊撒尔の窝](https://www.yisaer.com) +- [Artivest's Public Website](https://artivest.co) +- [William Owen UK](http://william-owen.co.uk) +- [NYC Planning Labs (New York City Department of City Planning)](https://planninglabs.nyc)([source](https://github.com/nycplanning/labs-planninglabs-home)) +- [The State of European Tech 2017](https://2017.stateofeuropeantech.com) +- [Santa Compañía Creativa](https://santacc.es) ([source](https://github.com/DesarrolloWebSantaCC/santacc-web)) +- [Pravdomil](https://pravdomil.com) ([source](https://github.com/pravdomil/pravdomil.com)) +- [Fabian Schultz' Portfolio](https://fabianschultz.com) ([source](https://github.com/fabe/site)) -* [Caddy smells like trees - Free-folk band official page](https://caddysmellsliketrees.ru) +- [Caddy smells like trees - Free-folk band official page](https://caddysmellsliketrees.ru) ([source](https://github.com/podabed/caddysmellsliketrees.github.io)) -* [BRIIM](https://bri.im/) -* [KNW Photography](https://www.knw.io) +- [BRIIM](https://bri.im/) +- [KNW Photography](https://www.knw.io) ([source](https://github.com/ryanwiemer/knw)) -* [NEON](http://neonrated.com) -* [A4 纸网](http://www.a4z.cn)([source](https://github.com/hiooyUI/hiooyui.github.io)) -* [manu.ninja](https://manu.ninja/) ([source](https://github.com/Lorti/manu.ninja)) -* [Kris Hedstrom's Portfolio](https://k-create.com/) ([source](https://github.com/kristofferh/kristoffer)) -* [Chocolate free website](https://chocolate-free.com/) ([source](https://github.com/Khaledgarbaya/chocolate-free-website)) -* [Charles Pinnix Website](https://www.charlespinnix.com/) -* [Verious](https://www.verious.io/) ([source](https://github.com/cpinnix/verious)) -* [Developer Ecosystem](https://www.developerecosystem.com/) -* [Steve Meredith's Portfolio](http://www.steveeeie.io/) -* [Landing page of Put.io](https://put.io/) -* [Ryan Wiemer's Portfolio](https://www.ryanwiemer.com) +- [NEON](http://neonrated.com) +- [A4 纸网](http://www.a4z.cn)([source](https://github.com/hiooyUI/hiooyui.github.io)) +- [manu.ninja](https://manu.ninja/) ([source](https://github.com/Lorti/manu.ninja)) +- [Kris Hedstrom's Portfolio](https://k-create.com/) ([source](https://github.com/kristofferh/kristoffer)) +- [Chocolate free website](https://chocolate-free.com/) ([source](https://github.com/Khaledgarbaya/chocolate-free-website)) +- [Charles Pinnix Website](https://www.charlespinnix.com/) +- [Verious](https://www.verious.io/) ([source](https://github.com/cpinnix/verious)) +- [Developer Ecosystem](https://www.developerecosystem.com/) +- [Steve Meredith's Portfolio](http://www.steveeeie.io/) +- [Landing page of Put.io](https://put.io/) +- [Ryan Wiemer's Portfolio](https://www.ryanwiemer.com) ([source](https://github.com/ryanwiemer/rw)) -* [yerevancoder](https://yerevancoder.com) +- [yerevancoder](https://yerevancoder.com) ([source](https://github.com/yerevancoder/yerevancoder.github.io)) -* [unrealcpp](https://unrealcpp.com/) ([source](https://github.com/Harrison1/unrealcpp-com)) -* [several levels](https://severallevels.io/) ([source](https://github.com/Harrison1/several-levels)) -* [Flooring Factories Outlets](https://www.flooringfactoriesoutlets.com/) -* [Nortcast](https://nortcast.com/) -* [VisitGemer](https://visitgemer.sk/) -* [Nexit](https://nexit.sk/) -* [ERC dEX](https://ercdex.com) -* [iContract Blog](https://blog.icontract.co.uk) -* [Dona Rita](https://donarita.co.uk) ([source](https://github.com/peduarte/dona-rita-website)) -* [Andy Slezak](https://www.aslezak.com) ([source](https://github.com/amslezak)) -* [Odayaka](http://odayaka.net) ([source](https://github.com/odayakanaasa/odayaka)) -* [Ventura Digitalagentur Köln](https://www.ventura-digital.de) -* [Cardiogram](https://cardiogr.am/) -* [LaserTime Clinic](https://lasertime.ru) ([source](https://github.com/oleglegun/lasertime)) -* [Gatsby Manor - themes for GatsbyJS](https://gatsbymanor.com) -* [Darren Britton's Portfolio](https://darrenbritton.com) ([source](https://github.com/darrenbritton/darrenbritton.github.io)) -* [Portfolio / Blog of Preston Richey](https://prestonrichey.com/) ([source](https://github.com/prichey/prestonrichey.com)) -* [Beach Hut Poole](https://www.beachhutpoole.co.uk/) -* [In Sowerby Bridge](https://www.insowerbybridge.co.uk/) -* [枫上雾棋的日志](https://fengshangwuqi.github.io/) -* [Juliette Pretot's Portfolio](https://juliette.sh) -* [Théâtres Parisiens](http://theatres-parisiens.fr/) ([source](https://github.com/phacks/theatres-parisiens)) -* [Jia Hao's Website / Blog](https://jiahao.codes/) ([source](https://github.com/jiahaog/jiahao.codes)) -* [Orbit FM Podcasts](https://www.orbit.fm/) ([source](https://github.com/agarrharr/orbit.fm)) -* [Michele Mazzucco's Portfolio](https://www.michelemazzucco.it) ([source](https://github.com/michelemazzucco/michelemazzucco.it)) -* [Rung](https://rung.com.br) -* [Óbuda University - EE Faculty Student Union Website](https://www.kandohok.hu) -* [Neostack](https://neostack.com) -* [Prosecco Springs](https://www.proseccosprings.com/) -* [Fröhlich ∧ Frei](https://www.froehlichundfrei.de/) -* [Alec Lomas's Portfolio & Blog](https://lowmess.com) ([source](https://github.com/lowmess/lowmess)) -* [Alex Pate - Blog/Portfolio](https://alexpate.uk) ([source](https://github.com/alexpate/alexpate.uk)) -* [Matthias Jordan - Portfolio](https://iammatthias.com) ([source](https://github.com/iammatthias/net)) -* [Daniel Hollcraft](https://danielhollcraft.com) ([source](https://github.com/danielbh/danielhollcraft.com)) -* [Investment Calculator](https://investmentcalculator.io/) -* [Nikbelikov.ru](http://nikbelikov.ru/) -* [Watchcards.ru](http://watchcards.ru/) -* [John Meguerian's Portfolio](https://johnmeguerian.com) ([source](https://github.com/jmegs/portfolio)) -* [Krashna Musika Association Website](https://www.krashna.nl/) ([source](https://github.com/krashnamusika/krashna-site)) -* [Deliveroo.Design](https://www.deliveroo.design/) -* [The Rick and Morty API](http://rickandmortyapi.com/) -* [Adnan Fajlur - Portfolio](https://adnanfajlur.xyz/) -* [Hapticmedia](https://hapticmedia.fr/en/) -* [Smakosh](https://smakosh.com) ([source](https://github.com/smakosh/smakosh.com)) -* [Philipp Czernitzki - Blog/Website](http://philippczernitzki.me) -* [CodeBushi](https://codebushi.com/) -* [WebGazer](https://www.webgazer.io) -* [Joe Seifi's Blog](http://seifi.org) -* [Bartosz Dominiak Blog/Portfolio](http://www.bartoszdominiak.com/) ([source](https://github.com/bartdominiak/blog)) -* [The Audacious Project](https://audaciousproject.org/) -* [upGizmo](https://www.upgizmo.com/) -* [The Bastion Bot](https://bastionbot.org/ "The Bastion Bot") -* [Yuuniworks](https://www.yuuniworks.com/) ([source](https://github.com/junkboy0315/yuuni-web)) -* [Chin Loong Tan - Blog/Portfolio](https://chinloongtan.com/) -* [F1 Vision](https://f1vision.com/) -* [GraphQL College](https://graphql.college) ([source](https://github.com/GraphQLCollege/graphql-college)) -* [Hyunwoo Kim - Blog/Portfolio](https://devhalloween.com) ([source](https://github.com/khw1031/dev-blog)) -* [Abinav Seelan - Personal Website](https://abinavseelan.com) ([source](https://github.com/abinavseelan/abinavseelan.com)) -* [Dovetail](https://dovetailapp.com) -* [Bart van der Waerden Blog](http://bartvanderwaerden.com/) ([source](https://github.com/BartvdWaerden/BartvdWaerden.github.io)) -* [Canella Riccardo - Portfolio](https://canellariccardo.it) ([source](https://github.com/thecreazy/canellariccardo.it)) -* [Eviction Free NYC!](https://www.evictionfreenyc.org/) ([source](https://github.com/JustFixNYC/eviction-free-nyc)) -* [Rafael Belliard's Portfolio](https://rafael.do) ([source](https://github.com/rebelliard/rebelliard.github.io)) -* [Tinder Interracial Couple Emoji Project](https://emoji.tinder.com/) -* [aQuICK](https://aquick.review/) +- [unrealcpp](https://unrealcpp.com/) ([source](https://github.com/Harrison1/unrealcpp-com)) +- [several levels](https://severallevels.io/) ([source](https://github.com/Harrison1/several-levels)) +- [Flooring Factories Outlets](https://www.flooringfactoriesoutlets.com/) +- [Nortcast](https://nortcast.com/) +- [VisitGemer](https://visitgemer.sk/) +- [Nexit](https://nexit.sk/) +- [ERC dEX](https://ercdex.com) +- [iContract Blog](https://blog.icontract.co.uk) +- [Dona Rita](https://donarita.co.uk) ([source](https://github.com/peduarte/dona-rita-website)) +- [Andy Slezak](https://www.aslezak.com) ([source](https://github.com/amslezak)) +- [Odayaka](http://odayaka.net) ([source](https://github.com/odayakanaasa/odayaka)) +- [Ventura Digitalagentur Köln](https://www.ventura-digital.de) +- [Cardiogram](https://cardiogr.am/) +- [LaserTime Clinic](https://lasertime.ru) ([source](https://github.com/oleglegun/lasertime)) +- [Gatsby Manor - themes for GatsbyJS](https://gatsbymanor.com) +- [Darren Britton's Portfolio](https://darrenbritton.com) ([source](https://github.com/darrenbritton/darrenbritton.github.io)) +- [Portfolio / Blog of Preston Richey](https://prestonrichey.com/) ([source](https://github.com/prichey/prestonrichey.com)) +- [Beach Hut Poole](https://www.beachhutpoole.co.uk/) +- [In Sowerby Bridge](https://www.insowerbybridge.co.uk/) +- [枫上雾棋的日志](https://fengshangwuqi.github.io/) +- [Juliette Pretot's Portfolio](https://juliette.sh) +- [Théâtres Parisiens](http://theatres-parisiens.fr/) ([source](https://github.com/phacks/theatres-parisiens)) +- [Jia Hao's Website / Blog](https://jiahao.codes/) ([source](https://github.com/jiahaog/jiahao.codes)) +- [Orbit FM Podcasts](https://www.orbit.fm/) ([source](https://github.com/agarrharr/orbit.fm)) +- [Michele Mazzucco's Portfolio](https://www.michelemazzucco.it) ([source](https://github.com/michelemazzucco/michelemazzucco.it)) +- [Rung](https://rung.com.br) +- [Óbuda University - EE Faculty Student Union Website](https://www.kandohok.hu) +- [Neostack](https://neostack.com) +- [Prosecco Springs](https://www.proseccosprings.com/) +- [Fröhlich ∧ Frei](https://www.froehlichundfrei.de/) +- [Alec Lomas's Portfolio & Blog](https://lowmess.com) ([source](https://github.com/lowmess/lowmess)) +- [Alex Pate - Blog/Portfolio](https://alexpate.uk) ([source](https://github.com/alexpate/alexpate.uk)) +- [Matthias Jordan - Portfolio](https://iammatthias.com) ([source](https://github.com/iammatthias/net)) +- [Daniel Hollcraft](https://danielhollcraft.com) ([source](https://github.com/danielbh/danielhollcraft.com)) +- [Investment Calculator](https://investmentcalculator.io/) +- [Nikbelikov.ru](http://nikbelikov.ru/) +- [Watchcards.ru](http://watchcards.ru/) +- [John Meguerian's Portfolio](https://johnmeguerian.com) ([source](https://github.com/jmegs/portfolio)) +- [Krashna Musika Association Website](https://www.krashna.nl/) ([source](https://github.com/krashnamusika/krashna-site)) +- [Deliveroo.Design](https://www.deliveroo.design/) +- [The Rick and Morty API](http://rickandmortyapi.com/) +- [Adnan Fajlur - Portfolio](https://adnanfajlur.xyz/) +- [Hapticmedia](https://hapticmedia.fr/en/) +- [Smakosh](https://smakosh.com) ([source](https://github.com/smakosh/smakosh.com)) +- [Philipp Czernitzki - Blog/Website](http://philippczernitzki.me) +- [CodeBushi](https://codebushi.com/) +- [WebGazer](https://www.webgazer.io) +- [Joe Seifi's Blog](http://seifi.org) +- [Bartosz Dominiak Blog/Portfolio](http://www.bartoszdominiak.com/) ([source](https://github.com/bartdominiak/blog)) +- [The Audacious Project](https://audaciousproject.org/) +- [upGizmo](https://www.upgizmo.com/) +- [The Bastion Bot](https://bastionbot.org/ "The Bastion Bot") +- [Yuuniworks](https://www.yuuniworks.com/) ([source](https://github.com/junkboy0315/yuuni-web)) +- [Chin Loong Tan - Blog/Portfolio](https://chinloongtan.com/) +- [F1 Vision](https://f1vision.com/) +- [GraphQL College](https://graphql.college) ([source](https://github.com/GraphQLCollege/graphql-college)) +- [Hyunwoo Kim - Blog/Portfolio](https://devhalloween.com) ([source](https://github.com/khw1031/dev-blog)) +- [Abinav Seelan - Personal Website](https://abinavseelan.com) ([source](https://github.com/abinavseelan/abinavseelan.com)) +- [Dovetail](https://dovetailapp.com) +- [Bart van der Waerden Blog](http://bartvanderwaerden.com/) ([source](https://github.com/BartvdWaerden/BartvdWaerden.github.io)) +- [Canella Riccardo - Portfolio](https://canellariccardo.it) ([source](https://github.com/thecreazy/canellariccardo.it)) +- [Eviction Free NYC!](https://www.evictionfreenyc.org/) ([source](https://github.com/JustFixNYC/eviction-free-nyc)) +- [Rafael Belliard's Portfolio](https://rafael.do) ([source](https://github.com/rebelliard/rebelliard.github.io)) +- [Tinder Interracial Couple Emoji Project](https://emoji.tinder.com/) +- [aQuICK](https://aquick.review/) ([source](https://github.com/aQuICK-Review/aQuick)) -* [Workshop In The Woods](https://www.workshop-in-the-woods.com/) ([source](https://github.com/ryanwiemer/workshop)) -* [Steven Koerts - Portfolio](http://stevenkoerts.nl/)([source](https://github.com/Steven24K/Steven24K.github.io)) -* [Ray Gesualdo - Personal Website](http://www.raygesualdo.com/) ([source](https://github.com/raygesualdo/raygesualdo.com)) -* [10M GmbH](https://10m.de) -* [Edge Database](https://edgedb.com/) -* [Rolling Stone: The New Classics](https://www.rollingstone.com/the-new-classics) -* [Jacob Bolda - Personal Website](https://www.jacobbolda.com/) -* [Apideck](https://apideck.com) -* [GDPR Checklist](https://gdprchecklist.io) ([source](https://github.com/privacyradius/gdpr-checklist)) -* [GDPR Tracker](https://gdprtracker.io) -* [GDPR Form](https://gdprform.io) -* [Josh Palacios - Personal Website](https://joshpalacios.com) ([source](https://github.com/jshwa/joshpalacios-site)) -* [Cup of Data](https://cupofdata.com) ([source](https://github.com/cupofdata/cupofdata.com)) -* [Natalia Acevedo - Personal Website](https://nataliaacevedo.com) ([source](https://github.com/yeion7/nataliaacevedo.com)) -* [Airbnb Cereal](https://airbnb.design/cereal/) -* [mottox2 blog](https://mottox2.com) -* [Tiger Facility Services](https://www.tigerfacilityservices.com/) +- [Workshop In The Woods](https://www.workshop-in-the-woods.com/) ([source](https://github.com/ryanwiemer/workshop)) +- [Steven Koerts - Portfolio](http://stevenkoerts.nl/)([source](https://github.com/Steven24K/Steven24K.github.io)) +- [Ray Gesualdo - Personal Website](http://www.raygesualdo.com/) ([source](https://github.com/raygesualdo/raygesualdo.com)) +- [10M GmbH](https://10m.de) +- [Edge Database](https://edgedb.com/) +- [Rolling Stone: The New Classics](https://www.rollingstone.com/the-new-classics) +- [Jacob Bolda - Personal Website](https://www.jacobbolda.com/) +- [Apideck](https://apideck.com) +- [GDPR Checklist](https://gdprchecklist.io) ([source](https://github.com/privacyradius/gdpr-checklist)) +- [GDPR Tracker](https://gdprtracker.io) +- [GDPR Form](https://gdprform.io) +- [Josh Palacios - Personal Website](https://joshpalacios.com) ([source](https://github.com/jshwa/joshpalacios-site)) +- [Cup of Data](https://cupofdata.com) ([source](https://github.com/cupofdata/cupofdata.com)) +- [Natalia Acevedo - Personal Website](https://nataliaacevedo.com) ([source](https://github.com/yeion7/nataliaacevedo.com)) +- [Airbnb Cereal](https://airbnb.design/cereal/) +- [mottox2 blog](https://mottox2.com) +- [Tiger Facility Services](https://www.tigerfacilityservices.com/) +- [Jersey Watch](https://www.jerseywatch.com/) ## Docs **[View the docs on gatsbyjs.org](https://www.gatsbyjs.org/docs/)** +[Migrating from v1 to v2?](https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/) + [Migrating from v0 to v1?](https://www.gatsbyjs.org/docs/migrating-from-v0-to-v1/) [v0 docs](https://github.com/gatsbyjs/gatsby/blob/v0.12.48/docs/index.md) diff --git a/cds-takeaways.md b/cds-takeaways.md new file mode 100644 index 0000000000000..e4f46abf5f5cb --- /dev/null +++ b/cds-takeaways.md @@ -0,0 +1,8 @@ +- preload at top of page for resources ala flipkart +- marketing points — cost of aquisition, boosts from switching + to PWA. +- sites to copy — NASA website + polymer shop but for Packard cars +- On GraphQL errors — print the query plus where it came from and give + them the link to debug it in GraphiQL +- AggressiveSplitPlugin — limit max chunk size to 250kb. +- SW render-dom-stream and stream HTML to browser. diff --git a/dangerfile.js b/dangerfile.js deleted file mode 100644 index 3fa34a6ed849e..0000000000000 --- a/dangerfile.js +++ /dev/null @@ -1,2 +0,0 @@ -// http://danger.systems/js/ -// Danger JS rules go here... diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.bkup b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.bkup deleted file mode 100644 index 3d12fe2a67f3b..0000000000000 --- a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.bkup +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: "Gatsby 1.0 update" -date: "2017-02-23" -author: "Kyle Mathews" ---- - -*hint — the solution isn't reverting to an idealized "simpler" way of -working on the web* - -*Move problem statement here — that working in JS world feels like riding runaway -train or surfing overly aggressive wave* - -Advanced technologies don't emerge into the world fully grown like -Athena leaping from Zeus' forehead. Instead like babies, they are born -quite helpless and weak and must be slowly nurtured through their -awkward younger years until they are finally productive technology -adults. - -Software technology adoption goes through multiple stages. - -1. R&D / Custom built -2. Productization -3. Commodization - -## R&D and custom built solutions - -The first stage is the time of *R&D and custom built solutions*. -Sophesticated technology groups with advanced needs start running into -problems that existing solutiosn don't solve so feel compelled to build -new technology or cobble together existing tools into novel packages. - -So the Googles, Facebooks, Amazon, Apples of the world are running -applications in containers distributed across dozens of data centers -*years or decades* before Docker and Kubernetes came on the scene. -Similiarly tools like Google Closure Compiler and GWT pioneered advanced -Javascript building and bundling techniquges while the rest of us were -still *manually adding script tags to HTML pages*. - -## Productization - -As time goes on, more and more organizations start to run into the same -problems as these early pioneers and the ideas they pioneered start to -leak out into open source projects. - -These new open source *software products* see rapid adoption from early adopters -and improve quickly. They generate widespread controversy as brash early -adopters loudly market the new tools generating pushback from groups -heavily invested in older tools. - -## Commodization - -As time goes on, more and more of the complexity and sharp edges of the -early-stage product are solved until at last the software product is the -"new normal" which begineers are taught and is taken for granted. - -This is a widely understood pattern and has repeated itself over and -over the past ~60 years since computers came on the scene. - -Microprocessors, operating systems, compilers, databases, the internet, -email all had long awakward adolesants periods where they were seen as -toys or niche tools before growing up to dominate their respective -ecosystems—to the point that we struggle to remember what it was like -before they existed. - -## Adopting new technologies - -Long-lived organizations learn to surf the successive waves of incoming -new technologies by picking points on the technology life cycle to adopt -new tools and techniques. Some need the most advanced technologies and -are vorocious adopters and inventors. Others lag years behind. - -Or as [Erik Meijer summarized -it](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.72.868&rep=rep1&type=pdf) - -`Change Function = F(Perceived Crisis/Perceived Pain of Adoption)` - -Organizations in rapidly growing industries have many competitors and -are in a constant state of competative crisis so despite high adoption -pain, quickly adopt new technologies. - -Normally this works out nicely for everyone. The pain of developing new -technologies is borne by those that with the greatest need and everyone -else (the vast majority) can wait until things settle down and mature so -adoption is fairly painless. - -## Javascript in crisis - -![Javascript engineering wipes out while attempting to ride the webpack -wave](wipeout.jpg)*Javascript Engineer -wipes out while attempting to ride the webpack wave (from -[vaguelyartistic](https://www.flickr.com/photos/vaguelyartistic/292083492/in/photolist-rP1fh-hKfnhu-dPaHGm-dPaJj7-4Qd1rD-7RpZ8K-bpKqSf-bjWsr-5hAmkk-sfv38A-6T5D58-5KmnwF-oajBZ-8ngHVq-dK6r66-8LbLTj-4SdMxB-bmS9Yg-34wrh2-4kA7U9-dhwznJ-cSaLoq-cdkxFu-4bKzqQ-4C5dd4-FNAdm-4pchw3-pxvVkk-9viJ6k-dh6q21-dh6qiH-afqWxP-r1ftrh-9sjyvY-bz2JCe-7rfMDY-5o29iE-9YHVCe-bCEn8t-agcSdt-5K7ENr-a8aUW-qdyYC-5o27jb-bmS9V4-5nWRWg-tGgt7-hT9qL-9YLQmQ-4ZupJg))* - -* everyone has to build for the web -* tools take a while to mature (the critical path for improving tools -used by 100s of thousands of engineers often goes through surprisingly -few people and they can only work so fast). -* enormous competative pressure — the internet pits everyone against -each other. Dropping one service for another is easy. Everyone has to level -up quickly or get left behind. -* Suggests new tools (React, Webpack, Redux, GraphQL, etc.) *are -actually dramatically better* as sophesticated companies under enormous -competative pressure are rapidly adopting new web tools. - -New tools get widely adopted within *months*(!!!). New Javascript -projects can get 1000s of stars on GitHub within days. Bewilidering -abundance of choices. - -## Riding the runaway Javascript train - -![Javascript engineering riding runaway train](runaway-train.jpg)*Terrified Javascript Engineer riding the runaway Javascript train* - -Highly unsettling for many engineers and organizations. Those most -comfortable being mid to late adopters are forced into becoming early -adopters. - -## Things don't get better until they're made better - -* stay away if you can. Tools are rapidly maturing and consolidating. -* If you can't (you probably can't) — accept building for the web is -much more complex than it used to be. -* Budget more for training and hiring more senior engineers to work on -your web products. -* Invest in open source. They're are many engineers who'd love to work -full-time on open source code. Identify critical tools for your -organization and invest in them. Very high leverage investment as you -gain access to some of the best engineers and the rest of your -engineering organization learns from working with them. - -## As one layer of technology matures, they become the building blocks for the next generation of tools. - -New breed of web tools that take for granted new web technologies. - -Gatsby excemplifies this. Gensis was I wanted easy way to build -really fast websites with all my favorite web tools. Wraps React, -webpack, markdown to make it really easy to build websites out of these -building blocks without any configuration. - -![Javascript engineering masters runaway train](mastered-runaway-train.jpg)*Our hero Javascript Engineers masters the Javascript train* - diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md index 014dc65b19cf3..c823c93d1a964 100644 --- a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md +++ b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md @@ -13,24 +13,24 @@ as you develop, ship, and maintain sites. This framework would have to be: -* **universal**, work for all types of sites from simple brocurewares to complex +- **universal**, work for all types of sites from simple brocurewares to complex web-apps. -* **simple**, not requiring any setup to start using and with thoughtful APIs to +- **simple**, not requiring any setup to start using and with thoughtful APIs to extend the framework. -* **fast**, doesn't lose customers to slow page loads. Takes advantage of +- **fast**, doesn't lose customers to slow page loads. Takes advantage of HTTP/2, browser caching, service workers, inlined critical css, and code splitting so your site always loads incredibly fast—no matter what you build. -* **JavaScript-driven**, the web is huge and intensely competitive. Sites that +- **JavaScript-driven**, the web is huge and intensely competitive. Sites that win are fast and richly interactive. Your framework must make it trivial to use advanced JavaScript. -* **team ready**, use industry standard collaboration tools like NPM, Git, and +- **team ready**, use industry standard collaboration tools like NPM, Git, and continuous deployment, so your team is always on the same page and shipping new features is easy. -* **modular**, allows for cleanly separated features so fixing bugs and adding +- **modular**, allows for cleanly separated features so fixing bugs and adding new features is easy and complexity is contained. -* **internet scale**, launch your site to millions without crashing your site +- **internet scale**, launch your site to millions without crashing your site (or your wallet). -* **secure**, doesn't put your your users' data at risk of hacking. +- **secure**, doesn't put your your users' data at risk of hacking. I believe that Gatsby fulfills these requirements. After several years of working on the project and seeing it used successfully by many people on a wide @@ -57,9 +57,9 @@ including blogs, marketing sites, documentation sites, and e-commerce. It wraps three of the most popular web app tools into a cohesive website framework: -* [React](https://facebook.github.io/react/) from Facebook for building UIs -* [Webpack](https://webpack.js.org/) for bundling JavaScript and CSS -* [GraphQL](http://graphql.org/) from Facebook for declarative data queries +- [React](https://facebook.github.io/react/) from Facebook for building UIs +- [Webpack](https://webpack.js.org/) for bundling JavaScript and CSS +- [GraphQL](http://graphql.org/) from Facebook for declarative data queries While designing Gatsby, I wanted a synthesis of two of my favorite developer experiences. The simplicity of building sites with markdown and static site @@ -165,8 +165,8 @@ navigate around, Gatsby loads the JavaScript needed for each route. This means that one page with heavy imports: ```javascript -import d3 from "d3"; -import threejs from "react-threejs"; +import d3 from "d3" +import threejs from "react-threejs" ``` ...won't affect the performance of the rest of the site. @@ -210,12 +210,12 @@ plugins for internal projects and as open source projects published on NPM. Plugins can: -* add support for webpack loaders such as Sass, Less -* add drop-in support for lightweight React-compatible frameworks +- add support for webpack loaders such as Sass, Less +- add drop-in support for lightweight React-compatible frameworks [Preact](https://preactjs.com/) and [Inferno](https://infernojs.org/) -* add a sitemap or RSS feed -* add [Google Analytics](/packages/gatsby-plugin-google-analytics/) -* ...and many more! +- add a sitemap or RSS feed +- add [Google Analytics](/packages/gatsby-plugin-google-analytics/) +- ...and many more! Plugins also drive the new GraphQL data processing layer. @@ -281,23 +281,25 @@ the blog posts. Included with the component is an exported `pageQuery`. ```javascript // A simple React component for rendering a blog page. -import React from "react"; +import React from "react" class BlogPostTemplate extends React.Component { render() { -
-

{this.props.data.markdown.frontmatter.title}

- {this.props.data.markdown.frontmatter.date} -
-
; + return ( +
+

{this.props.data.markdown.frontmatter.title}

+ {this.props.data.markdown.frontmatter.date} +
+
+ ) } } -export default BlogPostTemplate; +export default BlogPostTemplate export const pageQuery = ` query BlogPost($slug: String!) { @@ -311,7 +313,7 @@ export const pageQuery = ` } } } -`; +` ``` All data parsing and processing is plugin-driven. So in time, any imaginable diff --git a/docs/blog/2017-05-31-introduction-to-gatsby/index.md b/docs/blog/2017-05-31-introduction-to-gatsby/index.md index aa92b75892f8e..2027b87a65a3c 100644 --- a/docs/blog/2017-05-31-introduction-to-gatsby/index.md +++ b/docs/blog/2017-05-31-introduction-to-gatsby/index.md @@ -13,19 +13,23 @@ In case you haven’t heard about it, Gatsby is the latest hot thing in static s Having never used an SSG before (although I’ve read about them), and with very limited experience with React, what better way to dip my toe into the water than using Gatsby to publish my brand new blog [CSS {In Real Life}](https://css-irl.info/)? ### Getting started + It turns out that getting started with Gatsby is pretty easy. The Gatsby site features a fantastic, step-by-step tutorial that walks you through getting your first site up and running (even down to deploying), and contains a wealth of resources for when you’ve mastered the basics. You don’t need any prior experience with React, although working with Gatsby definitely made me want to learn React to take full advantage of its power. -One thing that prohibits me from publishing side projects is the thought of configuring a whole build setup with Gulp, webpack, etc. just for something small. This is where Gatsby really appeals to me. Gatsby provides an entire out-of-the-box build setup. Yep. Run `gatsby develop` and immediately you can bypass all that configuration and start building cool stuff in the browser (with live reloads). Run `gatsby build` and your production code is optimised (including progressive image loading and code splitting, among many other features) with *absolutely no effort on your part whatsoever*. You could feasibly get a small, performant site built and deployed in just minutes. You can also add a custom webpack config if you need to. +One thing that prohibits me from publishing side projects is the thought of configuring a whole build setup with Gulp, webpack, etc. just for something small. This is where Gatsby really appeals to me. Gatsby provides an entire out-of-the-box build setup. Yep. Run `gatsby develop` and immediately you can bypass all that configuration and start building cool stuff in the browser (with live reloads). Run `gatsby build` and your production code is optimised (including progressive image loading and code splitting, among many other features) with _absolutely no effort on your part whatsoever_. You could feasibly get a small, performant site built and deployed in just minutes. You can also add a custom webpack config if you need to. ### CSS + There are two options when it comes to writing CSS for your components: CSS-in-JS (using libraries such as Glamor and Styled Components) or [CSS Modules](https://github.com/css-modules/css-modules). As I feel far more comfortable writing “traditional” CSS, I opted for the latter. CSS Modules are really interesting, and not tied to Gatsby. Styles are scoped locally by default and unique class names are generated programmatically, meaning you don’t get the clashes with naming and specificity that you sometimes get in traditional CSS, and you can compose new selectors from others. I feel like I’ve only scratched the surface of CSS Modules, and am looking forward to experimenting further. -*(Side note: This doesn’t mean I have a problem with traditional CSS, or that I’m advocating CSS Modules in every scenario! Many of the so-called “problems” of CSS are actually down to misuse or misapplication. Nevertheless, CSS Modules and CSS-in-JS are good to know about, and can be useful tools to have in your arsenal.)* +_(Side note: This doesn’t mean I have a problem with traditional CSS, or that I’m advocating CSS Modules in every scenario! Many of the so-called “problems” of CSS are actually down to misuse or misapplication. Nevertheless, CSS Modules and CSS-in-JS are good to know about, and can be useful tools to have in your arsenal.)_ ### Plugins + There is a whole ecosystem of Gatsby plugins that you can pick and choose to tailor your project. I’m using `gatsby-plugin-sass` to enable me to write Sass instead of regular CSS, `gatsby-transformer-remark` for markdown files and `gatsby-plugin-typography` which sets you up with some nice typography combos with minimal configuration. Authoring your own plugins and contributing to the Gatsby community is encouraged, if that’s your bag. ### Data + You could of course hard code all your content, but it’s likely you’ll want some sort of dynamic content on your site. Gatsby’s data layer is powered by GraphQL, and the tutorial walks through how to build database queries with Gatsby’s GraphiQL tool. It’s very visual, showing you exactly what your database queries will return, which for someone like me (who finds anything database-related a little scary) is a blessing. @@ -33,7 +37,9 @@ Gatsby’s data layer is powered by GraphQL, and the tutorial walks through how I write my blog posts in markdown files, but you could configure Gatsby to work with Github Pages, or the CMS of your choice for a better editorial experience. ### Deployment + After you’ve run the build command, Gatsby allows near-instantaneous deployment through [Surge](https://surge.sh/), [Netlify](https://www.netlify.com/) and others. I set up my hosting with Netlify – run `gatsby deploy`, set up a Netlify account and you’re good to go. You can then configure Netlify to auto-deploy whenever you push to a repository. Netlify provides a simpler and more helpful experience than other hosting providers I’ve used, with helpful documentation, taking all the stress away from launching a site! ### In conclusion + I thoroughly recommend giving Gatsby a go if you’re on the fence about trying a static site generator and want to get a simple site up and running quickly and easily. The amount of thought that’s gone into every aspect of the onboarding process and the developer experience is absolutely fantastic. And, have just received a shed load of seed money to launch as a startup, it’s only going to get better. diff --git a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md index 21943947eb00f..88e0a8095f85d 100644 --- a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md +++ b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md @@ -74,11 +74,11 @@ growing, so oftentimes a plugin already exists that solves the particular problem you're trying to solve. To address the functionality we want for _this_ blog, we'll use the following plugins: -* [`gatsby-plugin-catch-links`][gatsby-plugin-catch-links] - * implements the history `pushState` API, and does not require a page reload +- [`gatsby-plugin-catch-links`][gatsby-plugin-catch-links] + - implements the history `pushState` API, and does not require a page reload on navigating to a different page in the blog -* [`gatsby-plugin-react-helmet`][gatsby-plugin-react-helmet] - * [react-helmet][react-helmet] is a tool that allows for modification of the +- [`gatsby-plugin-react-helmet`][gatsby-plugin-react-helmet] + - [react-helmet][react-helmet] is a tool that allows for modification of the `head` tags; Gatsby statically renders any of these `head` tag changes with the following command: @@ -165,8 +165,8 @@ over and convert to usable HTML. We'll only be using one transformer plugin (for Markdown), so let's get that installed. -* [gatsby-transformer-remark][gatsby-transformer-remark] - * Uses the [remark][remark] Markdown parser to transform .md files on disk +- [gatsby-transformer-remark][gatsby-transformer-remark] + - Uses the [remark][remark] Markdown parser to transform .md files on disk into HTML; additionally this transformer can optionally take plugins to further extend functionality--e.g. add syntax highlighting with `gatsby-remark-prismjs`, `gatsby-remark-copy-linked-files` to copy relative @@ -256,15 +256,15 @@ We'll want to create the file `src/templates/blog-post.js` (please create the `src/templates` folder if it does not yet exist!). ```javascript -import React from "react"; -import Helmet from "react-helmet"; +import React from "react" +import Helmet from "react-helmet" // import '../css/blog-post.css'; // make it pretty! export default function Template({ data, // this prop will be injected by the GraphQL query we'll write in a bit }) { - const { markdownRemark: post } = data; // data.markdownRemark holds our post data + const { markdownRemark: post } = data // data.markdownRemark holds our post data return (
@@ -276,7 +276,7 @@ export default function Template({ />
- ); + ) } ``` @@ -378,13 +378,13 @@ Gatsby, as detailed in its [Node API specification][node-spec]. However, we only care about one particular API in this instance, `createPages`. ```javascript -const path = require("path"); +const path = require("path") exports.createPages = ({ boundActionCreators, graphql }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators - const blogPostTemplate = path.resolve(`src/templates/blog-post.js`); -}; + const blogPostTemplate = path.resolve(`src/templates/blog-post.js`) +} ``` Nothing super complex yet! We're using the `createPages` API (which Gatsby will @@ -532,14 +532,14 @@ create `src/pages/tags.js`, the path `http://localhost:8000/tags/` will be available within the browser and the statically generated site. ```javascript -import React from "react"; -import Link from "gatsby-link"; -import Helmet from "react-helmet"; +import React from "react" +import { Link } from "gatsby" +import Helmet from "react-helmet" // import '../css/index.css'; // add some style if you want! export default function Index({ data }) { - const { edges: posts } = data.allMarkdownRemark; + const { edges: posts } = data.allMarkdownRemark return (
{posts @@ -553,10 +553,10 @@ export default function Index({ data }) {

{post.frontmatter.date}

{post.excerpt}

- ); + ) })}
- ); + ) } export const pageQuery = graphql` @@ -575,7 +575,7 @@ export const pageQuery = graphql` } } } -`; +` ``` OK! So we've followed a similar approach to our blog post template, so this @@ -587,7 +587,7 @@ string! GraphQL is awesome. The actual React component is fairly trivial, but one important note should be made. It's important that when linking to internal content, i.e. other blog -links, that you should always use `gatsby-link`. Gatsby does not work if pages +links, that you should always use `Link` from `gatsby`. Gatsby does not work if pages are not routed via this utility. Additionally, this utility also works with `pathPrefix`, which allows for a Gatsby site to be deployed a non-root domain. This is useful if this blog will be hosted on something like GitHub Pages, or @@ -607,10 +607,10 @@ following along with this tutorial! You can not only make it pretty and style with CSS (or [styled-components][styled-components]!), but you could improve it functionally by implementing some of the following: -* Add a tag listing and tag search page - * hint: the `createPages` API in `gatsby-node.js` file is useful here, as is +- Add a tag listing and tag search page + - hint: the `createPages` API in `gatsby-node.js` file is useful here, as is frontmatter -* adding navigation between a specific blog post and past/present blog posts +- adding navigation between a specific blog post and past/present blog posts (the `context` API of `createPages` is useful here), etc. With our new found knowledge of Gatsby and its API, you should feel empowered to @@ -625,14 +625,14 @@ Now go build something great. ## Links -* [`@dschau/gatsby-blog-starter-kit`][source-code] - * A working repo demonstrating all of the aforementioned functionality of +- [`@dschau/gatsby-blog-starter-kit`][source-code] + - A working repo demonstrating all of the aforementioned functionality of Gatsby -* [`@dschau/create-gatsby-blog-post`][create-gatsby-blog-post] - * A utility and CLI I created to scaffold out a blog post following the +- [`@dschau/create-gatsby-blog-post`][create-gatsby-blog-post] + - A utility and CLI I created to scaffold out a blog post following the predefined Gatsby structure with frontmatter, date, path, etc. -* [Source code for my blog][blog-source-code] - * The source code for my blog, which takes the gatsby-starter-blog-post +- [Source code for my blog][blog-source-code] + - The source code for my blog, which takes the gatsby-starter-blog-post (previous link), and expands upon it with a bunch of features and some more advanced functionality diff --git a/docs/blog/2017-09-13-why-is-gatsby-so-fast/index.md b/docs/blog/2017-09-13-why-is-gatsby-so-fast/index.md index 07a1ccdea26f0..5fdc5850bb628 100644 --- a/docs/blog/2017-09-13-why-is-gatsby-so-fast/index.md +++ b/docs/blog/2017-09-13-why-is-gatsby-so-fast/index.md @@ -142,17 +142,17 @@ high on the Annoying UX metric. #### Speed Index -* 8098 — CNN.com -* 5568 — downy.com -* 7649 — washingtonpost.com -* 2365 — gatsbyjs.org +- 8098 — CNN.com +- 5568 — downy.com +- 7649 — washingtonpost.com +- 2365 — gatsbyjs.org #### Time to Interactive -* 32.1s — CNN.com -* 14.2s — downy.com -* 31.4s — washingtonpost.com -* 4.4s — gatsbyjs.org +- 32.1s — CNN.com +- 14.2s — downy.com +- 31.4s — washingtonpost.com +- 4.4s — gatsbyjs.org ![reactnext-gatsby-performance.038](reactnext-gatsby-performance.038.png) diff --git a/docs/blog/2017-09-18-gatsby-modern-static-generation/index.md b/docs/blog/2017-09-18-gatsby-modern-static-generation/index.md index 3f3c905409b93..8a07ad5a491d3 100644 --- a/docs/blog/2017-09-18-gatsby-modern-static-generation/index.md +++ b/docs/blog/2017-09-18-gatsby-modern-static-generation/index.md @@ -21,19 +21,19 @@ production by creating a landing page very fast. Static site generators like Jekyll all work pretty similarly: -* Describe your content in some common templating language ([Pug](http://pugjs.org), +- Describe your content in some common templating language ([Pug](http://pugjs.org), [Handlebars](http://handlebarsjs.com), etc) -* While in development, start a local web server and add file "watchers" that +- While in development, start a local web server and add file "watchers" that will listen for content changes and re-render the site -* Finally, render the whole site in static HTML and deploy. The generator will +- Finally, render the whole site in static HTML and deploy. The generator will combine your files and produce a well formed HTML content. Let’s say you navigate to the good old site example.com: -* The browser requests the page at example.com -* The server responds with the HTML content -* The browser renders the page and loads the asset related to the script tag -* JS will instruct the browser to manipulate the DOM, for example, to show a +- The browser requests the page at example.com +- The server responds with the HTML content +- The browser renders the page and loads the asset related to the script tag +- JS will instruct the browser to manipulate the DOM, for example, to show a “welcome to this page” popup dialog. A caveat here is that you have to keep the client side logic separated from the @@ -73,28 +73,28 @@ If you use React with [server-side rendering](https://facebook.github.io/react/docs/react-dom-server.html), your flow looks something like this: -* A browser requests a page -* The server responds with static HTML -* The browser immediately renders the page so the user can see it -* The browser loads additional JS in the background -* The client takes some action, like navigating to a different route. -* The browser uses the additional JS to handle this action. +- A browser requests a page +- The server responds with static HTML +- The browser immediately renders the page so the user can see it +- The browser loads additional JS in the background +- The client takes some action, like navigating to a different route. +- The browser uses the additional JS to handle this action. On your end, the development flow looks: -* Describe your content in React.js Components -* During development, write code like a boss (hot reloading, modularized code, +- Describe your content in React.js Components +- During development, write code like a boss (hot reloading, modularized code, webpack plugins, etc...) -* Use React.js Server Side Rendering API to convert this code to static HTML +- Use React.js Server Side Rendering API to convert this code to static HTML content, and Javascript code, on your server It’s really that easy? Well, sort of. There is the need for a strong abstraction that will… -* track your links across your components -* parse content written in another format, like blog posts written in Markdown -* generate code that will not bloat the client and will efficiently serve the +- track your links across your components +- parse content written in another format, like blog posts written in Markdown +- generate code that will not bloat the client and will efficiently serve the content to the user. Thankfully, there are a few projects that took the initiative on this: @@ -149,8 +149,8 @@ You can try it yourself by cloning the [source code](https://github.com/kbariotis/kostasbariotis.com) and after installing dependencies, run: -* `npm run develop` to fire up the development server -* `npm run build` to build the site (check the `/public` folder after it’s done) +- `npm run develop` to fire up the development server +- `npm run build` to build the site (check the `/public` folder after it’s done) ## An alternative to HTML caching @@ -177,11 +177,11 @@ Wordpress's MySQL database. To conclude, Gatsby will allow us to: -* serve static content without maintaining complex stacks -* keep a clear separation between content and the presentation layer -* have cool features like client side routing and hot reload on development, out +- serve static content without maintaining complex stacks +- keep a clear separation between content and the presentation layer +- have cool features like client side routing and hot reload on development, out of the box -* reuse the same code that is being used to generate the backend content at our +- reuse the same code that is being used to generate the backend content at our visitors' browsers I hope you will experiment with Gatsby, and let me know what you think! diff --git a/docs/blog/2017-09-21-community-roundup-1/index.md b/docs/blog/2017-09-21-community-roundup-1/index.md index 65f1ee96f1a21..3270393cc0f7c 100644 --- a/docs/blog/2017-09-21-community-roundup-1/index.md +++ b/docs/blog/2017-09-21-community-roundup-1/index.md @@ -13,66 +13,66 @@ It's been a wild 77 days since Gatsby 1.0.0 was released into the world on July By the numbers we've seen: -* 3150 new GitHub stars -* ~380,000 new NPM downloads -* 110 new contributors (hey y'all!) -* ~400 merged PRs -* dozens of new plugins +- 3150 new GitHub stars +- ~380,000 new NPM downloads +- 110 new contributors (hey y'all!) +- ~400 merged PRs +- dozens of new plugins ## New Gatsby sites launched recently -* Sourcegraph, a startup that helps developers discover and understand code, +- Sourcegraph, a startup that helps developers discover and understand code, [relaunched their site on Gatsby](https://about.sourcegraph.com/) -* The customer data platform startup mParticle +- The customer data platform startup mParticle [launched their docs site on Gatsby](https://docs.mparticle.com/) -* The hip new Ocaml-based programming language ReasonML +- The hip new Ocaml-based programming language ReasonML [built their new website on Gatsby](https://reasonml.github.io/) -* Freelancer web developer [Oliver Benns'](https://twitter.com/oliverbenns/) +- Freelancer web developer [Oliver Benns'](https://twitter.com/oliverbenns/) [portfolio site](https://oliverbenns.com/) -* [Daniel Stefanovic](https://twitter.com/danistefanovic) launched his online +- [Daniel Stefanovic](https://twitter.com/danistefanovic) launched his online book http://digitalpsychology.io/ ## New tutorials! -* The official tutorial has been growing slowly. The first four parts are +- The official tutorial has been growing slowly. The first four parts are finished covering the basics of starting new projects, exploring styling options, how to use Gatsby plugins, and the basics of Gatsby's GraphQL data layer. [Check them out!](/tutorial/) -* Level Up Tutorials is working on a new Gatsby video tutorial series! It's +- Level Up Tutorials is working on a new Gatsby video tutorial series! It's fantastic! [Check out the first 7 tutorials on YouTube!](https://www.youtube.com/watch?v=b2H7fWhQcdE&list=PLLnpHn493BHHfoINKLELxDch3uJlSapxg). Scott Tolinski also recorded two other videos on Gatsby, his ["first look" at Gatsby](https://www.youtube.com/watch?v=CSemYFzHAtU) shortly after its 1.0 release as well as a [recording of him moving his personal site to Gatsby](https://www.youtube.com/watch?v=xqaThBnesfY). -* [Giraffe Academy launched a new Gatsby tutorial series](https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpMXuwazIt4mWtTuqOHdjRlk)! +- [Giraffe Academy launched a new Gatsby tutorial series](https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpMXuwazIt4mWtTuqOHdjRlk)! 13 tutorials so far covering everything from setting up Gatsby on your computer to building with React components to working with different types of data. ## Notable plugins launched -* The WordPress plugin recently got a big revamp and hit 2.0.0! Checkout the +- The WordPress plugin recently got a big revamp and hit 2.0.0! Checkout the [new example site](https://using-wordpress.gatsbyjs.org/) and the [README](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress) -* Several new CSS plugins have been added, +- Several new CSS plugins have been added, [Less](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-less), [Emotion](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion), [Styled JSX](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-styled-jsx), [JSS](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-jss), and [Stylus](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-stylus)! -* [Tumblbug](https://www.tumblbug.com/), a startup in South Korea, built a +- [Tumblbug](https://www.tumblbug.com/), a startup in South Korea, built a [source plugin for Workable](https://github.com/tumblbug/gatsby-source-workable) so they could easily load job listings into their website. -* [Ryan Florence](https://twitter.com/ryanflorence) built a +- [Ryan Florence](https://twitter.com/ryanflorence) built a [source plugin for Firebase](https://github.com/ReactTraining/gatsby-source-firebase) so he could easily query data stored there while rebuilding his company website! -* [gatsby-remark-katex](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-katex) +- [gatsby-remark-katex](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-katex) lets you write math equations in your markdown and [see them beautifully rendered](https://using-remark.gatsbyjs.org/katex/). -* [gatsby-plugin-purify-css](https://github.com/rongierlach/gatsby-plugin-purify-css) +- [gatsby-plugin-purify-css](https://github.com/rongierlach/gatsby-plugin-purify-css) adds drop-in support for removing unused CSS during Gatsby builds! It uses [PurifyCSS](https://github.com/purifycss/purifycss) and can lead to huge reductions in CSS weight. diff --git a/docs/blog/2017-09-26-embracing-graphql/index.md b/docs/blog/2017-09-26-embracing-graphql/index.md index f594178004178..0833512d4f61e 100644 --- a/docs/blog/2017-09-26-embracing-graphql/index.md +++ b/docs/blog/2017-09-26-embracing-graphql/index.md @@ -12,10 +12,10 @@ site generator. I had a few criteria in mind. -* Fast (hopefully a given for a static site) -* Easy to use -* React-based -* Easy to update +- Fast (hopefully a given for a static site) +- Easy to use +- React-based +- Easy to update Gatsby at the time was still pre-1.0 but its workflow met my needs. I loved that I could drop my existing Markdown files into a `pages` directory and Gatsby diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md index 63127e8e30c7c..b97f646ee7b31 100644 --- a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md +++ b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md @@ -23,11 +23,11 @@ Gatsby-specific knowledge. Here's the gist of what I'm going to cover: -* Preparing an existing blog for migration -* Configuring Gatsby to handle markdown -* Querying your markdown files using GraphQL -* Adding custom data to the generated GraphQL schema -* Turning all your markdown files into static pages +- Preparing an existing blog for migration +- Configuring Gatsby to handle markdown +- Querying your markdown files using GraphQL +- Adding custom data to the generated GraphQL schema +- Turning all your markdown files into static pages Let's jump in. @@ -294,16 +294,16 @@ specify a `pageQuery` that will pass data into the default export of that page. ```jsx // src/pages/index.js -import React from "react"; +import React from "react" export default class BlogIndex extends React.Component { render() { // Handle graphql errors if (this.props.errors && this.props.errors.length) { this.props.errors.forEach(({ message }) => { - console.error(`BlogIndex render errr: ${message}`); - }); - return

Errors found: Check the console for details

; + console.error(`BlogIndex render errr: ${message}`) + }) + return

Errors found: Check the console for details

} return ( @@ -313,7 +313,7 @@ export default class BlogIndex extends React.Component { {node.frontmatter.title} ))}
- ); + ) } } @@ -329,17 +329,17 @@ export const pageQuery = graphql` } } } -`; +` ``` This is a simplified example, but there are a few things going on that might not be intuitive. -* In the render method we first check for errors, and return early if any are +- In the render method we first check for errors, and return early if any are found -* If no error are found we render a link for each item in the array: +- If no error are found we render a link for each item in the array: `this.props.data.allMarkdownRemark.edges` -* We export a `pageQuery` variable that is constructed using the magic `graphql` +- We export a `pageQuery` variable that is constructed using the magic `graphql` global The error handling is pretty straightforward, if a bit verbose, as long as you @@ -353,7 +353,7 @@ Now let's looks specifically at where we render a link for each blog post: { this.props.data.allMarkdownRemark.edges.map(({ node }, i) => ( {node.frontmatter.title} - )); + )) } ``` @@ -377,7 +377,7 @@ export const pageQuery = graphql` } } } -`; +` ``` This is how you get data from Gatsby into your react components. Make sure you @@ -393,12 +393,12 @@ but the project is still young so the API could change at some point ¯\\_( ツ > But the links don't link anywhere... where's that `href`? -Let's remedy that. Import the `gatsby-link` component and swap it for the simple +Let's remedy that. Import the `Link` component and swap it for the simple `` tag that was in there before: ```jsx import React from 'react'; -import Link from 'gatsby-link'; +import { Link } from 'gatsby'; export default class BlogIndex extends React.Component { render() { @@ -442,7 +442,7 @@ export const pageQuery = graphql` } } } -`; +` ``` ```jsx @@ -451,7 +451,7 @@ export const pageQuery = graphql` {node.frontmatter.title} - )); + )) } ``` @@ -496,15 +496,15 @@ we add custom fields. Example: ```js // gatsby-node.js -const { GraphQLString } = require("graphql"); +const { GraphQLString } = require("gatsby/graphql") const getURL = node => { /* See the source link below for implementation */ -}; +} exports.setFieldsOnGraphQLNodeType = ({ type }) => { if (type.name !== "MarkdownRemark") { - return {}; + return {} } return Promise.resolve({ @@ -512,8 +512,8 @@ exports.setFieldsOnGraphQLNodeType = ({ type }) => { type: GraphQLString, resolve: node => getURL(node), }, - }); -}; + }) +} ``` > Source code for @@ -565,26 +565,26 @@ case, `createPages`. In the same `gatsby-node.js` file as before: // .. other stuff from before... exports.createPages = ({ boundActionCreators }) => { - const { createPage } = boundActionCreators; - const postTemplate = path.resolve("./src/templates/custom-page.js"); + const { createPage } = boundActionCreators + const postTemplate = path.resolve("./src/templates/custom-page.js") // Create a custom page! createPage({ path: `/my-custom-page/`, component: postTemplate, context: {}, // Context will be passed in to the page query as graphql variables - }); -}; + }) +} ``` At the most basic level this method of page creation is quite simple: Grab the `createPage` function from the API and call it with some props. -* `path` is required. This is the path that your page will have as a generated +- `path` is required. This is the path that your page will have as a generated HTML file. It's the URL of your final page. -* `component` is also required. It's the file containing the react component +- `component` is also required. It's the file containing the react component that will be used to render this particular page. -* `context` is optional but I've included it here because it will be important +- `context` is optional but I've included it here because it will be important soon. This lets you pass data down to the react component specified in the `component` option as well as the `pageQuery` (if any). @@ -601,8 +601,8 @@ markdownFiles.forEach(post => { context: { id: post.id, }, - }); -}); + }) +}) ``` I've included the pseudo code to highlight the fact that nothing too magical is @@ -619,8 +619,8 @@ work. // NOTE: I'm using async/await to simplify the code since it's now natively supported // in Node 8.x. This means that our function will return a promise exports.createPages = async ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators; - const postTemplate = path.resolve("./src/templates/post.js"); + const { createPage } = boundActionCreators + const postTemplate = path.resolve("./src/templates/post.js") // Using async await. Query will likely be very similar to your pageQuery in index.js const result = await graphql(` @@ -634,11 +634,11 @@ exports.createPages = async ({ graphql, boundActionCreators }) => { } } } - `); + `) if (result.errors) { - console.log(result.errors); - throw new Error("Things broke, see console output above"); + console.log(result.errors) + throw new Error("Things broke, see console output above") } // Create blog posts pages. @@ -650,9 +650,9 @@ exports.createPages = async ({ graphql, boundActionCreators }) => { // Context will be passed in to the page query as graphql vars id: node.id, }, - }); - }); -}; + }) + }) +} ``` Notice that the query is very similar to the `pageQuery` in index.js but it's @@ -664,19 +664,19 @@ post template to use the ID to query one single blog post. If you've made it to this point rendering individual posts is quite straightforward. You need to: -* Create the `postTemplate` file referenced in `createPages` above -* Export your template component as the default export -* Add a `pageQuery` that will fetch the blog post to render +- Create the `postTemplate` file referenced in `createPages` above +- Export your template component as the default export +- Add a `pageQuery` that will fetch the blog post to render Here it is in all it's glory: ```jsx // src/templates/post.js -import React from "react"; +import React from "react" export default class BlogPost extends React.Component { render() { - const post = this.props.data.markdownRemark; + const post = this.props.data.markdownRemark return (
@@ -686,7 +686,7 @@ export default class BlogPost extends React.Component { className="content" />
- ); + ) } } @@ -700,7 +700,7 @@ export const pageQuery = graphql` html } } -`; +` ``` If you're not used to GraphQL syntax the `pageQuery` might be a little @@ -722,9 +722,9 @@ there's no limit to what you can implement. Here are some ideas: -* Add previous and next buttons to each post -* Create a remark plugin to add custom block types -* Aggregate tags from your frontmatter and generate pages for all posts of a +- Add previous and next buttons to each post +- Create a remark plugin to add custom block types +- Aggregate tags from your frontmatter and generate pages for all posts of a specific tag Some of these—such as pagination—are implemented on my blog. You can find the @@ -736,9 +736,9 @@ source code here: In my opinion Gatsby provides a few killer features: -* Extensible through a powerful plugin API. -* Supports arbitrary data sources that can be easily queried using GraphQL. -* Splits your code automatically so you don't have to worry about bundle size +- Extensible through a powerful plugin API. +- Supports arbitrary data sources that can be easily queried using GraphQL. +- Splits your code automatically so you don't have to worry about bundle size increasing as a function of the number of pages you render. It's not a perfect project (looking at you global `graphql` object) and it's diff --git a/docs/blog/2017-10-03-smartive-goes-gatsby/index.md b/docs/blog/2017-10-03-smartive-goes-gatsby/index.md index 16e056c5acea0..ad3370fd70b00 100644 --- a/docs/blog/2017-10-03-smartive-goes-gatsby/index.md +++ b/docs/blog/2017-10-03-smartive-goes-gatsby/index.md @@ -31,11 +31,11 @@ identity came in quite handy as well. After running Wintersmith for almost a year we encountered its limits. Some of the major drawbacks at that time were: -* No code splitting, resulting in the client having to load a bunch of +- No code splitting, resulting in the client having to load a bunch of unnecessary JavaScript and CSS files -* Pulling in external resources, such as blog posts, was quite unhandy and +- Pulling in external resources, such as blog posts, was quite unhandy and sometimes even impossible -* Build process optimization was almost impossible and in our case resulted in a +- Build process optimization was almost impossible and in our case resulted in a Webpack setup on top of Wintersmith which was not really maintainable ## React to the Rescue! diff --git a/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md b/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md index 2426a94238ce2..b5756b28e1635 100644 --- a/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md +++ b/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md @@ -82,7 +82,7 @@ export const projectsPageQuery = graphql` } } } -`; +` ``` Pulling blog posts was even easier! If you’d like to sort them by date, ID, @@ -104,7 +104,7 @@ export const postQuery = graphql` } } } -`; +` ``` ## Wrap up and future @@ -114,11 +114,11 @@ wanted. I'd highly recommend [Gatsby](/tutorial/) for anyone who has started getting acquainted with React. Before I started this project I didn't know a lot about: -* Static site generation/JAMstack -* Creating a Progressive Web App (PWA) and what qualifies as one -* React Router -* GraphQL -* WordPress REST API +- Static site generation/JAMstack +- Creating a Progressive Web App (PWA) and what qualifies as one +- React Router +- GraphQL +- WordPress REST API Moving forward with Gatsby, I'd like to extend my site to include pagination within the blog, use [Styled Components](https://www.styled-components.com/) and diff --git a/docs/blog/2017-10-16-making-website-building-fun/index.md b/docs/blog/2017-10-16-making-website-building-fun/index.md index d1a1ec45ead66..dd54a462b7744 100644 --- a/docs/blog/2017-10-16-making-website-building-fun/index.md +++ b/docs/blog/2017-10-16-making-website-building-fun/index.md @@ -21,14 +21,14 @@ simple I realized you almost don't need documentation. A React header component using it would look like this: ```jsx -import React from "react"; -import Headroom from "react-headroom"; +import React from "react" +import Headroom from "react-headroom" export default () => (

You can put anything you'd like inside the Headroom Component

 -); +) ``` Having coming from years of building things with Backbone.js and jQuery where @@ -50,11 +50,11 @@ Compare this with the minimum code necessary for the original headroom.js. ```js // grab the element -var myElement = document.querySelector("header"); +var myElement = document.querySelector("header") // construct an instance of Headroom, passing the element -var headroom = new Headroom(myElement); +var headroom = new Headroom(myElement) // initialise -headroom.init(); +headroom.init() ``` #### CSS @@ -203,15 +203,15 @@ Here's what a really simple Gatsby page component using gatsby-image would look like: ```jsx -import React from "react"; -import Img from "gatsby-image"; +import React from "react" +import Img from "gatsby-image" export default ({ data }) => (

Hello gatsby-image

- +
-); +) ``` So this is all very nice and it's far better to be able to use this from NPM vs. @@ -249,21 +249,21 @@ The code I showed above was missing the GraphQL query. A full image component would look like: ```jsx -import React from "react"; -import Img from "gatsby-image"; +import React from "react" +import Img from "gatsby-image" export default ({ data }) => (

Hello gatsby-image

- +
-); +) export const query = graphql` query GatsbyImageSampleQuery { file(relativePath: { eq: "images/an-image.jpeg" }) { childImageSharp { - resolutions(width: l25, height: 125) { + fixed(width: l25, height: 125) { src srcSet width @@ -272,7 +272,7 @@ export const query = graphql` } } } -`; +` ``` So instead of a long pipeline of tasks to setup optimized images for your site, diff --git a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md index 89c5e3693affb..597c1a76f3721 100644 --- a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md +++ b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md @@ -84,10 +84,10 @@ but copied here for convenience. You'll need to create an i18n component and import it somewhere (we did it in our index layout): ```jsx -import i18n from "i18next"; -import Backend from "i18next-xhr-backend"; -import LanguageDetector from "i18next-browser-languagedetector"; -import { reactI18nextModule } from "react-i18next"; +import i18n from "i18next" +import Backend from "i18next-xhr-backend" +import LanguageDetector from "i18next-browser-languagedetector" +import { reactI18nextModule } from "react-i18next" i18n .use(Backend) @@ -109,9 +109,9 @@ i18n react: { wait: true, }, - }); + }) -export default i18n; +export default i18n ``` ## Locales @@ -164,16 +164,16 @@ little hook to our `gatsby-node.js` file. It copies the locales folder post build and gets everything in the right place: ```javascript -const fs = require("fs-extra"); -const path = require("path"); +const fs = require("fs-extra") +const path = require("path") exports.onPostBuild = () => { - console.log("Copying locales"); + console.log("Copying locales") fs.copySync( path.join(__dirname, "/src/locales"), path.join(__dirname, "/public/locales") - ); -}; + ) +} ``` ## Using with a component @@ -185,23 +185,23 @@ React-i18next uses a HOC to wrap your component and provide some props to handle language switching. Here's our `PageHeader` component: ```jsx -import React, { Component } from "react"; -import { translate } from "react-i18next"; +import React, { Component } from "react" +import { translate } from "react-i18next" class PageHeader extends Component { render() { - const { t } = this.props; + const { t } = this.props return (

{t("heading")}

{t("description")}

- ); + ) } } -export default translate("PageHeader")(PageHeader); +export default translate("PageHeader")(PageHeader) ``` Pretty simple! The string provided to `translate` is the corresponding JSON file @@ -226,32 +226,32 @@ Finally, to make it easy for our users to switch language we need to create a little component. Here's an example from our site: ```jsx -import React, { Component } from "react"; -import classNames from "classnames"; -import { translate } from "react-i18next"; +import React, { Component } from "react" +import classNames from "classnames" +import { translate } from "react-i18next" class LanguageSwitcher extends Component { constructor(props) { - super(props); - const { i18n } = this.props; - this.state = { language: i18n.language }; + super(props) + const { i18n } = this.props + this.state = { language: i18n.language } - this.handleChangeLanguage = this.handleChangeLanguage.bind(this); + this.handleChangeLanguage = this.handleChangeLanguage.bind(this) } componentWillReceiveProps(nextProps) { - this.setState({ language: nextProps.i18n.language }); + this.setState({ language: nextProps.i18n.language }) } handleChangeLanguage(lng) { - const { i18n } = this.props; - i18n.changeLanguage(lng); + const { i18n } = this.props + i18n.changeLanguage(lng) } renderLanguageChoice({ code, label }) { const buttonClass = classNames("LanguageSwitcher__button", { "LanguageSwitcher__button--selected": this.state.language === code, - }); + }) return ( - ); + ) } render() { const languages = [ { code: "en", label: "English" }, { code: "cy", label: "Cymraeg" }, - ]; + ] return (
{languages.map(language => this.renderLanguageChoice(language))}
- ); + ) } } -export default translate("LanguageSwitcher")(LanguageSwitcher); +export default translate("LanguageSwitcher")(LanguageSwitcher) ``` This is a pretty simple component. We're setting the `language` state based on @@ -298,22 +298,22 @@ To let it render the content into html, you need to load i18n namespaces (using ```js // gatsby-ssr.js -import React from "react"; -import { Provider } from "react-redux"; -import { renderToString } from "react-dom/server"; -import i18n from "./src/i18n"; +import React from "react" +import { Provider } from "react-redux" +import { renderToString } from "react-dom/server" +import i18n from "./src/i18n" -import createStore from "./src/state/createStore"; +import createStore from "./src/state/createStore" exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { i18n.loadNamespaces(["common"], () => { - const store = createStore(); + const store = createStore() const ConnectedBody = () => ( {bodyComponent} - ); - replaceBodyHTMLString(renderToString()); - }); -}; + ) + replaceBodyHTMLString(renderToString()) + }) +} ``` ### Without redux @@ -323,17 +323,17 @@ exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { ```js // gatsby-ssr.js -import React from "react"; -import { renderToString } from "react-dom/server"; -import i18n from "./src/i18n"; +import React from "react" +import { renderToString } from "react-dom/server" +import i18n from "./src/i18n" -import createStore from "./src/state/createStore"; +import createStore from "./src/state/createStore" exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { i18n.loadNamespaces(["common"], () => { - replaceBodyHTMLString(bodyComponent); - }); -}; + replaceBodyHTMLString(bodyComponent) + }) +} ``` > `translate` hoc from react-i18next cause page / component not able to SSR. I make it works by import i18n & use i18n.t diff --git a/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md b/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md index 5d6ced8afb252..a5d9588e28669 100644 --- a/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md +++ b/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md @@ -53,17 +53,17 @@ makes groking easier. I have my layout, template and config modules at hand in the folder structure, without duplication. ```js -import React from "react"; +import React from "react" // Template for blog page export default ({ data }) => { - const post = data.markdownRemark; + const post = data.markdownRemark return (

{post.frontmatter.title}

- ); -}; + ) +} // The data query export const query = graphql` query BlogPostQuery($slug: String!) { @@ -75,7 +75,7 @@ export const query = graphql` } } } -`; +` ``` Whilst this might _look_ weird, it actually makes it much easier to understand @@ -112,7 +112,7 @@ export const query = graphql` } } } -`; +` ``` Aside from those pesky tick characters, which are sometimes hard to spot for a diff --git a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md index 7bdf87950c4c0..f5b857147056d 100644 --- a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md +++ b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md @@ -18,13 +18,13 @@ decided to take a different route—building it from scratch. I focused on the process, looking for ways to make site building more generic and reusable. -* Content migration -* Programatic page creation in Gatsby -* Manage styles with +- Content migration +- Programatic page creation in Gatsby +- Manage styles with [`Typography.js`](http://kyleamathews.github.io/typography.js/) -* Automatic pagination -* Tag pages -* Add an admin panel with [NetlifyCMS](https://www.netlifycms.org/) +- Automatic pagination +- Tag pages +- Add an admin panel with [NetlifyCMS](https://www.netlifycms.org/) This article will highlight lessons learned from the process, with the aim to provide high-level guidelines about patterns which can be applied in migrations @@ -99,7 +99,7 @@ This might sound way more complicated than what it is: ```jsx exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators graphql(` { allMarkdownRemark { @@ -115,10 +115,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } } `).then(result => { - const posts = result.data.allMarkdownRemark.edges; + const posts = result.data.allMarkdownRemark.edges // Create content programatically here - }); -}; + }) +} ``` As you see, getting the list of posts can be done in a single query. @@ -128,10 +128,10 @@ prefer to keep in a separate module. For example, creating posts works like following: ```jsx -const path = require(`path`); +const path = require(`path`) module.exports = (createPage, nodes) => { - const template = path.resolve(`src/templates/post.js`); + const template = path.resolve(`src/templates/post.js`) nodes.map(({ node }) => { if (node.frontmatter.slug) { @@ -141,10 +141,10 @@ module.exports = (createPage, nodes) => { context: { slug: node.frontmatter.slug, }, - }); + }) } - }); -}; + }) +} ``` I re-use the `slug` field of the frontmatter of my existing structure. I don't @@ -234,12 +234,12 @@ both tags and pagination scenarios. I kept them as separate action creators and I just called them in the main creator function like this: ```jsx -const createPostPages = require(`./gatsby-actions/createPostPages`); -const createPaginatedPostsPages = require(`./gatsby-actions/createPaginatedPostsPages`); -const createTagPages = require(`./gatsby-actions/createTagPages`); +const createPostPages = require(`./gatsby-actions/createPostPages`) +const createPaginatedPostsPages = require(`./gatsby-actions/createPaginatedPostsPages`) +const createTagPages = require(`./gatsby-actions/createTagPages`) exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators graphql(` { allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { @@ -255,41 +255,41 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } } `).then(result => { - const posts = result.data.allMarkdownRemark.edges; - createPostPages(createPage, posts); - createPaginatedPostsPages(createPage, posts); - createTagPages(createPage, posts); - }); -}; + const posts = result.data.allMarkdownRemark.edges + createPostPages(createPage, posts) + createPaginatedPostsPages(createPage, posts) + createTagPages(createPage, posts) + }) +} ``` Easy to read, understand and mantain. The pagination module is a bit longer than the one of the posts: ```jsx -const path = require(`path`); +const path = require(`path`) module.exports = (createPage, nodes) => { - const template = path.resolve(`src/templates/postList.js`); - const paginateSize = 10; + const template = path.resolve(`src/templates/postList.js`) + const paginateSize = 10 // Split posts into arrays of length equal to number posts on each page/paginateSize const groupedPages = nodes .map((node, index) => { return index % paginateSize === 0 ? nodes.slice(index, index + paginateSize) - : null; + : null }) - .filter(item => item); + .filter(item => item) // Create new indexed route for each array groupedPages.forEach((group, index, groups) => { - const pageIndex = index === 0 ? `` : index + 1; - const paginationRoute = `/blog/${pageIndex}`; + const pageIndex = index === 0 ? `` : index + 1 + const paginationRoute = `/blog/${pageIndex}` // Avoid showing `Previous` link on first page - passed to context - const first = index === 0 ? true : false; + const first = index === 0 ? true : false // Avoid showing `Next` link if this is the last page - passed to context - const last = index === groups.length - 1 ? true : false; + const last = index === groups.length - 1 ? true : false return createPage({ path: paginationRoute, @@ -300,9 +300,9 @@ module.exports = (createPage, nodes) => { last, index: index + 1, }, - }); - }); -}; + }) + }) +} ``` Then, pull context information in the React component: @@ -359,7 +359,7 @@ createPage({ context: { posts, }, -}); +}) ``` For the inner tag page: @@ -373,7 +373,7 @@ createPage({ post, tag: tagName, }, -}); +}) ``` ### Admin panel @@ -426,8 +426,8 @@ This is my admin page React component which is placed in `src/pages/admin` so that Gatsby delivers the HTML page at `/admin`. ```jsx -import React from "react"; -import Helmet from "react-helmet"; +import React from "react" +import Helmet from "react-helmet" const AdminPage = () => (
@@ -447,9 +447,9 @@ const AdminPage = () => ( />
-); +) -export default AdminPage; +export default AdminPage ``` In order for NetlifyCMS script to find the configuration file correctly, diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md index 219aa77fe1186..87a10420146b0 100644 --- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md +++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md @@ -45,7 +45,7 @@ matter block, so you don't have to change anything. You just need to install Then, in your `gatsby-config.js` file add: ```js -plugins: ["gatsby-transformer-remark"]; +plugins: ["gatsby-transformer-remark"] ``` ### Theme @@ -89,30 +89,30 @@ extension API to tweak the slug: ```js exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { - const { createNodeField } = boundActionCreators; + const { createNodeField } = boundActionCreators if (node.internal.type === `MarkdownRemark`) { - const { categories } = node.frontmatter; + const { categories } = node.frontmatter - const filename = createFilePath({ node, getNode, basePath: `pages` }); + const filename = createFilePath({ node, getNode, basePath: `pages` }) // get the date and title from the file name const [, date, title] = filename.match( /^\/([\d]{4}-[\d]{2}-[\d]{2})-{1}(.+)\/$/ - ); + ) // create a new slug concatenating everything const slug = `/${slugify( categories.concat([date]).join("-"), "/" - )}/${title}/`; + )}/${title}/` - createNodeField({ node, name: `slug`, value: slug }); + createNodeField({ node, name: `slug`, value: slug }) // save the date for later use - createNodeField({ node, name: `date`, value: date }); + createNodeField({ node, name: `date`, value: date }) } -}; +} ``` ### Deploy @@ -127,16 +127,16 @@ but I noticed that from time to time it’d go down, so I’m now testing Some key points: -* Node instead of Ruby -* Much faster development workflow e.g. hot reload out of the box -* I can query the data I need and transform it before using it. (I'm looking +- Node instead of Ruby +- Much faster development workflow e.g. hot reload out of the box +- I can query the data I need and transform it before using it. (I'm looking into the [`gatsby-plugin-feed`](/packages/gatsby-plugin-feed/) to recreate the Atom Feed) -* React and GraphQL for free with Gatsby -* Since I am confident with the Node ecosystem I'm able to contribute: First +- React and GraphQL for free with Gatsby +- Since I am confident with the Node ecosystem I'm able to contribute: First pull request to Gatsby: [https://github.com/gatsbyjs/gatsby/pull/2569](https://github.com/gatsbyjs/gatsby/pull/2569) -* Netlify vs GitLab Pages (hopefully 100% uptime) +- Netlify vs GitLab Pages (hopefully 100% uptime) ## Final thoughts diff --git a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md index 9a35498766b87..e966664b09cf6 100644 --- a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md +++ b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md @@ -18,10 +18,10 @@ minimal and modern ones like Ghost, Medium and Tumblr. However, in my experience, I found that pretty much all of these options typically force you to give up at least one of the following: -* Money: As in the money you spend per month keeping the blog up and running. -* Time: As in the time you spend maintaining, scaling and securing the blog +- Money: As in the money you spend per month keeping the blog up and running. +- Time: As in the time you spend maintaining, scaling and securing the blog infrastructure once it has been deployed (i.e. DevOps time). -* Control: As in the degree of control you have over the blog's appearance, +- Control: As in the degree of control you have over the blog's appearance, performance and architecture. This last point refers more than anything to online publishing platforms like diff --git a/docs/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/index.md b/docs/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/index.md index e8da32cd9a9f8..a586d1274f90f 100644 --- a/docs/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/index.md +++ b/docs/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/index.md @@ -21,11 +21,11 @@ software product. The site contains a lot of content with hundreds of articles. Here’s a list of my requirements for this site: -* Speed - both in development and site performance -* Ease of use - both in developer experience and content upkeep -* Searchable content - it is a doc site after all -* Inexpensive Hosting - maximize value (who doesn’t want this?) -* Automated continuous deployment +- Speed - both in development and site performance +- Ease of use - both in developer experience and content upkeep +- Searchable content - it is a doc site after all +- Inexpensive Hosting - maximize value (who doesn’t want this?) +- Automated continuous deployment The following is a report on my high-level experience of using Gatsby with Contentful, Netlify and Algolia and the problems they solve — without getting @@ -89,9 +89,9 @@ Contentful is a hosted headless CMS with a fantastic user experience. It’s similar to having a backend like Wordpress, but you are fully responsible for the front-end layer. The beauty of Contentful is threefold. -* Intuitive and attractive UI -* Simple content modeling -* [Free tier](https://www.contentful.com/pricing/) +- Intuitive and attractive UI +- Simple content modeling +- [Free tier](https://www.contentful.com/pricing/) Dealing with the back-end of Contentful is refreshing and the content modeling really leads the pack when compared to other headless content management @@ -262,14 +262,14 @@ Netlify recently changed [their pricing](https://www.netlify.com/pricing/) to improve what was already an awesome hosting per dollar value. I can’t get through this section without a bullet list of why Netlify is so fantastic. -* Free to use for personal/commercial project (seriously great free tier) -* Push button HTTPS via Let’s Encrypt built in -* Fast Global CDN -* Support for custom domains -* Atomic deploys -* A crazy-cool, integrated build engine -* [And a lot more....](https://www.netlify.com/features/) -* Did I mention you get all this for FREE? +- Free to use for personal/commercial project (seriously great free tier) +- Push button HTTPS via Let’s Encrypt built in +- Fast Global CDN +- Support for custom domains +- Atomic deploys +- A crazy-cool, integrated build engine +- [And a lot more....](https://www.netlify.com/features/) +- Did I mention you get all this for FREE?

via GIPHY

diff --git a/docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md b/docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md index 55c5a01817ca1..73a83df2caaca 100644 --- a/docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md +++ b/docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md @@ -64,7 +64,7 @@ export const query = graphql` date(formatString: "DD MMMM, YYYY") cover { childImageSharp { - resolutions(width: 1200) { + fixed(width: 1200) { src } } @@ -72,7 +72,7 @@ export const query = graphql` } } } -`; +` ``` ### Deployment and content management can be so good! diff --git a/docs/blog/2017-12-20-introducing-the-gatsby-ux-research-program/index.md b/docs/blog/2017-12-20-introducing-the-gatsby-ux-research-program/index.md index 37a5558b9d676..8dd342f1bd6e9 100644 --- a/docs/blog/2017-12-20-introducing-the-gatsby-ux-research-program/index.md +++ b/docs/blog/2017-12-20-introducing-the-gatsby-ux-research-program/index.md @@ -23,24 +23,24 @@ To gather more feedback, we also added a question at the bottom of each doc and In interviews, I ask open-ended questions that are intended to gather candid feedback: -* What is your name and where do you live? -* How did you hear about Gatsby and why did you get interested in it? -* What is your role / job? -* Tell me about what you're building with Gatsby, and what's the building process like? Or, if you haven’t finished building it yet, what do you hope to build and where are you at in the process, and what has it been like so far? +- What is your name and where do you live? +- How did you hear about Gatsby and why did you get interested in it? +- What is your role / job? +- Tell me about what you're building with Gatsby, and what's the building process like? Or, if you haven’t finished building it yet, what do you hope to build and where are you at in the process, and what has it been like so far? Often I ask more pointed questions like the following: -* What do you like about Gatsby so far? -* What obstacles have you run into when building your site with Gatsby? Were you able to overcome them? If so, how? -* What things (if any) helped make the process easier? -* What do you think could be improved in the tutorials or the whole experience of building with Gatsby? +- What do you like about Gatsby so far? +- What obstacles have you run into when building your site with Gatsby? Were you able to overcome them? If so, how? +- What things (if any) helped make the process easier? +- What do you think could be improved in the tutorials or the whole experience of building with Gatsby? After several interviews, I added these questions to reflect recurring comments from interviewees: -* What else do you think you might build with Gatsby in the future? -* What could we do to make those future projects easier for you? -* Did you use any plugins? Starters? If so, how did you find them? -* Have you built any plugins or starters? If so, what was that process like? +- What else do you think you might build with Gatsby in the future? +- What could we do to make those future projects easier for you? +- Did you use any plugins? Starters? If so, how did you find them? +- Have you built any plugins or starters? If so, what was that process like? ## What we found out @@ -94,17 +94,17 @@ Everyone is using plugins and many awesome users are building them. Building a p Some specific problems with searching for plugins that interviewees described to me: -* Your site breaks because you installed a plugin that wasn’t compatible with the current version of Gatsby. -* You are working after hours trying to build a plugin to help some CMS play nicely with Gatsby and you’re having trouble finding a good plugin to imitate. -* Your fingers are super tired from scrolling up and down the plugin list and you don’t have enough Advil to support this activity and now you’re stuck on the couch with a cramped hand. (_Ok, no one actually said this, but they were thinking it, I’m sure_). +- Your site breaks because you installed a plugin that wasn’t compatible with the current version of Gatsby. +- You are working after hours trying to build a plugin to help some CMS play nicely with Gatsby and you’re having trouble finding a good plugin to imitate. +- Your fingers are super tired from scrolling up and down the plugin list and you don’t have enough Advil to support this activity and now you’re stuck on the couch with a cramped hand. (_Ok, no one actually said this, but they were thinking it, I’m sure_). ## Until next time We’re working on the final prototypes for the plugin search tool and welcome contributions from the community. Here are ways you can contribute: -* Follow the plugin search tool’s progress and contribute to it on the [Github issue](https://github.com/gatsbyjs/gatsby/issues/3003). -* [Contact me here](https://twitter.com/shannonb_ux/status/938551014956732418) if you have feedback that differs from or provides deeper insight into any of the pain points this article mentions -* Follow us on [Twitter](https://twitter.com/gatsbyjs) -* Contribute to issues in the [Github repo](https://github.com/gatsbyjs/gatsby/issues) +- Follow the plugin search tool’s progress and contribute to it on the [Github issue](https://github.com/gatsbyjs/gatsby/issues/3003). +- [Contact me here](https://twitter.com/shannonb_ux/status/938551014956732418) if you have feedback that differs from or provides deeper insight into any of the pain points this article mentions +- Follow us on [Twitter](https://twitter.com/gatsbyjs) +- Contribute to issues in the [Github repo](https://github.com/gatsbyjs/gatsby/issues) Again, many thanks to all the community members who have contributed to this research and to making Gatsby awesome. Stay tuned for updates on the plugin search tool and future Gatsby UX research projects! diff --git a/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md b/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md index 3787b0ad28c3f..0e5f147481179 100644 --- a/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md +++ b/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md @@ -29,14 +29,14 @@ module.exports = { title: "Gatsby Default Starter", }, plugins: ["gatsby-plugin-react-helmet"], -}; +} ``` See the [docs page on gatsby-config.js](/docs/gatsby-config/) for more. For the curious: -* `gatsby-plugin-react-helmet` is a plugin the starter includes. It's a [document head manager for React](/packages/gatsby-plugin-react-helmet/). +- `gatsby-plugin-react-helmet` is a plugin the starter includes. It's a [document head manager for React](/packages/gatsby-plugin-react-helmet/). ##gatsby-node.js @@ -95,7 +95,7 @@ I used the `gatsby-node.js` file from the plugin demo to get started. For my pur For example, below is the part of the demo `gatsby-node.js` file that iterates over all the WordPress post data. ```javascript -const postTemplate = path.resolve(`./src/templates/post.js`); +const postTemplate = path.resolve(`./src/templates/post.js`) _.each(result.data.allWordpressPost.edges, edge => { createPage({ @@ -108,8 +108,8 @@ _.each(result.data.allWordpressPost.edges, edge => { context: { id: edge.node.id, }, - }); -}); + }) +}) ``` The [docs define a Gatsby page](/docs/api-specification/#concepts) as "a site page with a pathname, a template component, and optional graphql query and layout component." See the docs on the [createPage bound action creator](/docs/bound-action-creators/#createPage) and [guide on creating and modifying pages for more detail](/docs/creating-and-modifying-pages/). diff --git a/docs/blog/2018-02-28-documentation-project/index.md b/docs/blog/2018-02-28-documentation-project/index.md index 8adaa59017462..6c8df934bf8d5 100644 --- a/docs/blog/2018-02-28-documentation-project/index.md +++ b/docs/blog/2018-02-28-documentation-project/index.md @@ -43,11 +43,11 @@ Many people have contributed to the docs and tutorials already and have done an Here is a brief overview of issues that have come up again and again as I've interviewed people and observed them going through the tutorials and docs (see [Issue #4175](https://github.com/gatsbyjs/gatsby/issues/4175) on Github to follow this and contribute): -* Gatsby is beginner-friendly; however, _true_ beginners to programming need an intro to basic tools like the command line, code editors, and browser consoles. -* Upon first visit to Gatsbyjs.org, most visitors click “Get Started.” This is the perfect solution for them if they prefer to jump into coding without reading much. If they prefer step-by-step instructions, it takes some looking around before they see the tutorial tab across the top. -* Installing new starters for every part of tutorial feels like a distraction to some beginners. +- Gatsby is beginner-friendly; however, _true_ beginners to programming need an intro to basic tools like the command line, code editors, and browser consoles. +- Upon first visit to Gatsbyjs.org, most visitors click “Get Started.” This is the perfect solution for them if they prefer to jump into coding without reading much. If they prefer step-by-step instructions, it takes some looking around before they see the tutorial tab across the top. +- Installing new starters for every part of tutorial feels like a distraction to some beginners. "Part 1" is not a descriptive title for a tutorial if someone wants to preview or remember what was covered. -* Almost everyone is new to GraphQL and gets overwhelmed when we introduce it in Part 4. +- Almost everyone is new to GraphQL and gets overwhelmed when we introduce it in Part 4. ## Documentation project beginnings @@ -61,6 +61,6 @@ We know how easy the Gatsby development experience is for the majority of progra If you'd like to contribute, look through this list of options and pick one that you'd like to help with! -* Go to [Issue #4175](https://github.com/gatsbyjs/gatsby/issues/4175) to help enhance the tutorials. -* If you’d like to contribute to and/or follow other documentation projects, go here to find the [Documentation Project](https://github.com/gatsbyjs/gatsby/projects/3). -* And, as always, if you have time to give us feedback on what you like about Gatsby and what can be improved in the docs/tutorials, schedule a time to chat with me here! [https://calendly.com/shannon-soper](https://calendly.com/shannon-soper) +- Go to [Issue #4175](https://github.com/gatsbyjs/gatsby/issues/4175) to help enhance the tutorials. +- If you’d like to contribute to and/or follow other documentation projects, go here to find the [Documentation Project](https://github.com/gatsbyjs/gatsby/projects/3). +- And, as always, if you have time to give us feedback on what you like about Gatsby and what can be improved in the docs/tutorials, schedule a time to chat with me here! [https://calendly.com/shannon-soper](https://calendly.com/shannon-soper) diff --git a/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md b/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md index 911888048b3e2..cac7225cdfd8c 100644 --- a/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md +++ b/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md @@ -32,35 +32,35 @@ With the empathy map and the interviews as our guide, we learned that most peopl Next, we analyzed over 10 admirable and/or popular plugin libraries to draw from their strengths and learn from their weaknesses. Examples, in no particular order, include: -* [JS.coach](https://js.coach/) -* [VIM Awesome](https://vimawesome.com/) -* [Best of JS](https://bestof.js.org/) -* [Sketch extension library](https://sketchapp.com/extensions/) -* [Chrome plugin library](https://chrome.google.com/webstore/detail/plugins/mmcblfncjaclajmegihojiekebofjcen?hl=en) -* [Microsoft Visual Studio Code Extensions](https://marketplace.visualstudio.com/VSCode) -* [Wordpress Plugins](https://wordpress.org/plugins/) -* [Npms.io](https://npms.io/) -* [Yarnpkg.com](https://yarnpkg.com/en/packages) -* [Apple App store](https://www.apple.com/ios/app-store/) -* [Google Play store](https://play.google.com/store/apps/top) +- [JS.coach](https://js.coach/) +- [VIM Awesome](https://vimawesome.com/) +- [Best of JS](https://bestof.js.org/) +- [Sketch extension library](https://sketchapp.com/extensions/) +- [Chrome plugin library](https://chrome.google.com/webstore/detail/plugins/mmcblfncjaclajmegihojiekebofjcen?hl=en) +- [Microsoft Visual Studio Code Extensions](https://marketplace.visualstudio.com/VSCode) +- [Wordpress Plugins](https://wordpress.org/plugins/) +- [Npms.io](https://npms.io/) +- [Yarnpkg.com](https://yarnpkg.com/en/packages) +- [Apple App store](https://www.apple.com/ios/app-store/) +- [Google Play store](https://play.google.com/store/apps/top) ### The goods 👍 We liked when these libraries let users: -* browse plugins without much clicking -* refine searches using categories and tags -* rank plugins based on metrics -* learn how to create their own plugin +- browse plugins without much clicking +- refine searches using categories and tags +- rank plugins based on metrics +- learn how to create their own plugin ### The bads 👎 We _didn't_ like these things in some of the above libraries: -* poor contrast and poor information heirarchy -* limited filters -* too many filters -* low information density +- poor contrast and poor information heirarchy +- limited filters +- too many filters +- low information density ## Prototypes and their evolutions @@ -77,11 +77,11 @@ The plugin ecosystem is a huge part of what makes Gatsby awesome because plugins Here are some ways you can help make the Gatsby plugin ecoystem great: -* Share feedback on the plugin library on [Github Issue #4394](https://github.com/gatsbyjs/gatsby/issues/4394). -* If you created a plugin and it's not showing up in the library, double check that the package has "gatsby-plugin" in its keywords. -* Create plugins (or publish ones you've already built)! If you're interested, the [Plugin Authoring](/docs/plugin-authoring/) page can help. -* [Contact me](https://twitter.com/shannonb_ux/status/938551014956732418) here if you have feedback that differs from or provides deeper insight into one of the pain points this article mentions. -* Follow us on [Twitter](https://twitter.com/gatsbyjs). +- Share feedback on the plugin library on [Github Issue #4394](https://github.com/gatsbyjs/gatsby/issues/4394). +- If you created a plugin and it's not showing up in the library, double check that the package has "gatsby-plugin" in its keywords. +- Create plugins (or publish ones you've already built)! If you're interested, the [Plugin Authoring](/docs/plugin-authoring/) page can help. +- [Contact me](https://twitter.com/shannonb_ux/status/938551014956732418) here if you have feedback that differs from or provides deeper insight into one of the pain points this article mentions. +- Follow us on [Twitter](https://twitter.com/gatsbyjs). ## Sneak peak into the next UX project diff --git a/docs/blog/2018-04-04-gatsby-contentful-starter-tutorial/index.md b/docs/blog/2018-04-04-gatsby-contentful-starter-tutorial/index.md index a8ff8d5758ac7..dfab371a6efbd 100644 --- a/docs/blog/2018-04-04-gatsby-contentful-starter-tutorial/index.md +++ b/docs/blog/2018-04-04-gatsby-contentful-starter-tutorial/index.md @@ -32,21 +32,21 @@ This guide assumes that you have [GatsbyJS installed](/docs/) and, optionally, a Start by using this with the Gatsby CLI: -~~~bash +```bash gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter -~~~ +``` Alternatively, you can also clone a sample repo from Github: -~~~bash +```bash git clone git@github.com:contentful-userland/gatsby-contentful-starter.git -~~~ +``` And go into the directory and install the required dependencies with: -~~~bash +```bash npm install -~~~ +``` ###Create a new space to store content @@ -56,8 +56,6 @@ Create a new empty space by opening the sidebar menu and adding a Space. Give th ![create a new space](new_space.png) - - ###Generate access tokens Before getting to the exciting part of setting up your website, you first need to generate three access tokens to get your Contentful-powered website up and running by fetching data from the API. @@ -84,20 +82,19 @@ Start setting things up with the npm run setup command, which first prompts you After that, it writes the credentials you provided into a file named .contentful.json into lines of code that look like so: - -~~~json -{ - "development":{ - "host":"preview.contentful.com", - "spaceId":"...", - "accessToken":"..." - }, - "production":{ - "spaceId":"...", - "accessToken":"..." - } +```json +{ + "development": { + "host": "preview.contentful.com", + "spaceId": "...", + "accessToken": "..." + }, + "production": { + "spaceId": "...", + "accessToken": "..." + } } -~~~ +``` Using the credentials in the .contentful.json file, [content can now be imported](https://www.contentful.com/developers/docs/tutorials/general/import-and-export/) into your space to being displayed on your website via our API. @@ -119,6 +116,6 @@ Contentful ensures your website and its users can access your content quickly an That’s a quick overview of how to get your website up and running from scratch using Contentful and GatsbyJS. -Contentful's platform offers speed, flexibility, and ease of integration with your code, supporting any stack you use with SDKs for common languages like [Javascript](https://www.contentful.com/developers/docs/javascript/sdks/), [Python](https://www.contentful.com/developers/docs/python/sdks/), and [PHP](https://www.contentful.com/developers/docs/php/sdks/). Unlike a CMS, Contentful provides you with separation between content and presentation, allowing you to focus on developing your website and leave content delivery to Contentful. +Contentful's platform offers speed, flexibility, and ease of integration with your code, supporting any stack you use with SDKs for common languages like [Javascript](https://www.contentful.com/developers/docs/javascript/sdks/), [Python](https://www.contentful.com/developers/docs/python/sdks/), and [PHP](https://www.contentful.com/developers/docs/php/sdks/). Unlike a CMS, Contentful provides you with separation between content and presentation, allowing you to focus on developing your website and leave content delivery to Contentful. -If you're curious to learn more about Contentful, you can check out the Contentful [Developer Center](https://www.contentful.com/developers/docs/) to learn more on how the technology works, or head over to the [Guides and tutorials](https://www.contentful.com/guides/) section. +If you're curious to learn more about Contentful, you can check out the Contentful [Developer Center](https://www.contentful.com/developers/docs/) to learn more on how the technology works, or head over to the [Guides and tutorials](https://www.contentful.com/guides/) section. diff --git a/docs/blog/2018-04-05-gatsby-video-tutorials/index.md b/docs/blog/2018-04-05-gatsby-video-tutorials/index.md index 3c2c10278a07f..9121bbf774a1c 100644 --- a/docs/blog/2018-04-05-gatsby-video-tutorials/index.md +++ b/docs/blog/2018-04-05-gatsby-video-tutorials/index.md @@ -12,11 +12,11 @@ _This blog post was originally posted on the [Contentful Blog](https://www.conte Contentful developer and Gatsby contributor Khaled Garbaya has released a [4-part video series](https://www.youtube.com/watch?v=Ek4o40w1tH4&list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A) to help you build a “blazing fast” website with Gatsby and Contentful. The series begins by transforming the Gatsby’s getting started example to a Contentful-powered site. From there, each video walks you through a new aspect of production, from automating deployment with CircleCI to integrating the Contentful webhooks feature. -*-“I wanted these videos to act as documentation,”* says Khaled. *-“There were a lot of people asking around about how to do this. And I think it’s important to show not only how to do this thing with Gatsby or how to do that with Contentful, but from start to finish how you can actually deploy, use webhooks, and so on. These are hidden gems that not everyone will look for.”* +_-“I wanted these videos to act as documentation,”_ says Khaled. _-“There were a lot of people asking around about how to do this. And I think it’s important to show not only how to do this thing with Gatsby or how to do that with Contentful, but from start to finish how you can actually deploy, use webhooks, and so on. These are hidden gems that not everyone will look for.”_ -Those hidden gems Khaled is talking about are part of what he believes makes Gatsby and Contentful a compelling combination. Additionally, there are structural aspects of both platforms that add to this: *-“Gatsby works with React and React is component-based. And you can also think of Contentful in this way, if you think of your content as components”* he explains. *-“So that’s made a really perfect match because you can have this component that renders a specific content type and then this can be shared across your website.”* +Those hidden gems Khaled is talking about are part of what he believes makes Gatsby and Contentful a compelling combination. Additionally, there are structural aspects of both platforms that add to this: _-“Gatsby works with React and React is component-based. And you can also think of Contentful in this way, if you think of your content as components”_ he explains. _-“So that’s made a really perfect match because you can have this component that renders a specific content type and then this can be shared across your website.”_ -Another unique distinction is the complementary ways Contentful and Gatsby process data. *-“Contentful has the sync endpoint, so this can actually improve the ability to process a lot,”* Khaled says. *-“Because the first time, you get all of the data. The next time, you only get the entries that changed so it takes less time to parse the JSON and so on. Also Gatsby is good because all of the data you have from Contentful would be in a GraphQL schema, so you can query your data that way.”* +Another unique distinction is the complementary ways Contentful and Gatsby process data. _-“Contentful has the sync endpoint, so this can actually improve the ability to process a lot,”_ Khaled says. _-“Because the first time, you get all of the data. The next time, you only get the entries that changed so it takes less time to parse the JSON and so on. Also Gatsby is good because all of the data you have from Contentful would be in a GraphQL schema, so you can query your data that way.”_ Ready to dive in? [All four parts of Khaled’s video series are now available on YouTube](https://www.youtube.com/watch?v=Ek4o40w1tH4&list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A). You can also [find the source code on GitHub](https://github.com/Khaledgarbaya/gatsby-contentful-site). diff --git a/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md b/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md index 0b9958d8bb1b8..37a8ea2df25a2 100644 --- a/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md +++ b/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md @@ -8,11 +8,11 @@ We're adopting an RFC ("request for comments") process for contributing ideas to Inspired by [React](https://github.com/reactjs/rfcs), [Yarn](https://github.com/yarnpkg/rfcs), [Ember](https://github.com/emberjs/rfcs), and [Rust](https://github.com/rust-lang/rfcs), the goal is to allow Gatsby core team members and community members to collaborate on the design of new features. It's also intended to provide a clear path for ideas to enter the project: -* Create an RFC document detailing your proposal. -* Submit a PR to the [RFC repository](https://github.com/gatsbyjs/rfcs). -* Incorporate feedback into the proposal. -* After discussion, the core team may or may not accept the RFC. -* If the RFC is accepted, the PR is merged. +- Create an RFC document detailing your proposal. +- Submit a PR to the [RFC repository](https://github.com/gatsbyjs/rfcs). +- Incorporate feedback into the proposal. +- After discussion, the core team may or may not accept the RFC. +- If the RFC is accepted, the PR is merged. RFCs are accepted when they are approved for implementation in Gatsby. A more thorough description of the process is available in the repository's [README](https://github.com/gatsbyjs/rfcs/blob/master/README.md). The exact details may be refined in the future. diff --git a/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md b/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md index ccd597ba4ba5e..54e80266e5e1b 100644 --- a/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md +++ b/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md @@ -12,9 +12,9 @@ You have a static site. Or you will have. You understand how the content will wo You have three choices. -* Keep comments in git. -* Use client side comment service. -* Do something crazy. +- Keep comments in git. +- Use client side comment service. +- Do something crazy. ## Client side diff --git a/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md b/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md index ebc4b12da03d7..d58c9f66b99f8 100644 --- a/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md +++ b/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md @@ -19,9 +19,9 @@ Our project was to build a new website for [Whittle School & Studios](https://ww We had a blast building the site, and learned a lot about Gatsby in the process. This post will take you through the different parts of our journey: -* [Choosing a stack](#choosing-a-stack) -* [Creating a Gatsby workflow](#creating-a-gatsby-workflow) -* [Contributing to Gatsby](#contributing-to-gatsby) +- [Choosing a stack](#choosing-a-stack) +- [Creating a Gatsby workflow](#creating-a-gatsby-workflow) +- [Contributing to Gatsby](#contributing-to-gatsby) ## Choosing a stack @@ -265,9 +265,9 @@ We developers often take pride in how far we’re able to get _without_ reading In particular, the documentation will show you how to use your local Gatsby clone and [gatsby-dev-cli](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-dev-cli) to: -* Watch for your local changes to Gatsby packages -* Recompile packages on-the-fly -* Copy these packages into your project’s `node_modules` folder to test as you go +- Watch for your local changes to Gatsby packages +- Recompile packages on-the-fly +- Copy these packages into your project’s `node_modules` folder to test as you go If you’ve ever used `yarn link` to modify a dependency locally, this provides a similar experience. @@ -287,9 +287,9 @@ Gatsby, however, uses a monorepo architecture, so pushing up a fork with a chang Our workaround was to create a new repo for the package in question and push the build directly to Github. Here’s how it would work if you were making an update to, say, `gatsby-source-contentful`: -* Go to your local fork of Gatsby, on the branch with your changes, and run `yarn watch` to compile a built version of your modified package. -* Copy that package to a new directory `cp -a packages/gatsby-source-contentful path-to-my-repo` -* Push the contents of this directory to Github and link it in your `package.json` as usual. +- Go to your local fork of Gatsby, on the branch with your changes, and run `yarn watch` to compile a built version of your modified package. +- Copy that package to a new directory `cp -a packages/gatsby-source-contentful path-to-my-repo` +- Push the contents of this directory to Github and link it in your `package.json` as usual. ## Following up diff --git a/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md b/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md index 9c503aaa80aea..5233742830bc2 100644 --- a/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md +++ b/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md @@ -53,12 +53,11 @@ _Use development pages to communicate project status & collaborate with designer One option some teams have found powerful is to create static page components within Gatsby to [handle necessary parts of the development/QA workflow](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#1-pre-integration-qa). This could include: -* Checking UI implementation of various components to ensure behavior is intended -* Enabling QA visibility into desired site-specific page-level validations, such as "don't end a page in a carousel" -* Communicating build history and last build status -_Use branch and pull request-based artifacts to collaborate on specific pieces of work_ +- Checking UI implementation of various components to ensure behavior is intended +- Enabling QA visibility into desired site-specific page-level validations, such as "don't end a page in a carousel" +- Communicating build history and last build status -Using the [branch and pull request-based artifacts](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#building-staging-urls -) automatically created by a service like Netlify for collaboration between developers, designers, and QA. Because generated artifacts are static, pull request collaboration workflows are resilient to underlying content schema changes, such as field deletion, that might break a typical CMS development environment. +_Use branch and pull request-based artifacts to collaborate on specific pieces of work_ +Using the [branch and pull request-based artifacts](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#building-staging-urls) automatically created by a service like Netlify for collaboration between developers, designers, and QA. Because generated artifacts are static, pull request collaboration workflows are resilient to underlying content schema changes, such as field deletion, that might break a typical CMS development environment. diff --git a/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md b/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md index f0407401f5987..25291695aab77 100644 --- a/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md +++ b/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md @@ -12,11 +12,10 @@ On March 29th, we launched [Eviction Free NYC](http://www.evictionfreenyc.org/) In order to build this new resource we applied a [human-centered design process](https://medium.com/@JustFixNYC/co-designing-eviction-free-nyc-b54570c69153) followed by specialized technical scoping in order to determine what was best for our users and build something for this unique context. **That process led us to using GatsbyJS, Contentful, and Netlify!** Below, we've written up how we mapped design to dev, approached different stakeholders, and utilized Gatsby's great flexibility & plugin library. - #### **Mapping Design Considerations to Technical Scoping** ![](design-mapping.jpeg) -*Journey mapping for a tenant organizing process!* +_Journey mapping for a tenant organizing process!_ We started this process with a pretty strong sense of our average user’s technical capacity and degree of comfort in using a website or app. For the past @@ -45,7 +44,7 @@ possible. We knew that we would build the site in [React](https://reactjs.org/). Developers can build websites quickly and reliably through its modular architecture and extensive system of third-party components. React’s simple -component-based philosophy creates code and structure that just *makes sense*, +component-based philosophy creates code and structure that just _makes sense_, allowing other developers to more easily contribute to the project as well. It’s also unobtrusive enough that it can be applied to both large and small web development projects. @@ -59,25 +58,25 @@ GatsbyJS, which is a **React-based static site generator**. GatsbyJS is the perfect fit for a number of reasons: 1. [Static sites](https://en.wikipedia.org/wiki/Static_web_page) load content much -more quickly than dynamic web applications, which require multiple -back-and-forth calls to a server in order to display the final composited view -to the user. They are more easily adaptable for low connectivity / offline -functionality for this reason. This allows us to provide a faster and more -reliable experience for tenants utilizing the service. + more quickly than dynamic web applications, which require multiple + back-and-forth calls to a server in order to display the final composited view + to the user. They are more easily adaptable for low connectivity / offline + functionality for this reason. This allows us to provide a faster and more + reliable experience for tenants utilizing the service. 1. GatsbyJS ships with an incredible amount of pre-handled optimization features, -from prefetching resources to progressive image loading to inlining code blocks -so they don’t need to be fetched via -[AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)). There was no way we -could have achieved this level of optimization on our own in this timeframe. + from prefetching resources to progressive image loading to inlining code blocks + so they don’t need to be fetched via + [AJAX](). There was no way we + could have achieved this level of optimization on our own in this timeframe. 1. A growing plugin library that allows for easy integrations that utilize Gatsby’s -GraphQL data query system. With these we could easily use things like -[gatsby-source-contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/?=conten) -and [gatsby-plugin-i18n](https://github.com/angeloocana/gatsby-plugin-i18n). + GraphQL data query system. With these we could easily use things like + [gatsby-source-contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/?=conten) + and [gatsby-plugin-i18n](https://github.com/angeloocana/gatsby-plugin-i18n). 1. A growing community of developers sharing resources and best practices. Credit -is due to [mccrodp](https://github.com/mccrodp) for setting up -[gatsby-starter-contentful-i18n](https://github.com/mccrodp/gatsby-starter-contentful-i18n), -a boilerplate that synced Contentful and i18n features together and allowed us -to hit the ground running. + is due to [mccrodp](https://github.com/mccrodp) for setting up + [gatsby-starter-contentful-i18n](https://github.com/mccrodp/gatsby-starter-contentful-i18n), + a boilerplate that synced Contentful and i18n features together and allowed us + to hit the ground running. #### **Using Contentful** @@ -91,17 +90,17 @@ how the website itself is constructed. In previous projects where we used Contentful, content was loaded dynamically (via AJAX) when a user visits the site. GatsbyJS instead pulls content from -Contentful *as the site compiles* (pre-deploy), not when the user visits it. +Contentful _as the site compiles_ (pre-deploy), not when the user visits it. This change creates significantly less server requests after page load and further speeds up the site’s final load time. -With Contentful, you define *Content Models* in tandem with coding individual +With Contentful, you define _Content Models_ in tandem with coding individual pages in order to construct the structure of the site and its content. For -Eviction Free NYC, some sample *Content Models* are **Providers**, **Housing +Eviction Free NYC, some sample _Content Models_ are **Providers**, **Housing Court Action Steps**, and meta-level page models, such as **LandingPage**. ![](provider-example.png) -*An example of the Provider content model* +_An example of the Provider content model_ As GatsbyJS compiles the site (either in dev or building for production), it will pull content from Contentful and make it available via GraphQL. A file’s @@ -154,7 +153,7 @@ Contentful: There are 6 potential pathways that a user could be taken (seen above as Holdover, Qualifies; Holdover, Doesn’t Qualify, etc) per housing court. These -were represented as *arrays of references* to Housing Court Action Steps, which +were represented as _arrays of references_ to Housing Court Action Steps, which are in turn represented in Contentful as editable Markdown snippets. This system allows for steps to be reused (see “Brooklyn Housing Court location” above) and for third-party content, such as Google Maps, to be embedded in the steps. To @@ -173,7 +172,6 @@ Feel free to [explore the source code](https://github.com/JustFixNYC/eviction-free-nyc) to get a better sense of how all this works! - #### **Wrapping everything up: using Netlify** When it came time to deploy, we were very excited to try out a new hosting @@ -183,9 +181,9 @@ simply linked Netlify to a branch in the Eviction Free NYC GitHub repo and it compiles and deploys the site with each push. It simplifies HTTPS certificate generation and even includes a system for deploying AWS Lambda functions, which we used to ship a small Twilio integration for the site's “Save to Phone” -feature. *(note: we’re actually still using the original -*[Serverless](https://serverless.com/)* solution, but this code is in the repo -as a to-do)* +feature. _(note: we’re actually still using the original +_[Serverless](https://serverless.com/)_ solution, but this code is in the repo +as a to-do)_ The best feature of Netlify is its ability to utilize build hooks. This allows us to trigger a new site build when someone edits or adds content from @@ -195,7 +193,7 @@ link the two together, Netlify will receive the event, rebuild the site, and deploy everything. Done! ![](mobile-comps.png) -*Mobile comps for Eviction Free NYC* +_Mobile comps for Eviction Free NYC_ #### In Conclusion diff --git a/docs/blog/2018-05-24-launching-new-gatsby-company/index.md b/docs/blog/2018-05-24-launching-new-gatsby-company/index.md index 9728d2faf34ba..f1395bea27908 100644 --- a/docs/blog/2018-05-24-launching-new-gatsby-company/index.md +++ b/docs/blog/2018-05-24-launching-new-gatsby-company/index.md @@ -7,11 +7,12 @@ author: "Kyle Mathews" Together with my co-founder, [Sam Bhagwat](https://twitter.com/calcsam), I’m thrilled to announce the formation of [Gatsby Inc.](https://www.gatsbyjs.com/) Based on the open source project Gatsby I founded, Gatsby the company will make feature-rich and blazing-fast websites easier to build and run. First of all, if you haven’t used Gatsby yet, what is it? Gatsby: -* is a blazing fast static site generator for React.js -* is a powerful and flexible modern website framework that simplifies every step of starting, developing and running websites -* helps you leverage open source innovations in the React, NPM, and Gatsby communities for your web projects -* lets you pull data into pages from WordPress, Drupal, Contentful, markdown—and any other data source you can imagine -* compiles and optimizes your site’s code to make your sites lightning fast—even on mobile + +- is a blazing fast static site generator for React.js +- is a powerful and flexible modern website framework that simplifies every step of starting, developing and running websites +- helps you leverage open source innovations in the React, NPM, and Gatsby communities for your web projects +- lets you pull data into pages from WordPress, Drupal, Contentful, markdown—and any other data source you can imagine +- compiles and optimizes your site’s code to make your sites lightning fast—even on mobile Gatsby is used by tens of thousands of developers and organizations and is downloaded nearly ½ million times per month. @@ -20,12 +21,15 @@ Follow our [getting started instructions](/docs/) to try out Gatsby in less than I’ll get to the new company in a bit, but first, let me tell the story of how Gatsby came to be. ## Origins of Gatsby + ### Drupal and the LAMP stack + I first tried web development 12 years ago during my sophomore year of college. I spent hours setting up PHP and MySQL on my laptop and was ecstatic when the iconic blue of Drupal finally appeared in my browser. Drupal v5 had just been released and I was proud to be learning the latest version of the top open source CMS. I clicked around the admin screens with awe and anticipation. I spent 1000s of hours building websites with Drupal—I even attempted to build a startup based around Drupal after college. I spoke at several DrupalCons and participated heavily within the Drupal open source ecosystem. ### The emerging world of JavaScript applications + But after years of building Drupal sites, I started feeling the pull of the emerging world of JavaScript web applications. Like most people, I was blown away when I first tried Gmail. How was an application running in my browser faster to load and use than my desktop email app? @@ -33,6 +37,7 @@ Like most people, I was blown away when I first tried Gmail. How was an applicat During my years building Drupal sites, I’d occasionally cast envious eyes at apps like Gmail, wishing I could work on something like that. But I could never quite figure out how they worked. JavaScript was a second-class citizen in Drupal those days, and I spent 99% of my time writing PHP. ### Backbone.js/Node.js/NPM + Then, in late 2010, the initial version of Backbone.js was released. I started playing with it and got super excited because things finally clicked for me: this was how to build rich, real-time JavaScript apps. The next year, I started my first full-time software development job at [Pantheon.io](https://pantheon.io/) and had a fantastic time building the Pantheon dashboard with Backbone.js to support Drupal & WordPress developers. I attended Backbone.js meetups and the first few Backbone.js conferences. Developer excitement online and at meetups was palpable. We could all feel that the world of web applications was starting to change dramatically. Node.js, then only a couple of years old, was gaining traction fast. For the first time, NPM enabled the easy sharing of JavaScript libraries. Consequently, the number of libraries exploded. With a server runtime and ecosystem developing around JS, more and more web development tools started being written in JavaScript. @@ -40,11 +45,13 @@ Node.js, then only a couple of years old, was gaining traction fast. For the fir The fast paced world of the web was reinventing itself again. ### First exposure to cloud-native software engineering + Working at Pantheon was my first exposure to modern software engineering techniques like microservices, stateless services, 12-factor applications, Chef, Docker, Heroku, cheap development environments that mirrored production, continuous integration and deployment, atomic deploys and easy rollbacks with dreams of canary deploys and feature flagging. [Product Development Flow](https://www.amazon.com/Principles-Product-Development-Flow-Generation/dp/1935401009) became my bible. I was hooked on being able to ship production code so quickly. Life was good. ### React.js + Then in 2013, React.js was released. I first heard about React from [David Nolen’s blog post introducing his ClojureScript wrapper of React Om](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs). I was completely fascinated by his analysis; his identification of DOM manipulation code as a major contributor to application complexity and slowdowns resonated with me. I started reading everything I could find on React and soon became a huge fan. @@ -52,23 +59,26 @@ I first heard about React from [David Nolen’s blog post introducing his Clojur Early in 2014, I left Pantheon to explore new opportunities. I dove deeper into React and built a number of sample applications and was astounded at how productive I was. Problems that used to take me weeks to solve in Backbone.js took me hours in React.js. Not only was I productive; my code felt remarkably simple. With Backbone.js, I always felt I was one or two slip-ups from the whole application spiraling out of control. With React, elegant and simple solutions seemed to come naturally from using the library. Again, I could feel things in web land were changing in a very big way. ### Distributed computing & event sourcing + A friend and I decided to work on a startup idea using React to build data-driven landing pages for sales reps. -During this time, I read two articles that had an enormous impact on me—“[The Log: What every software engineer should know about real-time data's unifying abstraction](https://engineering.linkedin.com/distributed-systems/log-what-every-software-engineer-should-know-about-real-time-datas-unifying)” and “[Turning the database inside-out with Apache Samza](https://www.confluent.io/blog/turning-the-database-inside-out-with-apache-samza/).” Databases and distributed systems finally clicked for me, and I obsessed over how to implement event sourcing for my startup. The latter article’s elegant critique of caching as an inevitable source of bugs and complexity and its suggestion to use materialized views generated through event sourcing sunk deep. +During this time, I read two articles that had an enormous impact on me—“[The Log: What every software engineer should know about real-time data's unifying abstraction](https://engineering.linkedin.com/distributed-systems/log-what-every-software-engineer-should-know-about-real-time-datas-unifying)” and “[Turning the database inside-out with Apache Samza](https://www.confluent.io/blog/turning-the-database-inside-out-with-apache-samza/).” Databases and distributed systems finally clicked for me, and I obsessed over how to implement event sourcing for my startup. The latter article’s elegant critique of caching as an inevitable source of bugs and complexity and its suggestion to use materialized views generated through event sourcing sunk deep. The traditional batch processing mode of computing—which reached its pinnacle with Hadoop—was taking heavy criticism as more and more applications demanded real-time data processing. The era of Big Data had arrived as the volume of data rolling through systems reached stratospheric levels at large numbers of companies. Kafka and stream processing frameworks like Spark were getting lots of attention. ### Designing and launching the initial version of Gatsby + Meanwhile, I was having lots of fun in my startup optimizing my landing pages. I added server side rendering and a number of other really fun performance tweaks while poring over reports from [webpagetest.org](http://www.webpagetest.org/). Universal JavaScript had arrived and was amazing. We reached the point where we needed a website for the startup and after having focused on web apps for so long, all of the solutions in the content website world felt out of date. Spinning up a local DB & server felt like a return to 2006, while template-based site generation felt far inferior to React’s elegant component model. -After some exploration with React server rendering for our app, I realized that React could actually be used as the basis for a static site generator. I got really excited about the potential and started scribbling notes in my notebook from time to time. Eventually, I took a week to build this out and launched Gatsby in late May 2015. -To my surprise and delight, people started using Gatsby almost immediately after I open sourced it. I spoke about Gatsby at the React conference in January of 2016 and was surprised at how many people knew about it and were using it. +After some exploration with React server rendering for our app, I realized that React could actually be used as the basis for a static site generator. I got really excited about the potential and started scribbling notes in my notebook from time to time. Eventually, I took a week to build this out and launched Gatsby in late May 2015. +To my surprise and delight, people started using Gatsby almost immediately after I open sourced it. I spoke about Gatsby at the React conference in January of 2016 and was surprised at how many people knew about it and were using it. ### Growing momentum—can Gatsby be much much more? + Like most open source projects under heavy use, it started getting feature requests. One of the most common requests was how to scale Gatsby to larger sites as well as how to integrate Gatsby with CMSs like WordPress, Contentful, Drupal, and others. I had assumed people just used static sites for markdown or JSON driven sites, but as it turned out, there was a large group of developers interested in pushing the boundaries of what static sites can do. These developers realized that the scaling and performance challenges faced by traditional CMS-driven sites was difficult to resolve without a new way to build websites. They had watched database-driven sites fail under heavy loads, and had seen slow, unoptimized websites drive away potential visitors. @@ -78,15 +88,16 @@ They also like static sites generators because they easily leverage modern engin Static sites let you focus on what’s unique to your site—components, data structures, and design. ### Limitations of static site generators + But static sites, despite how much developers love them, have never gained widespread usage. They have real limitations in real-world use cases—they can’t handle frequent content updates and can’t scale to large and complex sites. ### Rebuild Gatsby on a stream processing architecture to eliminate the build step + As I thought deeply about this problem, it occurred to me that there were strong parallels between this problem and everything I’d learned about event sourcing and building cloud-native applications. - I realized you could view a website as the current computed state of a long stream of content and code changes. When viewed through that lens, the architecture became clear for a new version of Gatsby that would glue Gatsby to various data sources & solve the really hard problems of static sites: fast incremental builds and parallelizing builds for large and complex sites. This architecture would enable Gatsby to eliminate the build step entirely—any code or content change would be quickly incorporated into the site and go live immediately. We could port the ideas of real-time event processing to building websites. @@ -95,11 +106,13 @@ This architecture would enable Gatsby to eliminate the build step entirely—any ### Launching new version of Gatsby + So with my mind buzzing with ideas and possibilities, in late summer 2016, I plunged into work on the new version of Gatsby. I posted my plans on GitHub and with help from 100s of developers in the community, we spent 10 months building out the new version of Gatsby which we released in July of 2017 with plugins for markdown, WordPress, Contentful, and others. ## Gatsby, a company for automating websites + After spending fall 2016, and most of 2017 consulting with companies around Gatsby and interacting with 100s of developers in the open source world, I started feeling confident that it was time to create a company devoted to bringing the full vision of Gatsby to fruition. My longtime best friend and Gatsby core contributor Sam Bhagwat and I started chatting about forming this startup to bring Gatsby to the world. We were lucky to find some great investors, led by [Dan Scholnick of Trinity Ventures](http://www.trinityventures.com/team/dan-scholnick/), who shared our vision for new cloud-native website infrastructure and has extensive experience investing in and working with open source & cloud infrastructure startups like New Relic, Docker, Meteor, InfluxData and more, to back us with $3.8M in seed funding. @@ -112,8 +125,8 @@ It’s been an amazing journey so far. Wish Sam and I and our new colleagues luc ### Learn more about Gatsby -* [From the New Stack "GatsbyJS, the Open Source React-Based SSG, Creates Company to Evolve Cloud-Native Website Builds"](https://thenewstack.io/gatsbyjs-the-open-source-react-based-ssg-creates-company-to-evolve-cloud-native-website-builds/) -* [gatsbyjs.com](https://www.gatsbyjs.com) -* [gatsbyjs.org](/) +- [From the New Stack "GatsbyJS, the Open Source React-Based SSG, Creates Company to Evolve Cloud-Native Website Builds"](https://thenewstack.io/gatsbyjs-the-open-source-react-based-ssg-creates-company-to-evolve-cloud-native-website-builds/) +- [gatsbyjs.com](https://www.gatsbyjs.com) +- [gatsbyjs.org](/) _Also participating in Gatsby's funding round: Fathom Ventures, Robin Vasan, Mulesoft founder Ross Mason & the Pantheon founding team (Zack Rosen, Josh Koenig, Matt Cheney and David Strauss)._ diff --git a/docs/blog/2018-05-31-open-sourcing-gatsby-workshops/index.md b/docs/blog/2018-05-31-open-sourcing-gatsby-workshops/index.md index c5204cb394ed0..adf44873ae451 100644 --- a/docs/blog/2018-05-31-open-sourcing-gatsby-workshops/index.md +++ b/docs/blog/2018-05-31-open-sourcing-gatsby-workshops/index.md @@ -15,51 +15,52 @@ Here is a photo of how many notes I took during our first workshop in San Franci ![Photo of my workshop outline with notes scribbled all over it](./workshop-notes.JPG) And that's just one page of notes (there were many more). The biggest takeaways were: -* People wanted to know how Gatsby works, so we drew this diagram and nearly everyone said it was helpful: + +- People wanted to know how Gatsby works, so we drew this diagram and nearly everyone said it was helpful: ![Diagram of how Gatsby build time and run time works](./gatsby-diagram.jpg) -* This diagram helped them understand why adding extra plugins to their Gatsby sites doesn’t slow them down (because plugins do their work at build time, not at runtime) -* People wanted to know how Gatsby works with React and GraphQL, and we’re still working on diagrams to illustrate those concepts -* If React and GraphQL are new to people, they seem to be the most difficult parts of learning to use Gatsby +- This diagram helped them understand why adding extra plugins to their Gatsby sites doesn’t slow them down (because plugins do their work at build time, not at runtime) +- People wanted to know how Gatsby works with React and GraphQL, and we’re still working on diagrams to illustrate those concepts +- If React and GraphQL are new to people, they seem to be the most difficult parts of learning to use Gatsby # New tutorials! -People are interested in tutorials that go beyond the basic [Tutorial](/tutorial/), so we created three new tutorials: -* [WordPress Source Plugin Tutorial](/docs/wordpress-source-plugin-tutorial/) -* [Adding Images to a WordPress Site](/docs/image-tutorial/) -* [Creating a Source Plugin](/docs/source-plugin-tutorial/) +People are interested in tutorials that go beyond the basic [Tutorial](/tutorial/), so we created three new tutorials: +- [WordPress Source Plugin Tutorial](/docs/wordpress-source-plugin-tutorial/) +- [Adding Images to a WordPress Site](/docs/image-tutorial/) +- [Creating a Source Plugin](/docs/source-plugin-tutorial/) ## Why you might want to host a workshop Here are some advantages that we experienced in the workshops; if these appeal to you, you could consider hosting your own workshop at your work, a meetup, or any other setting that makes sense! -* _Dedicated time and place to learn:_ it’s easier to set aside time to learn something new when you are in a room with other people doing the same thing -* _Quicker problem-solving:_ you can usually get answers to your questions and solve problems faster than you could otherwise -* _Customized content:_ the workshop host can customize the workshop for the group’s needs ahead of time by sending out a survey, and the workshop can shift focus depending on real-time needs and questions of the group and individuals +- _Dedicated time and place to learn:_ it’s easier to set aside time to learn something new when you are in a room with other people doing the same thing +- _Quicker problem-solving:_ you can usually get answers to your questions and solve problems faster than you could otherwise +- _Customized content:_ the workshop host can customize the workshop for the group’s needs ahead of time by sending out a survey, and the workshop can shift focus depending on real-time needs and questions of the group and individuals We'd love to hear how it goes and hope that you'll use the resources below. # Where to find workshop resources Please use the following links to find workshop materials in the Gatsby open source repo: -* Survey questions to send out [before](https://docs.google.com/a/gatsbyjs.com/forms/d/1S6diwCjR36VSJod7DGL0ZpESx3KdaNGiB4Szl4hOpg0/edit?usp=sharing) and [after](https://docs.google.com/a/gatsbyjs.com/forms/d/1iKok_QJHSav51_668QneqwxOFOMw_WNDPnX0PdBfUVA/edit?usp=sharing) workshops -* [Introductory slide deck for Day 1](https://docs.google.com/presentation/d/1fQNLvf1C8kj4rY-hVVY5zCsxy0z03gGkiqc-wiHHYhI/edit?usp=sharing), [Introductory slide deck for Day 2](https://docs.google.com/presentation/d/1w_0CGX2DNUDAIDT0MCaCPNqA_0HgamutaECP8kZ3yyI/edit?usp=sharing) -* [Agenda for workshop attendees](https://docs.google.com/document/d/1gn5dk5RkuOXgZatd-Ow4XGqKY1NWZVCaUhyOwrRP0JE/edit?usp=sharing) -* [Step-by-step guide for the workshop host](https://docs.google.com/document/d/1epeLO_7xkbd-WvPDCEZZ8f2GV5uMLHHM_UIhpZxqRbo/edit?usp=sharing) -We hope these workshop materials help you share Gatsby at work, meetups, and wherever else it makes sense. Let us know how it goes and how you customize or modify these workshops! +- Survey questions to send out [before](https://docs.google.com/a/gatsbyjs.com/forms/d/1S6diwCjR36VSJod7DGL0ZpESx3KdaNGiB4Szl4hOpg0/edit?usp=sharing) and [after](https://docs.google.com/a/gatsbyjs.com/forms/d/1iKok_QJHSav51_668QneqwxOFOMw_WNDPnX0PdBfUVA/edit?usp=sharing) workshops +- [Introductory slide deck for Day 1](https://docs.google.com/presentation/d/1fQNLvf1C8kj4rY-hVVY5zCsxy0z03gGkiqc-wiHHYhI/edit?usp=sharing), [Introductory slide deck for Day 2](https://docs.google.com/presentation/d/1w_0CGX2DNUDAIDT0MCaCPNqA_0HgamutaECP8kZ3yyI/edit?usp=sharing) +- [Agenda for workshop attendees](https://docs.google.com/document/d/1gn5dk5RkuOXgZatd-Ow4XGqKY1NWZVCaUhyOwrRP0JE/edit?usp=sharing) +- [Step-by-step guide for the workshop host](https://docs.google.com/document/d/1epeLO_7xkbd-WvPDCEZZ8f2GV5uMLHHM_UIhpZxqRbo/edit?usp=sharing) +We hope these workshop materials help you share Gatsby at work, meetups, and wherever else it makes sense. Let us know how it goes and how you customize or modify these workshops! # How you can contribute If you'd like to contribute to making workshops and tutorials more awesome, here are a few of the many issues we created in the [Documentation Project](https://github.com/gatsbyjs/gatsby/projects/3) as a result of what we learned in the workshops; contributions welcome! (Note: we used the main [tutorials](/tutorial/) in the workshops, so edits and improvements to the tutorials also improve the workshop) -* *Good first issue*: [Emphasize file names](https://github.com/gatsbyjs/gatsby/issues/5608) with (bold, italics, headers, or some other way) when people copy and paste code, because it’s easy to miss _where_ you’re supposed to paste it with the current format -* *Good first issue*: Make it clear in tutorial part 0 and workshops that all instructions are built assuming that you have installed [VS Code and Prettier](https://github.com/gatsbyjs/gatsby/issues/5610) because those work well with React -* [Add a copy button to code examples](https://github.com/gatsbyjs/gatsby/issues/5030) because people often missed backticks if their screen resolution didn’t make the ticks very visible +- _Good first issue_: [Emphasize file names](https://github.com/gatsbyjs/gatsby/issues/5608) with (bold, italics, headers, or some other way) when people copy and paste code, because it’s easy to miss _where_ you’re supposed to paste it with the current format +- _Good first issue_: Make it clear in tutorial part 0 and workshops that all instructions are built assuming that you have installed [VS Code and Prettier](https://github.com/gatsbyjs/gatsby/issues/5610) because those work well with React +- [Add a copy button to code examples](https://github.com/gatsbyjs/gatsby/issues/5030) because people often missed backticks if their screen resolution didn’t make the ticks very visible -We loved hosting workshops and plan to keep developing the resources as we learn. We’re so grateful for the workshop attendees and their feedback. +We loved hosting workshops and plan to keep developing the resources as we learn. We’re so grateful for the workshop attendees and their feedback. And just as a reminder: we will keep improving these workshops and hope you'll help us do that! Share your ideas and report how these workshops go for you in the [Open source repo](https://github.com/gatsbyjs/gatsby) through issues and PRs (if you ran into problems with the workshops and/or have ideas of how to improve them) or [Twitter](https://twitter.com/gatsbyjs) if you want to share an upcoming workshops you're running. diff --git a/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md b/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md index e9770558bd408..7dbae8e5f1a94 100644 --- a/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md +++ b/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md @@ -13,6 +13,7 @@ publishedAt: "Cosmic JS" In this tutorial, I'm going to show you how to create a simple but blazing fast blog using React, Gatsby, and [Cosmic JS](https://cosmicjs.com). ## TL;DR + [Download the GitHub repo.](https://github.com/cosmicjs/gatsby-blog-cosmicjs) [Check out the demo.](https://cosmicjs.com/apps/gatsby-blog) @@ -20,6 +21,7 @@ In this tutorial, I'm going to show you how to create a simple but blazing fast [Check out the Cosmic JS Source Plugin for Gatsby.](https://github.com/cosmicjs/gatsby-source-cosmicjs) ## Prerequisites + This tutorial requires Node.js and npm. Make sure you already have them installed. ## Blog Development @@ -54,7 +56,6 @@ gatsby develop At this point, you can access your Gatsby website by visiting [http://localhost:8000](http://localhost:8000). - ## Install the Cosmic JS Source Plugin In a static website, data can be consumed from multiple different sources, for example Markdown files, HTML files, and/or an eternal API (WordPress, Cosmic JS, etc). @@ -88,26 +89,28 @@ module.exports = { resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/pages`, - name: 'pages', + name: "pages", }, }, { - resolve: 'gatsby-source-cosmicjs', + resolve: "gatsby-source-cosmicjs", options: { - bucketSlug: 'gatsby-blog-cosmic-js', // Your CosmicJS bucket slug - objectTypes: ['posts','settings'], // List of the object types you want to be able to request from Gatsby. + bucketSlug: "gatsby-blog-cosmic-js", // Your CosmicJS bucket slug + objectTypes: ["posts", "settings"], // List of the object types you want to be able to request from Gatsby. apiAccess: { - read_key: '', - } - } + read_key: "", + }, + }, }, ], } ``` + ### A couple of notes on this config: -1. Notice `bucketSlug` is set to `gatsby-blog-cosmic-js`. This is a demo Bucket that includes pre-populated content, so when you [download the GitHub repo](https://github.com/cosmicjs/gatsby-blog-cosmicjs) and start the app, it will display demo content right out of the box. You can also import this demo content into your own Cosmic JS Bucket by going to `Your Cosmic JS Bucket Dashboard > Settings > Apps`, then find and install the Gatsby Blog. -2. The API read key is optional and can be set after you login to Cosmic JS at: -`Your Cosmic JS Bucket Dashboard > Settings > Basic Settings` + +1. Notice `bucketSlug` is set to `gatsby-blog-cosmic-js`. This is a demo Bucket that includes pre-populated content, so when you [download the GitHub repo](https://github.com/cosmicjs/gatsby-blog-cosmicjs) and start the app, it will display demo content right out of the box. You can also import this demo content into your own Cosmic JS Bucket by going to `Your Cosmic JS Bucket Dashboard > Settings > Apps`, then find and install the Gatsby Blog. +2. The API read key is optional and can be set after you login to Cosmic JS at: + `Your Cosmic JS Bucket Dashboard > Settings > Basic Settings` Now restart the server to apply the updates. @@ -116,26 +119,29 @@ Now restart the server to apply the updates. First, we want to display the list of posts on the homepage. To do so, add the following content to `src/pages/index.js`: ```javascript -import React from 'react' -import Link from 'gatsby-link' -import get from 'lodash/get' -import Helmet from 'react-helmet' +import React from "react" +import Link from "gatsby-link" +import get from "lodash/get" +import Helmet from "react-helmet" -import Bio from '../components/Bio' -import { rhythm } from '../utils/typography' +import Bio from "../components/Bio" +import { rhythm } from "../utils/typography" class BlogIndex extends React.Component { render() { - const siteTitle = get(this, 'props.data.cosmicjsSettings.metadata.site_title') - const posts = get(this, 'props.data.allCosmicjsPosts.edges') - const author = get(this, 'props.data.cosmicjsSettings.metadata') + const siteTitle = get( + this, + "props.data.cosmicjsSettings.metadata.site_title" + ) + const posts = get(this, "props.data.allCosmicjsPosts.edges") + const author = get(this, "props.data.cosmicjsSettings.metadata") return (
- + {posts.map(({ node }) => { - const title = get(node, 'title') || node.slug + const title = get(node, "title") || node.slug return (

- + {title}

{node.created} -

+

) })} @@ -164,7 +172,7 @@ export const pageQuery = graphql` allCosmicjsPosts(sort: { fields: [created], order: DESC }, limit: 1000) { edges { node { - metadata{ + metadata { description } slug @@ -173,8 +181,8 @@ export const pageQuery = graphql` } } } - cosmicjsSettings(slug: {eq: "general"}){ - metadata{ + cosmicjsSettings(slug: { eq: "general" }) { + metadata { site_title author_name author_bio @@ -195,7 +203,6 @@ Then, we pass the `{ data }` destructured object as parameter of `IndexPage` and ![Gatsby Cosmic Screenshot](./gatsby-cosmic-screenshot-1.png) - ## Single Post Layout Till now we have integrated Cosmic JS source plugin with Gatsby and it's looking like a blog. Now we will work on adding a details page for individual blog posts. @@ -203,25 +210,29 @@ Till now we have integrated Cosmic JS source plugin with Gatsby and it's looking Create the template at `src/templates/blog-post.js`: ```javascript -import React from 'react' -import Helmet from 'react-helmet' -import Link from 'gatsby-link' -import get from 'lodash/get' +import React from "react" +import Helmet from "react-helmet" +import Link from "gatsby-link" +import get from "lodash/get" -import Bio from '../components/Bio' -import { rhythm, scale } from '../utils/typography' -import { relative } from 'path'; +import Bio from "../components/Bio" +import { rhythm, scale } from "../utils/typography" +import { relative } from "path" class BlogPostTemplate extends React.Component { render() { const post = this.props.data.cosmicjsPosts - const siteTitle = get(this.props, 'data.cosmicjsSettings.metadata.site_title') - const author = get(this, 'props.data.cosmicjsSettings.metadata') + const siteTitle = get( + this.props, + "data.cosmicjsSettings.metadata.site_title" + ) + const author = get(this, "props.data.cosmicjsSettings.metadata") const { previous, next } = this.props.pathContext return (
-