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 a795bf4692a10..518296b179b6c 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -26,10 +26,10 @@ about: Usage question or discussion about Gatsby. ### Environment (if relevant) -- Gatsby version (`npm list gatsby`): -- gatsby-cli version (`gatsby --version`): -- Node.js version: -- Operating System: + ### File contents (if changed) 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 284ce8eb86e84..22a68a523cbde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -529,7 +529,7 @@ export const pageQuery = ` } } } -`; +` ``` You must now write: @@ -545,7 +545,7 @@ export const pageQuery = graphql` } } } -`; +` ``` ## [1.0.0-alpha10] - 2016-11-17 diff --git a/README.md b/README.md index 110e4adbc1d3c..98dafa2b14203 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,27 @@ 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 @@ -235,6 +253,8 @@ Websites built with Gatsby: **[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 0090b425321c4..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 @@ -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. @@ -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-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md index 955a84266bec5..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 @@ -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 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 06fbc2b65bf31..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 @@ -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,7 +329,7 @@ export const pageQuery = graphql` } } } -`; +` ``` This is a simplified example, but there are a few things going on that might not @@ -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,16 +565,16 @@ 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 @@ -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 @@ -672,11 +672,11 @@ 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 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 5ace5c46cf69a..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 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 d847b69394a9e..f5b857147056d 100644 --- a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md +++ b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md @@ -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 9586bc49f1916..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 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/2018-01-22-getting-started-gatsby-and-wordpress/index.md b/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md index 3c3cbbaccf3fd..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,7 +29,7 @@ module.exports = { title: "Gatsby Default Starter", }, plugins: ["gatsby-plugin-react-helmet"], -}; +} ``` See the [docs page on gatsby-config.js](/docs/gatsby-config/) for more. @@ -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-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 4a7d9fa7f25c6..4595007104e15 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 @@ -119,29 +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 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 (

@@ -361,20 +361,20 @@ That looks fine, but at this point, Gatsby does not know when this template shou Path: `gatsby-node.js` ```javascript -const _ = require("lodash"); -const Promise = require("bluebird"); -const path = require("path"); +const _ = require("lodash") +const Promise = require("bluebird") +const path = require("path") exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators; - const indexPage = path.resolve("./src/pages/index.js"); + const { createPage } = boundActionCreators + const indexPage = path.resolve("./src/pages/index.js") createPage({ path: `posts`, component: indexPage, }); return new Promise((resolve, reject) => { - const blogPost = path.resolve("./src/templates/blog-post.js"); + const blogPost = path.resolve("./src/templates/blog-post.js") resolve( graphql( ` @@ -399,12 +399,11 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } // Create blog posts pages. - const posts = result.data.allCosmicjsPosts.edges; + const posts = result.data.allCosmicjsPosts.edges _.each(posts, (post, index) => { - const next = - index === posts.length - 1 ? null : posts[index + 1].node; - const previous = index === 0 ? null : posts[index - 1].node; + const next = index === posts.length - 1 ? null : posts[index + 1].node + const previous = index === 0 ? null : posts[index - 1].node createPage({ path: `posts/${post.node.slug}`, diff --git a/docs/blog/2018-1-18-strapi-and-gatsby/index.md b/docs/blog/2018-1-18-strapi-and-gatsby/index.md index c101ee570c283..deaf2f9e039ed 100644 --- a/docs/blog/2018-1-18-strapi-and-gatsby/index.md +++ b/docs/blog/2018-1-18-strapi-and-gatsby/index.md @@ -200,7 +200,7 @@ module.exports = { }, }, ], -}; +} ``` Then, restart the server to let Gatsby consider these updates. @@ -212,8 +212,8 @@ First, we want to display the list of articles. To do so, add the following cont _Path: `src/pages/index.js`_ ```jsx -import React from "react"; -import Link from "gatsby-link"; +import React from "react" +import { Link } from "gatsby" const IndexPage = ({ data }) => (
@@ -232,9 +232,9 @@ const IndexPage = ({ data }) => ( Go to page 2
-); +) -export default IndexPage; +export default IndexPage export const pageQuery = graphql` query IndexQuery { @@ -248,7 +248,7 @@ export const pageQuery = graphql` } } } -`; +` ``` #### What are we doing here? @@ -272,8 +272,8 @@ Let's create the template, containing a specific GraphQL request and defining th _Path: `src/templates/article.js`_ ```jsx -import React from "react"; -import Link from "gatsby-link"; +import React from "react" +import { Link } from "gatsby" const ArticleTemplate = ({ data }) => (
@@ -286,9 +286,9 @@ const ArticleTemplate = ({ data }) => (

{data.strapiArticle.content}

-); +) -export default ArticleTemplate; +export default ArticleTemplate export const query = graphql` query ArticleTemplate($id: String!) { @@ -301,7 +301,7 @@ export const query = graphql` } } } -`; +` ``` That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each article needs a specific URL. So, we are going to inform Gatsby about the new URLs we need thanks to the [`createPage` function](https://www.gatsbyjs.org/docs/creating-and-modifying-pages). @@ -311,7 +311,7 @@ First, we are going to code a new function called `makeRequest` to execute the G _Path: `gatsby-node.js`_ ```jsx -const path = require(`path`); +const path = require(`path`) const makeRequest = (graphql, request) => new Promise((resolve, reject) => { @@ -319,18 +319,18 @@ const makeRequest = (graphql, request) => resolve( graphql(request).then(result => { if (result.errors) { - reject(result.errors); + reject(result.errors) } - return result; + return result }) - ); - }); + ) + }) // Implement the Gatsby API “createPages”. This is called once the // data layer is bootstrapped to let plugins create pages from data. exports.createPages = ({ boundActionCreators, graphql }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators const getArticles = makeRequest( graphql, @@ -354,13 +354,13 @@ exports.createPages = ({ boundActionCreators, graphql }) => { context: { id: node.id, }, - }); - }); - }); + }) + }) + }) // Query for articles nodes to use in creating pages. - return getArticles; -}; + return getArticles +} ``` Restart the Gatsby server. @@ -378,8 +378,8 @@ The processes for creating author views and article pages are very similar. Firs _Path: `src/templates/user.js`_ ```jsx -import React from "react"; -import Link from "gatsby-link"; +import React from "react" +import { Link } from "gatsby" const UserTemplate = ({ data }) => (
@@ -395,9 +395,9 @@ const UserTemplate = ({ data }) => ( ))}
-); +) -export default UserTemplate; +export default UserTemplate export const query = graphql` query UserTemplate($id: String!) { @@ -411,7 +411,7 @@ export const query = graphql` } } } -`; +` ``` Second, we update the `gatsby-node.js` file to create the URLs: @@ -419,7 +419,7 @@ Second, we update the `gatsby-node.js` file to create the URLs: _Path: `gatsby-node.js`_ ```jsx -const path = require(`path`); +const path = require(`path`) const makeRequest = (graphql, request) => new Promise((resolve, reject) => { @@ -427,18 +427,18 @@ const makeRequest = (graphql, request) => resolve( graphql(request).then(result => { if (result.errors) { - reject(result.errors); + reject(result.errors) } - return result; + return result }) - ); - }); + ) + }) // Implement the Gatsby API “createPages”. This is called once the // data layer is bootstrapped to let plugins create pages from data. exports.createPages = ({ boundActionCreators, graphql }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators const getArticles = makeRequest( graphql, @@ -462,9 +462,9 @@ exports.createPages = ({ boundActionCreators, graphql }) => { context: { id: node.id, }, - }); - }); - }); + }) + }) + }) const getAuthors = makeRequest( graphql, @@ -488,13 +488,13 @@ exports.createPages = ({ boundActionCreators, graphql }) => { context: { id: node.id, }, - }); - }); - }); + }) + }) + }) // Queries for articles and authors nodes to use in creating pages. - return Promise.all([getArticles, getAuthors]); -}; + return Promise.all([getArticles, getAuthors]) +} ``` Finally, restart the server and visit the author page from the article view's links. diff --git a/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md b/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md index 95a447a4c0189..de5d10c68bbf7 100644 --- a/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md +++ b/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md @@ -80,7 +80,7 @@ module.exports = { `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, ], -}; +} ``` ## Creating pages and GraphQL queries @@ -115,14 +115,14 @@ Here is one of the first pages I rendered into a table format: Here are more examples of pages I created. This is the photo gallery page: ```jsx -import React from "react"; +import React from "react" export default ({ data }) => { - console.log(data); + console.log(data) // The next line is where the code drills deeper into the data structure to finally get to photos. // In order to create the correct order here, follow the structure of the GraphQL query. - const photos = data.allContentfulPhotoGallery.edges[0].node.photos; - console.log(photos); + const photos = data.allContentfulPhotoGallery.edges[0].node.photos + console.log(photos) return (
@@ -141,8 +141,8 @@ export default ({ data }) => {
))}

- ); -}; + ) +} export const query = graphql` query PhotoQuery { @@ -159,7 +159,7 @@ query PhotoQuery { } } } - }`; + }` ``` ## More complex pages @@ -169,12 +169,12 @@ The list of Tricks & Commands presented a complex challenge because not all entr Because each entry was inconsistent, my friends helped me figure out a way to use JS to make sure we only requested a photo to be printed IF the photo existed. And if a particular entry didn't have a photo, the computer could forgive it (just this once). Here is the code from that page: ```jsx -import React from "react"; +import React from "react" export default ({ data }) => { - const tricks = data.allContentfulTricksCommands.edges; - console.log(tricks); - console.log(data); + const tricks = data.allContentfulTricksCommands.edges + console.log(tricks) + console.log(data) return (
@@ -198,8 +198,8 @@ export default ({ data }) => {
))}
- ); -}; + ) +} export const query = graphql` query CommandsQuery { @@ -224,7 +224,7 @@ export const query = graphql` } } } -`; +` ``` ## Final thoughts diff --git a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md index be38ae3ab9388..4e2d436727ba8 100644 --- a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md +++ b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md @@ -51,7 +51,7 @@ For example, I defined a `PostTemplate` which will be used to render pages for a ```jsx // src/templates/Post.jsx -import React from "react"; +import React from "react" export default function PostTemplate({ data: { @@ -67,7 +67,7 @@ export default function PostTemplate({ {date}
- ); + ) } export const pageQuery = graphql` @@ -80,7 +80,7 @@ export const pageQuery = graphql` } } } -`; +` ``` When the `` component needs to be rendered into a page, the accompanying exported `pageQuery`, a GraphQL query is made, and the results are passed in as props into the component. diff --git a/docs/blog/gatsby-v1.md b/docs/blog/gatsby-v1.md index 2e6162c085f20..5f9d05cf08061 100644 --- a/docs/blog/gatsby-v1.md +++ b/docs/blog/gatsby-v1.md @@ -162,7 +162,7 @@ the blog posts. Included with the component is an exported `pageQuery`. ```jsx // A basic React component for rendering a blog page. -import React from "react"; +import React from "react" class BlogPostTemplate extends React.Component { render() { @@ -176,11 +176,11 @@ class BlogPostTemplate extends React.Component { }} />
- ); + ) } } -export default BlogPostTemplate; +export default BlogPostTemplate export const pageQuery = graphql` query BlogPost($slug: String!) { @@ -194,7 +194,7 @@ export const pageQuery = graphql` } } } -`; +` ``` All data sourcing and transforming is plugin-driven. So in time, any imaginable @@ -276,8 +276,8 @@ you navigate around, Gatsby loads in the code 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. diff --git a/docs/blog/gatsbygram-case-study/index.md b/docs/blog/gatsbygram-case-study/index.md index b79aaa7a8ec48..79fbd94d4365b 100644 --- a/docs/blog/gatsbygram-case-study/index.md +++ b/docs/blog/gatsbygram-case-study/index.md @@ -149,18 +149,18 @@ the site's [`gatsby-node.js` file](https://github.com/gatsbyjs/gatsby/blob/master/examples/gatsbygram/gatsby-node.js): ```javascript -const _ = require(`lodash`); -const Promise = require(`bluebird`); -const path = require(`path`); -const slug = require(`slug`); -const slash = require(`slash`); +const _ = require(`lodash`) +const Promise = require(`bluebird`) +const path = require(`path`) +const slug = require(`slug`) +const slash = require(`slash`) // Implement the Gatsby API “createPages”. This is // called after the Gatsby bootstrap is finished so you have // access to any information necessary to programmatically // create pages. exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators return new Promise((resolve, reject) => { // The “graphql” function allows us to run arbitrary @@ -188,11 +188,11 @@ exports.createPages = ({ graphql, boundActionCreators }) => { ` ).then(result => { if (result.errors) { - reject(new Error(result.errors)); + reject(new Error(result.errors)) } // Create image post pages. - const postTemplate = path.resolve(`src/templates/post-page.js`); + const postTemplate = path.resolve(`src/templates/post-page.js`) // We want to create a detailed page for each // Instagram post. Since the scrapped Instagram data // already includes an ID field, we just use that for @@ -211,14 +211,14 @@ exports.createPages = ({ graphql, boundActionCreators }) => { context: { id: edge.node.id, }, - }); - }); + }) + }) - return; + return }) - ); - }); -}; + ) + }) +} ``` ## Using templates @@ -237,8 +237,8 @@ we pass the id to the post. Below we use that id to query our `GraphQL` schema and return a fully formed page: ```jsx -import React from "react"; -import PostDetail from "../components/post-detail"; +import React from "react" +import PostDetail from "../components/post-detail" class PostTemplate extends React.Component { render() { @@ -246,11 +246,11 @@ class PostTemplate extends React.Component { // PostDetail is used for this detail page and // also in the modal. - ); + ) } } -export default PostTemplate; +export default PostTemplate // The post template's GraphQL query. Notice the “id” // variable which is passed in. We set this on the page @@ -282,7 +282,7 @@ export const pageQuery = ` # thumbnails are created. This makes iterating on # designs effortless as we simply change the args # for the query and we get new thumbnails. - big: sizes(maxWidth: 640) { + big: fluid(maxWidth: 640) { src srcSet } @@ -291,7 +291,7 @@ export const pageQuery = ` } } } -`; +` ``` ## Creating React.js component pages @@ -328,8 +328,8 @@ loading your site from a service worker. A small layout component might look something like this. ```jsx -import React from "react"; -import Link from "gatsby-link"; +import React from "react" +import { Link } from "gatsby" class Layout extends React.Component { render() { @@ -340,11 +340,11 @@ class Layout extends React.Component { {/* Render children pages */} {this.props.children()} - ); + ) } } -export default Layout; +export default Layout ``` Every page will be rendered as children of the `Layout` component: @@ -374,7 +374,7 @@ generates all the configuration for you. Normally page resources are pre-cached with a service worker. But as several browsers (Safari/Microsoft Edge) still don't support Service Workers, the -[Gatsby `` component](/packages/gatsby-link/) pre-caches resources for +[Gatsby `` component](/packages/gatsby/) pre-caches resources for pages it links to by loading them into memory. ## Plugins @@ -459,7 +459,7 @@ module.exports = { }, }, ], -}; +} ``` ## Styles diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md index f6a69d2fc5f61..02d9886149b20 100644 --- a/docs/docs/add-custom-webpack-config.md +++ b/docs/docs/add-custom-webpack-config.md @@ -1,20 +1,20 @@ --- -title: "Add Custom webpack Config" +title: "Add custom webpack config" --- _Before creating custom webpack configuration, check to see if there's a Gatsby plugin already built that handles your use case in the [plugins section](/docs/plugins/). If there's not yet one and your use case is a general one, we highly encourage you to contribute back your plugin to the -Gatsby repo so it's available to others (including your future self 😀)._ +Gatsby Plugin Library so it's available to others (including your future self 😀)._ To add custom webpack configurations, create (if there's not one already) a `gatsby-node.js` file in your root directory. Inside this file, export a -function called `modifyWebpackConfig`. +function called `onCreateWebpackConfig`. When Gatsby creates its webpack config, this function will be called allowing you to modify the default webpack config using -[webpack-configurator](https://github.com/lewie9021/webpack-configurator). +[webpack-merge](https://github.com/survivejs/webpack-merge). Gatsby does multiple webpack builds with somewhat different configuration. We call each build type a "stage". The following stages exist: @@ -23,10 +23,9 @@ call each build type a "stage". The following stages exist: reloading and CSS injection into page 2. develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component. -3. build-css: production build of CSS +3. build-javascript: production JavaScript and CSS build. Creates route JS bundles as well + as commons chunks for JS and CSS. 4. build-html: production build static HTML pages -5. build-javascript: production JavaScript build. Creates route bundles as well - as a `commons` and `app bundle`. Check [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) @@ -37,71 +36,62 @@ e.g. [Sass](/packages/gatsby-plugin-sass/), [Typescript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/), and many more! -## Modifying the babel loader +## Examples -Manually allow tweaking of include + exclude of babel loader. - -```javascript -const generateBabelConfig = require("gatsby/dist/utils/babel-config"); - -exports.modifyWebpackConfig = ({ config, stage }) => { - const program = { - directory: __dirname, - browserslist: ["> 1%", "last 2 versions", "IE >= 9"], - }; - - return generateBabelConfig(program, stage).then(babelConfig => { - config.removeLoader("js").loader("js", { - test: /\.jsx?$/, - exclude: modulePath => { - return ( - /node_modules/.test(modulePath) && - !/node_modules\/(swiper|dom7)/.test(modulePath) - ); - }, - loader: "babel", - query: babelConfig, - }); - }); -}; -``` - -## Example +### Flexboxgrid Here is an example that configures **flexboxgrid** when processing css files. Add this in `gatsby-node.js`: ```js -exports.modifyWebpackConfig = ({ config, stage }) => { - switch (stage) { - case "develop": - config.loader("css", { - include: /flexboxgrid/, - }); - - break; - - case "build-css": - config.loader("css", { - include: /flexboxgrid/, - }); - - break; - - case "build-html": - config.loader("css", { - include: /flexboxgrid/, - }); - - break; +exports.onCreateWebpackConfig = ({ + stage, + rules, + loaders, + plugins, + actions, +}) => { + actions.setWebpackConfig({ + module: { + rules: [ + { + test: /\.less$/, + // We don't need to add the matching ExtractText plugin + // because gatsby already includes it and makes sure its only + // run at the appropriate stages, e.g. not in development + use: plugins.extractText.extract({ + fallback: loaders.style(), + use: [ + loaders.css({ importLoaders: 1 }), + // the postcss loader comes with some nice defaults + // including autoprefixer for our configured browsers + loaders.postcss(), + `less-loader`, + ], + }), + }, + ], + }, + plugins: [ + plugins.define({ + __DEVELOPMENT__: stage === `develop` || stage === `develop-html`, + }), + ], + }) +} +``` - case "build-javascript": - config.loader("css", { - include: /flexboxgrid/, - }); +### Absolute imports - break; - } +Instead of writing `import Header from '../../components/Header'` over and over again you can just write `import Header from 'components/Header'` with absolute imports: - return config; -}; +```js +exports.onCreateWebpackConfig = ({ stage, actions }) => { + actions.setWebpackConfig({ + resolve: { + modules: [path.resolve(__dirname, "src"), "node_modules"], + }, + }) +} ``` + +You can always find more information on _resolve_ and other options in the offical [Webpack docs](https://webpack.js.org/concepts/). diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index d2405fdd8b0c0..bafb6509c4420 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -23,8 +23,8 @@ Has anyone heard about GatsbyJS yet? The first step will be to create the page which will display your posts, in `src/pages/`. You can for example use `index.js`. ```jsx -import React from "react"; -import PostLink from "../components/post-link"; +import React from "react" +import PostLink from "../components/post-link" const IndexPage = ({ data: { @@ -33,12 +33,12 @@ const IndexPage = ({ }) => { const Posts = edges .filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria - .map(edge => ); + .map(edge => ) - return
{Posts}
; -}; + return
{Posts}
+} -export default IndexPage; +export default IndexPage ``` ### Creating the GraphQL query @@ -46,8 +46,8 @@ export default IndexPage; Second, you need to provide the data to your component with a GraphQL query. Let's add it, so that `index.js` looks like this: ```jsx -import React from "react"; -import PostLink from "../components/post-link"; +import React from "react" +import PostLink from "../components/post-link" const IndexPage = ({ data: { @@ -56,12 +56,12 @@ const IndexPage = ({ }) => { const Posts = edges .filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria - .map(edge => ); + .map(edge => ) - return
{Posts}
; -}; + return
{Posts}
+} -export default IndexPage; +export default IndexPage export const pageQuery = graphql` query IndexQuery { @@ -79,7 +79,7 @@ export const pageQuery = graphql` } } } -`; +` ``` ### Creating the `PostLink` component @@ -87,8 +87,8 @@ export const pageQuery = graphql` The only thing left to do is to add the `PostLink` component. Create a new file `post-link.js` in `src/components/` and add the following: ```jsx -import React from "react"; -import Link from "gatsby-link"; +import React from "react" +import Link from "gatsby-link" const PostLink = ({ post }) => (
@@ -96,9 +96,9 @@ const PostLink = ({ post }) => ( {post.frontmatter.title} ({post.frontmatter.date})
-); +) -export default PostLink; +export default PostLink ``` This should get you a page with your posts sorted by descending date. You can further customise the `frontmatter` and the page and `PostLink` components to get your desired effects! diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md index 688ad8fb85b20..ef2d93082b68e 100644 --- a/docs/docs/adding-images-fonts-files.md +++ b/docs/docs/adding-images-fonts-files.md @@ -17,17 +17,17 @@ jpeg, png, gif, mp4, webm, wav, mp3, m4a, aac, and oga. Here is an example: ```js -import React from "react"; -import logo from "./logo.png"; // Tell Webpack this JS file uses this image +import React from "react" +import logo from "./logo.png" // Tell Webpack this JS file uses this image -console.log(logo); // /logo.84287d09.png +console.log(logo) // /logo.84287d09.png function Header() { // Import result is the URL of your image - return Logo; + return Logo } -export default Header; +export default Header ``` This ensures that when the project is built, Webpack will correctly move the @@ -126,12 +126,12 @@ If you put a file into the `static` folder, it will **not** be processed by Webpack. Instead it will be copied into the public folder untouched. E.g. if you add a file named `sun.jpg` to the static folder, it'll be copied to `public/sun.jpg`. To reference assets in the `static` folder, you'll need to -[import a helper function from `gatsby-link` named `withPrefix`](/packages/gatsby-link/#prefixed-paths-helper). +[import a helper function from `gatsby` named `withPrefix`](/packages/gatsby/#prefixed-paths-helper). You will need to make sure [you set `pathPrefix` in your gatsby-config.js for this to work](/docs/path-prefix/). ```js -import { withPrefix } from 'gatsby-link' +import { withPrefix } from 'gatsby' render() { // Note: this is an escape hatch and should be used sparingly! diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 964523038e493..56539fe2c5563 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -34,7 +34,7 @@ plugins: [ name: "markdown-pages", }, }, -]; +] ``` Now that we've "sourced" the markdown files from the filesystem, we can now "transform" the markdown to HTML and the YAML frontmatter to JSON. @@ -57,7 +57,7 @@ plugins: [ }, }, `gatsby-transformer-remark`, -]; +] ``` #### Note on creating markdown files. @@ -78,13 +78,13 @@ Create a folder in the `/src` directory of your Gatsby application called `templ Now create a `blogTemplate.js` inside it with the following content. ```jsx -import React from "react"; +import React from "react" export default function Template({ data, // this prop will be injected by the GraphQL query below. }) { - const { markdownRemark } = data; // data.markdownRemark holds our post data - const { frontmatter, html } = markdownRemark; + const { markdownRemark } = data // data.markdownRemark holds our post data + const { frontmatter, html } = markdownRemark return (
@@ -96,7 +96,7 @@ export default function Template({ />
- ); + ) } export const pageQuery = graphql` @@ -110,7 +110,7 @@ export const pageQuery = graphql` } } } -`; +` ``` Two things are important in the file above. @@ -126,12 +126,12 @@ Gatsby exposes a powerful Node.js API, which allows for functionality such as cr Gatsby calls the `createPages` API (if present) at build time with injected parameters, `boundActionCreators` and `graphql`. Use the `graphql` to query Markdown file data as below. Next use `createPage` action creator to create a page for each of the Markdown files using the `blogTemplate.js` we created in the previous step. ```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/blogTemplate.js`); + const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`) return graphql(` { @@ -150,7 +150,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => { } `).then(result => { if (result.errors) { - return Promise.reject(result.errors); + return Promise.reject(result.errors) } result.data.allMarkdownRemark.edges.forEach(({ node }) => { @@ -158,10 +158,10 @@ exports.createPages = ({ boundActionCreators, graphql }) => { path: node.frontmatter.path, component: blogPostTemplate, context: {}, // additional data can be passed via context - }); - }); - }); -}; + }) + }) + }) +} ``` This should get you started on some basic markdown power in your Gatsby site. You can further customise the `frontmatter` and the template file to get desired effects! diff --git a/docs/docs/adding-search.md b/docs/docs/adding-search.md index 2df473339fc9e..4cc0a3e886ca2 100644 --- a/docs/docs/adding-search.md +++ b/docs/docs/adding-search.md @@ -2,6 +2,8 @@ title: "Adding search to your Gatsby website" --- +Before we go through the steps for adding search to your Gatsby website, let's examine the components needed for adding search to a website. + There are three required components for adding search to your Gatsby website: 1. index diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 5136ef3aa3cc3..13f8c351ff88f 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -73,30 +73,30 @@ If you followed the tutorial for [Adding Markdown Pages](/docs/adding-markdown-p First, we'll add a tags template at `src/templates/tags.js`: ```jsx -import React from "react"; -import PropTypes from "prop-types"; +import React from "react" +import PropTypes from "prop-types" // Components -import Link from "gatsby-link"; +import Link from "gatsby-link" const Tags = ({ pathContext, data }) => { - const { tag } = pathContext; - const { edges, totalCount } = data.allMarkdownRemark; + const { tag } = pathContext + const { edges, totalCount } = data.allMarkdownRemark const tagHeader = `${totalCount} post${ totalCount === 1 ? "" : "s" - } tagged with "${tag}"`; + } tagged with "${tag}"` return (

{tagHeader}

    {edges.map(({ node }) => { - const { path, title } = node.frontmatter; + const { path, title } = node.frontmatter return (
  • {title}
    • - ); + ) })}
{/* @@ -105,8 +105,8 @@ const Tags = ({ pathContext, data }) => { */} All tags
- ); -}; + ) +} Tags.propTypes = { pathContext: PropTypes.shape({ @@ -127,9 +127,9 @@ Tags.propTypes = { ), }), }), -}; +} -export default Tags; +export default Tags export const pageQuery = graphql` query TagPage($tag: String) { @@ -149,7 +149,7 @@ export const pageQuery = graphql` } } } -`; +` ``` **Note**: `propTypes` are included in this example to help you ensure you're getting all the data you need in the component, and to help serve as a guide while destructuring / using those props. @@ -159,13 +159,13 @@ export const pageQuery = graphql` Now we've got a template. Great! I'll assume you followed the tutorial for [Adding Markdown Pages](/docs/adding-markdown-pages/) and provide a sample `createPages` that generates post pages as well as tag pages. In the site's `gatsby-node.js` file, include `lodash` (`const _ = require('lodash')`) and then make sure your [`createPages`](/docs/node-apis/#createPages) looks something like this: ```js -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.js"); - const tagTemplate = path.resolve("src/templates/tags.js"); + const blogPostTemplate = path.resolve("src/templates/blog.js") + const tagTemplate = path.resolve("src/templates/tags.js") return graphql(` { @@ -185,29 +185,29 @@ exports.createPages = ({ boundActionCreators, graphql }) => { } `).then(result => { if (result.errors) { - return Promise.reject(result.errors); + return Promise.reject(result.errors) } - const posts = result.data.allMarkdownRemark.edges; + const posts = result.data.allMarkdownRemark.edges // Create post detail pages posts.forEach(({ node }) => { createPage({ path: node.frontmatter.path, component: blogPostTemplate, - }); - }); + }) + }) // Tag pages: - let tags = []; + let tags = [] // Iterate through each post, putting all found tags into `tags` _.each(posts, edge => { if (_.get(edge, "node.frontmatter.tags")) { - tags = tags.concat(edge.node.frontmatter.tags); + tags = tags.concat(edge.node.frontmatter.tags) } - }); + }) // Eliminate duplicate tags - tags = _.uniq(tags); + tags = _.uniq(tags) // Make tag pages tags.forEach(tag => { @@ -217,10 +217,10 @@ exports.createPages = ({ boundActionCreators, graphql }) => { context: { tag, }, - }); - }); - }); -}; + }) + }) + }) +} ``` Some notes: @@ -233,15 +233,15 @@ Some notes: Our `/tags` page will simply list out all tags, followed by the number of posts with that tag: ```jsx -import React from "react"; -import PropTypes from "prop-types"; +import React from "react" +import PropTypes from "prop-types" // Utilities -import kebabCase from "lodash/kebabCase"; +import kebabCase from "lodash/kebabCase" // Components -import Helmet from "react-helmet"; -import Link from "gatsby-link"; +import Helmet from "react-helmet" +import Link from "gatsby-link" const TagsPage = ({ data: { @@ -266,7 +266,7 @@ const TagsPage = ({ -); +) TagsPage.propTypes = { data: PropTypes.shape({ @@ -284,9 +284,9 @@ TagsPage.propTypes = { }), }), }), -}; +} -export default TagsPage; +export default TagsPage export const pageQuery = graphql` query TagsQuery { @@ -305,7 +305,7 @@ export const pageQuery = graphql` } } } -`; +` ``` ## _(optional)_ Render tags inline with your blog posts diff --git a/docs/docs/api-proxy.md b/docs/docs/api-proxy.md index d3376bce848bc..195754561e21b 100644 --- a/docs/docs/api-proxy.md +++ b/docs/docs/api-proxy.md @@ -14,7 +14,7 @@ module.exports = { prefix: "/api", url: "http://dev-mysite.com", }, -}; +} ``` This way, when you `fetch('/api/todos')` in development, the development server @@ -31,7 +31,7 @@ Gatsby exposes the [Express.js](https://expressjs.com/) develop server to your s can add Express middleware as needed. ```javascript -var proxy = require("http-proxy-middleware"); +var proxy = require("http-proxy-middleware") module.exports = { developMiddleware: app => { @@ -43,9 +43,9 @@ module.exports = { "/.netlify/functions/": "", }, }) - ); + ) }, -}; +} ``` Keep in mind that middleware only has effect in development (with gatsby develop). diff --git a/docs/docs/api-specification.md b/docs/docs/api-specification.md index bdd0f47bca18e..d1d6b0cfeaf5b 100644 --- a/docs/docs/api-specification.md +++ b/docs/docs/api-specification.md @@ -56,9 +56,9 @@ See ## Concepts - _Page_ — a site page with a pathname, a template component, and optional - graphql query and layout component + graphql query. - _Page Component_ — React.js component that renders a page and can optionally - specify a layout component and a graphql query + specify a graphql query - _Component extensions_ — extensions that are resolvable as components. `.js` and `.jsx` are supported by core. But plugins can add support for other compile-to-js languages. diff --git a/docs/docs/babel.md b/docs/docs/babel.md new file mode 100644 index 0000000000000..c5a8cc482f418 --- /dev/null +++ b/docs/docs/babel.md @@ -0,0 +1,72 @@ +--- +title: Babel +--- + +Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable +support for writing modern JavaScript — while still supporting older browsers. + +## How to specify which browsers to support + +Gatsby supports by default the last two versions of major browsers, IE 9+, as well as +any browser that still as 1%+ browser share. + +This means we automatically compile your JavaScript to ensure it works on older browsers. +We also automatically add polyfills as needed — no more shipping code which mysteriously +breaks on older browsers! + +If you only target newer browsers, see the [Browser +Support](/docs/browser-support/) docs page for how to instruct Gatsby on which +browsers you support and then Babel will start compiling for only these +browsers. + +## How to use a custom .babelrc file + +Gatsby ships with a default .babelrc setup that should work for most sites. If you'd like +to add custom Babel presets or plugins, we recommend copying our default .bablerc below +to root of your site and modifying it per your needs. + +```json5 +{ + cacheDirectory: true, + babelrc: false, + presets: [ + [ + "@babel/preset-env", + { + loose: true, + modules: false, + useBuiltIns: "usage", + shippedProposals: true, + targets: { + browsers: [">0.25%", "not dead"], + }, + }, + ], + [ + "@babel/preset-react", + { + useBuiltIns: true, + pragma: "React.createElement", + }, + ], + "@babel/preset-flow", + ], + plugins: [ + [ + "@babel/plugin-proposal/class-properties", + { + loose: true, + }, + ], + "@babel/plugin-syntax-dynamic-import", + [ + "@babel/plugin-transform-runtime", + { + helpers: true, + regenerator: true, + polyfill: false, + }, + ], + ], +} +``` diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index 24ddad5864ee1..781d13634233c 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -9,17 +9,17 @@ browsers. ## Polyfills -Gatsby uses the ES6 Promise API. As some older browsers don't support this, -Gatsby includes by default a Promise polyfill. If you would like to provide your -own Promise polyfill, you can set `polyfill` to `false` in your -`gatsby-config.js`: +Gatsby leverages Babel 7's ability to automatically add polyfills for your +target browsers. -``` -module.exports = { - polyfill: false, - // ... -} -``` +Newer browsers support more JavaScript APIs than older browsers. For older +versions, Gatsby (via Babel) automatically adds the minimum "polyfills" +necessary for your code to work in those browsers. + +If you start using a newer JavaScript API like `[].includes` that isn't +supported by some of your targeted browsers, you won't have to worry about it +breaking the older browsers as Babel will automatically add the needed polyfill +`core-js/modules/es7.array.includes`. ## Specify what browsers your project supports using "Browserslist" @@ -39,9 +39,11 @@ By default, Gatsby emulates the following config: // package.json { "browserslist": [ - "> 1%", - "IE >= 9", - "last 2 versions" + ">0.25%", + "not dead" ] } ``` + +If you only support newer browsers then make sure to specify this in your +package.json as you'll often be able then to ship smaller JavaScript files. diff --git a/docs/docs/building-apps-with-gatsby.md b/docs/docs/building-apps-with-gatsby.md index f7ef4e70b9fca..a18cc40abc4c2 100644 --- a/docs/docs/building-apps-with-gatsby.md +++ b/docs/docs/building-apps-with-gatsby.md @@ -36,17 +36,17 @@ _Note: There's also a plugin that can aid in creating client-only routes: // Implement the Gatsby API “onCreatePage”. This is // called after every page is created. exports.onCreatePage = async ({ page, boundActionCreators }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators // page.matchPath is a special key that's used for matching pages // only on the client. if (page.path.match(/^\/app/)) { - page.matchPath = "/app/:path"; + page.matchPath = "/app/:path" // Update the page. - createPage(page); + createPage(page) } -}; +} ``` The [example site "simple auth"](https://github.com/gatsbyjs/gatsby/blob/master/examples/simple-auth/README.md) demos how to combine user authentication with restricted client-only routes. diff --git a/docs/docs/building-with-components.md b/docs/docs/building-with-components.md index a0f848b3a2398..523ec558b9c55 100644 --- a/docs/docs/building-with-components.md +++ b/docs/docs/building-with-components.md @@ -40,10 +40,7 @@ A basic directory structure of a project might look like this:    │      └── 01-03-2017    │         └── index.md    ├── templates -    │ └── post.jsx - │ - └── layouts - └── index.jsx +    └── post.jsx ``` ### Page components @@ -59,7 +56,7 @@ Example: `src/pages/about.jsx` ```jsx -import React, { Component } from "react"; +import React, { Component } from "react" class AboutPage extends Component { render() { @@ -67,11 +64,11 @@ class AboutPage extends Component {

About me.

- ); + ) } } -export default AboutPage; +export default AboutPage ``` ### Page template components @@ -88,22 +85,22 @@ introduction to programmatically creating pages. Example: ```jsx -import React from "react"; +import React from "react" class BlogPostTemplate extends React.Component { render() { - const post = this.props.data.markdownRemark; + const post = this.props.data.markdownRemark return (

{post.frontmatter.title}

- ); + ) } } -export default BlogPostTemplate; +export default BlogPostTemplate export const pageQuery = graphql` query BlogPostBySlug($slug: String!) { @@ -114,32 +111,7 @@ export const pageQuery = graphql` } } } -`; -``` - -### Layout components - -`src/layouts/index.jsx` (optional) wraps page components. You can use it for -portions of pages that are shared across pages like headers and footers. - -You can use the `location` prop to render conditionally based on the page -URL. - -Example: - -```jsx -import React from "react"; -import Navigation from "../components/Navigation/Navigation.jsx"; - -export default class Template extends React.Component { - render() { - if (this.props.location.pathname !== "/") { - return {this.props.children()}; - } else { - return this.props.children(); - } - } -} +` ``` ### HTML component @@ -157,28 +129,28 @@ have an html.js. Example: ```jsx -import React from "react"; -import favicon from "./favicon.png"; +import React from "react" +import favicon from "./favicon.png" -let inlinedStyles = ""; +let inlinedStyles = "" if (process.env.NODE_ENV === "production") { try { - inlinedStyles = require("!raw-loader!../public/styles.css"); + inlinedStyles = require("!raw-loader!../public/styles.css") } catch (e) { - console.log(e); + console.log(e) } } export default class HTML extends React.Component { render() { - let css; + let css if (process.env.NODE_ENV === "production") { css = ( - -
- {this.props.postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -module.exports = Html diff --git a/examples/client-only-paths/src/pages/index.js b/examples/client-only-paths/src/pages/index.js index 9c052a21ce7e1..44d8a4f11d907 100644 --- a/examples/client-only-paths/src/pages/index.js +++ b/examples/client-only-paths/src/pages/index.js @@ -1,54 +1,57 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import ReactCSSTransitionGroup from "react-addons-css-transition-group" import { Route, Redirect } from "react-router-dom" import "./main.css" +import Layout from "../components/layout" class AnimationExample extends React.Component { render() { return ( -
- ( -
- } - /> + +
+ ( +
+ } + /> -
    - Red - Green - Blue - Pink -
+
    + Red + Green + Blue + Pink +
-
- - {/* no different than other usage of +
+ + {/* no different than other usage of ReactCSSTransitionGroup, just make sure to pass `location` to `Route` so it can match the old location as it animates out */} - - + + +
-
- )} - /> -
+ )} + /> +
+ ) } } diff --git a/examples/feed/gatsby-node.js b/examples/feed/gatsby-node.js index edab7e1ee4a4d..cdfa517634871 100644 --- a/examples/feed/gatsby-node.js +++ b/examples/feed/gatsby-node.js @@ -1,7 +1,7 @@ const path = require(`path`) -exports.onCreateNode = ({ node, boundActionCreators, getNode }) => { - const { createNodeField } = boundActionCreators +exports.onCreateNode = ({ node, actions, getNode }) => { + const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { const fileNode = getNode(node.parent) diff --git a/examples/gatsbygram/.babelrc b/examples/gatsbygram/.babelrc deleted file mode 100644 index a8b9b8bbcd312..0000000000000 --- a/examples/gatsbygram/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ['react', 'es2015', 'stage-1'], - "plugins": ['add-module-exports'] -} diff --git a/examples/gatsbygram/gatsby-browser.js b/examples/gatsbygram/gatsby-browser.js index 6a5fd30a630c0..7317ce4192231 100644 --- a/examples/gatsbygram/gatsby-browser.js +++ b/examples/gatsbygram/gatsby-browser.js @@ -1,6 +1,5 @@ -const windowWidth = window.innerWidth - exports.shouldUpdateScroll = args => { + const windowWidth = window.innerWidth // Scroll position only matters on mobile as on larger screens, we use a // modal. if (windowWidth < 750) { @@ -9,3 +8,7 @@ exports.shouldUpdateScroll = args => { return false } } + +exports.onInitialClientRender = () => { + window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE = true +} diff --git a/examples/gatsbygram/gatsby-config.js b/examples/gatsbygram/gatsby-config.js index 796b0e3a16acc..a20d0a555ce32 100644 --- a/examples/gatsbygram/gatsby-config.js +++ b/examples/gatsbygram/gatsby-config.js @@ -67,5 +67,11 @@ module.exports = { trackingId: `UA-91652198-1`, }, }, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography`, + }, + }, ], } diff --git a/examples/gatsbygram/gatsby-node.js b/examples/gatsbygram/gatsby-node.js index 8a8b6d50d5f14..394fbe8c72020 100644 --- a/examples/gatsbygram/gatsby-node.js +++ b/examples/gatsbygram/gatsby-node.js @@ -8,8 +8,8 @@ const slash = require(`slash`) // called after the Gatsby bootstrap is finished so you have // access to any information necessary to programmatically // create pages. -exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions return new Promise((resolve, reject) => { // The “graphql” function allows us to run arbitrary diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json index 23cf1b0bd68e5..c0bc57e1fa1ee 100644 --- a/examples/gatsbygram/package.json +++ b/examples/gatsbygram/package.json @@ -5,31 +5,35 @@ "version": "1.0.0", "author": "Kyle Mathews ", "dependencies": { - "gatsby": "latest", - "gatsby-image": "latest", - "gatsby-link": "latest", - "gatsby-plugin-glamor": "latest", - "gatsby-plugin-google-analytics": "latest", - "gatsby-plugin-manifest": "latest", - "gatsby-plugin-offline": "latest", - "gatsby-plugin-sharp": "latest", - "gatsby-source-filesystem": "latest", - "gatsby-transformer-json": "latest", - "gatsby-transformer-sharp": "latest", + "core-js": "^2.5.5", + "gatsby": "next", + "gatsby-image": "next", + "gatsby-plugin-glamor": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-manifest": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-sharp": "next", + "gatsby-plugin-typography": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-json": "next", + "gatsby-transformer-sharp": "next", + "glamor": "^2.20.40", "instagram-screen-scrape": "^2.0.0", "lodash": "^4.16.4", "mkdirp": "^0.5.1", "mousetrap": "^1.6.0", - "progress": "^1.1.8", + "progress": "^2.0.0", "prop-types": "^15.5.8", + "react": "^16.3.2", + "react-dom": "^16.3.2", "react-gravatar": "^2.6.1", - "react-icons": "^2.2.3", - "react-modal": "^1.7.6", - "react-typography": "^0.15.0", + "react-icons": "^2.2.7", + "react-modal": "^3.4.2", + "react-typography": "^0.16.13", "request": "^2.79.0", "slug": "^0.9.1", - "typeface-space-mono": "^0.0.22", - "typography": "^0.15.0" + "typeface-space-mono": "0.0.54", + "typography": "^0.16.6" }, "keywords": [ "gatsby" diff --git a/examples/gatsbygram/src/components/modal.js b/examples/gatsbygram/src/components/modal.js index a9123dc59746f..37dc537975aad 100644 --- a/examples/gatsbygram/src/components/modal.js +++ b/examples/gatsbygram/src/components/modal.js @@ -6,15 +6,18 @@ import Close from "react-icons/lib/md/close" import findIndex from "lodash/findIndex" import mousetrap from "mousetrap" import * as PropTypes from "prop-types" -import { navigateTo } from "gatsby-link" +import { push, StaticQuery } from "gatsby" import { rhythm } from "../utils/typography" +let posts + +Modal.setAppElement(`#___gatsby`) + class GatsbyGramModal extends React.Component { static propTypes = { - isOpen: React.PropTypes.bool, - location: React.PropTypes.object.isRequired, - posts: React.PropTypes.array.isRequired, + isOpen: PropTypes.bool, + location: PropTypes.object.isRequired, } componentDidMount() { @@ -32,7 +35,7 @@ class GatsbyGramModal extends React.Component { findCurrentIndex() { let index index = findIndex( - this.props.posts, + posts, post => post.id === this.props.location.pathname.split(`/`)[1] ) @@ -45,7 +48,6 @@ class GatsbyGramModal extends React.Component { } const currentIndex = this.findCurrentIndex() if (currentIndex || currentIndex === 0) { - const posts = this.props.posts let nextPost // Wrap around if at end. if (currentIndex + 1 === posts.length) { @@ -53,7 +55,7 @@ class GatsbyGramModal extends React.Component { } else { nextPost = posts[currentIndex + 1] } - navigateTo(`/${nextPost.id}/`) + push(`/${nextPost.id}/`) } } @@ -63,7 +65,6 @@ class GatsbyGramModal extends React.Component { } const currentIndex = this.findCurrentIndex() if (currentIndex || currentIndex === 0) { - const posts = this.props.posts let previousPost // Wrap around if at start. if (currentIndex === 0) { @@ -71,103 +72,115 @@ class GatsbyGramModal extends React.Component { } else { previousPost = posts[currentIndex - 1] } - navigateTo(`/${previousPost.id}/`) + push(`/${previousPost.id}/`) } } render() { return ( - navigateTo(`/`)} - style={{ - overlay: { - position: `fixed`, - top: 0, - left: 0, - right: 0, - bottom: 0, - backgroundColor: `rgba(0, 0, 0, 0.75)`, - }, - content: { - position: `absolute`, - border: `none`, - background: `none`, - padding: 0, - top: 0, - bottom: 0, - right: 0, - left: 0, - overflow: `auto`, - WebkitOverflowScrolling: `touch`, - }, - }} - contentLabel="Modal" - > -
navigateTo(`/`)} - css={{ - display: `flex`, - position: `relative`, - height: `100vh`, - }} - > -
- this.previous(e)} - /> - {this.props.children({ - location: { pathname: this.props.location.pathname }, - })} - { + if (!posts) { + posts = data.allPostsJson.edges.map(e => e.node) + } + return ( + push(`/`)} + style={{ + overlay: { + position: `fixed`, + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundColor: `rgba(0, 0, 0, 0.75)`, + }, + content: { + position: `absolute`, + border: `none`, + background: `none`, + padding: 0, + top: 0, + bottom: 0, + right: 0, + left: 0, + overflow: `auto`, + WebkitOverflowScrolling: `touch`, + }, }} - onClick={e => this.next(e)} - /> -
- navigateTo(`/`)} - css={{ - cursor: `pointer`, - color: `rgba(255,255,255,0.8)`, - fontSize: `30px`, - position: `absolute`, - top: rhythm(1 / 4), - right: rhythm(1 / 4), - }} - /> -
- + contentLabel="Modal" + > +
push(`/`)} + css={{ + display: `flex`, + position: `relative`, + height: `100vh`, + }} + > +
+ this.previous(e)} + /> + {this.props.children} + this.next(e)} + /> +
+ push(`/`)} + css={{ + cursor: `pointer`, + color: `rgba(255,255,255,0.8)`, + fontSize: `30px`, + position: `absolute`, + top: rhythm(1 / 4), + right: rhythm(1 / 4), + }} + /> +
+ + ) + }} + /> ) } } export default GatsbyGramModal - -export const modalFragment = graphql` - fragment Modal_posts on PostsJson { - id - } -` diff --git a/examples/gatsbygram/src/components/post-detail.js b/examples/gatsbygram/src/components/post-detail.js index 93e8b6c2ca066..58d2be0f764e3 100644 --- a/examples/gatsbygram/src/components/post-detail.js +++ b/examples/gatsbygram/src/components/post-detail.js @@ -4,10 +4,6 @@ import presets from "../utils/presets" import typography, { rhythm, scale } from "../utils/typography" class PostDetail extends React.Component { - constructor() { - super() - } - render() { const { bigImage, @@ -147,10 +143,11 @@ class PostDetail extends React.Component { }} > {``} - ) - } - - return ( - - - - - {this.props.headComponents} - - - - - - Gatsbygram - - {css} - - -
- {this.props.postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -module.exports = Html diff --git a/examples/gatsbygram/src/layouts/index.js b/examples/gatsbygram/src/layouts/index.js index d8d32b3747f4b..270c231a1f633 100644 --- a/examples/gatsbygram/src/layouts/index.js +++ b/examples/gatsbygram/src/layouts/index.js @@ -1,78 +1,77 @@ import * as PropTypes from "prop-types" import React from "react" import CameraIcon from "react-icons/lib/fa/camera-retro" -import Link from "gatsby-link" +import { Link, PageRenderer } from "gatsby" // Load the css for the Space Mono font. import "typeface-space-mono" import { rhythm, scale } from "../utils/typography" import presets from "../utils/presets" -import Modal from "../components/modal" -class DefaultLayout extends React.Component { +let Modal +import(`../components/modal`).then(modal => { + Modal = modal.default +}) + +let windowWidth + +class Layout extends React.Component { static propTypes = { location: PropTypes.object.isRequired, - children: PropTypes.func, - } - static childContextTypes = { - setPosts: PropTypes.func, - } - getChildContext() { - return { - setPosts: posts => { - this.posts = posts - }, - } + isModal: PropTypes.bool, } componentDidMount() { // Create references to html/body elements - this.htmlElement = document.querySelector(`html`) - this.bodyElement = document.querySelector(`body`) - - // Cache the window width. - this.windowWidth = window.innerWidth + // this.htmlElement = document.querySelector(`html`) + // this.bodyElement = document.querySelector(`body`) + // // Cache the window width. + // windowWidth = window.innerWidth } componentWillReceiveProps(nextProps) { // if we're changing to a non-homepage page, put things in // a modal (unless we're on mobile). - if ( - nextProps.location.pathname !== `/` && - nextProps.location.pathname !== `/about/` && - this.windowWidth > 750 - ) { - // Freeze the background from scrolling. - this.htmlElement.style.overflow = `hidden` - this.bodyElement.style.overflow = `hidden` - - // Always set overflow-y to scroll so the scrollbar stays visible avoiding - // weird jumping. - this.htmlElement.style.overflowY = `scroll` - } else { - // Otherwise we're navigating back home so delete old home so the - // modal can be destroyed. - delete this.modalBackgroundChildren - this.htmlElement.style.overflow = `visible` - this.bodyElement.style.overflow = `visible` - - // Always set overflow-y to scroll so the scrollbar stays visible avoiding - // weird jumping. - this.htmlElement.style.overflowY = `scroll` - } + // if (windowWidth > 750) { + // // Freeze the background from scrolling. + // this.htmlElement.style.overflow = `hidden` + // this.bodyElement.style.overflow = `hidden` + // // Always set overflow-y to scroll so the scrollbar stays visible avoiding + // // weird jumping. + // this.htmlElement.style.overflowY = `scroll` + // } else { + // // Otherwise we're navigating back home so delete old home so the + // // modal can be destroyed. + // delete this.modalBackgroundChildren + // this.htmlElement.style.overflow = `visible` + // this.bodyElement.style.overflow = `visible` + // // Always set overflow-y to scroll so the scrollbar stays visible avoiding + // // weird jumping. + // this.htmlElement.style.overflowY = `scroll` + // } } render() { const { location } = this.props let isModal = false - if ( - this.props.location.pathname !== `/` && - this.props.location.pathname !== `/about/` && - this.windowWidth > 750 - ) { + if (!windowWidth && typeof window !== `undefined`) { + windowWidth = window.innerWidth + } + if (this.props.isModal && windowWidth > 750) { isModal = true } + if (isModal && Modal) { + return ( + + + + {this.props.children} + + + ) + } + return (
-
- {isModal - ? this.props.children({ - ...this.props, - location: { pathname: `/` }, - }) - : this.props.children()} -
- -
- {isModal && ( - - {this.props.children} - - )} -
+ {this.props.children}
) } } -export default DefaultLayout +export default Layout diff --git a/examples/gatsbygram/src/pages/about.js b/examples/gatsbygram/src/pages/about.js index f64dec07df7c5..ca995c4a1fd17 100644 --- a/examples/gatsbygram/src/pages/about.js +++ b/examples/gatsbygram/src/pages/about.js @@ -1,39 +1,47 @@ import React from "react" import { rhythm } from "../utils/typography" +import Layout from "../layouts" class About extends React.Component { render() { return ( -
-

About Gatsbygram

-

- Gatsbygram is an example website built with the JavaScript web - framework - {` `} - - Gatsby - - . -

-

- The code for the site lives at{` `} - - https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram - -

-

- - Read a case study on how Gatsbygram was built - -

-
+ +
+

About Gatsbygram

+

+ Gatsbygram is an example website built with the JavaScript web + framework + {` `} + + Gatsby + + . +

+

+ The code for the site lives at{` `} + + https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram + +

+

+ + Read a case study on how Gatsbygram was built + +

+
+ ) } } diff --git a/examples/gatsbygram/src/pages/index.js b/examples/gatsbygram/src/pages/index.js index cd91a3dc98178..7bfe4de4a6faa 100644 --- a/examples/gatsbygram/src/pages/index.js +++ b/examples/gatsbygram/src/pages/index.js @@ -6,6 +6,7 @@ import { rhythm, scale } from "../utils/typography" import presets from "../utils/presets" import Avatar from "../components/Avatar" import Post from "../components/post" +import Layout from "../layouts" // This would normally be in a Redux store or some other global data store. if (typeof window !== `undefined`) { @@ -20,9 +21,6 @@ class Index extends React.Component { allPostsJson: PropTypes.object, }), } - static contextTypes = { - setPosts: PropTypes.func, - } constructor() { super() @@ -68,132 +66,132 @@ class Index extends React.Component { const posts = allPostsJson.edges.map(e => e.node) - this.context.setPosts(posts) - user = user.edges[0].node return ( -
- {/* user profile */} +
+ {/* user profile */}
- -
-
-

- {user.username} -

-

- {posts.length} posts - 192k followers -

-
-
- {/* posts */} - {chunk(posts.slice(0, this.state.postsToShow), 3).map((chunk, i) => ( -
- {chunk.map(node => ( - this.setState({ activePost: post })} - /> - ))} + +
+
+

+ {user.username} +

+

+ {posts.length} posts + 192k followers +

+
- ))} - {!this.state.showingMore && ( - ( +
+ {chunk.map(node => ( + this.setState({ activePost: post })} + /> + ))} +
+ ))} + {!this.state.showingMore && ( + { - this.setState({ - postsToShow: this.state.postsToShow + 12, - showingMore: true, - }) - }} - > - Load More - - )} -
+ padding: rhythm(1 / 2), + width: `calc(100vw - ${rhythm(1)})`, + marginLeft: rhythm(0.5), + marginRight: rhythm(0.5), + marginBottom: rhythm(0.5), + marginTop: rhythm(0.5), + [presets.Tablet]: { + borderRadius: `100%`, + margin: `0 auto`, + marginBottom: rhythm(1.5), + marginTop: rhythm(1.5), + padding: rhythm(1), + height: rhythm(5), + width: rhythm(5), + lineHeight: rhythm(3), + textAlign: `center`, + }, + }} + onClick={() => { + this.setState({ + postsToShow: this.state.postsToShow + 12, + showingMore: true, + }) + }} + > + Load More + + )} +
+ ) } } @@ -218,7 +216,6 @@ export const pageQuery = graphql` weeksAgo: time(difference: "weeks") ...Post_details ...PostDetail_details - ...Modal_posts } } } diff --git a/examples/gatsbygram/src/templates/post-page.js b/examples/gatsbygram/src/templates/post-page.js index a5e5cbf018c53..877e23af51b60 100644 --- a/examples/gatsbygram/src/templates/post-page.js +++ b/examples/gatsbygram/src/templates/post-page.js @@ -1,6 +1,7 @@ import * as PropTypes from "prop-types" import React from "react" import PostDetail from "../components/post-detail" +import Layout from "../layouts" class PostTemplate extends React.Component { static propTypes = { @@ -9,10 +10,21 @@ class PostTemplate extends React.Component { }), } render() { + let isModal = false + // We don't want to show the modal if a user navigates + // directly to a post so if this code is running on Gatsby's + // initial render then we don't show the modal, otherwise we + // do. + if ( + typeof window !== `undefined` && + window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE + ) { + isModal = true + } return ( - // PostDetail is used for this detail page and - // also in the modal. - + + + ) } } diff --git a/examples/gatsbygram/src/utils/typography.js b/examples/gatsbygram/src/utils/typography.js index ec09236449fee..05aa60be00d7d 100644 --- a/examples/gatsbygram/src/utils/typography.js +++ b/examples/gatsbygram/src/utils/typography.js @@ -36,4 +36,6 @@ if (process.env.NODE_ENV !== `production`) { typography.injectStyles() } -module.exports = typography +export default typography +export const scale = typography.scale +export const rhythm = typography.rhythm diff --git a/examples/hn/gatsby-config.js b/examples/hn/gatsby-config.js index 2986be74b58bf..829b9c7a5929e 100644 --- a/examples/hn/gatsby-config.js +++ b/examples/hn/gatsby-config.js @@ -28,17 +28,5 @@ module.exports = { display: `minimal-ui`, }, }, - // This plugin generates a service worker and AppShell - // html file so the site works offline and is otherwise - // resistant to bad networks. Works with almost any - // site! - `gatsby-plugin-offline`, - // This plugin sets up Google Analytics for you. - { - resolve: `gatsby-plugin-google-analytics`, - options: { - // trackingId: `UA-91652198-1`, - }, - }, ], } diff --git a/examples/hn/gatsby-node.js b/examples/hn/gatsby-node.js index b2512e8c660ed..7101c1f994856 100644 --- a/examples/hn/gatsby-node.js +++ b/examples/hn/gatsby-node.js @@ -7,8 +7,8 @@ const slash = require(`slash`) // called after the Gatsby bootstrap is finished so you have // access to any information necessary to programmatically // create pages. -exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions return new Promise((resolve, reject) => { // The “graphql” function allows us to run arbitrary // queries against local Hacker News graphql schema. Think of diff --git a/examples/hn/package.json b/examples/hn/package.json index 9467a37b9d77c..f1f318dc3e793 100644 --- a/examples/hn/package.json +++ b/examples/hn/package.json @@ -6,16 +6,17 @@ "author": "Kyle Mathews ", "dependencies": { "flat": "^2.0.1", - "gatsby": "latest", - "gatsby-link": "latest", - "gatsby-plugin-google-analytics": "latest", - "gatsby-plugin-manifest": "latest", - "gatsby-plugin-offline": "latest", - "gatsby-source-hacker-news": "latest", + "gatsby": "canary", + "gatsby-plugin-manifest": "^2.1.0-alpha.76793cd8", + "gatsby-source-hacker-news": "canary", "lodash": "^4.16.4", + "react": "^16.3.1", + "react-dom": "^16.3.1", "slash": "^1.0.0" }, - "keywords": ["gatsby"], + "keywords": [ + "gatsby" + ], "license": "MIT", "main": "n/a", "scripts": { diff --git a/examples/hn/src/components/story-item.js b/examples/hn/src/components/story-item.js index d0e9dd49d4083..cb66aa2be5814 100644 --- a/examples/hn/src/components/story-item.js +++ b/examples/hn/src/components/story-item.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" class StoryItem extends React.Component { render() { diff --git a/examples/hn/src/layouts/default.js b/examples/hn/src/layouts/default.js index 9813aa6639a31..bda30397cb6fd 100644 --- a/examples/hn/src/layouts/default.js +++ b/examples/hn/src/layouts/default.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import "../css/news.css" import y18Gif from "../images/y18.gif" diff --git a/examples/hn/src/templates/story.js b/examples/hn/src/templates/story.js index b24e7d01c608a..a6acee8fb3790 100644 --- a/examples/hn/src/templates/story.js +++ b/examples/hn/src/templates/story.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import StoryComment from "../components/story-comment" diff --git a/examples/image-processing/gatsby-config.js b/examples/image-processing/gatsby-config.js index f67e50fa74a26..c3ee74029135c 100644 --- a/examples/image-processing/gatsby-config.js +++ b/examples/image-processing/gatsby-config.js @@ -39,5 +39,12 @@ module.exports = { trackingId: `UA-93349937-2`, }, }, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography.js`, + omitGoogleFont: true, + }, + }, ], } diff --git a/examples/image-processing/package.json b/examples/image-processing/package.json index 237b7e5880339..dc16bf7e276cb 100644 --- a/examples/image-processing/package.json +++ b/examples/image-processing/package.json @@ -5,20 +5,25 @@ "version": "1.0.0", "author": "Florian Kissling ", "dependencies": { - "gatsby": "^1.9.112", - "gatsby-image": "^1.0.24", - "gatsby-link": "^1.6.27", - "gatsby-plugin-google-analytics": "^1.0.12", - "gatsby-plugin-offline": "latest", - "gatsby-plugin-sharp": "^1.6.20", - "gatsby-source-drupal": "^1.3.7", - "gatsby-source-filesystem": "^1.5.8", - "gatsby-transformer-sharp": "^1.6.13", - "react-typography": "^0.15.0", + "gatsby": "next", + "gatsby-image": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-sharp": "next", + "gatsby-plugin-typography": "next", + "gatsby-source-drupal": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-sharp": "next", + "react": "^16.4.0", + "react-dom": "^16.4.0", + "react-typography": "^0.16.13", "typography": "^0.15.8", "typography-theme-bootstrap": "^0.15.10" }, - "keywords": ["gatsby", "sharp"], + "keywords": [ + "gatsby", + "sharp" + ], "license": "MIT", "main": "n/a", "scripts": { diff --git a/examples/image-processing/src/html.js b/examples/image-processing/src/html.js deleted file mode 100644 index 9a34a3b72b3bd..0000000000000 --- a/examples/image-processing/src/html.js +++ /dev/null @@ -1,48 +0,0 @@ -import React, { Component } from "react" -import * as PropTypes from "prop-types" -import { TypographyStyle } from "react-typography" - -import typography from "./utils/typography" - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends Component { - render() { - return ( - - - {this.props.headComponents} - - - - - - - Gatsby - Image Processing - - - -
- {this.props.postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -module.exports = Html diff --git a/examples/image-processing/src/layouts/index.js b/examples/image-processing/src/layouts/index.js index 562c54a467880..c48570da36ac0 100644 --- a/examples/image-processing/src/layouts/index.js +++ b/examples/image-processing/src/layouts/index.js @@ -2,31 +2,27 @@ import React from "react" import { rhythm } from "../utils/typography" -class DefaultLayout extends React.Component { - render() { - return ( -
-

- Image Processing with gatsby-transformer-sharp -

- {this.props.children()} -
- ) - } -} +const MainLayout = ({ children }) => ( +
+

+ Image Processing with gatsby-transformer-sharp +

+ {children} +
+) -export default DefaultLayout +export default MainLayout diff --git a/examples/image-processing/src/pages/index.js b/examples/image-processing/src/pages/index.js index 05b5392daec2c..1204b21b06263 100644 --- a/examples/image-processing/src/pages/index.js +++ b/examples/image-processing/src/pages/index.js @@ -1,26 +1,26 @@ import React from "react" import Img from "gatsby-image" - +import Layout from "../layouts" import { rhythm } from "../utils/typography" class Index extends React.Component { render() { - const images = this.props.data.allImageSharp.edges - const sizes = this.props.data.sizes.childImageSharp.sizes - const resolutions = this.props.data.resolution.childImageSharp.resolutions - const cropDefault = this.props.data.cropDefault.childImageSharp.resize - const cropBottomLeft = this.props.data.cropBottomLeft.childImageSharp.resize - const cropEntropy = this.props.data.cropEntropy.childImageSharp.resize - const cropCenter = this.props.data.cropCenter.childImageSharp.resize - const sizesDuotoneOriginal = this.props.data.sizesDuotoneOriginal - .childImageSharp.sizes - const sizesDuotone25 = this.props.data.sizesDuotone25.childImageSharp.sizes - const sizesDuotone50 = this.props.data.sizesDuotone50.childImageSharp.sizes - const sizesDuotone75 = this.props.data.sizesDuotone75.childImageSharp.sizes - const sizesDuotone = this.props.data.sizesDuotone.childImageSharp.sizes + const data = this.props.data + const images = data.allImageSharp.edges + const fluid = data.fluidImages.childImageSharp.fluid + const fixed = data.fixedImages.childImageSharp.fixed + const cropDefault = data.cropDefault.childImageSharp.resize + const cropBottomLeft = data.cropBottomLeft.childImageSharp.resize + const cropEntropy = data.cropEntropy.childImageSharp.resize + const cropCenter = data.cropCenter.childImageSharp.resize + const fluidDuotoneOriginal = data.fluidDuotoneOriginal.childImageSharp.fluid + const fluidDuotone25 = data.fluidDuotone25.childImageSharp.fluid + const fluidDuotone50 = data.fluidDuotone50.childImageSharp.fluid + const fluidDuotone75 = data.fluidDuotone75.childImageSharp.fluid + const fluidDuotone = data.fluidDuotone.childImageSharp.fluid return ( -
+

gatsby-transformer-sharp @@ -97,11 +97,13 @@ class Index extends React.Component {

-

  • - + {`File
  • - + {`File

    cropFocus: SOUTHWEST @@ -138,7 +148,10 @@ class Index extends React.Component {

  • - + {`File

    cropFocus: ENTROPY @@ -146,7 +159,10 @@ class Index extends React.Component {

  • - + {`File

    cropFocus: CENTER @@ -161,9 +177,9 @@ class Index extends React.Component { paddingTop: rhythm(2), }} > - + - sizes + fluid @@ -175,12 +191,12 @@ class Index extends React.Component {

    If the max width of the container for the rendered markdown file is - 800px, the sizes would then be: 200, 400, 800, 1200, 1600, 2400 – - enough to provide close to the optimal image size for every device + 800px, the fluid sizes would then be: 200, 400, 800, 1200, 1600, 2400 + – enough to provide close to the optimal image size for every device size / screen resolution.

    - On top of that, sizes + On top of that, fluid {` `} returns everything else (namely {` `} @@ -236,18 +252,18 @@ class Index extends React.Component {

    - sizes(duotone: + fluid(duotone: {` `} {`{ `} highlight: "#f00e2e", shadow: "#192550" {`}`}, toFormat: PNG)

    - +

    - sizes(duotone: + fluid(duotone: {` `} {`{ `} highlight: "#0ec4f1", shadow: "#192550", opacity: 50 {`}`}) @@ -256,19 +272,19 @@ class Index extends React.Component {
    - +
    - +
    - +
    - +
    - +
    @@ -285,8 +301,8 @@ class Index extends React.Component { paddingTop: rhythm(2), }} > - - resolutions + + fixed

    @@ -313,8 +329,8 @@ class Index extends React.Component { to convert the source image to 8-bit greyscale, 256 shades of grey.

    - -
    • + + ) } } @@ -365,9 +381,11 @@ export const pageQuery = graphql` } } } - sizes: file(relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }) { + fluidImages: file( + relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" } + ) { childImageSharp { - sizes( + fluid( duotone: { highlight: "#f00e2e", shadow: "#192550" } traceSVG: { color: "#f00e2e" @@ -376,75 +394,75 @@ export const pageQuery = graphql` } toFormat: PNG ) { - ...GatsbyImageSharpSizes_tracedSVG + ...GatsbyImageSharpFluid_tracedSVG } } } - sizesDuotone: file( + fluidDuotone: file( relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" } ) { childImageSharp { - sizes( + fluid( maxWidth: 120 duotone: { highlight: "#0ec4f1", shadow: "#192550" } traceSVG: { color: "#1E2151" } ) { - ...GatsbyImageSharpSizes_tracedSVG + ...GatsbyImageSharpFluid_tracedSVG } } } - sizesDuotone50: file( + fluidDuotone50: file( relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" } ) { childImageSharp { - sizes( + fluid( maxWidth: 120 duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 50 } traceSVG: { color: "#A7DEF6" } ) { - ...GatsbyImageSharpSizes_tracedSVG + ...GatsbyImageSharpFluid_tracedSVG } } } - sizesDuotone75: file( + fluidDuotone75: file( relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" } ) { childImageSharp { - sizes( + fluid( maxWidth: 120 duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 75 } traceSVG: { color: "#0ec4f1" } ) { - ...GatsbyImageSharpSizes_tracedSVG + ...GatsbyImageSharpFluid_tracedSVG } } } - sizesDuotone25: file( + fluidDuotone25: file( relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" } ) { childImageSharp { - sizes( + fluid( maxWidth: 120 traceSVG: { color: "#D1EFFB" } duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 25 } ) { - ...GatsbyImageSharpSizes_tracedSVG + ...GatsbyImageSharpFluid_tracedSVG } } } - sizesDuotoneOriginal: file( + fluidDuotoneOriginal: file( relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" } ) { childImageSharp { - sizes(maxWidth: 120, traceSVG: { color: "#e7f7fe" }, toFormat: PNG) { - ...GatsbyImageSharpSizes_tracedSVG + fluid(maxWidth: 120, traceSVG: { color: "#e7f7fe" }, toFormat: PNG) { + ...GatsbyImageSharpFluid_tracedSVG } } } - resolution: file(relativePath: { regex: "/lol.jpg/" }) { + fixedImages: file(relativePath: { regex: "/lol.jpg/" }) { childImageSharp { - resolutions(grayscale: true, width: 500) { - ...GatsbyImageSharpResolutions_withWebp + fixed(grayscale: true, width: 500) { + ...GatsbyImageSharpFixed_withWebp } } } diff --git a/examples/image-processing/src/utils/typography.js b/examples/image-processing/src/utils/typography.js index b653c84e31c95..7f7dc148f39e1 100644 --- a/examples/image-processing/src/utils/typography.js +++ b/examples/image-processing/src/utils/typography.js @@ -1,8 +1,7 @@ import Typography from "typography" +import theme from "typography-theme-bootstrap" -let theme = require(`typography-theme-bootstrap`).default - -theme.overrideThemeStyles = ({ rhythm, scale }) => { +theme.overrideThemeStyles = ({ rhythm, scale }, options) => { return { "h1, h2, h3": { ...scale(1 / 6), @@ -56,9 +55,9 @@ theme.overrideThemeStyles = ({ rhythm, scale }) => { const typography = new Typography(theme) -// Hot reload typography in development. -if (process.env.NODE_ENV !== `production`) { - typography.injectStyles() -} - +// Back out the below once Typography is upgraded for es6 export default typography + +export const rhythm = typography.rhythm +export const scale = typography.scale +export const options = typography.options diff --git a/examples/no-plugins/package.json b/examples/no-plugins/package.json index d45b6f556e81c..aee920046802a 100644 --- a/examples/no-plugins/package.json +++ b/examples/no-plugins/package.json @@ -5,12 +5,15 @@ "version": "1.0.0", "author": "Scotty Eckenthal ", "dependencies": { - "gatsby": "latest", - "gatsby-link": "latest", + "gatsby": "next", "lodash": "^4.16.4", + "react": "^16.4.0", + "react-dom": "^16.4.0", "slash": "^1.0.0" }, - "keywords": ["gatsby"], + "keywords": [ + "gatsby" + ], "license": "MIT", "main": "n/a", "scripts": { diff --git a/examples/no-plugins/src/layouts/index.js b/examples/no-plugins/src/components/layout.js similarity index 88% rename from examples/no-plugins/src/layouts/index.js rename to examples/no-plugins/src/components/layout.js index 3eba0dc415b25..b17e88c181879 100644 --- a/examples/no-plugins/src/layouts/index.js +++ b/examples/no-plugins/src/components/layout.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" class DefaultLayout extends React.Component { render() { @@ -19,7 +19,7 @@ class DefaultLayout extends React.Component { c - {this.props.children()} + {this.props.children}
    ) } diff --git a/examples/no-plugins/src/html.js b/examples/no-plugins/src/html.js index ecd3580eea08d..d6d41d1a2afe4 100644 --- a/examples/no-plugins/src/html.js +++ b/examples/no-plugins/src/html.js @@ -1,19 +1,11 @@ import React, { Component } from "react" import * as PropTypes from "prop-types" -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - class Html extends Component { render() { return ( - + - {this.props.headComponents} - Gatsby - No Plugins + {this.props.headComponents} - + + {this.props.preBodyComponents}

    A

    +const A = () => ( + +

    A

    +     +) export default A diff --git a/examples/no-plugins/src/pages/b.js b/examples/no-plugins/src/pages/b.js index 6b15e3bd526e5..6d07016d0f645 100644 --- a/examples/no-plugins/src/pages/b.js +++ b/examples/no-plugins/src/pages/b.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const B = () =>

    B

    +const B = () => ( + +

    B

    +     +) export default B diff --git a/examples/no-plugins/src/pages/c.js b/examples/no-plugins/src/pages/c.js index 7e39f24fd0915..a54704ef0e9c6 100644 --- a/examples/no-plugins/src/pages/c.js +++ b/examples/no-plugins/src/pages/c.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const C = () =>

    C

    +const C = () => ( + +

    C

    +     +) export default C diff --git a/examples/no-plugins/src/pages/index.js b/examples/no-plugins/src/pages/index.js index 1a61860fb9334..560898bc64fbe 100644 --- a/examples/no-plugins/src/pages/index.js +++ b/examples/no-plugins/src/pages/index.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const Home = () =>

    Home

    +const Home = () => ( + +

    Home

    +     +) export default Home diff --git a/examples/no-trailing-slashes/gatsby-node.js b/examples/no-trailing-slashes/gatsby-node.js index 690ecc329a7e4..4fa27588ac576 100644 --- a/examples/no-trailing-slashes/gatsby-node.js +++ b/examples/no-trailing-slashes/gatsby-node.js @@ -1,7 +1,7 @@ const Promise = require(`bluebird`) -exports.onCreatePage = ({ page, boundActionCreators }) => { - const { createPage, deletePage } = boundActionCreators +exports.onCreatePage = ({ page, actions }) => { + const { createPage, deletePage } = actions return new Promise((resolve, reject) => { // Remove trailing slash diff --git a/examples/no-trailing-slashes/package.json b/examples/no-trailing-slashes/package.json index 76148a74d7aaf..2cd5c51a3ff17 100644 --- a/examples/no-trailing-slashes/package.json +++ b/examples/no-trailing-slashes/package.json @@ -5,14 +5,17 @@ "version": "1.0.0", "author": "Scotty Eckenthal ", "dependencies": { - "gatsby": "latest", - "gatsby-link": "latest", - "gatsby-plugin-google-analytics": "latest", - "gatsby-plugin-offline": "latest", + "gatsby": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-offline": "next", "lodash": "^4.16.4", + "react": "^16.4.0", + "react-dom": "^16.4.0", "slash": "^1.0.0" }, - "keywords": ["gatsby"], + "keywords": [ + "gatsby" + ], "license": "MIT", "main": "n/a", "scripts": { diff --git a/examples/no-trailing-slashes/src/layouts/index.js b/examples/no-trailing-slashes/src/components/layout.js similarity index 88% rename from examples/no-trailing-slashes/src/layouts/index.js rename to examples/no-trailing-slashes/src/components/layout.js index 52fc24d4b8744..6d54e8057c5bb 100644 --- a/examples/no-trailing-slashes/src/layouts/index.js +++ b/examples/no-trailing-slashes/src/components/layout.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" class DefaultLayout extends React.Component { render() { @@ -19,7 +19,7 @@ class DefaultLayout extends React.Component { c - {this.props.children()} + {this.props.children}
    ) } diff --git a/examples/no-trailing-slashes/src/html.js b/examples/no-trailing-slashes/src/html.js deleted file mode 100644 index 7151b41f70955..0000000000000 --- a/examples/no-trailing-slashes/src/html.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { Component } from "react" -import * as PropTypes from "prop-types" - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends Component { - render() { - return ( - - - {this.props.headComponents} - - - - - - - Gatsby Client Only Paths - - -
    - {this.props.postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -module.exports = Html diff --git a/examples/no-trailing-slashes/src/pages/a.js b/examples/no-trailing-slashes/src/pages/a.js index bafb75f9991ac..9967eedf4c54c 100644 --- a/examples/no-trailing-slashes/src/pages/a.js +++ b/examples/no-trailing-slashes/src/pages/a.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const A = () =>

    A

    +const A = () => ( + +

    A

    +     +) export default A diff --git a/examples/no-trailing-slashes/src/pages/b.js b/examples/no-trailing-slashes/src/pages/b.js index 6b15e3bd526e5..6d07016d0f645 100644 --- a/examples/no-trailing-slashes/src/pages/b.js +++ b/examples/no-trailing-slashes/src/pages/b.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const B = () =>

    B

    +const B = () => ( + +

    B

    +     +) export default B diff --git a/examples/no-trailing-slashes/src/pages/c.js b/examples/no-trailing-slashes/src/pages/c.js index 7e39f24fd0915..a54704ef0e9c6 100644 --- a/examples/no-trailing-slashes/src/pages/c.js +++ b/examples/no-trailing-slashes/src/pages/c.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const C = () =>

    C

    +const C = () => ( + +

    C

    +     +) export default C diff --git a/examples/no-trailing-slashes/src/pages/index.js b/examples/no-trailing-slashes/src/pages/index.js index 1a61860fb9334..560898bc64fbe 100644 --- a/examples/no-trailing-slashes/src/pages/index.js +++ b/examples/no-trailing-slashes/src/pages/index.js @@ -1,5 +1,10 @@ import React from "react" +import Layout from "../components/layout" -const Home = () =>

    Home

    +const Home = () => ( + +

    Home

    +     +) export default Home diff --git a/examples/simple-auth/gatsby-node.js b/examples/simple-auth/gatsby-node.js index 36d1782db276b..14d290f4e6fce 100644 --- a/examples/simple-auth/gatsby-node.js +++ b/examples/simple-auth/gatsby-node.js @@ -4,8 +4,8 @@ * See: https://www.gatsbyjs.org/docs/node-apis/ */ -exports.onCreatePage = async ({ page, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.onCreatePage = async ({ page, actions }) => { + const { createPage } = actions // page.matchPath is a special key that's used for matching pages // only on the client. diff --git a/examples/simple-auth/package.json b/examples/simple-auth/package.json index 79a04f37e4f3c..33f14684fd345 100644 --- a/examples/simple-auth/package.json +++ b/examples/simple-auth/package.json @@ -4,22 +4,23 @@ "version": "1.0.0", "author": "Jason Lengstorf ", "dependencies": { - "gatsby": "latest", - "gatsby-link": "latest", - "gatsby-plugin-react-helmet": "latest", + "gatsby": "next", + "gatsby-link": "next", + "gatsby-plugin-react-helmet": "next", "prop-types": "^15.6.1", + "react": "^16.4.0", + "react-dom": "^16.4.0", "react-helmet": "^5.2.0", "react-router-dom": "^4.2.2" }, - "keywords": ["gatsby"], + "keywords": [ + "gatsby" + ], "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write 'src/**/*.js'", "test": "echo \"Error: no test specified\" && exit 1" - }, - "devDependencies": { - "prettier": "^1.11.1" } } diff --git a/examples/simple-auth/src/components/Header/index.js b/examples/simple-auth/src/components/Header/index.js index e9bdcf8f1066c..e7811bbf39ce9 100644 --- a/examples/simple-auth/src/components/Header/index.js +++ b/examples/simple-auth/src/components/Header/index.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import styles from "./header.module.css" const Header = () => ( diff --git a/examples/simple-auth/src/layouts/global.css b/examples/simple-auth/src/components/Layout/global.css similarity index 100% rename from examples/simple-auth/src/layouts/global.css rename to examples/simple-auth/src/components/Layout/global.css diff --git a/examples/simple-auth/src/layouts/index.js b/examples/simple-auth/src/components/Layout/index.js similarity index 62% rename from examples/simple-auth/src/layouts/index.js rename to examples/simple-auth/src/components/Layout/index.js index cd1a326f367eb..1c3636edaffa8 100644 --- a/examples/simple-auth/src/layouts/index.js +++ b/examples/simple-auth/src/components/Layout/index.js @@ -2,22 +2,22 @@ import React from "react" import PropTypes from "prop-types" import Helmet from "react-helmet" -import Header from "../components/Header" +import Header from "../Header" // Global styles and component-specific styles. import "./global.css" import styles from "./main.module.css" -const TemplateWrapper = ({ children }) => ( +const Layout = ({ children }) => (
    -
    {children()}
    +
    {children}
    ) -TemplateWrapper.propTypes = { +Layout.propTypes = { children: PropTypes.func, } -export default TemplateWrapper +export default Layout diff --git a/examples/simple-auth/src/layouts/main.module.css b/examples/simple-auth/src/components/Layout/main.module.css similarity index 100% rename from examples/simple-auth/src/layouts/main.module.css rename to examples/simple-auth/src/components/Layout/main.module.css diff --git a/examples/simple-auth/src/pages/404.js b/examples/simple-auth/src/pages/404.js index e4c949a43fe9c..24e96df628daa 100644 --- a/examples/simple-auth/src/pages/404.js +++ b/examples/simple-auth/src/pages/404.js @@ -1,10 +1,13 @@ import React from "react" +import Layout from "../components/Layout" import View from "../components/View" const NotFound = () => ( - -

    You just hit a route that doesn't exist... the sadness.

    -     + + +

    You just hit a route that doesn't exist... the sadness.

    +     +     ) export default NotFound diff --git a/examples/simple-auth/src/pages/app.js b/examples/simple-auth/src/pages/app.js index ff544b247b153..68180d38954a4 100644 --- a/examples/simple-auth/src/pages/app.js +++ b/examples/simple-auth/src/pages/app.js @@ -1,5 +1,6 @@ import React from "react" import { Route } from "react-router-dom" +import Layout from "../components/Layout" import Details from "../components/Details" import Home from "../components/Home" import Login from "../components/Login" @@ -7,12 +8,12 @@ import PrivateRoute from "../components/PrivateRoute" import Status from "../components/Status" const App = () => ( -
    + -
    + ) export default App diff --git a/examples/simple-auth/src/pages/index.js b/examples/simple-auth/src/pages/index.js index 33c7b4229d9b4..8c3a0d4163f3a 100644 --- a/examples/simple-auth/src/pages/index.js +++ b/examples/simple-auth/src/pages/index.js @@ -1,10 +1,11 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" +import Layout from "../components/Layout" import View from "../components/View" import Status from "../components/Status" const Index = () => ( -
    +

    @@ -21,7 +22,7 @@ const Index = () => ( your profile.

    -
    + ) export default Index diff --git a/examples/sitemap/gatsby-node.js b/examples/sitemap/gatsby-node.js index 7c3b752d9679b..6f9388501acaf 100644 --- a/examples/sitemap/gatsby-node.js +++ b/examples/sitemap/gatsby-node.js @@ -1,8 +1,8 @@ const path = require(`path`) const slash = require(`slash`) -exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions return new Promise((resolve, reject) => { const blogPostTemplate = path.resolve(`src/templates/template-blog-post.js`) @@ -45,8 +45,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => { }) } -exports.onCreateNode = ({ node, boundActionCreators, getNode }) => { - const { createNodeField } = boundActionCreators +exports.onCreateNode = ({ node, actions, getNode }) => { + const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { const fileNode = getNode(node.parent) diff --git a/examples/sitemap/package.json b/examples/sitemap/package.json index 57620aa08af4c..8440d25785601 100644 --- a/examples/sitemap/package.json +++ b/examples/sitemap/package.json @@ -5,10 +5,12 @@ "version": "1.0.0", "author": "Nicholas Young ", "dependencies": { - "gatsby": "latest", - "gatsby-source-filesystem": "latest", - "gatsby-transformer-remark": "latest", - "gatsby-plugin-sitemap": "latest" + "gatsby": "next", + "gatsby-plugin-sitemap": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-remark": "next", + "react": "^16.3.2", + "react-dom": "^16.3.2" }, "keywords": [ "gatsby" diff --git a/examples/sitemap/src/components/layout.js b/examples/sitemap/src/components/layout.js new file mode 100644 index 0000000000000..43fb316c3c961 --- /dev/null +++ b/examples/sitemap/src/components/layout.js @@ -0,0 +1,3 @@ +import React from "react" + +export default ({ children }) =>
    {children}
    diff --git a/examples/sitemap/src/layouts/index.js b/examples/sitemap/src/layouts/index.js deleted file mode 100644 index 967e17974cd00..0000000000000 --- a/examples/sitemap/src/layouts/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react" - -export default class DefaultLayout extends React.Component { - render() { - return
    {this.props.children()}
    - } -} diff --git a/examples/sitemap/src/pages/index.js b/examples/sitemap/src/pages/index.js index b826ef6207e1a..7434c278b8252 100644 --- a/examples/sitemap/src/pages/index.js +++ b/examples/sitemap/src/pages/index.js @@ -1,17 +1,20 @@ import React from "react" +import Layout from "../components/layout" const IndexRoute = () => ( -
    -

    - Welcome to the GatsbyJS Sitemap Demo. Visit{` `} - to see the generated sitemap. -

    -

    - Note: gatsby-plugin-sitemap uses siteMetadata.siteUrl - {` `} - defined in gatsby-config.js to construct absolute URLs! -

    -
    + +
    +

    + Welcome to the GatsbyJS Sitemap Demo. Visit{` `} + to see the generated sitemap. +

    +

    + Note: gatsby-plugin-sitemap uses siteMetadata.siteUrl + {` `} + defined in gatsby-config.js to construct absolute URLs! +

    +
    +     ) export default IndexRoute diff --git a/examples/sitemap/src/pages/page-2.js b/examples/sitemap/src/pages/page-2.js index e51584a9b1ae1..6507f1d58b177 100644 --- a/examples/sitemap/src/pages/page-2.js +++ b/examples/sitemap/src/pages/page-2.js @@ -1,10 +1,13 @@ import React from "react" +import Layout from "../components/layout" const Page = () => ( -
    -

    Not so secret page

    -

    This page should be included in sitemap.xml

    -
    + +
    +

    Not so secret page

    +

    This page should be included in sitemap.xml

    +
    +     ) export default Page diff --git a/examples/sitemap/src/pages/secret.js b/examples/sitemap/src/pages/secret.js index 6c6a5daa329a9..426eb4d4f7401 100644 --- a/examples/sitemap/src/pages/secret.js +++ b/examples/sitemap/src/pages/secret.js @@ -1,10 +1,13 @@ import React from "react" +import Layout from "../components/layout" const Secret = () => ( -
    -

    Secret page

    -

    This page should be excluded from sitemap.xml

    -
    + +
    +

    Secret page

    +

    This page should be excluded from sitemap.xml

    +
    +     ) export default Secret diff --git a/examples/styleguide/gatsby-node.js b/examples/styleguide/gatsby-node.js index 3d4402edc5d23..f09171675f2f9 100644 --- a/examples/styleguide/gatsby-node.js +++ b/examples/styleguide/gatsby-node.js @@ -7,8 +7,8 @@ const componentPageTemplate = path.resolve( ) const tableOfContentsTemplate = path.resolve(`src/templates/TOC/index.js`) -exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions return new Promise((resolve, reject) => { resolve( @@ -65,15 +65,17 @@ exports.createPages = ({ graphql, boundActionCreators }) => { const allComponents = docgenResult.data.allComponentMetadata.edges.map( (edge, i) => Object.assign({}, edge.node, { - path: `/components/${edge.node.displayName.toLowerCase()}/`, + filePath: `/components/${edge.node.displayName.toLowerCase()}/`, html: markdownResult.data.allMarkdownRemark.edges[i].node.html, }) ) const exportFileContents = allComponents - .reduce((accumulator, { id, displayName }) => { - const absolutePath = id.replace(/ absPath of.*$/, ``) + .reduce((accumulator, { displayName, filePath }) => { + const absolutePath = path.resolve( + path.join(`src`, filePath, displayName) + ) accumulator.push( `export { default as ${displayName} } from "${absolutePath}"` ) @@ -87,12 +89,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => { ) allComponents.forEach(data => { - const { path } = data + const { filePath } = data const context = Object.assign({}, data, { allComponents, }) createPage({ - path, + path: filePath, component: componentPageTemplate, context, }) diff --git a/examples/styleguide/package.json b/examples/styleguide/package.json index 1f699aa446c98..107ec7a4fd856 100644 --- a/examples/styleguide/package.json +++ b/examples/styleguide/package.json @@ -5,15 +5,19 @@ "author": "scott.eckenthal@gmail.com", "dependencies": { "app-root-dir": "^1.0.2", - "gatsby": "latest", - "gatsby-link": "latest", - "gatsby-source-filesystem": "^1.5.11", - "gatsby-transformer-react-docgen": "^1.0.11", - "gatsby-transformer-remark": "^1.7.25", + "gatsby": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-react-docgen": "next", + "gatsby-transformer-remark": "next", "glamor": "^2.20.40", "html-to-react": "^1.3.1", + "react": "^16.4.0", + "react-dom": "^16.4.0", "react-live": "^1.7.1" }, + "keywords": [ + "gatsby" + ], "license": "MIT", "main": "n/a", "scripts": { diff --git a/examples/styleguide/src/templates/ComponentPage/ComponentPage.js b/examples/styleguide/src/templates/ComponentPage/ComponentPage.js index 9090d7eeb2d69..713a8e5239d50 100644 --- a/examples/styleguide/src/templates/ComponentPage/ComponentPage.js +++ b/examples/styleguide/src/templates/ComponentPage/ComponentPage.js @@ -6,7 +6,7 @@ import Example from "./components/Example" class ComponentPage extends React.Component { render() { - const { displayName, props, html, description } = this.props.pathContext + const { displayName, props, html, description } = this.props.pageContext return (
    @@ -43,7 +43,7 @@ class ComponentPage extends React.Component { } ComponentPage.propTypes = { - pathContext: PropTypes.shape({ + pageContext: PropTypes.shape({ displayName: PropTypes.string.isRequired, props: PropTypes.array.isRequired, html: PropTypes.string.isRequired, diff --git a/examples/styleguide/src/templates/ComponentPage/components/ComponentPreview/index.js b/examples/styleguide/src/templates/ComponentPage/components/ComponentPreview/index.js index 429b0e59858f7..f0ca9dde27409 100644 --- a/examples/styleguide/src/templates/ComponentPage/components/ComponentPreview/index.js +++ b/examples/styleguide/src/templates/ComponentPage/components/ComponentPreview/index.js @@ -1 +1,3 @@ -export { default } from "./ComponentPreview" +import ComponentPreview from "./ComponentPreview" + +export default ComponentPreview diff --git a/examples/styleguide/src/templates/ComponentPage/components/Example/index.js b/examples/styleguide/src/templates/ComponentPage/components/Example/index.js index 09e6b6756dd3e..1971a7dde9373 100644 --- a/examples/styleguide/src/templates/ComponentPage/components/Example/index.js +++ b/examples/styleguide/src/templates/ComponentPage/components/Example/index.js @@ -1 +1,3 @@ -export { default } from "./Example" +import Example from "./Example" + +export default Example diff --git a/examples/styleguide/src/templates/ComponentPage/index.js b/examples/styleguide/src/templates/ComponentPage/index.js index a75e6920a0c86..794a8dc5d8dce 100644 --- a/examples/styleguide/src/templates/ComponentPage/index.js +++ b/examples/styleguide/src/templates/ComponentPage/index.js @@ -1 +1,3 @@ -export { default } from "./ComponentPage" +import ComponentPage from "./ComponentPage" + +export default ComponentPage diff --git a/examples/styleguide/src/templates/TOC/TOC.js b/examples/styleguide/src/templates/TOC/TOC.js index df0c03a621216..ecbce6af8fc73 100644 --- a/examples/styleguide/src/templates/TOC/TOC.js +++ b/examples/styleguide/src/templates/TOC/TOC.js @@ -4,14 +4,14 @@ import GatsbyLink from "gatsby-link" class TOC extends React.Component { render() { - const { allComponents } = this.props.pathContext + const { allComponents } = this.props.pageContext return (

    Component styleguide

      - {allComponents.map(({ displayName, path }, index) => ( + {allComponents.map(({ displayName, filePath }, index) => (
    • - {displayName} + {displayName}
      • ))}
    @@ -21,11 +21,11 @@ class TOC extends React.Component { } TOC.propTypes = { - pathContext: PropTypes.shape({ + pageContext: PropTypes.shape({ allComponents: PropTypes.arrayOf( PropTypes.shape({ displayName: PropTypes.string.isRequired, - path: PropTypes.string.isRequired, + filePath: PropTypes.string.isRequired, }).isRequired ).isRequired, }).isRequired, diff --git a/examples/styleguide/src/templates/TOC/index.js b/examples/styleguide/src/templates/TOC/index.js index 5991b1f3b5389..7ca82e5dc93e4 100644 --- a/examples/styleguide/src/templates/TOC/index.js +++ b/examples/styleguide/src/templates/TOC/index.js @@ -1 +1,3 @@ -export { default } from "./TOC" +import TOC from "./TOC" + +export default TOC diff --git a/examples/using-asciidoc/.eslintrc.json b/examples/using-asciidoc/.eslintrc.json new file mode 100644 index 0000000000000..aadde9c0aa03d --- /dev/null +++ b/examples/using-asciidoc/.eslintrc.json @@ -0,0 +1,8 @@ +{ + "env": { + "browser": true + }, + "globals": { + "graphql": false + } +} \ No newline at end of file diff --git a/examples/using-asciidoc/README.md b/examples/using-asciidoc/README.md new file mode 100644 index 0000000000000..12a724fec1a65 --- /dev/null +++ b/examples/using-asciidoc/README.md @@ -0,0 +1,6 @@ +# Using Drupal + +https://using-drupal.gatsbyjs.org + +Example site that demostrates how to build Gatsby sites +that pull data from the [Drupal CMS](https://www.drupal.org/). diff --git a/examples/using-asciidoc/gatsby-config.js b/examples/using-asciidoc/gatsby-config.js new file mode 100644 index 0000000000000..d98d93a9c3e22 --- /dev/null +++ b/examples/using-asciidoc/gatsby-config.js @@ -0,0 +1,20 @@ +module.exports = { + siteMetadata: { + title: `Gatsby with Drupal`, + }, + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + name: `pages`, + path: `${__dirname}/src`, + }, + }, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography`, + }, + }, + ], +} diff --git a/examples/using-asciidoc/gatsby-node.js b/examples/using-asciidoc/gatsby-node.js new file mode 100644 index 0000000000000..e7c34209d531d --- /dev/null +++ b/examples/using-asciidoc/gatsby-node.js @@ -0,0 +1,94 @@ +const _ = require(`lodash`) +const Promise = require(`bluebird`) +const path = require(`path`) +const slash = require(`slash`) +const asciidoc = require(`asciidoctor.js`)() +const crypto = require(`crypto`) + +// Implement the Gatsby API “createPages”. This is +// called after the Gatsby bootstrap is finished so you have +// access to any information necessary to programatically +// create pages. +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions + return new Promise((resolve, reject) => { + // The “graphql” function allows us to run arbitrary + // queries against the local Drupal graphql schema. Think of + // it like the site has a built-in database constructed + // from the fetched data that you can run queries against. + graphql( + ` + { + allAsciidoc(limit: 1000) { + edges { + node { + id + slug + } + } + } + } + ` + ).then(result => { + if (result.errors) { + console.log(result) + reject(result.errors) + } + + // Create Asciidoc pages. + const articleTemplate = path.resolve(`./src/templates/article.js`) + _.each(result.data.allAsciidoc.edges, edge => { + // Gatsby uses Redux to manage its internal state. + // Plugins and sites can use functions like "createPage" + // to interact with Gatsby. + createPage({ + // Each page is required to have a `path` as well + // as a template component. The `context` is + // optional but is often necessary so the template + // can query data specific to each page. + path: edge.node.slug, + component: slash(articleTemplate), + context: { + id: edge.node.id, + }, + }) + }) + + resolve() + }) + }) +} + +exports.onCreateNode = async ({ + node, + createNodeId, + actions, + loadNodeContent, +}) => { + const { createNode, createParentChildLink } = actions + if (node.extension === `adoc`) { + const content = await loadNodeContent(node) + const html = asciidoc.convert(content) + const slug = `/${path.parse(node.relativePath).name}/` + const asciiNode = { + id: createNodeId(`${node.id} >>> ASCIIDOC`), + parent: node.id, + internal: { + type: `Asciidoc`, + mediaType: `text/html`, + content: html, + }, + children: [], + html, + slug, + } + + asciiNode.internal.contentDigest = crypto + .createHash(`md5`) + .update(JSON.stringify(asciiNode)) + .digest(`hex`) + + createNode(asciiNode) + createParentChildLink({ parent: node, child: asciiNode }) + } +} diff --git a/examples/using-asciidoc/package.json b/examples/using-asciidoc/package.json new file mode 100644 index 0000000000000..a0591eeb9d924 --- /dev/null +++ b/examples/using-asciidoc/package.json @@ -0,0 +1,30 @@ +{ + "name": "gatsby-example-using-asciidoc", + "private": true, + "description": "Gatsby example site using the Asciidoc transformer plugin", + "version": "1.0.0", + "author": "Kyle Mathews ", + "dependencies": { + "asciidoctor.js": "^1.5.6-preview.1", + "gatsby": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-typography": "next", + "gatsby-source-filesystem": "next", + "lodash": "^4.16.4", + "react": "^16.3.1", + "react-dom": "^16.3.1", + "react-typography": "^0.16.13", + "slash": "^1.0.0", + "typography": "^0.16.6", + "typography-breakpoint-constants": "^0.15.10" + }, + "keywords": [ + "gatsby" + ], + "license": "MIT", + "main": "n/a", + "scripts": { + "develop": "gatsby develop", + "build": "gatsby build" + } +} diff --git a/examples/using-asciidoc/src/layouts/index.js b/examples/using-asciidoc/src/layouts/index.js new file mode 100644 index 0000000000000..9bfb039171df6 --- /dev/null +++ b/examples/using-asciidoc/src/layouts/index.js @@ -0,0 +1,31 @@ +import React from "react" +import { Link } from "gatsby" + +import typography from "../utils/typography" +const { rhythm } = typography + +class DefaultLayout extends React.Component { + render() { + return ( +
    + +

    + Example of using Asciidoc with a Gatsby site +

    + + {this.props.children} +
    + ) + } +} + +export default DefaultLayout diff --git a/examples/using-asciidoc/src/pages/hello-world.adoc b/examples/using-asciidoc/src/pages/hello-world.adoc new file mode 100644 index 0000000000000..6958e4e062105 --- /dev/null +++ b/examples/using-asciidoc/src/pages/hello-world.adoc @@ -0,0 +1,12 @@ += Hello, AsciiDoc! +Doc Writer + +An introduction to http://asciidoc.org[AsciiDoc]. + +== First Section + +* item 1 +* item 2 + +[source,ruby] +puts "Hello, World!" diff --git a/examples/using-asciidoc/src/pages/index.js b/examples/using-asciidoc/src/pages/index.js new file mode 100644 index 0000000000000..745b9bcc32caa --- /dev/null +++ b/examples/using-asciidoc/src/pages/index.js @@ -0,0 +1,36 @@ +import React from "react" +import { Link } from "gatsby" + +import Layout from "../layouts" + +class IndexPage extends React.Component { + render() { + return ( + +
      + {this.props.data.allAsciidoc.edges.map(({ node }) => ( +
    • + {node.slug} +
      • + ))} +
    +     + ) + } +} + +export default IndexPage + +export const pageQuery = graphql` + query allAsciiPages { + allAsciidoc { + edges { + node { + id + html + slug + } + } + } + } +` diff --git a/examples/using-asciidoc/src/pages/lots-of-text.adoc b/examples/using-asciidoc/src/pages/lots-of-text.adoc new file mode 100644 index 0000000000000..d2439e2a56a4e --- /dev/null +++ b/examples/using-asciidoc/src/pages/lots-of-text.adoc @@ -0,0 +1,91 @@ += AsciiDoc Article Title +Firstname Lastname +1.0, July 29, 2014, Asciidoctor 1.5 article template +:toc: +:icons: font +:quick-uri: http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/ + +Content entered directly below the header but before the first section heading is called the preamble. + +== First level heading + +This is a paragraph with a *bold* word and an _italicized_ word. + +.Image caption +image::image-file-name.png[I am the image alt text.] + +This is another paragraph.footnote:[I am footnote text and will be rendered at the bottom of the article.] + +=== Second level heading + +.Unordered list title +* list item 1 +** nested list item +*** nested nested list item 1 +*** nested nested list item 2 +* list item 2 + +This is a paragraph. + +.Example block title +==== +Content in an example block is subject to normal substitutions. +==== + +.Sidebar title +**** +Sidebars contain aside text and are subject to normal substitutions. +**** + +==== Third level heading + +[[id-for-listing-block]] +.Listing block title +---- +Content in a listing block is subject to verbatim substitutions. +Listing block content is commonly used to preserve code input. +---- + +===== Fourth level heading + +.Table title +|=== +|Column heading 1 |Column heading 2 + +|Column 1, row 1 +|Column 2, row 1 + +|Column 1, row 2 +|Column 2, row 2 +|=== + +====== Fifth level heading + +[quote, firstname lastname, movie title] +____ +I am a block quote or a prose excerpt. +I am subject to normal substitutions. +____ + +[verse, firstname lastname, poem title and more] +____ +I am a verse block. + Indents and endlines are preserved in verse blocks. +____ + +== First level heading + +TIP: There are five admonition labels: Tip, Note, Important, Caution and Warning. + +// I am a comment and won't be rendered. + +. ordered list item +.. nested ordered list item +. ordered list item + +The text at the end of this sentence is cross referenced to <<_third_level_heading,the third level heading>> + +== First level heading + +This is a link to the http://asciidoctor.org/docs/user-manual/[Asciidoctor User Manual]. +This is an attribute reference {quick-uri}[which links this text to the Asciidoctor Quick Reference Guide]. diff --git a/examples/using-asciidoc/src/templates/article.js b/examples/using-asciidoc/src/templates/article.js new file mode 100644 index 0000000000000..542cd5410bb62 --- /dev/null +++ b/examples/using-asciidoc/src/templates/article.js @@ -0,0 +1,25 @@ +import React from "react" + +import Layout from "../layouts" + +class Article extends React.Component { + render() { + return ( + +
    + + ) + } +} + +export default Article + +export const pageQuery = graphql` + query asciiHTML($id: String!) { + asciidoc(id: { eq: $id }) { + html + } + } +` diff --git a/examples/using-asciidoc/src/utils/typography.js b/examples/using-asciidoc/src/utils/typography.js new file mode 100644 index 0000000000000..f070170c7faef --- /dev/null +++ b/examples/using-asciidoc/src/utils/typography.js @@ -0,0 +1,40 @@ +import Typography from "typography" +import { + MOBILE_MEDIA_QUERY, + TABLET_MEDIA_QUERY, +} from "typography-breakpoint-constants" + +const options = { + baseFontSize: `18px`, + baseLineHeight: 1.45, + blockMarginBottom: 0.75, + scaleRatio: 2.15, + overrideStyles: ({ rhythm, scale }, options) => { + return { + "h1,h2,h3,h4": { + lineHeight: 1.2, + }, + [TABLET_MEDIA_QUERY]: { + // Make baseFontSize on mobile 17px. + html: { + fontSize: `${(17 / 16) * 100}%`, + }, + }, + [MOBILE_MEDIA_QUERY]: { + // Make baseFontSize on mobile 16px. + html: { + fontSize: `${(16 / 16) * 100}%`, + }, + }, + } + }, +} + +const typography = new Typography(options) + +// Hot reload typography in development. +if (process.env.NODE_ENV !== `production`) { + typography.injectStyles() +} + +export default typography diff --git a/examples/using-contentful/gatsby-config.js b/examples/using-contentful/gatsby-config.js index 3d2106f0fa6e2..c585495ecf7a0 100644 --- a/examples/using-contentful/gatsby-config.js +++ b/examples/using-contentful/gatsby-config.js @@ -11,5 +11,11 @@ module.exports = { }, }, `gatsby-transformer-remark`, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography`, + }, + }, ], } diff --git a/examples/using-contentful/gatsby-node.js b/examples/using-contentful/gatsby-node.js index b76c4553b3aa2..0d7b497591b23 100644 --- a/examples/using-contentful/gatsby-node.js +++ b/examples/using-contentful/gatsby-node.js @@ -7,8 +7,8 @@ const slash = require(`slash`) // called after the Gatsby bootstrap is finished so you have // access to any information necessary to programmatically // create pages. -exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions return new Promise((resolve, reject) => { // The “graphql” function allows us to run arbitrary // queries against the local Contentful graphql schema. Think of diff --git a/examples/using-contentful/package.json b/examples/using-contentful/package.json index e69240f912c5e..c8b94bc5a4458 100644 --- a/examples/using-contentful/package.json +++ b/examples/using-contentful/package.json @@ -5,18 +5,20 @@ "version": "1.0.0", "author": "Marcus Ericsson (mericsson.com)", "dependencies": { - "gatsby": "latest", - "gatsby-image": "^1.0.5", - "gatsby-link": "latest", - "gatsby-plugin-google-analytics": "latest", - "gatsby-plugin-offline": "latest", - "gatsby-source-contentful": "latest", - "gatsby-transformer-remark": "latest", + "gatsby": "next", + "gatsby-image": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-typography": "next", + "gatsby-source-contentful": "next", + "gatsby-transformer-remark": "next", "lodash": "^4.16.4", - "react-typography": "^0.15.0", - "slash": "^1.0.0", - "typography": "^0.15.8", - "typography-breakpoint-constants": "^0.14.0" + "react": "^16.3.1", + "react-dom": "^16.3.1", + "react-typography": "^0.16.3", + "slash": "^2.0.0", + "typography": "^0.16.7", + "typography-breakpoint-constants": "^0.15.0" }, "keywords": [ "gatsby" diff --git a/examples/using-contentful/src/html.js b/examples/using-contentful/src/html.js deleted file mode 100644 index 310c44cbcc879..0000000000000 --- a/examples/using-contentful/src/html.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react" -import { TypographyStyle } from "react-typography" -import * as PropTypes from "prop-types" -import typography from "./utils/typography" - -let stylesStr -if (process.env.NODE_ENV === `production`) { - try { - stylesStr = require(`!raw-loader!../public/styles.css`) - } catch (e) { - console.log(e) - } -} - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends React.Component { - render() { - const { headComponents, body, postBodyComponents } = this.props - let css - if (process.env.NODE_ENV === `production`) { - css = ( - - -
    - {postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -export default Html diff --git a/examples/using-contentful/src/layouts/index.js b/examples/using-contentful/src/layouts/index.js index 6fc8dd7252d11..908663d878879 100644 --- a/examples/using-contentful/src/layouts/index.js +++ b/examples/using-contentful/src/layouts/index.js @@ -1,51 +1,47 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import * as PropTypes from "prop-types" import { rhythm } from "../utils/typography" const propTypes = { - children: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, } -class DefaultLayout extends React.Component { - render() { - return ( -
    - -

    - Example of using Contentful as a data source for a Gatsby site -

    - - {this.props.children()} -
    -

    - The src for this website is at - {` `} - - https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful - -

    -

    - The Contentful site that is providing the data for this site is at - {` `} - - https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1 - -

    -
    - ) - } -} +const DefaultLayout = ({ children }) => ( +
    + +

    + Example of using Contentful as a data source for a Gatsby site +

    + + {children} +
    +

    + The src for this website is at + {` `} + + https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful + +

    +

    + The Contentful site that is providing the data for this site is at + {` `} + + https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1 + +

    +
    +) DefaultLayout.propTypes = propTypes diff --git a/examples/using-contentful/src/pages/image-api.js b/examples/using-contentful/src/pages/image-api.js index 466bc57970f16..953842b4b6aca 100644 --- a/examples/using-contentful/src/pages/image-api.js +++ b/examples/using-contentful/src/pages/image-api.js @@ -1,11 +1,12 @@ import React from "react" import Img from "gatsby-image" +import Layout from "../layouts" import { rhythm } from "../utils/typography" -export default props => { +const ImageAPI = props => { const assets = props.data.allContentfulAsset.edges return ( -
    +

    Image API examples

    Gatsby offers rich integration with{` `} @@ -54,12 +55,11 @@ export default props => { /> -

    Responsive Resolution

    +

    Fixed

    - If you make queries with resolutions then Gatsby - automatically generates images with 1x, 1.5x, 2x, and 3x versions so - your images look great on whatever screen resolution of device they're - on. + If you make queries with fixed then Gatsby automatically + generates images with 1x, 1.5x, 2x, and 3x versions so your images look + great on whatever screen resolution of device they're on.

    If you're on a retina class screen, notice how much sharper these images @@ -68,12 +68,12 @@ export default props => {

    You should prefer this operator over resize.

    - {assets.map(({ node: { title, resolutions } }) => ( -
    + {assets.map(({ node: { title, fixed } }) => ( +
    {title} { edges { node { title - resolutions(width: 100) { + fixed(width: 100) { width height src @@ -109,7 +109,7 @@ export default props => {

    Resizing

    - On both resize and resolutions you can also add a{` `} + On both resize and fixed you can also add a{` `} height {` `} argument to the GraphQL argument to crop the image to a certain size. @@ -129,7 +129,7 @@ export default props => {

    {title} { edges { node { title - resolutions(width: 100, height: 100) { + fixed(width: 100, height: 100) { width height src @@ -161,7 +161,7 @@ export default props => { /> -

    Responsive Sizes

    +

    Fluid

    This GraphQL option allows you to generate responsive images that automatically respond to different device screen resolution and widths. @@ -169,15 +169,16 @@ export default props => { desktop device.

    - Instead of specifying a width and height, with sizes you specify a{` `} + Instead of specifying a width and height, with fluid you + specify a{` `} maxWidth, the max width the container of the images reaches.

    - {assets.map(({ node: { title, sizes } }) => ( + {assets.map(({ node: { title, fluid } }) => ( {title} { edges { node { title - sizes(maxWidth: 613) { + fluid(maxWidth: 613) { sizes src srcSet @@ -211,7 +212,7 @@ export default props => { WebP is an image format that provides lossy and lossless compression that may be better than JPEG or PNG. The srcWebp and{` `} srcSetWebp fields are available for{` `} - resolutions and sizes queries. + fixed and fluid queries.

    WebP is currently only supported in{` `} @@ -229,7 +230,7 @@ export default props => { {title} { edges { node { title - resolutions(width: 100) { + fixed(width: 100) { width height src @@ -262,10 +263,12 @@ export default props => { }} /> -

    + ) } +export default ImageAPI + export const pageQuery = graphql` query ImageAPIExamples { allContentfulAsset(filter: { node_locale: { eq: "en-US" } }) { @@ -277,17 +280,17 @@ export const pageQuery = graphql` width height } - resolutions(width: 100) { - ...GatsbyContentfulResolutions_noBase64 + fixed(width: 100) { + ...GatsbyContentfulFixed_noBase64 } - resizing: resolutions(width: 100, height: 100) { - ...GatsbyContentfulResolutions_noBase64 + resizing: fixed(width: 100, height: 100) { + ...GatsbyContentfulFixed_noBase64 } - webp: resolutions(width: 100) { - ...GatsbyContentfulResolutions_withWebp_noBase64 + webp: fixed(width: 100) { + ...GatsbyContentfulFixed_withWebp_noBase64 } - sizes(maxWidth: 613) { - ...GatsbyContentfulSizes_noBase64 + fluid(maxWidth: 613) { + ...GatsbyContentfulFluid_noBase64 } } } diff --git a/examples/using-contentful/src/pages/index.js b/examples/using-contentful/src/pages/index.js index 7948e9e3eafe0..0924ca5242168 100644 --- a/examples/using-contentful/src/pages/index.js +++ b/examples/using-contentful/src/pages/index.js @@ -1,8 +1,9 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import * as PropTypes from "prop-types" -import { rhythm } from "../utils/typography" import Img from "gatsby-image" +import { rhythm } from "../utils/typography" +import Layout from "../layouts" const propTypes = { data: PropTypes.object.isRequired, @@ -24,11 +25,8 @@ const Product = ({ node }) => ( }} >
    - {node.image[0].resolutions.src && ( - + {node.image[0].fixed.src && ( + )}
    {node.productName.productName}
    @@ -42,35 +40,37 @@ class IndexPage extends React.Component { const usProductEdges = this.props.data.us.edges const deProductEdges = this.props.data.german.edges return ( -
    -

    Gatsby's integration with the Contentful Image API

    - See examples -
    -
    -
    -

    Localization

    -

    - The gatsby-source-contentful plugin offers full support - for Contentful's localization features. Our sample space includes - products localized into both English and German. -

    -

    - An entry and asset node are created for each locale following fallback - rules for missing localization. In addition, each node has an - additional field added, node_locale so you can select for - nodes from a single locale -

    -

    en-US

    - {usProductEdges.map(({ node }, i) => ( - - ))} -
    -
    -

    de

    - {deProductEdges.map(({ node }, i) => ( - - ))} -
    + +
    +

    Gatsby's integration with the Contentful Image API

    + See examples +
    +
    +
    +

    Localization

    +

    + The gatsby-source-contentful plugin offers full support + for Contentful's localization features. Our sample space includes + products localized into both English and German. +

    +

    + An entry and asset node are created for each locale following + fallback rules for missing localization. In addition, each node has + an additional field added, node_locale so you can + select for nodes from a single locale +

    +

    en-US

    + {usProductEdges.map(({ node }, i) => ( + + ))} +
    +
    +

    de

    + {deProductEdges.map(({ node }, i) => ( + + ))} +
    +     ) } } @@ -89,8 +89,8 @@ export const pageQuery = graphql` productName } image { - resolutions(width: 75) { - ...GatsbyContentfulResolutions + fixed(width: 75) { + ...GatsbyContentfulFixed } } } @@ -104,8 +104,8 @@ export const pageQuery = graphql` productName } image { - resolutions(width: 75) { - ...GatsbyContentfulResolutions + fixed(width: 75) { + ...GatsbyContentfulFixed } } } diff --git a/examples/using-contentful/src/templates/category.js b/examples/using-contentful/src/templates/category.js index 0598a4cab23c9..0dde03b1bdc08 100644 --- a/examples/using-contentful/src/templates/category.js +++ b/examples/using-contentful/src/templates/category.js @@ -1,7 +1,8 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import * as PropTypes from "prop-types" import Img from "gatsby-image" +import Layout from "../layouts" import { rhythm } from "../utils/typography" @@ -17,9 +18,9 @@ class CategoryTemplate extends React.Component { product, icon, } = category - const iconImg = icon.resolutions + const iconImg = icon.fixed return ( -
    +

    {title}

    @@ -51,7 +52,7 @@ class CategoryTemplate extends React.Component { ))}
    -
    + ) } } @@ -67,7 +68,7 @@ export const pageQuery = graphql` title } icon { - resolutions(width: 75) { + fixed(width: 75) { base64 src srcSet diff --git a/examples/using-contentful/src/templates/product.js b/examples/using-contentful/src/templates/product.js index a25fd7eac35cc..4237ab6b9f629 100644 --- a/examples/using-contentful/src/templates/product.js +++ b/examples/using-contentful/src/templates/product.js @@ -1,9 +1,8 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import * as PropTypes from "prop-types" import Img from "gatsby-image" - -import { rhythm } from "../utils/typography" +import Layout from "../layouts" const propTypes = { data: PropTypes.object.isRequired, @@ -21,14 +20,14 @@ class ProductTemplate extends React.Component { categories, } = product return ( -
    +
    - +

    {productName}

    {productName}

    @@ -53,7 +52,7 @@ class ProductTemplate extends React.Component {
    -
    + ) } } @@ -75,7 +74,7 @@ export const pageQuery = graphql` } price image { - resolutions(width: 50, height: 50) { + fixed(width: 50, height: 50) { base64 src srcSet diff --git a/examples/using-contentful/src/utils/typography.js b/examples/using-contentful/src/utils/typography.js index f070170c7faef..7b2df83d5787c 100644 --- a/examples/using-contentful/src/utils/typography.js +++ b/examples/using-contentful/src/utils/typography.js @@ -4,7 +4,7 @@ import { TABLET_MEDIA_QUERY, } from "typography-breakpoint-constants" -const options = { +const theme = { baseFontSize: `18px`, baseLineHeight: 1.45, blockMarginBottom: 0.75, @@ -30,11 +30,11 @@ const options = { }, } -const typography = new Typography(options) - -// Hot reload typography in development. -if (process.env.NODE_ENV !== `production`) { - typography.injectStyles() -} +const typography = new Typography(theme) +// Back out the below once Typography is upgraded for es6 export default typography + +export const rhythm = typography.rhythm +export const scale = typography.scale +export const options = typography.options diff --git a/examples/using-css-modules/package.json b/examples/using-css-modules/package.json index 1602cc65c237d..5b1d9fa8395b4 100644 --- a/examples/using-css-modules/package.json +++ b/examples/using-css-modules/package.json @@ -4,9 +4,11 @@ "description": "Gatsby example site demonstrating using css modules in Gatsby with normal (Postcss) css and sass/scss.", "author": "Kyle Mathews ", "dependencies": { - "gatsby": "latest", - "gatsby-link": "latest", - "gatsby-plugin-sass": "latest" + "gatsby": "next", + "gatsby-plugin-sass": "next", + "node-sass": "^4.9.0", + "react": "^16.4.0", + "react-dom": "^16.4.0" }, "license": "MIT", "main": "n/a", diff --git a/examples/using-css-modules/src/pages/another-page.js b/examples/using-css-modules/src/pages/another-page.js index 77582975a3c90..1c0d36d528ead 100644 --- a/examples/using-css-modules/src/pages/another-page.js +++ b/examples/using-css-modules/src/pages/another-page.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import styles from "../styles/another-page.module.css" diff --git a/examples/using-css-modules/src/pages/index.js b/examples/using-css-modules/src/pages/index.js index 789135ab89c02..4a482c6b88e98 100644 --- a/examples/using-css-modules/src/pages/index.js +++ b/examples/using-css-modules/src/pages/index.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import indexStyles from "../styles/index.module.css" diff --git a/examples/using-css-modules/src/pages/sassy-page.js b/examples/using-css-modules/src/pages/sassy-page.js index a01b37684c756..1306fc8e94ba4 100644 --- a/examples/using-css-modules/src/pages/sassy-page.js +++ b/examples/using-css-modules/src/pages/sassy-page.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import styles from "../styles/sass.module.scss" @@ -8,6 +8,7 @@ class IndexComponent extends React.Component { return (

    Cheese: Do you like it?

    +

    🧀 🧀 🧀 🧀 🧀 🧀 🧀

    Back home diff --git a/examples/using-css-modules/src/styles/another-page.module.css b/examples/using-css-modules/src/styles/another-page.module.css index f3f2083bc9dcd..46b9705f6ac90 100644 --- a/examples/using-css-modules/src/styles/another-page.module.css +++ b/examples/using-css-modules/src/styles/another-page.module.css @@ -3,6 +3,7 @@ } .link { + display: inline-flex; border-bottom: 3rem red dotted; font-size: 10rem; line-height: 1.5; diff --git a/examples/using-csv/package.json b/examples/using-csv/package.json index c1d2d080cd1d8..e7605806b3cd2 100644 --- a/examples/using-csv/package.json +++ b/examples/using-csv/package.json @@ -4,12 +4,16 @@ "description": "Gatsby example site using using-csv", "author": "Sonal Saldanha ", "dependencies": { - "gatsby": "latest", - "gatsby-link": "latest", - "gatsby-plugin-google-analytics": "latest", - "gatsby-source-filesystem": "latest", - "gatsby-transformer-csv": "latest" + "gatsby": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-csv": "next", + "react": "^16.4.0", + "react-dom": "^16.4.0" }, + "keywords": [ + "gatsby" + ], "license": "MIT", "main": "n/a", "scripts": { diff --git a/examples/using-drupal/gatsby-config.js b/examples/using-drupal/gatsby-config.js index 20c8d3f987af9..6994c5410cc1d 100644 --- a/examples/using-drupal/gatsby-config.js +++ b/examples/using-drupal/gatsby-config.js @@ -20,5 +20,11 @@ module.exports = { `gatsby-plugin-glamor`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography.js`, + }, + }, ], } diff --git a/examples/using-drupal/gatsby-node.js b/examples/using-drupal/gatsby-node.js index e99e82f50a3a5..ef1f53163b4d7 100644 --- a/examples/using-drupal/gatsby-node.js +++ b/examples/using-drupal/gatsby-node.js @@ -1,8 +1,8 @@ const path = require(`path`) // Create a slug for each recipe and set it as a field on the node. -exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { - const { createNodeField } = boundActionCreators +exports.onCreateNode = ({ node, getNode, actions }) => { + const { createNodeField } = actions if (node.internal.type === `recipes`) { const slug = `/recipes/${node.internalId}/` createNodeField({ @@ -15,8 +15,8 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { // Implement the Gatsby API “createPages”. This is called once the // data layer is bootstrapped to let plugins create pages from data. -exports.createPages = ({ boundActionCreators, graphql }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ actions, graphql }) => { + const { createPage } = actions return new Promise((resolve, reject) => { const recipeTemplate = path.resolve(`src/templates/recipe.js`) diff --git a/examples/using-drupal/package.json b/examples/using-drupal/package.json index 939000e514bef..e40ec693729be 100644 --- a/examples/using-drupal/package.json +++ b/examples/using-drupal/package.json @@ -5,24 +5,27 @@ "version": "1.0.0", "author": "Kyle Mathews ", "dependencies": { - "gatsby": "^1.9.76", - "gatsby-image": "^1.0.16", - "gatsby-link": "^1.6.23", - "gatsby-plugin-glamor": "^1.6.8", - "gatsby-plugin-google-analytics": "^1.0.11", - "gatsby-plugin-offline": "latest", - "gatsby-plugin-sharp": "^1.6.13", - "gatsby-source-drupal": "^2.0.1", - "gatsby-transformer-sharp": "^1.6.13", + "gatsby": "next", + "gatsby-image": "next", + "gatsby-plugin-glamor": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-sharp": "next", + "gatsby-plugin-typography": "next", + "gatsby-source-drupal": "next", + "gatsby-transformer-sharp": "next", + "glamor": "^2.20.40", "gray-percentage": "^2.0.0", "lodash": "^4.16.4", + "react": "^16.3.2", + "react-dom": "^16.3.2", "react-icons": "^2.2.7", - "react-typography": "^0.15.0", + "react-typography": "^0.16.13", "slash": "^1.0.0", "typeface-josefin-sans": "^0.0.43", "typeface-josefin-slab": "^0.0.43", "typeface-rochester": "^0.0.43", - "typography": "^0.15.8", + "typography": "^0.16.16", "typography-breakpoint-constants": "^0.14.0" }, "keywords": [ @@ -34,4 +37,4 @@ "develop": "gatsby develop", "build": "gatsby build" } -} +} \ No newline at end of file diff --git a/examples/using-drupal/src/components/container.js b/examples/using-drupal/src/components/container.js index eb0e23c6e70f7..4042a175adc16 100644 --- a/examples/using-drupal/src/components/container.js +++ b/examples/using-drupal/src/components/container.js @@ -1,6 +1,6 @@ import React from "react" -import { rhythm, scale } from "../utils/typography" +import { rhythm } from "../utils/typography" export default ({ children, diff --git a/examples/using-drupal/src/html.js b/examples/using-drupal/src/html.js deleted file mode 100644 index 5e8b99502bec8..0000000000000 --- a/examples/using-drupal/src/html.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component } from "react" -import * as PropTypes from "prop-types" -import { TypographyStyle } from "react-typography" -import typography from "./utils/typography" - -let stylesStr -if (process.env.NODE_ENV === `production`) { - try { - stylesStr = require(`!raw-loader!../public/styles.css`) - } catch (e) { - console.log(e) - } -} - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends Component { - render() { - let css - if (process.env.NODE_ENV === `production`) { - css = ( - - -
    - {this.props.postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -module.exports = Html diff --git a/examples/using-drupal/src/layouts/index.js b/examples/using-drupal/src/layouts/index.js index 5b1060755ef59..0d96b855d19fa 100644 --- a/examples/using-drupal/src/layouts/index.js +++ b/examples/using-drupal/src/layouts/index.js @@ -1,5 +1,5 @@ import React from "react" -import Link from "gatsby-link" +import { Link } from "gatsby" import gray from "gray-percentage" import SearchIcon from "react-icons/lib/md/search" import "typeface-rochester" @@ -97,7 +97,7 @@ class DefaultLayout extends React.Component {
    - {this.props.children()} + {this.props.children}