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 837a57b296d63..b65cfcbfd3244 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 @@ -93,14 +93,16 @@ After installing each of these functional plugins, we'll edit `gatsby-config.js`, which Gatsby loads at build-time to implement the exposed functionality of the specified plugins. -```javascript{6-9}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { siteMetadata: { title: `Your Name - Blog`, author: `Your Name`, }, + // highlight-start plugins: ["gatsby-plugin-catch-links", "gatsby-plugin-react-helmet"], } +// highlight-end ``` Without any additional work besides a `yarn install` and editing a config file, @@ -127,12 +129,13 @@ into our `gatsby-config.js`, like so: yarn add gatsby-source-filesystem ``` -```javascript{6-12}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { // previous configuration plugins: [ "gatsby-plugin-catch-links", "gatsby-plugin-react-helmet", + // highlight-start { resolve: `gatsby-source-filesystem`, options: { @@ -140,6 +143,7 @@ module.exports = { name: "pages", }, }, + // highlight-end ], } ``` @@ -178,7 +182,7 @@ yarn add gatsby-transformer-remark and editing `gatsby-config.js` -```javascript{13-18}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { // previous setup plugins: [ @@ -191,12 +195,14 @@ module.exports = { name: "pages", }, }, + // highlight-start { resolve: "gatsby-transformer-remark", options: { plugins: [], // just in case those previously mentioned remark plugins sound cool :) }, }, + // highlight-end ], } ``` @@ -294,7 +300,7 @@ very simply the pieces of data that we want to display for our blog post. Each piece of data our query selects will be injected via the `data` property we specified earlier. -```javascript{23-32}:title=src/templates/blog-post.js +```javascript:title=src/templates/blog-post.js import React from "react" import Helmet from "react-helmet" import { graphql } from "gatsby" @@ -317,6 +323,7 @@ export default function Template({ data }) { ) } +// highlight-start export const pageQuery = graphql` query BlogPostByPath($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { @@ -329,6 +336,7 @@ export const pageQuery = graphql` } } ` +// highlight-end ``` If you're not familiar with GraphQL, this may seem slightly confusing, but we can @@ -398,7 +406,7 @@ query, which will fetch all of our Markdown posts. ### Querying for posts -```javascript{8-31}:title=gatsby-node.js +```javascript:title=gatsby-node.js const path = require("path") exports.createPages = ({ actions, graphql }) => { @@ -406,6 +414,7 @@ exports.createPages = ({ actions, graphql }) => { const blogPostTemplate = path.resolve(`src/templates/blog-post.js`) + // highlight-start return graphql(` { allMarkdownRemark( @@ -427,6 +436,7 @@ exports.createPages = ({ actions, graphql }) => { } }) } +// highlight-end ``` We're using GraphQL to get all Markdown nodes and making them available under @@ -447,7 +457,7 @@ pages (with the `createPage` action creator). Let's do that! ### Creating the pages -```javascript{28-34}:title=gatsby-node.js +```javascript:title=gatsby-node.js const path = require("path") exports.createPages = ({ actions, graphql }) => { @@ -475,6 +485,7 @@ exports.createPages = ({ actions, graphql }) => { return Promise.reject(result.errors) } + // highlight-start result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.frontmatter.path, @@ -482,6 +493,7 @@ exports.createPages = ({ actions, graphql }) => { context: {}, // additional data can be passed via context }) }) + // highlight-end }) } ``` diff --git a/docs/blog/2018-10-25-unstructured-data/index.md b/docs/blog/2018-10-25-unstructured-data/index.md index 447cf32cd8f83..0bcfed1b6d517 100644 --- a/docs/blog/2018-10-25-unstructured-data/index.md +++ b/docs/blog/2018-10-25-unstructured-data/index.md @@ -56,17 +56,18 @@ That's it! By [exporting `createPages`](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L21) from our example Gatsby site's `gatsby-node.js` file, we're saying, "at this point in the bootstrapping sequence, run this code". -```javascript{1,3}:title=gatsby-node.js +```javascript:title=gatsby-node.js +// highlight-next-line exports.createPages = () => { // Run this code -} +} // highlight-line ``` #### 2. [Fetch the data](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L22) from the PokéAPI. -```javascript{2}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.createPages = async () => { - const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) + const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) // highlight-line } ``` @@ -76,7 +77,8 @@ _Note: [`getPokemonData`](https://github.com/jlengstorf/gatsby-with-unstructured When you hook into a Gatsby API (like `createPages` from step one), you are passed a collection of actions. In this example, we're extracting the [`createPage` action](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L21) using ES6 object destructuring: -```javascript{1}:title=gatsby-node.js +```javascript:title=gatsby-node.js +// highlight-next-line exports.createPages = async ({ actions: { createPage } }) => { const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) } @@ -84,16 +86,18 @@ exports.createPages = async ({ actions: { createPage } }) => { #### 4. Create a page that [lists all Pokémon](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L25). -```javascript{4-9}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.createPages = async ({ actions: { createPage } }) => { const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) + // highlight-start // Create a page that lists all Pokémon. createPage({ path: `/`, component: require.resolve("./src/templates/all-pokemon.js"), context: { allPokemon }, }) + // highlight-end } ``` @@ -105,21 +109,23 @@ The [`createPage` action](/docs/actions/#createPage) is passed an object contain In our example, we're accessing the context as [props to the component](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/src/templates/all-pokemon.js#L4). This allows us to completely circumvent Gatsby’s data layer; it’s just props. -```jsx{1,3,5,12-14}:title=src/templates/all-pokemon.js -export default ({ pageContext: { allPokemon } }) => ( +```jsx:title=src/templates/all-pokemon.js +export default ({ pageContext: { allPokemon } }) => (// highlight-line {...} - {allPokemon.map(pokemon => ( + {allPokemon.map(pokemon => ( // highlight-line
  • + {/* highlight-start */} {pokemon.name}

    {pokemon.name}

    + {/* highlight-end */}
    • ))} @@ -129,7 +135,7 @@ export default ({ pageContext: { allPokemon } }) => ( #### 5. Create a page [for each Pokémon](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L32). -```javascript{11-18}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.createPages = async ({ actions: { createPage } }) => { const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) @@ -140,6 +146,7 @@ exports.createPages = async ({ actions: { createPage } }) => { context: { allPokemon }, }) + // highlight-start // Create a page for each Pokémon. allPokemon.forEach(pokemon => { createPage({ @@ -148,12 +155,13 @@ exports.createPages = async ({ actions: { createPage } }) => { context: { pokemon }, }) }) + // highlight-end } ``` #### 6. Create a page [for each ability of each Pokémon](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L40). -```javascript{19-26}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.createPages = async ({ actions: { createPage } }) => { const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) @@ -172,6 +180,7 @@ exports.createPages = async ({ actions: { createPage } }) => { context: { pokemon }, }) + // highlight-start // Create a page for each ability of the current Pokémon. pokemon.abilities.forEach(ability => { createPage({ @@ -180,6 +189,7 @@ exports.createPages = async ({ actions: { createPage } }) => { context: { pokemon, ability }, }) }) + // highlight-end }) } ``` diff --git a/docs/docs/add-page-metadata.md b/docs/docs/add-page-metadata.md index 29f37e9fd16cc..18b08e68f9429 100644 --- a/docs/docs/add-page-metadata.md +++ b/docs/docs/add-page-metadata.md @@ -28,7 +28,7 @@ npm install --save gatsby-plugin-react-helmet react-helmet 3. Use `React Helmet` in your pages: -```jsx{8-12} +```jsx import React from "react" import { Helmet } from "react-helmet" @@ -36,12 +36,13 @@ class Application extends React.Component { render() { return (
    + {/* highlight-start */} My Title - ... + {/* highlight-end */}
    ) } diff --git a/docs/docs/adding-pagination.md b/docs/docs/adding-pagination.md index 0250f7c1bf450..08f354d83edb0 100644 --- a/docs/docs/adding-pagination.md +++ b/docs/docs/adding-pagination.md @@ -13,7 +13,7 @@ The information needed to query for those specific items (i.e. values for [`limi ### Example -```js{20-25}:title=src/templates/blog-list-template.js +```js:title=src/templates/blog-list-template.js import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" @@ -33,12 +33,14 @@ export default class BlogList extends React.Component { } export const blogListQuery = graphql` +// highlight-start query blogListQuery($skip: Int!, $limit: Int!) { allMarkdownRemark( sort: { fields: [frontmatter___date], order: DESC } limit: $limit skip: $skip ) { +// highlight-end edges { node { fields { @@ -54,7 +56,7 @@ export const blogListQuery = graphql` ` ``` -```js{34-47}:title=gatsby-node.js +```js:title=gatsby-node.js const path = require("path") const { createFilePath } = require("gatsby-source-filesystem") @@ -88,6 +90,7 @@ exports.createPages = ({ graphql, actions }) => { // ... // Create blog-list pages + // highlight-start const posts = result.data.allMarkdownRemark.edges const postsPerPage = 6 const numPages = Math.ceil(posts.length / postsPerPage) @@ -102,6 +105,7 @@ exports.createPages = ({ graphql, actions }) => { }, }) }) + // highlight-end }) ) }) diff --git a/docs/docs/authentication-tutorial.md b/docs/docs/authentication-tutorial.md index 127c48b07c3e6..8b41ae95b8235 100644 --- a/docs/docs/authentication-tutorial.md +++ b/docs/docs/authentication-tutorial.md @@ -62,14 +62,14 @@ export default () => ( And edit the layout component to include it: -```jsx{7,41}:title=src/components/layout.js +```jsx:title=src/components/layout.js import React from "react" import PropTypes from "prop-types" import Helmet from "react-helmet" import { StaticQuery, graphql } from "gatsby" import Header from "./header" -import NavBar from "./navBar" +import NavBar from "./navBar" // highlight-line import "./layout.css" const Layout = ({ children }) => ( @@ -103,7 +103,7 @@ const Layout = ({ children }) => ( paddingTop: 0, }} > - + {/* highlight-line */} {children} @@ -120,7 +120,7 @@ export default Layout Lastly, change the index page to include this new content: -```jsx{9-11}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" import { Link } from "gatsby" @@ -129,9 +129,11 @@ import Layout from "../components/layout" const IndexPage = () => (

    Hi people

    + {/* highlight-start */}

    You should log in to see restricted content

    + {/* highlight-end */}     ) @@ -328,19 +330,19 @@ export default PrivateRoute And now you can edit your Router to use the PrivateRoute component: -```jsx{4,11}:title=src/pages/app.js +```jsx:title=src/pages/app.js import React from "react" import { Router } from "@reach/router" import Layout from "../components/layout" -import PrivateRoute from "../components/privateRoute" +import PrivateRoute from "../components/privateRoute" // highlight-line import Profile from "../components/profile" import Login from "../components/login" const App = () => ( - - + {/* highlight-next-line */} + ) @@ -354,11 +356,12 @@ With the client-only routes in place, you must now refactor some files to accoun The navigation bar will show the user name and logout option to registered users: -```jsx{2-3,5-12,21,26,28-38,42}:title=src/components/navBar.js +```jsx:title=src/components/navBar.js import React from "react" -import { Link, navigate } from "gatsby" -import { getUser, isLoggedIn, logout } from "../services/auth" +import { Link, navigate } from "gatsby" // highlight-line +import { getUser, isLoggedIn, logout } from "../services/auth" // highlight-line +// highlight-start export default () => { const content = { message: "", login: true } if (isLoggedIn()) { @@ -367,6 +370,7 @@ export default () => { content.message = "You are not logged in" } return ( + {/* highlight-end */}
    { borderBottom: "1px solid #d1c1e0", }} > - {content.message} + {content.message} {/* highlight-line */}
    ) -} +} // highlight-line ``` The index page will suggest to login or check the profile accordingly: -```jsx{3,7-8,10-23,26}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" import { Link } from "gatsby" -import { getUser, isLoggedIn } from "../services/auth" +import { getUser, isLoggedIn } from "../services/auth" // highlight-line import Layout from "../components/layout" +// highlight-start const IndexPage = () => { return ( + // highlight-end + {/* highlight-start */}

    Hi {isLoggedIn() ? getUser().name : "people"}

    {isLoggedIn() ? ( @@ -425,25 +434,28 @@ const IndexPage = () => { )}

    + {/* highlight-end */}     ) -} +} // highlight-line export default IndexPage ``` And the profile will show the user data: -```jsx{2,8,9}:title=src/components/profile.js +```jsx:title=src/components/profile.js import React from "react" -import { getUser } from "../services/auth" +import { getUser } from "../services/auth" // highlight-line const Profile = () => ( <>

    Your profile

    ) diff --git a/docs/docs/babel-plugin-macros.md b/docs/docs/babel-plugin-macros.md index 5c9a28a1546c9..a8cfb63fa4bbb 100644 --- a/docs/docs/babel-plugin-macros.md +++ b/docs/docs/babel-plugin-macros.md @@ -42,9 +42,9 @@ import preval from "preval.macro" You can then use the imported variable however the macro's documentation says. `preval.macro` is used as a template literal tag: -```javascript{2} +```javascript import preval from "preval.macro" -const x = preval`module.exports = 1` +const x = preval`module.exports = 1` // highlight-line ``` When building your project with `gatsby develop` or `gatsby build`, this code diff --git a/docs/docs/creating-slugs-for-pages.md b/docs/docs/creating-slugs-for-pages.md index 2209b5b1adf98..8f176836d0544 100644 --- a/docs/docs/creating-slugs-for-pages.md +++ b/docs/docs/creating-slugs-for-pages.md @@ -14,18 +14,22 @@ Add your new slugs directly onto the `MarkdownRemark` nodes. Any data you add to To do so, you'll use a function passed to our API implementation called [`createNodeField`](/docs/bound-action-creators/#createNodeField). This function allows you to create additional fields on nodes created by other plugins. -```javascript{3,4,6-11}:title=gatsby-node.js +```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) +// highlight-start exports.onCreateNode = ({ node, getNode, actions }) => { const { createNodeField } = actions + // highlight-end if (node.internal.type === `MarkdownRemark`) { + // highlight-start const slug = createFilePath({ node, getNode, basePath: `pages` }) createNodeField({ node, name: `slug`, value: slug, }) + // highlight-end } } ``` diff --git a/docs/docs/ecommerce-tutorial/index.md b/docs/docs/ecommerce-tutorial/index.md index a9cab3d41ea44..bd406f97ad787 100644 --- a/docs/docs/ecommerce-tutorial/index.md +++ b/docs/docs/ecommerce-tutorial/index.md @@ -4,20 +4,28 @@ title: "Gatsby E-Commerce Tutorial" # Table of Contents -1. [Why use Gatsby for an e-commerce site?](#why-use-gatsby-for-an-e-commerce-site) -2. [Prerequisites](#prerequisites) -3. [Setting up a Gatsby site](#setting-up-a-gatsby-site) -4. [Installing Stripe Checkout plugin](#installing-stripe-checkout-plugin) -5. [Creating a button](#creating-a-button) -6. [Importing checkout component into homepage](#importing-checkout-component-into-homepage) -7. [Getting Your Stripe test keys](#getting-your-stripe-test-keys) -8. [Configuring Stripe in Gatsby](#configuring-stripe-in-gatsby) -9. [Setting up a serverless function in AWS Lambda](#setting-up-a-serverless-function-in-aws-lambda) -10. [Setting up a separate repo](#setting-up-a-separate-repo) -11. [Editing your new repo](#editing-your-new-repo) -12. [Pushing code to AWS](#pushing-code-to-aws) -13. [Configuring serverless with your AWS credentials](#configuring-serverless-with-your-aws-credentials) -14. [Testing Payments](#testing-payments) +- [Table of Contents](#table-of-contents) +- [Why use Gatsby for an e-commerce site?](#why-use-gatsby-for-an-e-commerce-site) +- [Prerequisites](#prerequisites) + - [How does Gatsby work with Stripe and AWS?](#how-does-gatsby-work-with-stripe-and-aws) +- [Setting up a Gatsby site](#setting-up-a-gatsby-site) +- [Installing Stripe Checkout plugin](#installing-stripe-checkout-plugin) + - [See your site hot reload in the browser!](#see-your-site-hot-reload-in-the-browser) + - [How does the Stripe Checkout plugin work?](#how-does-the-stripe-checkout-plugin-work) +- [Creating a button](#creating-a-button) + - [Sequence of events](#sequence-of-events) + - [What did you just do?](#what-did-you-just-do) +- [Importing checkout component into the homepage](#importing-checkout-component-into-the-homepage) +- [Getting your Stripe test keys](#getting-your-stripe-test-keys) +- [Configuring Stripe in Gatsby](#configuring-stripe-in-gatsby) +- [Setting up a Serverless Function in AWS Lambda](#setting-up-a-serverless-function-in-aws-lambda) +- [Setting up a separate repo](#setting-up-a-separate-repo) + - [What did you just do?](#what-did-you-just-do-1) +- [Editing your new repo](#editing-your-new-repo) + - [How does the code work on this site?](#how-does-the-code-work-on-this-site) +- [Pushing code to AWS](#pushing-code-to-aws) +- [Configuring serverless with your AWS credentials](#configuring-serverless-with-your-aws-credentials) +- [Testing Payments](#testing-payments) # Why use Gatsby for an e-commerce site? @@ -254,14 +262,14 @@ The tags in the `render()` function define the structure of HTML elements that l Now go to your `src/pages/index.js` file. This is your homepage that shows at the root URL. Import your new checkout component in the file underneath the other two imports and replace the tags inside the first `
    ` tag with a `` tag. Your `index.js` file should now look like this: -```js{3,7}:title=src/pages/index.js +```js:title=src/pages/index.js import React from "react" import { Link } from "gatsby" -import Checkout from "../components/checkout" +import Checkout from "../components/checkout" // highlight-line const IndexPage = () => (
    - + {/* highlight-line */}
    ) @@ -346,10 +354,12 @@ You don’t need to change any code in the `checkout.js` (not to be confused wit The beginning of the file looks like this: -```js{1-3}:title=checkout.js +```js:title=checkout.js +// highlight-start const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY); module.exports.handler = (event, context, callback) => { +// highlight-end . . . @@ -361,18 +371,18 @@ The next line exports `handler`, a function that will handle your checkout logic The next snippet of code (shown below), pulls some of the information on the `event` object that this function receives and stores them in the variables `requestData`, `amount`, and `token`. -```js{6-11}:title=checkout.js +```js:title=checkout.js // Pull out the amount and id for the charge from the POST console.log(event) const requestData = JSON.parse(event.body) console.log(requestData) const amount = requestData.amount -const token = requestData.token.id +const token = requestData.token.id //highlight-line ``` The next 2 lines are to comply with web browser security standards. Because our Gatsby site will be at a different url than the function that we are going to upload to AWS, we have to include these headers in our response to say it’s okay to communicate with different URLs on the internet. -```js{13-17}:title=checkout.js +```js:title=checkout.js // Headers to prevent CORS issues const headers = { "Access-Control-Allow-Origin": "*", @@ -382,7 +392,7 @@ const headers = { The last section of code is where the actual Stripe charge is created, and then the information about whether that charge was successful or not is sent back as a response. -```js{19-50}:title=checkout.js +```js:title=checkout.js return stripe.charges .create({ // Create Stripe charge with token @@ -401,6 +411,7 @@ return stripe.charges message: `Charge processed!`, charge, }), + // highlight-start } callback(null, response) }) @@ -416,6 +427,7 @@ return stripe.charges } callback(null, response) }) +// highlight-end ``` A few things happen with `stripe.charges.create()`: it takes an object as an argument that tells the amount to charge, the unique token made by stripe that hides all the credit card information from us, as well as other information like currency to provide more information about the transaction. @@ -480,7 +492,7 @@ functions: Copy the URL after the “-” in the post endpoint section, and paste it into your ecommerce-gatsby-tutorial site in the src > components > checkout.js file where it says `AWS_LAMBDA_URL` -```js{9}:title=src/components/checkout.js +```js:title=src/components/checkout.js openStripeCheckout(event) { event.preventDefault() this.setState({ disabled: true, buttonText: 'WAITING...' }) @@ -489,7 +501,7 @@ openStripeCheckout(event) { amount: amount, description: 'A product well worth your time', token: token => { - fetch(`AWS_LAMBDA_URL`, { + fetch(`AWS_LAMBDA_URL`, { // highlight-line method: 'POST', body: JSON.stringify({ token, diff --git a/docs/docs/glamor.md b/docs/docs/glamor.md index e03d63467ac80..0d0a0201cb817 100644 --- a/docs/docs/glamor.md +++ b/docs/docs/glamor.md @@ -50,13 +50,14 @@ export default () => ( Let's add css styles to `Container` and add a inline `User` component using Glamor's `css` prop. -```jsx{4,7-29,35-42} +```jsx import React from "react" const Container = ({ children }) => ( -
    {children}
    +
    {children}
    {/* highlight-line */} ) +// highlight-start const User = props => (
    ( export default () => ( + {/* highlight-end */}

    About Glamor

    Glamor is cool

    + excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit." {/* highlight-line */} + /> {/* highlight-line */} + + {/* highlight-start */}     + {/* highlight-end */} ) ``` diff --git a/docs/docs/image-tutorial.md b/docs/docs/image-tutorial.md index 502c0b5b1b0bc..90350af34d91a 100644 --- a/docs/docs/image-tutorial.md +++ b/docs/docs/image-tutorial.md @@ -31,7 +31,7 @@ npm install --save gatsby-source-wordpress Add the `gatsby-source-wordpress` plugin to `gatsby-config.js` using the following code, which you can also find in the [demo site’s source code](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-config.js). -```javascript{32-58}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { siteMetadata: { title: "Gatsby WordPress Tutorial", @@ -42,6 +42,7 @@ module.exports = { * Gatsby's data processing layer begins with “source” * plugins. Here the site sources its data from WordPress. */ + // highlight-start { resolve: `gatsby-source-wordpress`, options: { @@ -62,6 +63,7 @@ module.exports = { useACF: true, }, }, + // highlight-end ], } ``` @@ -77,7 +79,7 @@ npm install --save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image Place these plugins in your `gatsby-config.js` like this: -```javascript{112-121}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { siteMetadata: { title: "Gatsby WordPress Tutorial", @@ -108,9 +110,11 @@ module.exports = { useACF: true, }, }, + // highlight-start "gatsby-plugin-react-helmet", "gatsby-transformer-sharp", "gatsby-plugin-sharp", + // highlight-end ], } ``` diff --git a/docs/docs/layout-components.md b/docs/docs/layout-components.md index 8fd389cac6b06..c532311ded195 100644 --- a/docs/docs/layout-components.md +++ b/docs/docs/layout-components.md @@ -32,14 +32,14 @@ export default ({ children }) => ( If you want to apply a layout to a page, you will need to include the `Layout` component and wrap your page in it. For example, here is how you would apply your layout to the front page: -```jsx{2,5,7}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" -import Layout from "../components/layout" +import Layout from "../components/layout" // highlight-line export default () => ( - + {/* highlight-line */}

    I’m in a layout!

    -     +     {/* highlight-line */} ) ``` diff --git a/docs/docs/programmatically-create-pages-from-data.md b/docs/docs/programmatically-create-pages-from-data.md index eb9323d538494..10de8a7a7d044 100644 --- a/docs/docs/programmatically-create-pages-from-data.md +++ b/docs/docs/programmatically-create-pages-from-data.md @@ -21,7 +21,7 @@ access to the [`createPage`](https://www.gatsbyjs.org/docs/actions/#createPage) action which is at the core of programmatically creating a page. -```javascript{17-25}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return new Promise((resolve, reject) => { @@ -38,6 +38,7 @@ exports.createPages = ({ graphql, actions }) => { } } `).then(result => { + // highlight-start result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.fields.slug, @@ -47,6 +48,7 @@ exports.createPages = ({ graphql, actions }) => { }, }) }) + // highlight-end resolve() }) }) diff --git a/docs/docs/source-plugin-tutorial.md b/docs/docs/source-plugin-tutorial.md index 039e97c1ecd46..df803025ee940 100644 --- a/docs/docs/source-plugin-tutorial.md +++ b/docs/docs/source-plugin-tutorial.md @@ -209,7 +209,7 @@ Note that Gatsby is warning that your plugin doesn't do anything yet. Time to fi Update `gatsby-node.js` in your `plugins/gatsby-source-pixabay/` directory: -```js{10-29}:title=gatsby-node.js +```js:title=gatsby-node.js const fetch = require("node-fetch") const queryString = require("query-string") @@ -219,6 +219,7 @@ exports.sourceNodes = ( ) => { const { createNode } = actions + // highlight-start // Gatsby adds a configOption that's not needed for this plugin, delete it delete configOptions.plugins @@ -239,6 +240,7 @@ exports.sourceNodes = ( // For each query result (or 'hit') data.hits.forEach(photo => { console.log("Photo data is:", photo) + // highlight-end }) }) ) @@ -271,7 +273,7 @@ You're ready to add the final step of your plugin - converting this data into a You're adding a helper function on lines 11 to 27 and processing the data into a node on lines 44 to 47: -```js{11-27,44-47}:title=gatsby-node.js +```js:title=gatsby-node.js const fetch = require("node-fetch") const queryString = require("query-string") @@ -282,6 +284,7 @@ exports.sourceNodes = ( const { createNode } = actions // Gatsby adds a configOption that's not needed for this plugin, delete it + // highlight-start delete configOptions.plugins // Helper function that processes a photo to match Gatsby's node structure @@ -299,6 +302,7 @@ exports.sourceNodes = ( contentDigest: createContentDigest(photo), }, }) + // highlight-end return nodeData } diff --git a/docs/docs/sourcing-from-the-filesystem.md b/docs/docs/sourcing-from-the-filesystem.md index 204b450ffa6fc..3fe95427c8f48 100644 --- a/docs/docs/sourcing-from-the-filesystem.md +++ b/docs/docs/sourcing-from-the-filesystem.md @@ -22,12 +22,13 @@ npm install --save gatsby-source-filesystem Then add it to your project's `gatsby-config.js` file: -```javascript{6-12}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { siteMetadata: { title: `Your Site Name`, }, plugins: [ + // highlight-start { resolve: `gatsby-source-filesystem`, options: { @@ -35,6 +36,7 @@ module.exports = { path: `${__dirname}/src/`, }, }, + // highlight-end ], } ``` diff --git a/docs/docs/using-unstructured-data.md b/docs/docs/using-unstructured-data.md index 7d68e638cc26f..a208a55b41217 100644 --- a/docs/docs/using-unstructured-data.md +++ b/docs/docs/using-unstructured-data.md @@ -12,7 +12,7 @@ Most examples in the Gatsby docs and on the web at large focus on leveraging sou In your Gatsby project's `gatsby-node.js` file, fetch the needed data, and supply it to the `createPage` action within the `createPages` API: -```javascript{9,15,17}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.createPages = async ({ actions: { createPage } }) => { // `getPokemonData` is a function that fetches our data const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) @@ -21,15 +21,15 @@ exports.createPages = async ({ actions: { createPage } }) => { createPage({ path: `/`, component: require.resolve("./src/templates/all-pokemon.js"), - context: { allPokemon }, + context: { allPokemon }, // highlight-line }) // Create a page for each Pokémon. allPokemon.forEach(pokemon => { createPage({ - path: `/pokemon/${pokemon.name}/`, + path: `/pokemon/${pokemon.name}/`, // highlight-line component: require.resolve("./src/templates/pokemon.js"), - context: { pokemon }, + context: { pokemon }, // highlight-line }) }) } @@ -40,17 +40,22 @@ exports.createPages = async ({ actions: { createPage } }) => { On the highlighted lines, the data is being supplied to the page template, where it can be accessed as props: -```javascript{1,3-4,7-10}:title=/src/templates/pokemon.js +```javascript:title=/src/templates/pokemon.js +// highlight-next-line export default ({ pageContext: { pokemon } }) => (
    + {/* highlight-start */}

    {pokemon.name}

    {pokemon.name} + {/* highlight-end */}

    Abilities

      + {/* highlight-start */} {pokemon.abilities.map(ability => (
    • {ability.name} + {/* highlight-end */}
      • ))} diff --git a/docs/docs/wordpress-source-plugin-tutorial.md b/docs/docs/wordpress-source-plugin-tutorial.md index a96b9a4f3bae9..ba340e1b92470 100644 --- a/docs/docs/wordpress-source-plugin-tutorial.md +++ b/docs/docs/wordpress-source-plugin-tutorial.md @@ -37,7 +37,7 @@ npm install --save gatsby-source-wordpress Add the `gatsby-source-wordpress` plugin to `gatsby-config.js` using the following code, which you can also find in the [demo site’s source code](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-config.js). -```js{11-30}:title=gatsby-config.js +```js:title=gatsby-config.js module.exports = { siteMetadata: { title: "Gatsby WordPress Tutorial", @@ -48,6 +48,7 @@ module.exports = { * Gatsby's data processing layer begins with “source” * plugins. Here the site sources its data from WordPress. */ + // highlight-start { resolve: `gatsby-source-wordpress`, options: { @@ -68,6 +69,7 @@ module.exports = { useACF: true, }, }, + // highlight-end ], } ``` diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index fa704b140eaba..deceb43d7b0de 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -168,7 +168,7 @@ npm install --save gatsby-plugin-react-helmet react-helmet 3. Use `React Helmet` in your pages: -```jsx{8-12} +```jsx import React from "react" import { Helmet } from "react-helmet" @@ -176,12 +176,14 @@ class Application extends React.Component { render() { return (
      + {/* highlight-start */} My Title ... + {/* highlight-end */}
      ) } diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 1d7d74c85c7ff..f380237589bb4 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -48,12 +48,13 @@ npm install --save gatsby-source-filesystem Then add it to your `gatsby-config.js`: -```javascript{6-12}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { siteMetadata: { title: `Pandas Eating Lots`, }, plugins: [ + // highlight-start { resolve: `gatsby-source-filesystem`, options: { @@ -61,6 +62,7 @@ module.exports = { path: `${__dirname}/src/`, }, }, + // highlight-end `gatsby-plugin-emotion`, { resolve: `gatsby-plugin-typography`, @@ -108,13 +110,13 @@ Let's try this. Create a new file at `src/pages/my-files.js` with the `allFile` GraphQL query you just created: -```jsx{6}:title=src/pages/my-files.js +```jsx:title=src/pages/my-files.js import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" export default ({ data }) => { - console.log(data) + console.log(data) // highlight-line return (
      Hello world
      @@ -151,7 +153,7 @@ The shape of the data matches the shape of the GraphQL query. Add some code to your component to print out the File data. -```jsx{9-31}:title=src/pages/my-files.js +```jsx:title=src/pages/my-files.js import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" @@ -160,6 +162,7 @@ export default ({ data }) => { console.log(data) return ( + {/* highlight-start */}

      My Site's Files

      @@ -183,6 +186,7 @@ export default ({ data }) => {
      + {/* highlight-end */}       ) } diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md index 9700b6ad7c3c3..8e50e9a213493 100644 --- a/docs/tutorial/part-four/index.md +++ b/docs/tutorial/part-four/index.md @@ -215,11 +215,13 @@ But what if you want to change the site title in the future? You'd have to searc The place for these common bits of data is the `siteMetadata` object in the `gatsby-config.js` file. Add your site title to the `gatsby-config.js` file: -```javascript{2-4}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { + // highlight-start siteMetadata: { title: `Title from siteMetadata`, }, + // highlight-end plugins: [ `gatsby-plugin-emotion`, { @@ -238,14 +240,15 @@ Restart the development server. Now the site title is available to be queried; Add it to the `about.js` file using a [page query](/docs/page-query): -```jsx{2,5,7,14-23}:title=src/pages/about.js +```jsx:title=src/pages/about.js import React from "react" -import { graphql } from "gatsby" +import { graphql } from "gatsby" // highlight-line import Layout from "../components/layout" +// highlight-next-line export default ({ data }) => ( -

      About {data.site.siteMetadata.title}

      +

      About {data.site.siteMetadata.title}

      {/* highlight-line */}

      We're the only site running on your computer dedicated to showing the best photos and videos of pandas eating lots of food. @@ -253,6 +256,7 @@ export default ({ data }) => ( ) +// highlight-start export const query = graphql` query { site { @@ -262,6 +266,7 @@ export const query = graphql` } } ` +// highlight-end ``` It worked! 🎉 @@ -290,14 +295,16 @@ Page queries live outside of the component definition -- by convention at the en Go ahead and add a `` to your `src/components/layout.js` file, and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this: -```jsx{3,8-18,35,48-49}:title=src/components/layout.js +```jsx:title=src/components/layout.js import React from "react" import { css } from "@emotion/core" +// highlight-next-line import { StaticQuery, Link, graphql } from "gatsby" import { rhythm } from "../utils/typography" export default ({ children }) => ( + {/* highlight-start */} ( } `} render={data => ( + {/* highlight-end */}

      ( font-style: normal; `} > - {data.site.siteMetadata.title} + {data.site.siteMetadata.title}{/* highlight-line */} ( {children}
      + {/* highlight-start */} )} /> + {/* highlight-end */} ) ``` diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index 73905a97a55cc..af125386b5927 100644 --- a/docs/tutorial/part-one/index.md +++ b/docs/tutorial/part-one/index.md @@ -66,13 +66,15 @@ export default () => ( 3. Remove the font size styling. Change the “Hello Gatsby!” text to a level-one header. Add a paragraph beneath the header. -```jsx{4-6}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" export default () => ( + {/* highlight-start */}

      Hello Gatsby!

      What a world.

      + {/* highlight-end */}
      ) ``` @@ -81,14 +83,15 @@ export default () => ( 4. Add an image. (In this case, a random image from Unsplash). -```jsx{7}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" export default () => (

      Hello Gatsby!

      What a world.

      - + {" "} + {/* highlight-next-line */}
      ) ``` @@ -190,13 +193,13 @@ export default () =>

      This is a header.

      3. Modify the `about.js` file to import the `Header` component. Replace the `h1` markup with `
      `: -```jsx{2,6}:title=src/pages/about.js +```jsx:title=src/pages/about.js import React from "react" -import Header from "../components/header" +import Header from "../components/header" // highlight-line export default () => (
      -
      +
      {/* highlight-line */}

      Such wow. Very React.

      ) @@ -208,21 +211,21 @@ In the browser, the “About Gatsby” header text should now be replaced with 4. Head back to `src/components/header.js`, and make the following change: -```jsx{3}:title=src/components/header.js +```jsx:title=src/components/header.js import React from "react" -export default props =>

      {props.headerText}

      +export default props =>

      {props.headerText}

      {/* highlight-line */} ``` 5. Head back to `src/pages/about.js` and make the following change: -```jsx{6}:title=src/pages/about.js +```jsx:title=src/pages/about.js import React from "react" import Header from "../components/header" export default () => (
      -
      +
      {/* highlight-line */}

      Such wow. Very React.

      ) @@ -260,14 +263,14 @@ If you had passed another prop to our `
      ` component, like so... 6. To emphasize how this makes your components reusable, add an extra `
      ` component to the about page. Add the following code to the `src/pages/about.js` file, and save. -```jsx{7}:title=src/pages/about.js +```jsx:title=src/pages/about.js import React from "react" import Header from "../components/header" export default () => (
      -
      +
      {/* highlight-line */}

      Such wow. Very React.

      ) @@ -291,14 +294,14 @@ You'll often want to link between pages -- Let's look at routing in a Gatsby sit 1. Open the index page component (`src/pages/index.js`). Import the `` component from Gatsby. Add a `` component below the header, and give it a `to` property, with the value of `"/contact/"` for the pathname: -```jsx{2,7}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" -import { Link } from "gatsby" +import { Link } from "gatsby" // highlight-line import Header from "../components/header" export default () => (
      - Contact + Contact {/* highlight-line */}

      What a world.

      diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 5767d336d3fe7..07d8859570a16 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -56,11 +56,13 @@ nodes. Change your function so it now only logs `MarkdownRemark` nodes. -```javascript{2-4}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { + // highlight-start if (node.internal.type === `MarkdownRemark`) { console.log(node.internal.type) } + // highlight-end } ``` @@ -70,11 +72,14 @@ the file name from the `MarkdownRemark` node? To get it, you need to _traverse_ the "node graph" to its _parent_ `File` node, as `File` nodes contain data you need about files on disk. To do that, modify your function again: -```javascript{1,3-4}:title=gatsby-node.js +```javascript:title=gatsby-node.js exports.onCreateNode = ({ node, getNode }) => { + // highlight-line if (node.internal.type === `MarkdownRemark`) { + // highlight-start const fileNode = getNode(node.parent) console.log(`\n`, fileNode.relativePath) + // highlight-end } } ``` @@ -88,12 +93,12 @@ Now you'll have to create slugs. As the logic for creating slugs from file names tricky, the `gatsby-source-filesystem` plugin ships with a function for creating slugs. Let's use that. -```javascript{1,5}:title=gatsby-node.js -const { createFilePath } = require(`gatsby-source-filesystem`) +```javascript:title=gatsby-node.js +const { createFilePath } = require(`gatsby-source-filesystem`) // highlight-line exports.onCreateNode = ({ node, getNode }) => { if (node.internal.type === `MarkdownRemark`) { - console.log(createFilePath({ node, getNode, basePath: `pages` })) + console.log(createFilePath({ node, getNode, basePath: `pages` })) // highlight-line } } ``` @@ -113,18 +118,21 @@ the original creator of a node can directly modify the node—all other plugins (including your `gatsby-node.js`) must use this function to create additional fields. -```javascript{3,4,6-11}:title=gatsby-node.js +```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) exports.onCreateNode = ({ node, getNode, actions }) => { - const { createNodeField } = actions + // highlight-line + const { createNodeField } = actions // highlight-line if (node.internal.type === `MarkdownRemark`) { + // highlight-start const slug = createFilePath({ node, getNode, basePath: `pages` }) createNodeField({ node, name: `slug`, value: slug, }) + // highlight-end } } ``` @@ -152,7 +160,7 @@ Now that the slugs are created, you can create the pages. In the same `gatsby-node.js` file, add the following. -```javascript{15-34}:title=gatsby-node.js +```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) exports.onCreateNode = ({ node, getNode, actions }) => { @@ -167,6 +175,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => { } } +// highlight-start exports.createPages = ({ graphql, actions }) => { return new Promise((resolve, reject) => { graphql(` @@ -187,6 +196,7 @@ exports.createPages = ({ graphql, actions }) => { }) }) } +// highlight-end ``` You've added an implementation of the @@ -226,8 +236,8 @@ export default () => { Then update `gatsby-node.js` -```javascript{1,17,32-42}:title=gatsby-node.js -const path = require(`path`) +```javascript:title=gatsby-node.js +const path = require(`path`) // highlight-line const { createFilePath } = require(`gatsby-source-filesystem`) exports.onCreateNode = ({ node, getNode, actions }) => { @@ -243,7 +253,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => { } exports.createPages = ({ graphql, actions }) => { - const { createPage } = actions + const { createPage } = actions // highlight-line return new Promise((resolve, reject) => { graphql(` { @@ -258,6 +268,7 @@ exports.createPages = ({ graphql, actions }) => { } } `).then(result => { + // highlight-start result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.fields.slug, @@ -269,6 +280,7 @@ exports.createPages = ({ graphql, actions }) => { }, }) }) + // highlight-end resolve() }) }) @@ -289,23 +301,28 @@ Visit one of them and you see: Which is a bit boring and not what you want. Now you can pull in data from your markdown post. Change `src/templates/blog-post.js` to: -```jsx{2,5-6,9-12,15-26}:title=src/templates/blog-post.js +```jsx:title=src/templates/blog-post.js import React from "react" -import { graphql } from "gatsby" +import { graphql } from "gatsby" // highlight-line import Layout from "../components/layout" +// highlight-start export default ({ data }) => { const post = data.markdownRemark + // highlight-end return ( + {/* highlight-start */}

      {post.frontmatter.title}

      + {/* highlight-end */} ) } +// highlight-start export const query = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { @@ -316,6 +333,7 @@ export const query = graphql` } } ` +// highlight-end ``` And… @@ -329,10 +347,10 @@ The last step is to link to your new pages from the index page. Return to `src/pages/index.js` and query for your markdown slugs and create links. -```jsx{3,22-28,44,63-65}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" import { css } from "@emotion/core" -import { Link, graphql } from "gatsby" +import { Link, graphql } from "gatsby" // highlight-line import { rhythm } from "../utils/typography" import Layout from "../components/layout" @@ -351,6 +369,7 @@ export default ({ data }) => {

      {data.allMarkdownRemark.totalCount} Posts

      {data.allMarkdownRemark.edges.map(({ node }) => (
      + {/* highlight-start */} { color: inherit; `} > + {/* highlight-end */}

      {

      {node.excerpt}

      - + {/* highlight-line */}
      ))}
      @@ -392,9 +412,11 @@ export const query = graphql` title date(formatString: "DD MMMM, YYYY") } + // highlight-start fields { slug } + // highlight-end excerpt } } diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 8d4648e634a8e..bf44e162f7d47 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -53,7 +53,7 @@ npm install --save gatsby-transformer-remark Then add it to the `gatsby-config.js` like normal: -```javascript{13}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { siteMetadata: { title: `Pandas Eating Lots`, @@ -66,7 +66,7 @@ module.exports = { path: `${__dirname}/src/`, }, }, - `gatsby-transformer-remark`, + `gatsby-transformer-remark`, // highlight-line `gatsby-plugin-emotion`, { resolve: `gatsby-plugin-typography`, diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 700dc6a83b891..1d5cec9ead2fe 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -130,18 +130,18 @@ Now you need to import this new layout component into your page components. Change `src/pages/index.js` to look like: -```jsx{2,5,11}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" -import Layout from "../components/layout" +import Layout from "../components/layout" // highlight-line export default () => ( - + {/* highlight-line */}

      Hi! I'm building a fake Gatsby site as part of a tutorial!

      What do I like to do? Lots of course but definitely enjoy building websites.

      -       +       {/* highlight-line */} ) ``` @@ -156,12 +156,12 @@ isn't centered. Try now importing and adding the layout component to `about.js` Now add your site title to the layout component: -```jsx{5}:title=src/components/layout.js +```jsx:title=src/components/layout.js import React from "react" export default ({ children }) => (
      -

      MySweetSite

      +

      MySweetSite

      {/* highlight-line */} {children}
      ) @@ -174,8 +174,9 @@ If you go to any of your three pages you'll see the same title added e.g. the Add navigation links to each of your three pages: -```jsx{2-9,12-21}:title=src/components/layout.js +```jsx:title=src/components/layout.js import React from "react" +// highlight-start import { Link } from "gatsby" const ListLink = props => ( @@ -183,9 +184,11 @@ const ListLink = props => ( {props.children} ) +// highlight-end export default ({ children }) => (
      + {/* highlight-start */}

      MySweetSite

      @@ -196,6 +199,7 @@ export default ({ children }) => ( Contact
    + {/* highlight-end */} {children}
    ) diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index 02c78ca0e3195..0ccd7d897ec18 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -170,11 +170,13 @@ Let's make a quick improvement. Many sites have a single column of text centered in the middle of the page. To create this, add the following styles to the `
    ` in `src/pages/index.js`. -```jsx{4}:title=src/pages/index.js +```jsx:title=src/pages/index.js import React from "react" export default () => (
    + {" "} + {/* highlight-line */}

    Richard Hamming on Luck

    @@ -222,8 +224,9 @@ export default typography Then set this module to be used by `gatsby-plugin-typography` as its config in your `gatsby-config.js` file. -```javascript{2..9}:title=gatsby-config.js +```javascript:title=gatsby-config.js module.exports = { + // highlight-start plugins: [ { resolve: `gatsby-plugin-typography`, @@ -232,6 +235,7 @@ module.exports = { }, }, ], + // highlight-end } ``` @@ -254,11 +258,11 @@ npm install --save typography-theme-bootstrap typography-theme-lawton To use the Bootstrap theme, change your typography code to: -```javascript{2,4}:title=src/utils/typography.js +```javascript:title=src/utils/typography.js import Typography from "typography" -import bootstrapTheme from "typography-theme-bootstrap" +import bootstrapTheme from "typography-theme-bootstrap" // highlight-line -const typography = new Typography(bootstrapTheme) +const typography = new Typography(bootstrapTheme) // highlight-line export default typography ``` @@ -269,12 +273,14 @@ Themes can also add Google Fonts. The Lawton theme you installed along with the Bootstrap theme does this. Replace your typography module code with the following, then restart the dev server (necessary to load the new Google Fonts). -```javascript{2-3,5}:title=src/utils/typography.js +```javascript:title=src/utils/typography.js import Typography from "typography" +// highlight-start // import bootstrapTheme from "typography-theme-bootstrap" import lawtonTheme from "typography-theme-lawton" +// highlight-end -const typography = new Typography(lawtonTheme) +const typography = new Typography(lawtonTheme) // highlight-line export default typography ``` @@ -435,13 +441,14 @@ directory. But, if it's used only in one file, create it inline. Modify `about-css-modules.js` so it looks like the following: -```jsx{7-15,21-30}:title=src/pages/about-css-modules.js +```jsx:title=src/pages/about-css-modules.js import React from "react" import styles from "./about-css-modules.module.css" import Container from "../components/container" console.log(styles) +// highlight-start const User = props => (

    @@ -451,11 +458,13 @@ const User = props => (
    ) +// highlight-end export default () => (

    About CSS Modules

    CSS Modules are cool

    + {/* highlight-start */} ( avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg" excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit." /> + {/* highlight-end */}     ) ``` diff --git a/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md b/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md index 293a99326c457..879d80f544856 100644 --- a/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md +++ b/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md @@ -9,12 +9,15 @@ This post contains the same code snippet with syntax highlighting from the previous post, but now includes highlighted lines. The highlight theme is still same one used in the official React documentation. -```jsx{1,4-6} +```jsx function NumberList(props) { + // highlight-line const numbers = props.numbers const listItems = numbers.map(number => ( + // highlight-start
  • {number}
    • )) + // highlight-end return
      {listItems}
    } diff --git a/junit.xml b/junit.xml new file mode 100644 index 0000000000000..fe68a7d20ca4b --- /dev/null +++ b/junit.xml @@ -0,0 +1,1844 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/gatsby-source-mongodb/README.md b/packages/gatsby-source-mongodb/README.md index 07b524bab597f..6f4637b0cc5b0 100644 --- a/packages/gatsby-source-mongodb/README.md +++ b/packages/gatsby-source-mongodb/README.md @@ -63,7 +63,7 @@ markdown to HTML for including in our React components. To do this, we modify the plugin configuration in `gatsby-config.js` like follows: -```javascript{8-10} +```javascript module.exports = { plugins: [ { @@ -71,9 +71,11 @@ module.exports = { options: { dbName: `local`, collection: `documents` + // highlight-start map: { {documents: {body: `text/markdown`} }, + // highlight-end }, } ], diff --git a/translations/es/docs/tutorial/part-one/index.md b/translations/es/docs/tutorial/part-one/index.md index f7d27dee0418b..74b3677a764be 100644 --- a/translations/es/docs/tutorial/part-one/index.md +++ b/translations/es/docs/tutorial/part-one/index.md @@ -66,13 +66,15 @@ export default () => ( 3. Elimine el estilo de tamaño de fuente. Cambia el texto "¡Hola Gatsby!" A un encabezado de nivel uno. Agrega un párrafo debajo del encabezado. -```jsx{4-6} +```jsx import React from "react" export default () => ( + // highlight-start

    ¡Hola Gatsby!

    Increíble.

    + {/* highlight-end */}
    ) ``` @@ -81,14 +83,15 @@ export default () => ( 4. Añade una imagen. (En este caso, una imagen aleatoria desde unsplash). -```jsx{7} +```jsx import React from "react" export default () => (

    ¡Hola Gatsby!

    Increíble.

    - + {" "} + {/* highlight-line */}
    ) ``` @@ -189,13 +192,13 @@ export default () =>

    Este es un encabezado.

    3. Modifica el archivo `about.js` para importar el componente `Header`. Reemplace el marcado `h1` con `
    `: -```jsx{2,6} +```jsx import React from "react" -import Header from "../components/header" +import Header from "../components/header" // highlight-line export default () => (
    -
    +
    {/* highlight-line */}

    Es fácil usar react en Gatsby.

    ) @@ -207,21 +210,22 @@ En el navegador, el texto del encabezado "Acerca de Gatsby" ahora debería reemp 4. Regrese a `/src/components/header.js`, y haga el siguiente cambio: -```jsx{3} +```jsx import React from "react" +// highlight-next-line export default props =>

    {props.headerText}

    ``` 5. Regresa a `/src/pages/about.js` y haz el siguiente cambio: -```jsx{6} +```jsx import React from "react" import Header from "../components/header" export default () => (
    -
    +
    {/* highlight-line */}

    Es fácil usar react en Gatsby.

    ) @@ -259,14 +263,14 @@ Si hubiéramos pasado otra propiedad a nuestro componente `
    `, como... 6. Para enfatizar cómo esto hace que nuestros componentes sean reutilizables, agreguemos un componente adicional `
    ` a la página de a cerca de. Agrega el siguiente código al archivo `/src/pages/about.js` y guárdalo. -```jsx{7} +```jsx import React from "react" import Header from "../components/header" export default () => (
    -
    +
    {/* highlight-line */}

    Es fácil usar react en Gatsby.

    ) @@ -290,14 +294,14 @@ A menudo querrás vincular las páginas. Veamos el enrutamiento en un sitio de G 1. Abre el componente de la página índice (`/src/pageindex.js`). Importe el componente `` de Gatsby. Agregue un componente `` debajo del encabezado y asígnele una propiedad `to`, con el valor de `"/contact/"`para el nombre de ruta: -```jsx{2,7} +```jsx import React from "react" -import { Link } from "gatsby" +import { Link } from "gatsby" // highlight-line import Header from "../components/header" export default () => (
    - Contacto + Contacto {/* highlight-line */}

    Increible