diff --git a/CHANGELOG.md b/CHANGELOG.md index 8eea2cb3cd8e0..e42daa2e3715e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,8 @@ ### Added * Add gatsby-source-mongodb plugin to gatsby (#1570) @jorishermans -* [www] Refactor Homepage and Navigation & convert diagram to html/css (#1605) @fk +* [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 @@ -21,22 +22,24 @@ * 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 @chiedo +* 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 @KyleAMathews +* 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 @DaleWebb +* 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 @@ -45,7 +48,6 @@ * Update modifyWebpackConfig docs #1613 @KyleAMathews * Fix broken links #1614 @KyleAMathews - ## [1.3.0] - 2017-07-19 ### Added @@ -64,20 +66,23 @@ * 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 +* 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 properly. Fixing #1539 #1540 @gregsqueeb -* [gatsby-plugin-sharp] Fix PNG generation when using the "duotone" option #1506 @fk +* 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 + @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 @kyleamathews +* 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 - ## [1.2.0] - 2017-07-13 ### Added @@ -93,11 +98,12 @@ * 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 @Smiter +* Fixes docs referencing removed "1.0" branch source code instead of master. + #1495 @Vagr9K +* fix(gatsby-source-contentful): missing host param in createClient #1487 + @Smiter * use program directory over cwd #1478 @craig-mulligan - ## [1.1.0] - 2017-07-11 ### Added @@ -120,7 +126,8 @@ * 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 +* 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 @@ -132,7 +139,8 @@ * 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 +* 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 @@ -141,11 +149,12 @@ * 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 with KyleAMathews 4 days ago + +* 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 @@ -153,11 +162,13 @@ * 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 @KyleAMathews +* 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 @@ -166,19 +177,23 @@ ### Added -* Use the sync endpoint to pull data from Contentful #1241 @Khaledgarbaya +* 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 #1281 #1297 @kyleamathews +* [gatsby-source-contentful] support creating localized nodes #1279 + @kyleamathews +* 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 transformations #1336 @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 height, actually crop #1339 @kyleamathews +* [source-contentful] Allow for querying gifs & when user queries for image + height, actually crop #1339 @kyleamathews ### Changed @@ -186,7 +201,8 @@ * 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 +* Write images processed by sharp to public/static along with other assets #1332 + @kyleamathews ### Fixed @@ -197,26 +213,32 @@ * 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 @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 + @kyleamathews * 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 @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 + @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 from working #1307 @levibuzolic +* 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 @camsjams +* 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 better console output #1329 @kyleamathews +* 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 - ## [1.0.0-beta.4] - 2017-06-23 ### Added @@ -224,11 +246,13 @@ * 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 +* Add graphql fields for creating responsive images using Contentful image API + #1228 @kyleamathews ### Changed -* Refactor Contentful data processing into own module + use more standard GraphQL type names @kyleamathews +* 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 ### Fixed @@ -241,45 +265,54 @@ ### Added -* Show better errors when there's a graphql compilation problem #1222 @kyleamathews +* 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 to a union type #1211 @kyleamathews +* 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 #1202 @kyleamathews +* 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 @fk +* 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 ### 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 @kyleamathews -* 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 - +* 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 + queries #1182 @kyleamathews | Fix a typo on gatby-link updating #1181 + @danielfarrell ## [1.0.0-beta.1] - 2017-06-15 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 @@ -290,60 +323,77 @@ Our first beta!!! 🎉 * Add documentation to gatsby-remark-prism @kyleamathews ### Changed -* Move all filter operators for connections under a top-level "filter" field #1177 @kyleamathews -* Change `linkPrefix` to `pathPrefix` and add an example site #1155 @kyleamathews -* 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 @kyleamathews + +* Move all filter operators for connections under a top-level "filter" field + #1177 @kyleamathews +* Change `linkPrefix` to `pathPrefix` and add an example site #1155 + @kyleamathews +* 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 + @kyleamathews ### Fixed + * Fix graphql compiler on typescript #949 @fabien0102 -* Replace react.createClass with ES6 classes in examples html.js, add PropTypes #1169 @abachuk +* 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 convert back @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 @kyleamathews +* Replace using levelup for caching with lowdb to avoid native dependency #1142 + @kyleamathews * 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 @kyleamathews +* 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 + (Skipping over the previous two releases as they had bugs). ### Added -- 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 documentation.js #1053 @kyleamathews -- Add new API spec (rough draft) @kyleamathews https://www.gatsbyjs.org/docs/api-specification/ -- 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 https://image-processing.gatsbyjs.org/ -- 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 https://using-styled-components.gatsbyjs.org/ +* 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 + documentation.js #1053 @kyleamathews +* Add new API spec (rough draft) @kyleamathews + https://www.gatsbyjs.org/docs/api-specification/ +* 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 + https://image-processing.gatsbyjs.org/ +* 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 + https://using-styled-components.gatsbyjs.org/ ### Changed @@ -370,92 +420,103 @@ API changes: [gatsby-ssr.js APIs](https://www.gatsbyjs.org/docs/ssr-apis/): -* `modifyHeadComponents` and `modifyPostBodyComponents` were removed in favor of a -new API [`onRenderBody`](https://www.gatsbyjs.org/docs/ssr-apis/#onRenderBody). +* `modifyHeadComponents` and `modifyPostBodyComponents` were removed in favor of + a new API + [`onRenderBody`](https://www.gatsbyjs.org/docs/ssr-apis/#onRenderBody). * `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 @kyleamathews -- Pick values off plugin's package.json to avoid weird metadata from NPM #1090 @kyleamathews +* 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 + @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 #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. +* 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 #956 -- 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 -components #928 +* 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 + image e.g. from `png` to `jpg`. +* 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. 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 `___gatsby` -- 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* 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 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 + `___gatsby` +* 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_ + 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` ### 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. -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 -cache as it might now be invalid #927 -- New way to make connections between nodes e.g. article --> author #902 +* 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 + cache as it might now be invalid #927 +* New way to make connections between nodes e.g. article --> author #902 ### Changed -- 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 "graphql" plus must be named. So if previously you wrote: +* 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 + "graphql" plus must be named. So if previously you wrote: ```js export const pageQuery = ` @@ -475,175 +536,203 @@ You must now write: ```js export const pageQuery = graphql` -query IndexQuery { - allMarkdownMark { - edges { - node { - id + query IndexQuery { + allMarkdownMark { + edges { + node { + id + } } } } -} ` ``` - ## [1.0.0-alpha10] - 2016-11-17 + ### Added -- 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 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. [PR](https://github.com/gatsbyjs/gatsby/pull/558) + +* 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 + 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. + [PR](https://github.com/gatsbyjs/gatsby/pull/558) ## Changed -- 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 -records.json which was confusing and annoying. -[PR](https://github.com/gatsbyjs/gatsby/pull/559) + +* 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 + records.json which was confusing and annoying. + [PR](https://github.com/gatsbyjs/gatsby/pull/559) ## [1.0.0-alpha9] - 2016-11-04 + ### Added -- 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) + +* 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 being installed on Windows. -[commit](https://github.com/gatsbyjs/gatsby/commit/34fff74e6fb3cae88010b42f74d784382ead4031) + +* 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) ## [1.0.0-alpha8] - 2016-11-01 + ### Added -- 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) + +* 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 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 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. -[#533](https://github.com/gatsbyjs/gatsby/pull/533) + +* 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 + 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. + [#533](https://github.com/gatsbyjs/gatsby/pull/533) ### Changed -- 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 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 can see which modules are getting hot reloaded. -[commit](https://github.com/gatsbyjs/gatsby/commit/93f6bd2c4206e71623c1a7fa007322f8dc9887be) + +* 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 + 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 + can see which modules are getting hot reloaded. + [commit](https://github.com/gatsbyjs/gatsby/commit/93f6bd2c4206e71623c1a7fa007322f8dc9887be) ## [1.0.0-alpha7] - 2016-10-27 + ### Fixed -- 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 exist. + +* 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 + exist. ## [1.0.0-alpha6] - 2016-10-27 + ### 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 when running graphql queries that have async resolvers -[commit](https://github.com/gatsbyjs/gatsby/commit/a19677e38d1ce8ba4fb39ddff75482904f168db6) + +* 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) ## [1.0.0-alpha5] - 2016-10-14 + ### 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.) -[commit](https://github.com/gatsbyjs/gatsby/commit/ebd57d2bd6c39b51a455b76018737e2957e146ef) -- yarn.lock +* New replacement API to wrap root component (useful for Redux, et al.) + [commit](https://github.com/gatsbyjs/gatsby/commit/ebd57d2bd6c39b51a455b76018737e2957e146ef) +* yarn.lock [commit](https://github.com/gatsbyjs/gatsby/commit/5ce3321b84e912925c4705ececef6f2c817b0684) ### Changed -- Disable extracting the Webpack chunk manifest until understand why - this breaks updates when using Service Workers -[commit](https://github.com/gatsbyjs/gatsby/commit/07ed5b010ad27b1816084b361f06fd0ae6a017ba) + +* Disable extracting the Webpack chunk manifest until understand why this breaks + updates when using Service Workers + [commit](https://github.com/gatsbyjs/gatsby/commit/07ed5b010ad27b1816084b361f06fd0ae6a017ba) ## [1.0.0-alpha4] - 2016-10-07 + ### Added -- 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 for plugin system. -- Add extension API `clientEntry` that let's site code and plugins to - run code at the very start of client app. + +* 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 + for plugin system. +* 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 files. This will be getting an overhaul soon. -- 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. + +* 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 + offline-plugin from caching files referenced in your CSS. +* 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 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 improving its cachability -[0941d33](https://github.com/gatsbyjs/gatsby/commit/0941d33) -- Always add babel-plugin-add-module-exports + +* 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 + improving its cachability + [0941d33](https://github.com/gatsbyjs/gatsby/commit/0941d33) +* 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 [342030d](https://github.com/gatsbyjs/gatsby/commit/342030d) + +* 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 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 created. Useful for programmatically modifying pages created -in plugins. + +* 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 + 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 fields. +* 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, code - splitting, supporting long-term caching of JS files. + +* Initial versions of new GraphQL data layer, PRPL pattern, programmatic routes, + code splitting, supporting long-term caching of JS files. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b76b72d17c51e..44acdeab905ad 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,13 +12,15 @@ If you want your issue to be resolved quickly, please include in your issue: changes you've made there. ## Contributing + Gatsby uses a "monorepo" pattern to manage its many dependencies and relies on lerna and yarn to configure the repository for active development. You can install the latest version of Gatsby by following these steps: * Clone the repo, navigate to its directory. -* ensure you have the latest version of yarn installed (>= 1.0.2) https://yarnpkg.com/en/docs/install +* ensure you have the latest version of yarn installed (>= 1.0.2) + https://yarnpkg.com/en/docs/install * Install dependencies using `yarn run bootstrap` in the root of the repo. The usual contributing steps are: @@ -28,14 +30,15 @@ The usual contributing steps are: * setup up repo and Install dependencies: `yarn run bootstrap` * Make sure tests are passing for you: `yarn test` * Create a topic branch: `git checkout -b topics/new-feature-name` -* Run `npm run watch` from the root of the repo to first do an initial Babel build of all packages and then watch for - changes to packages' source code and compile these changes on-the-fly as you - work. -* Install [gatsby-dev-cli](/packages/gatsby-dev-cli/) globally: `yarn global add gatsby-dev-cli` +* Run `npm run watch` from the root of the repo to first do an initial Babel + build of all packages and then watch for changes to packages' source code and + compile these changes on-the-fly as you work. +* Install [gatsby-dev-cli](/packages/gatsby-dev-cli/) globally: `yarn global add + gatsby-dev-cli` * For each of your Gatsby test sites, run the `gatsby-dev` command there to copy the built files from your cloned copy of Gatsby. It'll watch for your changes - to Gatsby packages and copy them into the site. For more detailed - instructions see the [gatsby-dev-cli README](/packages/gatsby-dev-cli/) + to Gatsby packages and copy them into the site. For more detailed instructions + see the [gatsby-dev-cli README](/packages/gatsby-dev-cli/) * Add tests and code for your changes. * Once you're done, make sure all tests still pass: `yarn test` * Commit and push to your fork. @@ -45,25 +48,26 @@ The usual contributing steps are: ### Redux devtools -Gatsby uses Redux for managing state during development and building. It's -often helpful to see the flow of actions and builtup state for a site you're -working on or if adding new functionality to core. We leverage +Gatsby uses Redux for managing state during development and building. It's often +helpful to see the flow of actions and builtup state for a site you're working +on or if adding new functionality to core. We leverage https://github.com/zalmoxisus/remote-redux-devtools and https://github.com/zalmoxisus/remotedev-server to give you use the Redux devtools extension for debugging Gatsby. To use this, first install [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) -in your browser. Then in your Gatsby repo, run `npm run remotedev`. Then in -your site directory run `REDUX_DEVTOOLS=true gatsby develop`. Depending on -your operating system and shell, you may need to modify how you set the +in your browser. Then in your Gatsby repo, run `npm run remotedev`. Then in your +site directory run `REDUX_DEVTOOLS=true gatsby develop`. Depending on your +operating system and shell, you may need to modify how you set the `REDUX_DEVTOOLS` environment variable. -At this point, your site will be sending Redux actions and state to the remote server. - -To connect to this, you need to setup the devtools extension to talk to the remote +At this point, your site will be sending Redux actions and state to the remote server. +To connect to this, you need to setup the devtools extension to talk to the +remote server. + First open the remote devtools. ![how to open the redux remote devtools extension](./images/open-remote-dev-tools.png) @@ -72,16 +76,16 @@ Then click settings along the bottom menu and set the host and port. ![how to set the host/port for the remote devtools extension to connect to Gatsby](./images/remote-dev-settings.png) -After this, the devtools extension *should* connect to the remote server and you'll -see actions start showing up. +After this, the devtools extension _should_ connect to the remote server and +you'll see actions start showing up. ![gatsby redux remote devtools](./images/running-redux-devtools.png) **Warning!! Lots of buginess**. While having this available is extremely helpful, this setup is very buggy and fragile. There is a memory leak in the extension that's triggered it seems every time you restart the Gatsby -development server. Also the extension often, for no apparent reason, just -won't show any actions from the remote server. It'll also often freeze up. The -best solution seems to just be turning everything off and on again. Fixing up -these tools would be very helpful for us and many others using these tools if -someone wants to take this on! +development server. Also the extension often, for no apparent reason, just won't +show any actions from the remote server. It'll also often freeze up. The best +solution seems to just be turning everything off and on again. Fixing up these +tools would be very helpful for us and many others using these tools if someone +wants to take this on! diff --git a/README.md b/README.md index a49e1ab8ba51a..0dd97114f384c 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,9 @@ ## Showcase Websites built with Gatsby: -* [React](https://reactjs.org/) ([source](https://github.com/reactjs/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) @@ -23,43 +25,65 @@ Websites built with Gatsby: * [Segment's Blog](https://segment.com/blog/) * [Fabric](https://meetfabric.com/) * [Formidable](https://formidable.com/) -* [openFDA](https://open.fda.gov/) ([source](https://github.com/FDA/open.fda.gov)) -* [ReasonML Docs](https://reasonml.github.io/) ([source](https://github.com/reasonml/reasonml.github.io)) -* [Bricolage.io](https://www.bricolage.io/) ([source](https://github.com/KyleAMathews/blog)) -* [Jamie Henson's Blog](http://jamiehenson.com/) ([source](https://github.com/jamiehenson/jh47-gatsby)) +* [openFDA](https://open.fda.gov/) + ([source](https://github.com/FDA/open.fda.gov)) +* [ReasonML Docs](https://reasonml.github.io/) + ([source](https://github.com/reasonml/reasonml.github.io)) +* [Bricolage.io](https://www.bricolage.io/) + ([source](https://github.com/KyleAMathews/blog)) +* [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/) ([source](https://github.com/dschau/blog)) +* [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/) ([source](https://github.com/dvzrd/gatsby-sfiction)) +* [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/) ([source](https://github.com/kbariotis/kostasbariotis.com)) +* [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) ([source](https://github.com/oliverbenns/oliverbenns.com)) -* [angeloocana.com](https://angeloocana.com) ([source](https://github.com/angeloocana/angeloocana)) +* [Oliver Benns' Portfolio](https://oliverbenns.com) + ([source](https://github.com/oliverbenns/oliverbenns.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) ([source](https://github.com/pouretrebelle/overlap.show)) +* [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) ([source](https://github.com/whatrocks/blog)) -* [Song Wang’s website](https://songwang.io/) ([source](https://github.com/wangsongiam/songwang.io)) -* [Digital Psychology](http://digitalpsychology.io) ([source](https://github.com/danistefanovic/digitalpsychology.io)) -* [Magicly's blog](https://magicly.me/) ([source](https://github.com/magicly/gatsby-blog)) -* [Dalbinaco's website](http://dalbinaco.com/) ([source](https://github.com/dalbinaco/dalbinaco.github.io)) +* [Charlie Harrington's Blog](https://charlieharrington.com) + ([source](https://github.com/whatrocks/blog)) +* [Song Wang’s website](https://songwang.io/) + ([source](https://github.com/wangsongiam/songwang.io)) +* [Digital Psychology](http://digitalpsychology.io) + ([source](https://github.com/danistefanovic/digitalpsychology.io)) +* [Magicly's blog](https://magicly.me/) + ([source](https://github.com/magicly/gatsby-blog)) +* [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) ([source](https://github.com/kbrgl/kbrgl.github.io)) -* [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/) ([source](https://github.com/MozillaDevelopers/playground)) -* [David James' Portfolio](http://dfjames.com) ([source](https://github.com/daviddeejjames/dfjames-gatsby)) -* [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) ([source](https://github.com/etceteradesign/website)) +* [Kabir Goel's website](https://kbrgl.github.io) + ([source](https://github.com/kbrgl/kbrgl.github.io)) +* [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/) + ([source](https://github.com/MozillaDevelopers/playground)) +* [David James' Portfolio](http://dfjames.com) + ([source](https://github.com/daviddeejjames/dfjames-gatsby)) +* [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) + ([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](https://www.lekoarts.de) -* [Georgi Yanev](https://blog.georgi-yanev.com) ([source](https://github.com/jumpalottahigh/blog.georgi-yanev.com)) +* [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/) @@ -70,15 +94,22 @@ Websites built with Gatsby: * [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)) +* [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) ([source](https://github.com/api-platform/website)) -* [Bottender Docs](https://bottender.js.org/) ([source](https://github.com/bottenderjs/bottenderjs.github.io)) -* [How to GraphQL](https://www.howtographql.com/) ([source](https://github.com/howtographql/howtographql)) -* [greglobinski.com](https://greglobinski.com) ([source](https://github.com/greglobinski/greglobinski-com)) +* [API Platform](https://api-platform.com) + ([source](https://github.com/api-platform/website)) +* [Bottender Docs](https://bottender.js.org/) + ([source](https://github.com/bottenderjs/bottenderjs.github.io)) +* [How to GraphQL](https://www.howtographql.com/) + ([source](https://github.com/howtographql/howtographql)) +* [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)) -* [hunterchang.com](https://hunterchang.com) ([source](https://github.com/ChangoMan/hc-gatsby)) -* [YouFoundRon.com](https://youfoundron.com) ([source](https://github.com/rongierlach/yfr-dot-com)) +* [hunterchang.com](https://hunterchang.com) + ([source](https://github.com/ChangoMan/hc-gatsby)) +* [YouFoundRon.com](https://youfoundron.com) + ([source](https://github.com/rongierlach/yfr-dot-com)) ## Docs @@ -90,15 +121,19 @@ Websites built with Gatsby: ## Packages -This repository is a monorepo managed using [Lerna](https://github.com/lerna/lerna). This means that we publish [many packages](/packages) to NPM from the same codebase. +This repository is a monorepo managed using +[Lerna](https://github.com/lerna/lerna). This means that we publish +[many packages](/packages) to NPM from the same codebase. ## Thanks -Thanks to our many contributors and sponsors as well as the companies sponsoring our testing and hosting infrastructure, Travis CI, Appveyor, and Netlify. +Thanks to our many contributors and sponsors as well as the companies sponsoring +our testing and hosting infrastructure, Travis CI, Appveyor, and Netlify. ## Backers -Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/gatsby#backer)] +Support us with a monthly donation and help us continue our activities. +[[Become a backer](https://opencollective.com/gatsby#backer)] @@ -131,10 +166,10 @@ Support us with a monthly donation and help us continue our activities. [[Become - ## Sponsors -Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/gatsby#sponsor)] +Become a sponsor and get your logo on our README on GitHub with a link to your +site. [[Become a sponsor](https://opencollective.com/gatsby#sponsor)] diff --git a/docs/README.md b/docs/README.md index 047633ed18c9e..61e01bafb00cf 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,5 +1,7 @@ # Read docs at https://www.gatsbyjs.org/docs -We intend the docs to be read on gatsbyjs.org — you can read them here of course :-) just be warned that links won't often work and other things will be missing or less than optimal. +We intend the docs to be read on gatsbyjs.org — you can read them here of course +:-) just be warned that links won't often work and other things will be missing +or less than optimal. Go forth and build cool stuff. 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 8c66d48baf580..80b183694e363 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 @@ -5,55 +5,53 @@ author: "Kyle Mathews" image: 'ui-and-code.png' draft: true --- -Imagine for a moment the perfect website framework. One that produced -really fast sites by default, that let you use the latest web tools and -browser features without complicated setup, and that helped your team -stay coordinated as you develop, ship, and maintain sites. + +Imagine for a moment the perfect website framework. One that produced really +fast sites by default, that let you use the latest web tools and browser +features without complicated setup, and that helped your team stay coordinated +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 web-apps. -* **simple**, not requiring any setup to start using and with thoughtful -APIs to extend the framework. +* **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 + extend the framework. * **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 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 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 new features is easy and complexity is contained. -* **internet scale**, launch your site to millions without crashing your -site (or your wallet). + 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 + 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 + 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 + new features is easy and complexity is contained. +* **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. -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 variety of sites, I'm confident that Gatsby works. +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 +variety of sites, I'm confident that Gatsby works. -Since I open sourced Gatsby in 2015, it's collected over **8000 stars** -on GitHub (by far the most stars on GitHub for a project of its type), -been joined by **122 contributors**, and **downloaded 130,000** times! +Since I open sourced Gatsby in 2015, it's collected over **8000 stars** on +GitHub (by far the most stars on GitHub for a project of its type), been joined +by **122 contributors**, and **downloaded 130,000** times! -In mid-2016, I decided to [work full-time on -Gatsby](https://www.bricolage.io/gatsby-open-source-work/) and started -researching and prototyping ideas that are now coming together as Gatsby -1.0. +In mid-2016, I decided to +[work full-time on Gatsby](https://www.bricolage.io/gatsby-open-source-work/) +and started researching and prototyping ideas that are now coming together as +Gatsby 1.0. ## What is Gatsby -Gatsby combines the fast performance of static websites with the -powerful abstractions, excellent tools, and client capabilities of -the web-app world. +Gatsby combines the fast performance of static websites with the powerful +abstractions, excellent tools, and client capabilities of the web-app world. -It is a general purpose data-centric web framework that is [successfully -being used for a wide variety of -sites](https://github.com/gatsbyjs/gatsby#sites-built-with-gatsby) +It is a general purpose data-centric web framework that is +[successfully being used for a wide variety of sites](https://github.com/gatsbyjs/gatsby#sites-built-with-gatsby) including blogs, marketing sites, documentation sites, and e-commerce. It wraps three of the most popular web app tools into a cohesive website @@ -63,109 +61,103 @@ framework: * [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 generators and the powerful hot-reloading environment of -the React world. +While designing Gatsby, I wanted a synthesis of two of my favorite developer +experiences. The simplicity of building sites with markdown and static site +generators and the powerful hot-reloading environment of the React world. ![Gatsby development experience](https://camo.githubusercontent.com/0506699aaaae2f9772cc381b92f2aa5e14eba296/687474703a2f2f7a697070792e6766796361742e636f6d2f556c74696d6174655765656b6c7942617265626972646261742e676966) -When loading a page in a Gatsby site, browsers first load the page's -pre-built HTML file and then load the minimum JavaScript needed to make -that page interactive. +When loading a page in a Gatsby site, browsers first load the page's pre-built +HTML file and then load the minimum JavaScript needed to make that page +interactive. -Because Gatsby sites are just static files, you're ensured a much more -*carefree deployment*. There are no *complicated databases* to install -and maintain and *web-servers to scale* and protect against hacking. +Because Gatsby sites are just static files, you're ensured a much more _carefree +deployment_. There are no _complicated databases_ to install and maintain and +_web-servers to scale_ and protect against hacking. -Serving static files ensures consistent *super fast load times*. Once -your site is loaded, Gatsby automatically *pre-fetches* adjacent pages. -This means navigating around your site feels *instantaneous* as all the -content and scripts for the next page has been loaded already. Since -you're reading this on a Gatsby site, try clicking on a link in the -header and then click back (note, this site is still being worked on as we -approach 1.0). A bit faster than your current site no? 😜 +Serving static files ensures consistent _super fast load times_. Once your site +is loaded, Gatsby automatically _pre-fetches_ adjacent pages. This means +navigating around your site feels _instantaneous_ as all the content and scripts +for the next page has been loaded already. Since you're reading this on a Gatsby +site, try clicking on a link in the header and then click back (note, this site +is still being worked on as we approach 1.0). A bit faster than your current +site no? 😜 ## Apps vs sites -From nearly the beginning of the web, the idea of the web as an -application platform has competed with the idea of the web as a series -of "documents". +From nearly the beginning of the web, the idea of the web as an application +platform has competed with the idea of the web as a series of "documents". -In recent years, the "app" paradigm has gained steam as dozens of -JavaScript frameworks and other JavaScript tools have been released, -exploring ideas and competing for mind-share. +In recent years, the "app" paradigm has gained steam as dozens of JavaScript +frameworks and other JavaScript tools have been released, exploring ideas and +competing for mind-share. -100s of millions of dollars have been invested by the largest companies -in the world in these JavaScript frameworks and the larger ecosystem of -tools surrounding them. +100s of millions of dollars have been invested by the largest companies in the +world in these JavaScript frameworks and the larger ecosystem of tools +surrounding them. -The improvement has been dramatic and exhilarating. I can remember many -things I struggled for weeks to build in ~2010-2013 that took me days or -even hours once I'd adopted React. +The improvement has been dramatic and exhilarating. I can remember many things I +struggled for weeks to build in ~2010-2013 that took me days or even hours once +I'd adopted React. -React has taken over the web world and for good reason. Its three big -ideas, composable components, lifecycle APIs, and one-way data flow -dramatically *simplify* web UI development. Things that are really hard -to build within other paradigms feel almost easy with React. +React has taken over the web world and for good reason. Its three big ideas, +composable components, lifecycle APIs, and one-way data flow dramatically +_simplify_ web UI development. Things that are really hard to build within other +paradigms feel almost easy with React. ## Time for a JavaScript web framework? -The internet runs on Open Source CMSs—primarily Wordpress and Drupal. I -spent most of college building Drupal websites and writing [open-source -Drupal -modules](https://www.bricolage.io/first-beta-release-drupal-native-mailinglist-module/). -My first startup job was at [Pantheon](https://pantheon.io)—where I -helped [design and build developer tools](https://www.bricolage.io/new-beginnings/) -for teams building Drupal & Wordpress sites. +The internet runs on Open Source CMSs—primarily Wordpress and Drupal. I spent +most of college building Drupal websites and writing +[open-source Drupal modules](https://www.bricolage.io/first-beta-release-drupal-native-mailinglist-module/). +My first startup job was at [Pantheon](https://pantheon.io)—where I helped +[design and build developer tools](https://www.bricolage.io/new-beginnings/) for +teams building Drupal & Wordpress sites. -These open source CMSs are *extraordinary tools and have remarkably dynamic -ecosystems*. They truly run the web. Wordpress alone runs more than 25% -of all websites on the internet! +These open source CMSs are _extraordinary tools and have remarkably dynamic +ecosystems_. They truly run the web. Wordpress alone runs more than 25% of all +websites on the internet! But still, the time seems ripe for a client-centric web framework. -As more and more sites are expected to become app-like there's been a -*rush to add more JavaScript into our sites* resulting in an explosion of -tool complexity resulting in, at times, poorly optimized sites that ship -far too much JavaScript at the wrong times bogging down the site. +As more and more sites are expected to become app-like there's been a _rush to +add more JavaScript into our sites_ resulting in an explosion of tool complexity +resulting in, at times, poorly optimized sites that ship far too much JavaScript +at the wrong times bogging down the site. -But it doesn't need to be this way. We use web frameworks because they -*embed smart ideas about how to organize our code* so we're guided towards -building fast sites that are simple to build and maintain. +But it doesn't need to be this way. We use web frameworks because they _embed +smart ideas about how to organize our code_ so we're guided towards building +fast sites that are simple to build and maintain. -Gatsby aims to be a *modern web framework* that's designed with the -assumption that you need a rich client. Gatsby bakes in modern -JavaScript compiler and bundling tools along with a full asset pipeline -so you can just start writing your website and *be confident things will -work*. +Gatsby aims to be a _modern web framework_ that's designed with the assumption +that you need a rich client. Gatsby bakes in modern JavaScript compiler and +bundling tools along with a full asset pipeline so you can just start writing +your website and _be confident things will work_. ## Gatsby 1.0: Setting the foundation for a modern JavaScript website framework -I started working on the [1.0 -branch](https://github.com/gatsbyjs/gatsby/tree/1.0) in August and after +I started working on the +[1.0 branch](https://github.com/gatsbyjs/gatsby/tree/1.0) in August and after months of hard work, our first beta release is in sight. The changes for 1.0 can be organized into a few areas. ### Add service worker and offline support -Service workers are perhaps the most exciting technology that's come to -the web in the past several years. It makes possible (finally!) -sophisticated client caching plus true offline support. I've added -excellent on-by-default support to Gatsby for Service Workers and a -great offline experience. If you're using Chrome or Firefox, this site -loads offline! *Service workers make your site much more resilient -against bad networks*. If someone loads your site on a train and goes -through a tunnel, you won't lose them as they'll still be able to keep +Service workers are perhaps the most exciting technology that's come to the web +in the past several years. It makes possible (finally!) sophisticated client +caching plus true offline support. I've added excellent on-by-default support to +Gatsby for Service Workers and a great offline experience. If you're using +Chrome or Firefox, this site loads offline! _Service workers make your site much +more resilient against bad networks_. If someone loads your site on a train and +goes through a tunnel, you won't lose them as they'll still be able to keep clicking around. ### Route-based code splitting -Many sites generate one JavaScript bundle for the *entire* site. Which -means someone loading your frontpage loads far more code than is -necessary. +Many sites generate one JavaScript bundle for the _entire_ site. Which means +someone loading your frontpage loads far more code than is necessary. Gatsby 1.0 only loads the scripts necessary for the page you're on. As you navigate around, Gatsby loads the JavaScript needed for each route. @@ -179,67 +171,63 @@ import threejs from "react-threejs" ...won't affect the performance of the rest of the site. -This is particularly helpful for teams of people collaborating on a site -with pages with very different technical and business requirements. -Different parts of the site can evolve independently of each other. +This is particularly helpful for teams of people collaborating on a site with +pages with very different technical and business requirements. Different parts +of the site can evolve independently of each other. -One client I'm working with on Gatsby 1.0 (a stealth startup in San -Francisco) is using Gatsby to build both their marketing site *and* SaaS -app within the *same Gatsby codebase*. +One client I'm working with on Gatsby 1.0 (a stealth startup in San Francisco) +is using Gatsby to build both their marketing site _and_ SaaS app within the +_same Gatsby codebase_. -The marketing pages of their site are built using markdown and React -components along with a modern css-in-js library -[Glamor](https://github.com/threepointone/glamor) for styling. -The SaaS portion uses [Redux](http://redux.js.org/) to communicate with -their Django API. +The marketing pages of their site are built using markdown and React components +along with a modern css-in-js library +[Glamor](https://github.com/threepointone/glamor) for styling. The SaaS portion +uses [Redux](http://redux.js.org/) to communicate with their Django API. -The marketing portion of the site loads quickly with minimal JavaScript. -When a potential customer goes to sign-up for the app, there's no -*awkward jump from the marketing website to the web app*—just a simple -page change which seamlessly loads in the needed JavaScript. The *team -is sharing components and styles across the site* without stepping on -each others shoes as they rapidly iterate on features. +The marketing portion of the site loads quickly with minimal JavaScript. When a +potential customer goes to sign-up for the app, there's no *awkward jump from +the marketing website to the web app*—just a simple page change which seamlessly +loads in the needed JavaScript. The _team is sharing components and styles +across the site_ without stepping on each others shoes as they rapidly iterate +on features. ### Plugin and Theme systems -Wordpress & Jekyll are both great examples of open source communities -with robust theme & plugins ecosystems. +Wordpress & Jekyll are both great examples of open source communities with +robust theme & plugins ecosystems. -Themes and plugins help accelerate building as you can build on what -others have done and help collaborate with others on basic building -blocks +Themes and plugins help accelerate building as you can build on what others have +done and help collaborate with others on basic building blocks Gatsby 1.0 will be adding plugin and theme support. -The plugin system will let you hook into lifecycle APIs from events -during the bootstrap and build processes and in the browser. +The plugin system will let you hook into lifecycle APIs from events during the +bootstrap and build processes and in the browser. There are a [number of official Gatsby plugins](/docs/plugins/) already -built—all distributed as separate NPM packages. It'll be easy to create -your own plugins for internal projects and as open source projects -published on NPM. +built—all distributed as separate NPM packages. It'll be easy to create your own +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 -[Preact](https://preactjs.com/) and [Inferno](https://infernojs.org/) + [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! Plugins also drive the new GraphQL data processing layer. -The final pieces for theme support are coming soon. Gatsby's theme system -will have some unique properties. You'll be able to add multiple themes -to a site. So you could start a site with a "blog" theme and later add -on a "portfolio" theme. Themes will also be able to *compose* other -themes. So a large organization could have a standard "base" theme and -then individual departments could extend the base theme to meet their -specific requirements. +The final pieces for theme support are coming soon. Gatsby's theme system will +have some unique properties. You'll be able to add multiple themes to a site. So +you could start a site with a "blog" theme and later add on a "portfolio" theme. +Themes will also be able to _compose_ other themes. So a large organization +could have a standard "base" theme and then individual departments could extend +the base theme to meet their specific requirements. -Themes (like plugins) will be published on NPM. So soon, starting a new -Gatsby blog will be as simple as: +Themes (like plugins) will be published on NPM. So soon, starting a new Gatsby +blog will be as simple as: ```bash npm install --save gatsby-super-cool-theme @@ -248,36 +236,32 @@ gatsby build --theme gatsby-super-cool-theme ### GraphQL data layer -Currently data in Gatsby (like pretty much every static site generator) -is processed then *pushed* into templates to be rendered into HTML. This -is a simple pattern and works great for many use cases. But when you -start working on more complex sites, you really start to miss the -flexibility of building a database-driven site. With a database, all -your data is available to query against in any fashion you'd like. -Whatever bits of data you need to assemble a page, you can *pull* in. -You want to create author pages showing their bio and last 5 posts? It's -just a query away. - -I wanted this same flexibility for Gatsby. So for 1.0, I've built a new -data processing layer which converts your static data files (or any -other data source) into a *GraphQL schema* which you can query against -like a database. - -Every Gatsby page or page template can have a GraphQL query which tells -Gatsby what data is required for that page. The data layer runs the -GraphQL queries during development and at build time and writes out a -JSON file with the result of the query. This JSON file is then injected -into the React component as props. - -Because we know at build-time what data is needed for every page, we can -easily pre-fetch page data meaning even very complex, data-heavy pages -load almost instantly. - -This pattern of *colocating* your queries next to your views is copied -from the [Relay data framework from -Facebook](https://facebook.github.io/relay/). Colocaton makes it easy to -fully understand your views as everything necessary for that view -is fully described there. +Currently data in Gatsby (like pretty much every static site generator) is +processed then _pushed_ into templates to be rendered into HTML. This is a +simple pattern and works great for many use cases. But when you start working on +more complex sites, you really start to miss the flexibility of building a +database-driven site. With a database, all your data is available to query +against in any fashion you'd like. Whatever bits of data you need to assemble a +page, you can _pull_ in. You want to create author pages showing their bio and +last 5 posts? It's just a query away. + +I wanted this same flexibility for Gatsby. So for 1.0, I've built a new data +processing layer which converts your static data files (or any other data +source) into a _GraphQL schema_ which you can query against like a database. + +Every Gatsby page or page template can have a GraphQL query which tells Gatsby +what data is required for that page. The data layer runs the GraphQL queries +during development and at build time and writes out a JSON file with the result +of the query. This JSON file is then injected into the React component as props. + +Because we know at build-time what data is needed for every page, we can easily +pre-fetch page data meaning even very complex, data-heavy pages load almost +instantly. + +This pattern of _colocating_ your queries next to your views is copied from the +[Relay data framework from Facebook](https://facebook.github.io/relay/). +Colocaton makes it easy to fully understand your views as everything necessary +for that view is fully described there. A simple example of how this works in practice. @@ -292,17 +276,16 @@ date: "2017-02-23" This is my sweet blog post. **Cool!** ``` -In our site, we would write a React component which acts as a template -for all the blog posts. Included with the component is an exported -`pageQuery`. +In our site, we would write a React component which acts as a template for all +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" class BlogPostTemplate extends React.Component { - render () { -
+ render() { + ;

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

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

{post.frontmatter.title}

-
+
- ); + ) } ``` -Whoa, neat! This React component will be rendered to a static HTML string (for each route/blog post we define), which will serve as the basis of our routing/navigation for our blog. +Whoa, neat! This React component will be rendered to a static HTML string (for +each route/blog post we define), which will serve as the basis of our +routing/navigation for our blog. -At this point, there is a reasonable level of confusion and "magic" occuring, particularly with the props injection. What is `markdownRemark`? Where is this `data` prop injected from? All good questions, so let's answer them by writing a GraphQL query to seed our `