diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg index 51b5741111af4..70d8006c9acf2 100644 --- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg +++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg @@ -1,3 +1,3 @@ - + diff --git a/docs/blog/2019-06-17-product-management-at-Gatsby/index.md b/docs/blog/2019-06-17-product-management-at-Gatsby/index.md new file mode 100644 index 0000000000000..981a0ef685a23 --- /dev/null +++ b/docs/blog/2019-06-17-product-management-at-Gatsby/index.md @@ -0,0 +1,88 @@ +--- +title: "Product Management at Gatsby" +date: 2019-06-17 +author: Marisa Morby +excerpt: "In this post I outline the high level tasks and goals of product managers at Gatsby" +tags: + - product management +--- + +Our goal with product management at Gatsby is to create an ongoing and iterative product discovery and development process that allows us to ship customer value quickly and with confidence in our product–market fit. There are a lot of ways to break down product development and management. + +The first is “waterfall” development where information is generated at the “top” of the company and then slowly (or quickly) trickles down to the rest of the organization for execution. + +Alternatively, there is the “agile” approach that focuses on small teams making fast decisions and moving quickly. + +At Gatsby, we want to ensure we’re aligned around business objectives set at the company level, while also bringing research, design, and engineering into the product development process early so that everyone has the context they need to succeed. We also want to encourage everyone at Gatsby to experiment, make mistakes, and [tinker with ideas](https://breakingsmart.com/en/season-1/tinkering-versus-goals/). + +## What is the product manager responsible for? + +Ultimately the product manager is responsible for “evaluating opportunities and determining what gets built and delivered to customers” (Marty Cagan, [Inspired: How to Create Tech Product Customers Love](https://svpg.com/inspired-how-to-create-products-customers-love/)). + +The best way to do that is by **creating a prioritized backlog of ideas that are worth building, prioritizing that work, and collecting customer feedback for action**. + +This then becomes a cycle that we can rely on to constantly feed us with new ideas. But this is where it gets more complicated. + +## How will we generate ideas for a backlog? + +There are a few ways product managers can start generating ideas for their backlog. We’re not going to talk about the specific process in this post, but rather the model we want to follow to help us generate a backlog. + +### Discovery research + +Discovery research is focused on talking with current or past customers about their experiences with a product or workflow that your product has. This type of research helps you understand the needs of the customer, get an understanding of what’s working for them now, and get a list of problems they’re having. + +The product manager needs to have enough context of the landscape to decide which of these problems are critical for solving and work with the team to create acceptance criteria that solves the problems we’re trying to address. + +Many times, it might be helpful to have a visual concept to show stakeholders to get them interested and bought into larger pieces of work. This can be a presentation deck with market research interviews, relevant data, or customer interviews. + +At Gatsby, we often use a type of Jobs to Be Done discovery work. We talk with people who we’ve identified as our potential customer base to get a good understanding of their day-to-day needs, pain points, and workflows. By doing that, we’re able to understand common patterns across companies and large areas of frustration that we can address with our products. + +### Feasibility research and prototyping + +Prototyping can be done by product managers, designers, engineering, or anyone with context on the problem we’re trying to solve and outcome we’re trying to achieve. The goal of prototyping is to show someone how to solve a complex problem, rather than trying to only explain it to them. + +The product manager is responsible for making it clear that there is prioritized work available for technical feasibility research or prototyping when initial discovery shows that an idea is worth pursuing. It’s important to do this as early as possible so that engineering is involved in the ideation. This helps the team make better decisions about whether or not the feature or product impact is worth the cost to create. Doing this research early helps avoid wasted time and money pursuing ideas that aren’t actually reasonable to build. + +Feasibility research helps you decide if it’s possible to make and what the cost will be in terms of time and resourcing. + +Both feasibility research and prototyping are used internally to create context and help with understanding outcomes, risks, and needs for upcoming work. + +Recently we've used prototyping with our current build updates. By prototyping the functionality on a small scale, we can use the updated build process internally and identify any immediate issues or errors much more quickly. + +### Proof of concept work + +A proof of concept is closer to a high-fidelity, workable prototype that is meant to be customer-facing. It works within your product, looks like it belongs there, and collects data. A workable proof of concept helps reduce the time to ship because you can try it out with reference customers or do a small rollout to a portion of your customer base. + +We initially did proof of concept work with Gatsby Preview in its alpha phase. The functionality existed, and we were sharing it with people, but it was a small group of testers who helped us find what worked well and what needed to improve so that we could continue making the product better. + +## How will we know what to work on? + +At Gatsby, we wanted to make sure we had a way to look at work from a macro to micro level. Doing this made sure we had higher visibility for our work. + +### Wardley mapping + +We use [Wardley mapping](https://www.cio.co.uk/it-strategy/introduction-wardley-value-chain-mapping-3604565/) to think through the strategic value of a product and give us a high level picture of where we want to go. Wardley maps are like topographical maps for your business or product. You’re able to see the current landscape and map out where your product currently is, as well as plot how it will evolve over time as the business and product landscape changes. + +We’ve had working sessions where we will complete Wardley maps as a team around product ideas, or existing products that we are interested in evolving. Wardley maps help us create shared context with our product, design, and engineering teams so that we understand where we currently are and where we’re trying to go with the product. + +### Intent mapping + +Our Principal Product Manager, [Preston So](@prestonso) introduced us to intent mapping as a way to set priorities and dependencies for major pieces of product work over the next 3 - 6 months. It’s a way to let all the teams have one source of truth for what we want to focus on in the medium-term. + +Acceptance criteria listed in the intent maps helps explain what we are going to build and why. We don’t create anything without a reason, and always bring the team in to collaborate on acceptance criteria. + +### Objectives and Key Results + +Objectives and Key Results (OKRs) are specific metrics or outcomes we want to see within the next 1 - 2 quarters. We use OKRs to stay focused on what we’re trying to achieve in the short term. Our OKRs are typically very metric driven, so that it's easy to know whether or not we've achieved our goal. You can read more about OKRs at Gatsby [here](https://www.gatsbyjs.org/blog/2019-04-03-how-we-think-about-product-at-gatsby/). + +## How we’ll get product feedback + +One of the additional benefits of creating proof of concept work is that you'll have something to share with reference customers as you figure out the best way to solve your biggest customer problems. Reference customers are current paying customers that have agreed to try out proofs of concept, prototypes, or alpha products to help us decide if what we’re creating has product-market fit and adds value. + +It’s up to the product manager to have ongoing interviews with reference customers, and to understand whether or not the proof of concept adds value for them. + +At Gatsby, we get product feedback from lots of great sources: usability research, data analysis, customer support, pre-customer calls, and customer calls. We’re always excited to talk with people that are using or interested in using Gatsby, and doing this consistently has helped us validate ideas and surfaced new challenges to tackle. + +## What will product management look like in the future at Gatsby? + +Gatsby is growing fast and we have a few main Key Progress Indicators (KPIs) that we want to stay focused on in the next year. Product management will probably shift and grow as Gatsby shifts and grows. But even as things change, we will always want to focus on reaching out to customers, understanding important problems, and providing solutions for those problems. Our focus should always be to add value and excitement for our current (and future) Gatsby customers and community members. diff --git a/docs/blog/2019-06-17-site-showcase-validator/index.md b/docs/blog/2019-06-17-site-showcase-validator/index.md new file mode 100644 index 0000000000000..c19f977f40ba6 --- /dev/null +++ b/docs/blog/2019-06-17-site-showcase-validator/index.md @@ -0,0 +1,30 @@ +--- +title: Maintaining the Site Showcase with GitHub Actions and the Gatsby Site Showcase Validator +date: 2019-06-17 +author: Benjamin Lannon +excerpt: "Keeping the longevity of the Site Showcase strong is to continue bring in exciting sites that use Gatsby, but as well to keep our existing showcase up to date." +tags: + - github +--- + +Gatsby has rapidly been growing in the market of website generators. As such, the core team developed the Gatsby Site Showcase to present a variety of websites using Gatsby. As the showcase grew to include hundreds of sites, long term maintenance would help strengthen the showcase. + +## Why a validator + +As with most websites, nothing is constant. Designs and even frameworks that companies and developers use to build sites will evolve and change over time. With that, it would be diligent to make sure that Gatsby’s showcase is kept updated and all sites in the showcase are still using Gatsby. Doing this by hand would become unmaintainable as more and more sites were added; automating the workflow would relieve the burden for such an important task. + +## Creating the validator + +At its core, the validator is a script written in NodeJS that examines every site in the site showcase and first checks if the site is up. It then examines the HTML for key identifiers that point out that the site is written with Gatsby. + +All Gatsby sites by default have a container element with the `___gatsby` id as an attribute, which is where the React app will be mounted to when Gatsby rehydrates on client load. + +With such, an HTTP request can be done to grab the initial HTML of the page. Then it can examine the DOM using [cheerio](https://github.com/cheeriojs/cheerio), a jQuery-like DOM parser designed for the server. If it is able to find the Gatsby root container, it will continue on to the next site. If not, it marks down the site and will fail the validator upon completion. + +For deployment, we decided upon [GitHub Actions](https://github.com/features/actions) which allows for a script like the validator to live inside the Gatsby Git repository and be run on a daily schedule on GitHub’s servers rather than needing to spin up separate infrastructure for the script. + +## Benefits and moving forward + +The validator was merged into Gatsby Core in late May and it has brought a sense of security as more entries are accepted into the Site Showcase. Core maintainers can check the validator and then if the validator finds sites no longer using Gatsby, we can contact maintainers and clarify if it was their intention. + +In the future, the validator can be extended and composed with other tools to better inform maintainers of outliers and how we can keep the showcase and other platforms in check. diff --git a/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/index.md b/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/index.md new file mode 100644 index 0000000000000..cb8293405d827 --- /dev/null +++ b/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/index.md @@ -0,0 +1,73 @@ +--- +title: How The Couch Builds Websites in Half the Time with Gatsby +date: 2019-06-19 +author: Linda Watkins +tags: + - case study + - case-studies + - ecommerce + - content-mesh + - developer experience + - hosting + - performance +--- + +![The homepage of thecouch.nyc showing a blue background with the message, "The Couch is a digital studio that makes weird and wonderful things for the internet."](./thecouch-nyc.png) + +We recently spoke with Kevin Green, Co-founder and Lead Engineer at [The Couch](https://thecouch.nyc), about how Gatsby helps them speed up their workflow and offer their clients fast, feature-rich sites with extremely low hosting costs. + +## About The Couch + +The Couch is a team of three designers and one developer that specializes in e-commerce projects for clients like [Clare](https://www.clare.com) and [Dims](https://www.dimshome.com). Kevin, The Couch’s developer and technical co-founder, is passionate about the headless ecosystem and the way it enables him to select the perfect tools for each project. One of Kevin’s favorite tools has been [Gatsby](/) because it makes it so easy to combine data from a variety of headless services into his projects. + + +I like to deliver the best possible solution for a client’s needs and Gatsby is a tool that is tried-and-true for me. + + +## Why Gatsby is Perfect for Prima + +When [Prima](https://www.prima.co), an L.A.-based Cannabidiol (CBD) oil company, chose The Couch for their new site, their focus was on providing educational materials to their customers to help them better understand CBD. In addition to e-commerce, the site would need to include extensive written content and imagery, including 40 pre-written articles, a glossary, and a recipe collection. + + +They came to us with a flood of content—something we’re not really that used to. + + +![The homepage of prima.co showing a young woman holding a bottle of CBD oil next to the message, "Welcome to the uprising rooted in hemp, heart, and real science."](./prima-co.png) + +Faced with a content-heavy project, Kevin considered his options. Rather than entrusting Prima’s content to a monolithic CMS—and risk slow loading times and an unhappy development experience—Kevin’s thoughts turned to a more modern solution: “Knowing this was going to be a super content- and image-heavy site, I wanted to build it static from the get-go.” By serving Prima’s content as static HTML, Kevin knew he would dramatically reduce the site’s loading time. His positive experiences with Gatsby on three previous production sites made him confident that it was the right tool for the job: “It’s hard for me to go any other route at this point. If I can go static, I’m always going to go static, and Gatsby’s going to be one of my top choices indefinitely.” + +## Cutting Developer Time in Half + +After years of building projects with traditional tools like Docker and WordPress, Kevin experienced a dramatic productivity boost after switching to Gatsby and the headless ecosystem. Using Gatsby and a combination of various microservices, Kevin can now build sites with complex functionality in half the time he used to: “I built a large system with countless modules, multiple content models and search functionality that’s already prepped for e-commerce...that’s something that used to take me double the time.” + + +From my perspective, Gatsby is an invaluable tool. + + +By embracing Gatsby and headless services, Kevin can now more easily adjust his tools to each project’s needs. To manage Prima’s content, Kevin opted for [Sanity](https://www.sanity.io), a headless CMS which can be connected to a Gatsby site using the [gatsby-source-sanity](/packages/gatsby-source-sanity/) plugin. Prima’s e-commerce functionality is powered by [Shopify](https://www.shopify.com) (integrated with Gatsby using the [gatsby-source-shopify](/packages/gatsby-source-shopify/) plugin). Kevin credits the ease of pulling data from headless services like these into Gatsby with the bulk of his new development speed: + + +I’ve set up Contentful, Prismic and Sanity in so many ways that I can now set up the whole backend and data architecture in a day...It’s a testament to those tools and how powerful they’re becoming. + + +## Inexpensive Hosting + +Kevin told us his clients are extremely happy with the lower hosting and CMS costs that Gatsby projects make possible. Since Gatsby sites load as static assets, they can be hosted cheaply (or for free!) by hosts like [Netlify](https://www.netlify.com) and deployed straight to a global CDN. After years of serving sites on expensive hosting, this is a major relief to Kevin and his clients: “They’re getting a ton of traffic and it’s costing them practically nothing,” Kevin told us. “To me, one of the biggest selling points is not putting a site on Heroku and having that cost thousands of dollars a month when people start going to it.” + +Prima’s CMS costs are also lower than normal because Gatsby pulls all of their content from Sanity and includes it in the site’s static HTML at build time. This means that instead of having Sanity resend their content every time a user visits the site, Prima only pulls their content when the site is rebuilt. This significantly speeds up Prima’s loading time and reduces their use of the Sanity API. + + +Being able to work in platforms like Gatsby is a breath of fresh air and allows me to control my environment and build beautiful websites that are super fast and inexpensive to run, which obviously our clients also love. + + +## Fast Site, Happy Client + +The Prima launch was a big success and the site is now enjoying healthy traffic and organic growth thanks to enthusiastic supporters on social media: “They were thrilled. They’ve gotten a super warm reception,” Kevin reported. In particular, users have noticed that “the site is super fast and the experience is really smooth”—no small feat for a content-heavy site like Prima’s. + +After initially launching with its educational content only, Prima’s product line has been added to the site this spring, powered by Gatsby’s e-commerce integration with Shopify. + + +It’s less a conversation about the tools; it’s about whether they do the best job they possibly can for the client. And in the case of Gatsby, it’s continued to do that for me. The sites that we build are fast by default, rendered statically, and don’t cost our clients a lot of money; it’s hard for me to go any other route. + + +To discover if Gatsby is right for your next project, [learn more here](/). diff --git a/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/prima-co.png b/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/prima-co.png new file mode 100644 index 0000000000000..1c423871f3735 Binary files /dev/null and b/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/prima-co.png differ diff --git a/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/thecouch-nyc.png b/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/thecouch-nyc.png new file mode 100644 index 0000000000000..18071f352935d Binary files /dev/null and b/docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/thecouch-nyc.png differ diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml index b1092e478b608..de01e7b995c24 100644 --- a/docs/blog/author.yaml +++ b/docs/blog/author.yaml @@ -308,3 +308,7 @@ bio: "Distributed Systems consultant, Clojure enthusiast, bicycle tourer" avatar: avatars/anthony-marcar.jpg twitter: "@Moocar" +- id: Benjamin Lannon + bio: Web Developer, Open Source advocate, new tech explorer - https://lannonbr.com/ + avatar: avatars/benjamin-lannon.jpg + twitter: "@lannonbr" diff --git a/docs/blog/avatars/benjamin-lannon.jpg b/docs/blog/avatars/benjamin-lannon.jpg new file mode 100644 index 0000000000000..6056f6d82b8ca Binary files /dev/null and b/docs/blog/avatars/benjamin-lannon.jpg differ diff --git a/docs/contributing/submit-to-plugin-library.md b/docs/contributing/submit-to-plugin-library.md index 416e67daac01b..915dd3aa89c28 100644 --- a/docs/contributing/submit-to-plugin-library.md +++ b/docs/contributing/submit-to-plugin-library.md @@ -8,7 +8,8 @@ In order to add your plugin to the [Plugin Library](/plugins/), you need to: 1. publish a package to npm (learn how [here](https://docs.npmjs.com/getting-started/publishing-npm-packages)), 2. include the [required files](/docs/files-gatsby-looks-for-in-a-plugin/) in your plugin code, -3. and **include a `keywords` field** in your plugin's `package.json`, containing `gatsby` and `gatsby-plugin`. +3. **include a `keywords` field** in your plugin's `package.json`, containing `gatsby` and `gatsby-plugin`, +4. and document your plugin with a README, there are [plugin templates](/contributing/docs-templates/#plugin-readme-template) available to be used as reference. After doing so, Algolia will take up to 12 hours to add it to the library search index (the exact time necessary is still unknown), and wait for the daily rebuild of https://gatsbyjs.org to automatically include your plugin page to the website. Then, all you have to do is share your wonderful plugin with the community! diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index b72a6b5b5dd12..8c7593e15b9d2 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -71,9 +71,9 @@ plugins: [ Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`. Now create a Markdown file inside it with the name `post-1.md`. -#### Including frontmatter +#### Frontmatter for metadata in markdown files -When you create a Markdown file, at the top of the file, add the frontmatter (metadata) block below. You can have different key value pairs that are relevant to your website. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide this data in your React components. +When you create a Markdown file, you can include a set of key value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called frontmatter and is denoted by the triple dashes at the start and end of the block. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide the key value pairs as data in our React components. ```markdown:title=src/markdown-pages/post-1.md --- 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 2f0be919a3c64..508495e84de39 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -203,7 +203,7 @@ exports.createPages = ({ actions, graphql }) => { // Create post detail pages posts.forEach(({ node }) => { createPage({ - path: node.frontmatter.path, + path: node.fields.slug, component: blogPostTemplate, }) }) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 141db04ef078e..940fdae0d77ed 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -20,4 +20,4 @@ _Note that this functionality is not a part of React or Gatsby, and requires usi This section contains guides for styling your site with some of the most popular CSS-in-JS libraries, including how to set up global styles using each library. -[[guidelist]] + diff --git a/docs/docs/css-libraries-and-frameworks.md b/docs/docs/css-libraries-and-frameworks.md index 78800e1446b6d..2bf22d233dbda 100644 --- a/docs/docs/css-libraries-and-frameworks.md +++ b/docs/docs/css-libraries-and-frameworks.md @@ -7,4 +7,4 @@ There are many other CSS libraries and frameworks that you can use in your Gatsb These are not full-on approaches to styling, and generally work no matter which styling approach you've chosen for your website. They require installing third-party libraries, often with the help of Gatsby community plugins. -[[guidelist]] + diff --git a/docs/docs/gatsby-image.md b/docs/docs/gatsby-image.md index 81ff94cfc753c..a73640dfed9d9 100644 --- a/docs/docs/gatsby-image.md +++ b/docs/docs/gatsby-image.md @@ -67,20 +67,22 @@ Automatically create images for different resolutions at a set width or height Once you've queried for a `fixed` image to retrieve its data, you can pass that data into the `Img` component: ```jsx -import { useStaticQuery } from "gatsby" +import { useStaticQuery, graphql } from "gatsby" import Img from "gatsby-image" export default () => { - const data = useStaticQuery(query` - file(relativePath: { eq: "images/default.jpg" }) { - childImageSharp { - # Specify a fixed image and fragment. - # The default width is 400 pixels - // highlight-start - fixed { - ...GatsbyImageSharpFixed + const data = useStaticQuery(graphql` + query { + file(relativePath: { eq: "images/default.jpg" }) { + childImageSharp { + # Specify a fixed image and fragment. + # The default width is 400 pixelss + // highlight-start + fixed { + ...GatsbyImageSharpFixed + } + // highlight-end } - // highlight-end } } `) @@ -136,20 +138,22 @@ Create flexible sizes for an image that stretches to fill its container. E.g. fo Once you've queried for a `fluid` image to retrieve its data, you can pass that data into the `Img` component: ```jsx -import { useStaticQuery } from "gatsby" +import { useStaticQuery, graphql } from "gatsby" import Img from "gatsby-image" export default () => { - const data = useStaticQuery(query` - file(relativePath: { eq: "images/default.jpg" }) { - childImageSharp { - # Specify a fluid image and fragment - # The default maxWidth is 800 pixels - // highlight-start - fluid { - ...GatsbyImageSharpFluid + const data = useStaticQuery(graphql` + query { + file(relativePath: { eq: "images/default.jpg" }) { + childImageSharp { + # Specify a fluid image and fragment + # The default maxWidth is 800 pixels + // highlight-start + fluid { + ...GatsbyImageSharpFluid + } + // highlight-end } - // highlight-end } } `) diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md index 794a197b49e2d..b79e258aa288a 100644 --- a/docs/docs/glossary.md +++ b/docs/docs/glossary.md @@ -52,11 +52,11 @@ A text-based interface to run commands on your computer. The default Command Lin A compiler is a program that translates code written in one language to another language. For example [Gatsby](#gatsby) can compile [React](#react) applications into static [HTML](#html) files. -### Components +### Component Components are independent and re-usable chunks of code powered by [React](#react) that, when combined, make up your website or app. -A component can include components within it. In fact, [pages](#page) and [templates](#templates) are examples of components. +A component can include components within it. In fact, [pages](#page) and [templates](#template) are examples of components. ### Config @@ -158,7 +158,7 @@ A programming language that helps us make the web dynamic and interactive. [Java ### MDX -Extends [Markdown](#markdown) to support [React](#react) [components](#components) within your content. +Extends [Markdown](#markdown) to support [React](#react) [components](#component) within your content. ### Markdown @@ -190,7 +190,7 @@ A package usually describes a [JavaScript](#javascript) program that has additio An [HTML](#html) page. -This also often refers to [components](#components) that live in `/src/pages/` and are converted to pages by [Gatsby](#gatsby), as well as [pages created dynamically](/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs) in your `gatsby-node.js` file. +This also often refers to [components](#component) that live in `/src/pages/` and are converted to pages by [Gatsby](#gatsby), as well as [pages created dynamically](/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs) in your `gatsby-node.js` file. ### Plugin diff --git a/docs/docs/images/disqus-logo.svg b/docs/docs/images/disqus-logo.svg index 71bc1de802132..9eef857d7152a 100644 --- a/docs/docs/images/disqus-logo.svg +++ b/docs/docs/images/disqus-logo.svg @@ -1,3 +1,3 @@ - + diff --git a/docs/docs/mdx/getting-started.md b/docs/docs/mdx/getting-started.md index 0d3316b19ec56..09fff2b992552 100644 --- a/docs/docs/mdx/getting-started.md +++ b/docs/docs/mdx/getting-started.md @@ -1,5 +1,5 @@ --- -title: Getting Started +title: Getting Started with MDX --- The fastest way to get started with Gatsby + MDX is to use the [MDX @@ -19,11 +19,10 @@ your site. ```sh cd my-mdx-starter/ - npm install gatsby develop ``` -1. **Open the site** running at http://localhost:8000! +1. **Open the site** running at http://localhost:8000 1. **Update the MDX content** by opening the `my-mdx-starter` directory in your code editor of choice and edit `src/pages/index.mdx`. @@ -37,27 +36,27 @@ can follow these steps for configuring the [gatsby-mdx](/packages/gatsby-mdx/) p 1. **Add `gatsby-mdx`** and MDX as dependencies ```sh - yarn add gatsby-mdx @mdx-js/mdx @mdx-js/react + yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react ``` - If you're upgrading from v0, [check out the MDX migration guide](https://mdxjs.com/migrating/v1). + > **Note:** If you're upgrading from v0, additionally [check out the MDX migration guide](https://mdxjs.com/migrating/v1). -1. **Update your `gatsby-config.js`** to use the `gatsby-mdx` plugin +1. **Update your `gatsby-config.js`** to use `gatsby-plugin-mdx` ```javascript:title=gatsby-config.js module.exports = { plugins: [ // .... - `gatsby-mdx`, + `gatsby-plugin-mdx`, ], } ``` 1. **Restart `gatsby develop`** and add an `.mdx` page to `src/pages -**Note:** If you want to query for frontmatter, exports, or other fields like -`tableOfContents` and you haven't previously added a `gatsby-source-filesystem` -pointing at `src/pages` in your project, you'll want to add one now. +> **Note:** If you want to query for frontmatter, exports, or other fields like +> `tableOfContents` and you haven't previously added a `gatsby-source-filesystem` +> pointing at `src/pages` in your project, you'll want to add one now. ## What's next? diff --git a/docs/docs/mdx/index.md b/docs/docs/mdx/index.md index ea901add324b2..757a6e9e47950 100644 --- a/docs/docs/mdx/index.md +++ b/docs/docs/mdx/index.md @@ -1,8 +1,8 @@ --- -title: Adding Components to Content with MDX +title: Adding Components to Markdown with MDX --- -When writing long-form content in Markdown you might want to embed components. +When writing long-form content in Markdown you might want to embed [components](/docs/glossary/#component). This is often achieved by either writing content in JSX or using plugins that use custom syntax. The first approach isn't optimal because JSX isn't the best format for content and can make it less approachable to members of a team. Custom @@ -15,8 +15,8 @@ you're finding yourself wanting to add components to your content you can use [MDX][mdx] is Markdown for the component era. It lets you write JSX embedded inside Markdown. It’s a great combination because it allows you to use Markdown’s terse -syntax (such as `# Heading`) for your content and JSX for more advanced -components. +syntax (such as `# Heading`) for your content and JSX for more advanced, +or reusable components. This is useful in content-driven sites where you want the ability to introduce components like charts or alerts without having to @@ -27,14 +27,13 @@ interactions. When using MDX you can also import other MDX documents and render them as components. This lets you write something like an FAQ -page in one place and render it throughout your website. +page in one place and reuse it throughout your website. ## What does it look like in practice? -MDX might seem weird at first, but it quickly feels natural -after working with it for a few minutes. Importing and JSX -syntax works just like in your components. This results in a -seamless experience for developers and content authors alike. +Importing and JSX syntax works just like it does in your components. This +results in a seamless experience for developers and content authors alike. +Markdown and JSX are included alongside each other like this: ```md import { Chart } from '../components/chart' diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index 5e61a51b6a5ff..1079c9a08d64f 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/docs/docs/mdx/programmatically-creating-pages.md @@ -32,7 +32,7 @@ root. > **NOTE**: `gatsby-mdx` uses `.mdx` by default as a file extension to > recognize which files to use. You can also [use `.md` as a file -> extension](api-reference/options/extensions) if you want. +> extension](https://gatsby-mdx.netlify.com/api-reference/options/extensions) if you want. ```javascript=gatsby-config.js module.exports = { @@ -54,7 +54,7 @@ module.exports = { ``` You can read about -[`gatsby-source-filesystem`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#readme) +[`gatsby-source-filesystem`](/packages/gatsby-source-filesystem) if you'd like to learn more. ## Add MDX Files diff --git a/docs/docs/mdx/writing-pages.md b/docs/docs/mdx/writing-pages.md index 3ae7177f14e91..31eed6d30391e 100644 --- a/docs/docs/mdx/writing-pages.md +++ b/docs/docs/mdx/writing-pages.md @@ -2,23 +2,23 @@ title: Writing Pages in MDX --- -After [installing](/docs/mdx/getting-started) the plugin, MDX files -written in `src/pages` will turn into pages. This happens because -`gatsby-mdx` looks for MDX files and automatically transpiles them -so that Gatsby internals can render them. +After [installing](/docs/mdx/getting-started) `gatsby-plugin-mdx`, MDX files +located in `src/pages` will turn into pages. Pages are rendered at a URL that is constructed from the filesystem path inside `src/pages`. An MDX file at `src/pages/awesome.mdx` will result in a page being rendered at `mysite.com/awesome`. -By default, gatsby-mdx supports frontmatter so you can define things -like titles and paths to use in your GraphQL queries. +> `gatsby-plugin-mdx` looks for MDX files and automatically +> transpiles them so that Gatsby internals can render them. -## Frontmatter +## Using frontmatter in MDX -You can declare frontmatter at the beginning of your MDX document: +By default, `gatsby-plugin-mdx` supports [frontmatter](/docs/adding-markdown-pages/#frontmatter-for-metadata-in-markdown-files) +so you can define things like titles and paths to use in your GraphQL +queries. You can declare frontmatter at the beginning of your MDX document: -```md +```mdx --- title: Hello, world! path: /hello-world @@ -30,17 +30,14 @@ date: 2019-01-29 Which can then be [queried with GraphQL](/docs/querying-with-graphql/): -**Note:** To query `Mdx` content, it must be included in the node system using a -source like `gatsby-source-filesystem` first. - ```graphql query { allMdx { edges { node { frontmatter { - path title + path date(formatString: "MMMM DD, YYYY") } } @@ -49,14 +46,34 @@ query { } ``` -## Importing components +> **Note:** To query `Mdx` content, it must be included in the node system using a +> source like the `gatsby-source-filesystem` plugin first. Instructions for sourcing +> content from somewhere like your `/src/pages` directory can be found on the [plugin's README](/packages/gatsby-source-filesystem/). + +Frontmatter is also available in `props.pageContext.frontmatter` and +can be accessed in blocks of JSX in your MDX document: + +```mdx +--- +title: "Building with Gatsby" +author: "Jay Gatsby" +--- + +

{props.pageContext.frontmatter.title}

+ +{props.pageContext.frontmatter.author} + +(Blog post content, components, etc.) +``` -Similarly to what you'd do in JSX, you can import and render components -with JSX. You can also import other MDX documents. +## Importing JSX components and MDX documents -```md +Similarly to what you'd do in plain React, you can import and render JSX components +directly in MDX files. You can also import other MDX documents. + +```mdx:title=src/pages/chart.mdx import { Chart } from "../components/chart" -import FAQ from "../content/faq.mdx" +import FAQ from "../components/faq.mdx" # Here’s a chart @@ -67,30 +84,98 @@ The chart is rendered inside our MDX document. ``` -## Exports +The `` component coming from a `.js` file would be written like any +other React component, while the `` component coming from an `.mdx` +file might look something like this: + + +```mdx:title=src/components/faq.mdx +## Frequently Asked Questions + +### Why Gatsby? + +Gatsby delivers faster, more secure sites and apps from a variety of data +sources + +### Where do I start? + +The documentation offers guides for all different skill levels, you can +find more info at the Gatsby's [Quick Start page](https://www.gatsbyjs.org/docs/quick-start) + + + +export default ({ children }) => ( + <> + {children} + +) +``` + +> **Note**: the default export concept used in this code block is explained in more detail +> in the docs below on [defining layouts](#defining-a-layout) + +## Using JavaScript exports + +MDX supports `export` syntax as well, which enables specific use cases like providing data +for queries and rendering or overriding the default layout on MDX documents. You +don't need to export MDX documents to import them in other files. + +### Exporting page metadata -MDX supports `export` syntax as well which allows you to export metadata -about a given document. gatsby-mdx will automatically add it to the -GraphQL schema so you can use the exported data in your queries and -rendering. +You can provide additional data about a given document by exporting. +`gatsby-plugin-mdx` will automatically add it to the GraphQL schema so you +can use the exported data in your queries and in rendering. +Data exported in MDX documents in this manner is also made available on the +variable name you've assigned it. + +You can export variables, objects, or other data structures: + + ```mdx export const metadata = { name: "World", path: "/world", -} +}; + +# Hello, + +The span above will read: "Hello, World". + + +export const names = ["Abdullah", "Adam", "Alice", "Aida"] -# Hello, {props.metadata.name} +
    {names.map(name =>
  • {name}
    • )}
+``` + +The fields `name` and `path` defined on `metadata` could now alternatively +be accessed on MDX nodes in other areas of your Gatsby project by a GraphQL +query like this (this query fetches all MDX nodes and the data exports +associated with them): -The heading above will say "Hello, World". +```graphql +query MdxExports { + allMdx { + nodes { + exports { + metadata { + name + path + } + } + } + } +} ``` ### Defining a layout -You can specify the layout that will wrap your component using the -default export. +If you have [provided a default layout](/packages/gatsby-plugin-mdx/?=mdx#default-layouts) in your `gatsby-config.js` +through the `gatsby-plugin-mdx` plugin options, the exported component you define +from this file will replace the default. -```md + +```mdx:title=src/pages/layout-example.mdx import PurpleBorder from "../components/purple-border" # This will have a purple border @@ -98,6 +183,19 @@ import PurpleBorder from "../components/purple-border" export default PurpleBorder ``` +The `` component might look something like this, wrapping the MDX +document in a `
` with a 1px purple border: + +```jsx:title=src/components/purple-border.js +import React from "react" + +const PurpleBorder = ({ children }) => ( +
{children}
+) + +export default PurpleBorder +``` + ## GraphQL Queries You can fetch data to use in your MDX file by exporting a `pageQuery` @@ -105,9 +203,8 @@ in the same way you would for a `.js` page. The queried data is passed as a prop, and can be accessed inside any JSX block when writing in MDX: - - -```jsx + +```mdx import { graphql } from "gatsby" # My Awesome Page diff --git a/docs/docs/post-css.md b/docs/docs/post-css.md index 179066d7bb1a4..401266e156163 100644 --- a/docs/docs/post-css.md +++ b/docs/docs/post-css.md @@ -4,11 +4,11 @@ title: PostCSS PostCSS transforms extended syntaxes and features into modern, browser-friendly CSS. This guide will show you how to get started with Gatsby and PostCSS. -### Installation and Configuration +## Installing and Configuring PostCSS This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs), then come back. -1. Install the Gatsby plugin [**gatsby-plugin-postcss**](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss). +1. Install the Gatsby plugin [**gatsby-plugin-postcss**](/packages/gatsby-plugin-postcss/). `npm install --save gatsby-plugin-postcss` @@ -18,13 +18,11 @@ This guide assumes that you have a Gatsby project set up. If you need to set up plugins: [`gatsby-plugin-postcss`], ``` -3. Write your stylesheets using PostCSS (.css files) and require or import them as normal. - -If you need to pass options to PostCSS use the plugins options; see [postcss-loader](https://github.com/postcss/postcss-loader) for all available options. +> **Note**: If you need to pass options to PostCSS use the plugins options; see [postcss-loader](https://github.com/postcss/postcss-loader) for all available options. -#### Syntax example +3. Write your stylesheets using PostCSS (.css files) and require or import them as normal. -```css +```css:styles.css @custom-media --med (width <= 50rem); @media (--med) { @@ -36,6 +34,10 @@ If you need to pass options to PostCSS use the plugins options; see [postcss-loa } ``` +```javascript +import "./styles.css" +``` + ### With CSS Modules Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.css -> App.module.css`. Any file with the module extension will use CSS modules. @@ -69,6 +71,6 @@ module.exports = () => ({ }) ``` -### Other resources +## Other resources - [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) diff --git a/docs/docs/sass.md b/docs/docs/sass.md new file mode 100644 index 0000000000000..8804a6eb6b5f6 --- /dev/null +++ b/docs/docs/sass.md @@ -0,0 +1,57 @@ +--- +title: Using Sass in Gatsby +--- + +[Sass](https://sass-lang.com) is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin. + +Sass will compile `.sass` and `.scss` files to `.css` files for you, so you can write your stylesheets with more advanced features. + +> **Note**: the difference between using a `.sass` or `.scss` file is the syntax that you write your styles in. All valid CSS is valid SCSS as well so it is the easiest to use and most popular. You can read more about the differences in the [Sass documentation](https://sass-lang.com/documentation/syntax). + +## Installing and Configuring Sass + +This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs), then come back. + +1. Install the Gatsby plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/). + +`npm install --save gatsby-plugin-sass` + +2. Include the plugin in your `gatsby-config.js` file. + +```javascript:title=gatsby-config.js +plugins: [`gatsby-plugin-sass`], +``` + +> **Note**: You can configure [additional plugin options](/packages/gatsby-plugin-sass/#other-options) like paths to include and options for `css-loader`. + +3. Write your stylesheets as `.sass` or `.scss` files and require or import them as normal. + +```css:styles.scss +$font-stack: Helvetica, sans-serif; +$primary-color: #333; + +body { + font: 100% $font-stack; + color: $primary-color; +} +``` + +```css:styles.sass +$font-stack: Helvetica, sans-serif +$primary-color: #333 + +body + font: 100% $font-stack + color: $primary-color +``` + +```javascript +import "./styles.scss" +import "./styles.sass" +``` + +## Other resources + +- [Introduction to Sass](https://designmodo.com/introduction-sass/) +- [Sass Documentation](https://sass-lang.com/documentation) +- [Gatsby starters that use Sass](/starters/?c=Styling%3ASCSS) diff --git a/docs/docs/schema-customization.md b/docs/docs/schema-customization.md index 95a2832ba7703..2261a2aecee8b 100644 --- a/docs/docs/schema-customization.md +++ b/docs/docs/schema-customization.md @@ -801,6 +801,7 @@ exports.createResolvers = ({ createNodeId, createResolvers, store, + reporter, }) => { const { createNode } = actions createResolvers({ @@ -814,6 +815,7 @@ exports.createResolvers = ({ cache, createNode, createNodeId, + reporter, }) }, }, diff --git a/docs/docs/starters.md b/docs/docs/starters.md index b14c75b1af3fa..1dc10f9ae8e50 100644 --- a/docs/docs/starters.md +++ b/docs/docs/starters.md @@ -44,7 +44,7 @@ If you don't specify a custom starter, your site will be created from the [defau > **Note:** If you work for an Enterprise-level company where you are unable to pull from public GitHub repositories, you can still set up Gatsby. Check out the [docs to learn more](/docs/setting-up-gatsby-without-gatsby-new/). -## Official starters +## Official starters Official starters are maintained by Gatsby. diff --git a/docs/docs/tailwind-css.md b/docs/docs/tailwind-css.md index c6b995966f002..9d90a3ce5e674 100644 --- a/docs/docs/tailwind-css.md +++ b/docs/docs/tailwind-css.md @@ -4,9 +4,7 @@ title: Tailwind CSS Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This guide will show you how to get started with Gatsby and [Tailwind CSS](https://tailwindcss.com/). -This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start), then come back. - -### Overview +## Overview There are two ways you can use Tailwind with Gatsby: @@ -17,6 +15,8 @@ You have to install and configure Tailwind for both of these methods, so this gu ## Installing and Configuring Tailwind +This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start), then come back. + 1. Install Tailwind ```shell @@ -31,7 +31,7 @@ To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, ./node_modules/.bin/tailwind init ``` -## Option #1: PostCSS +### Option #1: PostCSS 1. Install the Gatsby PostCSS plugin [**gatsby-plugin-postcss**](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss). @@ -61,7 +61,7 @@ You can now use the `@tailwind` directives to add Tailwind's utilites, preflight To learn more about how to use Tailwind in your CSS, visit the [Tailwind Documentation](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css) -## Option #2: CSS-in-JS +### Option #2: CSS-in-JS These steps assume you have a CSS-in-JS library already installed, and the examples are based on Styled Components. @@ -82,7 +82,7 @@ const Button = styled.button` ` ``` -### Other resources +## Other resources - [Introduction to PostCSS](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) - [Tailwind Documentation](https://tailwindcss.com/) diff --git a/docs/docs/winning-over-engineering-leaders.md b/docs/docs/winning-over-engineering-leaders.md index 7344b7e1032d0..0f7f6d0033aee 100644 --- a/docs/docs/winning-over-engineering-leaders.md +++ b/docs/docs/winning-over-engineering-leaders.md @@ -1,15 +1,74 @@ --- title: Winning over Engineering Leaders -issue: https://github.com/gatsbyjs/gatsby/issues/14040 --- -Engineering leaders are primarily concerned with helping their organization as a whole function effectively, and increasing overall engineering velocity. +Engineering leaders and managers typically make decisions about how to build the sites and products that fall under their ownership. These decisions are based on things like cost, complexity, team needs, business requirements, and the success metrics they are accountable for. -Some benefits of Gatsby that are useful to talk about with engineering leaders include [easier recruiting outcomes](/docs/faster-recruiting/), [a unified stack](/docs/sanitize-your-stack) which means less need for cross-training, and increased speed of building. +These stakeholders need to be convinced that Gatsby can offer them the balance of efficiency, results, and low risk that will satisfy their team, their executives, and their users. --- +Some specific things that engineering leaders and managers care about include: -This is a stub. Help our community expand it. +- **Performance and security** No one wants their product to be noticeably slow or the source of a major security vulnerability. Getting these two key features right can be complicated, even for experienced engineering teams. +- **Flexibility and scalability** Managers want to pick tools that can grow with their user base and with their long-term product roadmap. They do not want to choose a technology that will limit their growth or risk having to start over if (and when) that tool proves to be too rigid. +- **Not reinventing the wheel** While many managers appreciate and sympathize with their team's or colleagues' desire to try out cool new tech, they'd rather not spend valuable time and resources on a new thing when the job is already being done to their satisfaction. As the saying goes, "If it ain't broke, don't fix it." +- **Helping their team work smarter** New tech is interesting to managers when it removes obstacles for their team, helps them be more effective, and/or reduces [yak shaving](https://www.hanselman.com/blog/YakShavingDefinedIllGetThatDoneAsSoonAsIShaveThisYak.aspx). However, these benefits have to outweigh the cost of integrating a new tool and/or re-implementing an existing product. -Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your -pull request gets accepted. +## Basic Explanation + +Here's an example of a basic explanation of Gatsby for engineering leaders and managers: + +> Gatsby is a free, open-source framework for building websites and applications. It's extremely developer-friendly and streamlines the setup and configuration of your build. Gatsby can pull data into your UI from any and all of the sources you currently use; and exceptional performance, added security, and current web best practices are built into Gatsby so your team can focus on delivering an exceptional experience for your users and customers. + +## Specific benefits + +Gatsby has many benefits that will appeal to engineering leaders and help them meet their goals. Some specific talking points are listed below. (A lot of these benefits are also covered in Preston So's article [Enterprise Gatsby: How to Reduce Your Digital Total Cost of Ownership (TCO) with Gatsby](/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/), which is definitely worth sending to your engineering leaders.) + +### Performance + +> From its inception, Gatsby was built to optimize performance. Gatsby sites are consistently 2-3x faster than similar sites built with other tools, with pages loading in milliseconds rather than seconds. Gatsby's automated performance optimizations include pre-fetching resources, code splitting, progressive image loading, statically generating HTML, and Google's [PRPL Pattern](/docs/prpl-pattern/). If you want to take a deeper dive into Gatsby's performance features, check out Kyle Mathews's article, [Web Performance 101 – also, why is Gatsby so fast?](/blog/2017-09-13-why-is-gatsby-so-fast/) or Dustin Schau's article, [Behind the Scenes: What makes Gatsby Great](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/). + +### Security + +> Gatsby is a modern site generator that outputs static HTML pages at build time. That means you don't need a database or content management system running on your public servers, both of which are common sources of security breaches. Static content is much easier to secure. This does not, by any means, eliminate _all_ security vulnerabilities for Gatsby sites, but they will be significantly reduced. Learn more about Gatsby security in Alex Moon's article on [Security for Modern Web Frameworks](/blog/2019-04-06-security-for-modern-web-frameworks/) and the Docs page on [Answering IT & Security Questions](/docs/answering-it-security/). + +### Scalability + +> The scalability of your traffic handling, product complexity and features, and your development process will all benefit from Gatsby. Gatsby sites can be entirely deployed to a CDN, effectively eliminating your risk of downtime due to traffic spikes. If your site or application needs to support new functionality, Gatsby can pull content from as many sources as you need. With other tools, integrations with external resources are an afterthought and a common source of frustration for developers, causing project delays and outages. Gatsby streamlines the integration process, eliminating many of these headaches and points of failure. Finally, Gatsby equips dev teams to make their own components that can be reused across projects with minimal reworking, giving them more time to work on new features. + +### Lower costs + +> CDN hosting for static sites is much, _much_ less expensive than traditional hosting costs. Read more about this here: [Enterprise Gatsby: How to Reduce Your Digital Total Cost of Ownership (TCO) with Gatsby](/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/). You'll also save money on team resources as your developers will spend much less time working on performance optimization and configuring integrations. Many managers have also found it easier and less expensive to recruit for Gatsby projects because they don't require specialized CMS skills or the advanced expertise needed to handle complex tooling and development environments. + +### Improved Development Process + +> Gatsby [unifies your stack](/docs/sanitize-your-stack) and eliminates a lot of the complicated and time-consuming configuration steps that come with most development processes. This means happier developers and clearer division between front-end and back-end tasks. Front-end developers can spend more time making great UIs and back-end developers can focus on adding the features and integrations that make your product better. You can find more information on this subject in Sam Bhagwat's article [How Gatsby Changes Teams' Website Development Workflow](/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/#architecture) + +## Common concerns + +You may find that your engineering leaders and managers have some concerns about Gatsby. Here are some common examples and responses you can provide to help alleviate those concerns. + +### Support for open source software is often unreliable and relatively few projects offer long-term viability. How is Gatsby different? + +> Gatsby has an extremely active and communicative community with over 2,000 contributors and tens of thousands of developers building Gatsby sites. The process for filing issues and [contributing to Gatsby](/contributing/) is well-documented. [Gatsby's extensive documentation](/docs/) also includes various guides, tutorials, plugin and starter libraries, troubleshooting, and additional resources. Last but not least, the Gatsby open source project is supported by [Gatsby, Inc](https://www.gatsbyjs.com/). whose team is committed, full-time, to developing and maintaining Gatsby. Gatsby, Inc. also offers support services, training, and partnership opportunities. + +### Our site uses a lot of dynamic content and components. Didn't you say Gatsby creates static sites? + +> Y, but there's more to it. Gatsby statically generates HTML content using React DOM and server-side APIs – it's an important part of how Gatsby delivers exceptional speed and better security. However, this static HTML content can then be enhanced with client-side JavaScript via React hydration. You can learn more about this in Dustin Schau's blog post [Beyond Static: Building Dynamic apps with Gatsby](/blog/2018-10-15-beyond-static-intro/). + +### Our content team and other less-technical members of my organization need to be able to make site updates. Are they going to be able to work with a Gatsby site? + +> Gatsby can pull content from any source, including all-in-one CMSs, like WordPress and Drupal, and headless CMSs. Your content team can work with whichever content editor suits their needs and preferences, including the CMS they're already using. You can also enable more collaboration between your content and development teams with [Gatsby Preview](https://www.gatsbyjs.com/preview). + +## Case studies + +Case studies are an excellent way to build an engineering leader's confidence in Gatsby's capabilities. Here are some case studies you might want to share: + +- [Beyond Static: Haptic Media Uses Gatsby to Build a Dynamic Web App](/blog/2019-02-05-hapticmedia-case-study/) +- [IBM Uses Gatsby to Manage Enterprise-Level Content](/blog/2018-12-17-ibm-case-study/#big-company-big-website) +- [How we're migrating a government open data site to Gatsby](/blog/2019-02-08-government-open-data-site-with-gatsby/) + +For examples of Gatsby sites, [check out the Showcase](/showcase/). + +## Conclusion + +When you're trying to win over a stakeholder, your first instinct may be to focus completely on Gatsby's benefits. However, when you're speaking to engineering leaders and managers, it's important to be positive while still being honest about Gatsby's limitations. Setting expectations before they go out to do their own research will help them focus on finding solutions rather than faults. There is ample proof that Gatsby works well for many websites - don't be afraid to help your engineering leaders dig into pros and cons. (And it doesn't hurt to get a few of their team members on your side. Check out the [Winning Over Developers](/docs/winning-over-developers/) page for more on that subject.) diff --git a/docs/sites.yml b/docs/sites.yml index 9ad8a67095b5a..88bf640e07ebe 100644 --- a/docs/sites.yml +++ b/docs/sites.yml @@ -2595,17 +2595,6 @@ built_by: IBM built_by_url: https://www.ibm.com/ featured: false -- title: McDonald's Design System - main_url: https://design.mcdonalds.com/ - url: https://design.mcdonalds.com/ - description: > - McDonald's Design System - categories: - - Design - - Design System - built_by: McDonald's - built_by_url: https://www.mcdonalds.com/us/en-us.html - featured: false - title: Mozilla Mixed Reality main_url: https://mixedreality.mozilla.org/ url: https://mixedreality.mozilla.org/ diff --git a/docs/starters.yml b/docs/starters.yml index 00cf2721cdcac..9ea364a289fea 100644 --- a/docs/starters.yml +++ b/docs/starters.yml @@ -3021,3 +3021,15 @@ - ESLint + optional rule enforcement with Husky - Prettier - Netlify ready +- url: https://gatsby-typescript-starter-default.netlify.com/ + repo: https://github.com/RobertoMSousa/gatsby-typescript-starter-default + description: Simple gatsby starter using typescript and eslint instead of outdated tslint. + tags: + - TypeScript + - SEO + - Linting + features: + - Comes with React Helmet for adding site meta tags + - Includes plugins for offline support out of the box + - TypeScript + - Prettier & eslint to format & check the code diff --git a/docs/tutorial/additional-tutorials.md b/docs/tutorial/additional-tutorials.md new file mode 100644 index 0000000000000..006155a2a91a3 --- /dev/null +++ b/docs/tutorial/additional-tutorials.md @@ -0,0 +1,7 @@ +--- +title: Additional Tutorials +--- + +There are many use cases for Gatsby, from the very common "happy paths" to more specific and complex integrations. With additional Gatsby tutorials, learn about more topics that go beyond [the basics](/tutorial/) and gain development superpowers. + + diff --git a/docs/tutorial/advanced-tutorials.md b/docs/tutorial/advanced-tutorials.md deleted file mode 100644 index bb79193e6849f..0000000000000 --- a/docs/tutorial/advanced-tutorials.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Advanced Tutorials ---- - -There are many use cases for Gatsby, from the very common "happy paths" to more specific and complex integrations. With the advanced Gatsby tutorials, learn about topics that go beyond [the basics](/tutorial/) and gain development superpowers. - - diff --git a/docs/tutorial/index.md b/docs/tutorial/index.md index 72100973d86f1..0b38a5cc5e2bf 100644 --- a/docs/tutorial/index.md +++ b/docs/tutorial/index.md @@ -23,8 +23,8 @@ In these intermediate tutorials, you'll learn how to pull data from almost anywh 7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blog posts. 8. [Preparing a site to go live](/tutorial/part-eight/): Learn how to audit your site for performance and best practices for accessibility, SEO, and more. -## Advanced tutorials +## Additional tutorials -There are many use cases for Gatsby, some which aren't covered in beginner or advanced tutorials to keep you focused while learning. The advanced Gatsby tutorials section is a collection of advanced use cases shown step-by-step, such as using source plugins for images and CMS content. +There are many use cases for Gatsby, some which aren't covered in the first set of tutorials to keep you focused while learning. Gatsby's Additional Tutorials section is a collection of resources showing how to complete even more Gatsby tasks step-by-step, such as using source plugins for images and CMS content. -Go deeper with the [advanced Gatsby tutorials](/tutorial/advanced-tutorials/). +Go deeper with [additional Gatsby tutorials](/tutorial/additional-tutorials/). diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 290a742ede708..37728e600e87e 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -247,7 +247,7 @@ Lighthouse is a great tool for site improvements and learning -- Continue lookin ## That's all, folks -Well, not quite; just for this tutorial. There are also [Advanced Tutorials](/tutorial/advanced-tutorials/) to check out for more guided use cases. +Well, not quite; just for this tutorial. There are [Additional Tutorials](/tutorial/additional-tutorials/) to check out for more guided use cases. This is just the beginning. Keep going! diff --git a/docs/tutorial/writing-documentation-with-docz.md b/docs/tutorial/writing-documentation-with-docz.md index 99fd1ca9cbfe4..9c83ff1343bdb 100644 --- a/docs/tutorial/writing-documentation-with-docz.md +++ b/docs/tutorial/writing-documentation-with-docz.md @@ -44,7 +44,7 @@ module.exports = { Docz searches your directories for `mdx` files and renders them. Create a `docs` folder at the root of your project. Place an `index.mdx` file inside this directory with the following content: -```md:title=docs/index.mdx +```mdx:title=docs/index.mdx --- name: Getting Started route: / @@ -102,7 +102,7 @@ The button will display its text by default with a `font-size` of `18px` however Create a new file in the `docs` directory to document your newly created button component. Call the file `button.mdx`: -```md:title=docs/button.mdx +```mdx:title=docs/button.mdx --- name: Button menu: Components @@ -115,7 +115,7 @@ Buttons make common actions more obvious and help users more easily perform them Docz offers some internal components you can use to display the component and its properties. Import both these and your component itself into the document and use them: -```md:title=docs/button.mdx +```mdx:title=docs/button.mdx --- name: Button menu: Components diff --git a/examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js b/examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js index 5b5a86be28eed..7aedba97bc89c 100644 --- a/examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js +++ b/examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js @@ -1,7 +1,14 @@ const { createRemoteFileNode } = require(`gatsby-source-filesystem`) exports.onCreateNode = async ( - { actions: { createNode }, node, createContentDigest, store, cache }, + { + actions: { createNode }, + node, + createContentDigest, + store, + cache, + reporter, + }, { filter, nodeName = `localFile` } ) => { if (filter(node)) { @@ -11,6 +18,7 @@ exports.onCreateNode = async ( cache, createNode, createNodeId: createContentDigest, + reporter, }) if (fileNode) { diff --git a/examples/using-gatsby-image/src/images/monogram.svg b/examples/using-gatsby-image/src/images/monogram.svg index b8b61bbb55120..4bcbffd13fc30 100644 --- a/examples/using-gatsby-image/src/images/monogram.svg +++ b/examples/using-gatsby-image/src/images/monogram.svg @@ -1,4 +1,4 @@ - + diff --git a/examples/using-gatsby-source-graphql/gatsby-node.js b/examples/using-gatsby-source-graphql/gatsby-node.js index e7009b6515996..51cb7449db808 100644 --- a/examples/using-gatsby-source-graphql/gatsby-node.js +++ b/examples/using-gatsby-source-graphql/gatsby-node.js @@ -35,6 +35,7 @@ exports.createResolvers = ({ createNodeId, createResolvers, store, + reporter, }) => { const { createNode } = actions createResolvers({ @@ -64,6 +65,7 @@ exports.createResolvers = ({ cache, createNode, createNodeId, + reporter, }) }, }, diff --git a/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/awesome_tiger.svg b/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/awesome_tiger.svg index 6ba9b51926e69..a74a4c0b4459a 100644 --- a/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/awesome_tiger.svg +++ b/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/awesome_tiger.svg @@ -1,4 +1,4 @@ - + diff --git a/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/squiggly.svg b/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/squiggly.svg index 4975ddb9565aa..60fab0e04a36b 100644 --- a/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/squiggly.svg +++ b/examples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/squiggly.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/gatsby-cli/CHANGELOG.md b/packages/gatsby-cli/CHANGELOG.md index 275abdd3d6214..afa13fbc1ec2d 100644 --- a/packages/gatsby-cli/CHANGELOG.md +++ b/packages/gatsby-cli/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.6.13](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.12...gatsby-cli@2.6.13) (2019-06-19) + +### Bug Fixes + +- **gatsby-cli:** add missing node-fetch dependency ([#14908](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/issues/14908)) ([b7da1e4](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/commit/b7da1e4)) + +## [2.6.12](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.9...gatsby-cli@2.6.12) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/commit/2594623)) + +## [2.6.11](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.10...gatsby-cli@2.6.11) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/commit/2594623)) + +## [2.6.10](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.9...gatsby-cli@2.6.10) (2019-06-18) + +**Note:** Version bump only for package gatsby-cli + +## [2.6.9](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.8...gatsby-cli@2.6.9) (2019-06-18) + +**Note:** Version bump only for package gatsby-cli + +## [2.6.8](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.7...gatsby-cli@2.6.8) (2019-06-18) + +### Features + +- **gatsby-cli:** move progressbar into ink ([#14220](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/issues/14220)) ([967597c](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/commit/967597c)) + ## [2.6.7](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-cli/compare/gatsby-cli@2.6.5...gatsby-cli@2.6.7) (2019-06-12) ### Bug Fixes diff --git a/packages/gatsby-cli/package.json b/packages/gatsby-cli/package.json index cc2fcecfd89f2..4a4ccb8105231 100644 --- a/packages/gatsby-cli/package.json +++ b/packages/gatsby-cli/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-cli", "description": "Gatsby command-line interface for creating new sites and running Gatsby commands", - "version": "2.6.7", + "version": "2.6.13", "author": "Kyle Mathews ", "bin": { "gatsby": "lib/index.js" @@ -24,15 +24,16 @@ "execa": "^0.8.0", "fs-exists-cached": "^1.0.0", "fs-extra": "^4.0.1", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "hosted-git-info": "^2.6.0", "is-valid-path": "^0.1.1", "lodash": "^4.17.10", "meant": "^1.0.1", - "node-fetch": "2.3.0", + "node-fetch": "^2.6.0", "object.entries": "^1.1.0", "opentracing": "^0.14.3", "pretty-error": "^2.1.1", + "progress": "^2.0.3", "prompts": "^2.1.0", "react": "^16.8.4", "resolve-cwd": "^2.0.0", diff --git a/packages/gatsby-cli/src/reporter/index.js b/packages/gatsby-cli/src/reporter/index.js index 50391be30a2bd..c1bed2fdbf45e 100644 --- a/packages/gatsby-cli/src/reporter/index.js +++ b/packages/gatsby-cli/src/reporter/index.js @@ -137,17 +137,98 @@ const reporter: Reporter = { const spanArgs = parentSpan ? { childOf: parentSpan } : {} const span = tracer.startSpan(name, spanArgs) - const activity = reporterInstance.createActivity(name) + const activity = reporterInstance.createActivity({ + type: `spinner`, + id: name, + status: ``, + }) return { - ...activity, + start() { + activity.update({ + startTime: process.hrtime(), + }) + }, + setStatus(status) { + activity.update({ + status: status, + }) + }, end() { span.finish() - activity.end() + activity.done() + }, + span, + } + }, + + /** + * Create a progress bar for an activity + * @param {string} name - Name of activity. + * @param {number} total - Total items to be processed. + * @param {number} start - Start count to show. + * @param {ActivityArgs} activityArgs - optional object with tracer parentSpan + * @returns {ActivityTracker} The activity tracker. + */ + createProgress( + name: string, + total, + start = 0, + activityArgs: ActivityArgs = {} + ): ActivityTracker { + const { parentSpan } = activityArgs + const spanArgs = parentSpan ? { childOf: parentSpan } : {} + const span = tracer.startSpan(name, spanArgs) + + let hasStarted = false + let current = start + const activity = reporterInstance.createActivity({ + type: `progress`, + id: name, + current, + total, + }) + + return { + start() { + if (hasStarted) { + return + } + + hasStarted = true + activity.update({ + startTime: process.hrtime(), + }) + }, + setStatus(status) { + activity.update({ + status: status, + }) + }, + tick() { + activity.update({ + current: ++current, + }) + }, + done() { + span.finish() + activity.done() + }, + set total(value) { + total = value + activity.update({ + total: value, + }) }, span, } }, + // Make private as we'll probably remove this in a future refactor. + _setStage(stage) { + if (reporterInstance.setStage) { + reporterInstance.setStage(stage) + } + }, } console.log = (...args) => reporter.log(util.format(...args)) diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/components/develop.js b/packages/gatsby-cli/src/reporter/reporters/ink/components/develop.js new file mode 100644 index 0000000000000..b8366eb384699 --- /dev/null +++ b/packages/gatsby-cli/src/reporter/reporters/ink/components/develop.js @@ -0,0 +1,89 @@ +import React, { useContext, useState, useEffect, useRef } from "react" +import { Box, Color, StdoutContext } from "ink" +import fetch from "node-fetch" + +// Handy hook from https://overreacted.io/making-setinterval-declarative-with-react-hooks/ +function useInterval(callback, delay) { + const savedCallback = useRef() + + // Remember the latest callback. + useEffect(() => { + savedCallback.current = callback + }, [callback]) + + // Set up the interval. + useEffect(() => { + function tick() { + savedCallback.current() + } + if (delay !== null) { + let id = setInterval(tick, delay) + return () => clearInterval(id) + } + + return null + }, [delay]) +} + +// Track the width and height of the terminal. Responsive app design baby! +const useTerminalResize = () => { + const { stdout } = useContext(StdoutContext) + const [sizes, setSizes] = useState([stdout.columns, stdout.rows]) + useEffect(() => { + stdout.on(`resize`, () => { + setSizes([stdout.columns, stdout.rows]) + }) + return () => { + stdout.off(`resize`) + } + }, [stdout]) + + return sizes +} + +// Query the site's graphql instance for the latest count. +const fetchPageQueryCount = url => + fetch(`${url}___graphql`, { + method: `post`, + body: JSON.stringify({ + query: `query MyQuery { + allSitePage { + totalCount + } +}`, + }), + headers: { "Content-Type": `application/json` }, + }) + .then(res => res.json()) + .then(json => json.data.allSitePage.totalCount) + +const Develop = props => { + const [pagesCount, setPagesCount] = useState(0) + + fetchPageQueryCount(props.stage.context.url).then(count => + setPagesCount(count) + ) + // Query for latest page count every second. + // Built-in subscriptions would be nice. + useInterval(() => { + // POST to get pages count. + fetchPageQueryCount(props.stage.context.url).then(count => + setPagesCount(count) + ) + }, 1000) + + const [width] = useTerminalResize() + + return ( + + {`—`.repeat(width)} + + {pagesCount} pages + + {props.stage.context.appName} + + + ) +} + +export default Develop diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js b/packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js new file mode 100644 index 0000000000000..6edc4253cbf1c --- /dev/null +++ b/packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js @@ -0,0 +1,43 @@ +import React from "react" +import { Box } from "ink" +import calcElapsedTime from "../../../../util/calc-elapsed-time" + +const maxWidth = 30 +const minWidth = 10 + +const getLength = prop => String(prop).length + +export default function ProgressBar({ message, current, total, startTime }) { + const percentage = total ? Math.round((current / total) * 100) : 0 + const terminalWidth = process.stdout.columns || 80 + const availableWidth = + terminalWidth - + getLength(message) - + getLength(current) - + getLength(total) - + getLength(percentage) - + 11 // margins + extra characters + + const progressBarWidth = Math.max( + minWidth, + Math.min(maxWidth, availableWidth) + ) + + return ( + + + [ + + {`=`.repeat(((progressBarWidth - 2) * percentage) / 100)} + + ] + + {calcElapsedTime(startTime)} s + + {current}/{total} + + {`` + percentage}% + {message} + + ) +} diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js b/packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js similarity index 61% rename from packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js rename to packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js index 1dcb28fae507b..10f8a8033e57f 100644 --- a/packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js +++ b/packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js @@ -1,14 +1,7 @@ import React from "react" -import convertHrtime from "convert-hrtime" import { Box } from "ink" import Spinner from "ink-spinner" -export const calcElapsedTime = startTime => { - const elapsed = process.hrtime(startTime) - - return convertHrtime(elapsed)[`seconds`].toFixed(3) -} - export default function Activity({ name, status }) { let statusText = name if (status) { diff --git a/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js b/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js index bdf17ba06c882..37feea92f9ec1 100644 --- a/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js +++ b/packages/gatsby-cli/src/reporter/reporters/ink/reporter.js @@ -1,20 +1,33 @@ import React from "react" import { Static, Box } from "ink" -import { isCI } from "ci-info" import chalk from "chalk" -import Activity, { calcElapsedTime } from "./components/activity" +import Spinner from "./components/spinner" +import ProgressBar from "./components/progress-bar" +import Develop from "./components/develop" import { Message } from "./components/messages" + import Error from "./components/error" -const showProgress = process.stdout.isTTY && !isCI +import isTTY from "../../../util/is-tty" +import calcElapsedTime from "../../../util/calc-elapsed-time" -const generateActivityFinishedText = (name, activity) => { - let successText = `${name} - ${calcElapsedTime(activity.startTime)} s` - if (activity.status) { - successText += ` — ${activity.status}` - } +const showProgress = isTTY + +const successTextGenerator = { + spinner: activity => { + let successText = `${activity.id} - ${calcElapsedTime( + activity.startTime + )} s` + if (activity.status) { + successText += ` — ${activity.status}` + } - return successText + return successText + }, + progress: activity => + `${activity.id} — ${activity.current}/${activity.total} - ${calcElapsedTime( + activity.startTime + )} s`, } export default class GatsbyReporter extends React.Component { @@ -23,48 +36,49 @@ export default class GatsbyReporter extends React.Component { verbose: false, messages: [], activities: {}, + stage: { stage: `init`, context: {} }, } format = chalk - createActivity = name => { + setStage = stage => { + this.setState({ stage }) + } + + createActivity = ({ id, ...options }) => { + this.setState(state => { + return { + activities: { + ...state.activities, + [id]: { + id, + ...options, + }, + }, + } + }) + return { - start: () => { + update: newState => { this.setState(state => { return { activities: { ...state.activities, - [name]: { - status: ``, - startTime: process.hrtime(), + [id]: { + ...state.activities[id], + ...newState, }, }, } }) }, - setStatus: status => { - this.setState(state => { - const activity = state.activities[name] - - return { - activities: { - ...state.activities, - [name]: { - ...activity, - status: status, - }, - }, - } - }) - }, - end: () => { - const activity = this.state.activities[name] - - this.success(generateActivityFinishedText(name, activity)) + done: () => { + const activity = this.state.activities[id] + this.success(successTextGenerator[activity.type]({ id, ...activity })) this.setState(state => { const activities = { ...state.activities } - delete activities[name] + delete activities[id] return { activities, @@ -113,19 +127,32 @@ export default class GatsbyReporter extends React.Component { } render() { + const { activities, messages, disableColors, stage } = this.state + + const spinners = [] + const progressBars = [] + if (showProgress) { + Object.keys(activities).forEach(activityName => { + const activity = activities[activityName] + if (activity.type === `spinner`) { + spinners.push(activity) + } + if (activity.type === `progress` && activity.startTime) { + progressBars.push(activity) + } + }) + } + return ( - {this.state.messages.map((msg, index) => ( + {messages.map((msg, index) => ( {msg.type === `error` ? ( ) : ( - + {msg.details} )} @@ -133,15 +160,23 @@ export default class GatsbyReporter extends React.Component { ))} - {showProgress && - Object.keys(this.state.activities).map(activityName => ( - - ))} + {spinners.map(activity => ( + + ))} + + {progressBars.map(activity => ( + + ))} + {stage.stage === `DevelopBootstrapFinished` && ( + + )} ) } diff --git a/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js b/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js index 45e3954d5a4fb..537e25eb018a5 100644 --- a/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js +++ b/packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js @@ -1,7 +1,8 @@ // @flow const { createReporter } = require(`yurnalist`) -const convertHrtime = require(`convert-hrtime`) +const ProgressBar = require(`progress`) +const calcElapsedTime = require(`../../../util/calc-elapsed-time`) const VERBOSE = process.env.gatsby_log_level === `verbose` const reporter = createReporter({ emoji: true, verbose: VERBOSE }) @@ -29,36 +30,69 @@ module.exports = { info: reporter.info.bind(reporter), warn: reporter.warn.bind(reporter), log: reporter.log.bind(reporter), - /** - * Time an activity. - * @param {string} name - Name of activity. - * @returns {string} The elapsed time of activity. - */ - createActivity(name) { - const spinner = reporter.activity() - const start = process.hrtime() - let status - const elapsedTime = () => { - var elapsed = process.hrtime(start) - return `${convertHrtime(elapsed)[`seconds`].toFixed(3)} s` + createActivity: activity => { + let start + + if (activity.type === `spinner`) { + const spinner = reporter.activity() + let status + + return { + update: newState => { + if (newState.startTime) { + start = newState.startTime + spinner.tick(activity.id) + } + if (newState.status) { + status = newState.status + spinner.tick(`${activity.id} — ${newState.status}`) + } + }, + done: () => { + const str = status + ? `${activity.id} — ${calcElapsedTime(start)} — ${status}` + : `${activity.id} — ${calcElapsedTime(start)}` + reporter.success(str) + spinner.end() + }, + } + } + + if (activity.type === `progress`) { + const bar = new ProgressBar( + ` [:bar] :current/:total :elapsed s :percent ${activity.id}`, + { + total: 0, + width: 30, + clear: true, + } + ) + return { + update: newState => { + if (newState.startTime) { + start = newState.startTime + } + if (newState.total) { + bar.total = newState.total + } + if (newState.current) { + bar.tick() + } + }, + done: () => { + reporter.success( + `${activity.id} — ${bar.curr}/${bar.total} - ${calcElapsedTime( + start + )} s` + ) + }, + } } return { - start: () => { - spinner.tick(name) - }, - setStatus: s => { - status = s - spinner.tick(`${name} — ${status}`) - }, - end: () => { - const str = status - ? `${name} — ${elapsedTime()} — ${status}` - : `${name} — ${elapsedTime()}` - reporter.success(str) - spinner.end() - }, + update: () => {}, + done: () => {}, } }, } diff --git a/packages/gatsby-cli/src/util/calc-elapsed-time.js b/packages/gatsby-cli/src/util/calc-elapsed-time.js new file mode 100644 index 0000000000000..336ed74eee561 --- /dev/null +++ b/packages/gatsby-cli/src/util/calc-elapsed-time.js @@ -0,0 +1,7 @@ +const convertHrtime = require(`convert-hrtime`) + +module.exports = startTime => { + const elapsed = process.hrtime(startTime) + + return convertHrtime(elapsed)[`seconds`].toFixed(3) +} diff --git a/packages/gatsby-plugin-netlify-cms/CHANGELOG.md b/packages/gatsby-plugin-netlify-cms/CHANGELOG.md index 403f3e5e96c02..1e4da6e1cc165 100644 --- a/packages/gatsby-plugin-netlify-cms/CHANGELOG.md +++ b/packages/gatsby-plugin-netlify-cms/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.0.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms/compare/gatsby-plugin-netlify-cms@4.0.2...gatsby-plugin-netlify-cms@4.0.3) (2019-06-18) + +### Bug Fixes + +- **gatsby-plugin-netlify-cms:** fix minimizer settings ([#14795](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms/issues/14795)) ([7973165](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms/commit/7973165)) + ## [4.0.2](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms/compare/gatsby-plugin-netlify-cms@4.0.1...gatsby-plugin-netlify-cms@4.0.2) (2019-06-14) ### Bug Fixes diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json index 210f6bbe9427b..b2fe972a424cd 100644 --- a/packages/gatsby-plugin-netlify-cms/package.json +++ b/packages/gatsby-plugin-netlify-cms/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-netlify-cms", "description": "A Gatsby plugin which generates the Netlify CMS single page app", - "version": "4.0.2", + "version": "4.0.3", "author": "Shawn Erquhart ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js index 8498f7a19e8fb..bd805360bb81c 100644 --- a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js +++ b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js @@ -165,7 +165,7 @@ exports.onCreateWebpackConfig = ( * Without this, node can get out of memory errors * when building for production. */ - minimizer: gatsbyConfig.optimization.minimizer, + minimizer: stage === `develop` ? [] : gatsbyConfig.optimization.minimizer, }, devtool: stage === `develop` ? `cheap-module-source-map` : `source-map`, } diff --git a/packages/gatsby-plugin-sass/CHANGELOG.md b/packages/gatsby-plugin-sass/CHANGELOG.md index 6f449afa2879e..965997451d5a1 100644 --- a/packages/gatsby-plugin-sass/CHANGELOG.md +++ b/packages/gatsby-plugin-sass/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.13](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass/compare/gatsby-plugin-sass@2.0.11...gatsby-plugin-sass@2.0.13) (2019-06-19) + +**Note:** Version bump only for package gatsby-plugin-sass + +## [2.0.12](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass/compare/gatsby-plugin-sass@2.0.11...gatsby-plugin-sass@2.0.12) (2019-06-19) + +**Note:** Version bump only for package gatsby-plugin-sass + ## [2.0.11](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass/compare/gatsby-plugin-sass@2.0.10...gatsby-plugin-sass@2.0.11) (2019-03-11) **Note:** Version bump only for package gatsby-plugin-sass diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md index 1c6550b238019..767fe24298ea8 100644 --- a/packages/gatsby-plugin-sass/README.md +++ b/packages/gatsby-plugin-sass/README.md @@ -9,31 +9,28 @@ Provides drop-in support for SASS/SCSS stylesheets ## How to use 1. Include the plugin in your `gatsby-config.js` file. -2. Write your stylesheets in SASS/SCSS and require or import them as normal. -```javascript -// in gatsby-config.js +```javascript:title="gatsby-config.js" plugins: [`gatsby-plugin-sass`] ``` -By Default `node-sass` is used. To use `dart-sass`. +2. Write your stylesheets in Sass/SCSS and require or import them as normal. -```bash -npm i -D sass +```css:title="src/index.sass" +html { + background-color: rebeccapurple; + p { + color: white; + } +} ``` ```javascript -// in gatsby-config.js -plugins: [ - { - resolve: `gatsby-plugin-sass`, - options: { - implementation: require("sass"), - }, - }, -] +import("./src/index.sass") ``` +## Other options + If you need to pass options to Sass use the plugins options, see [node-sass](https://github.com/sass/node-sass)/[dart-sass](https://github.com/sass/dart-sass) docs for all available options. @@ -66,27 +63,27 @@ plugins: [ ] ``` -### With CSS Modules +### Alternative Sass Implementations -Using CSS Modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.scss` -> `App.module.scss`. -Any file with the `module` extension will use CSS Modules. +By default the node implementation of Sass (`node-sass`) is used. To use the implementation written in Dart (`dart-sass`), you can install `sass` instead of `node-sass` and pass it into the options as the implementation: -### PostCSS plugins - -PostCSS is also included to handle some default optimizations like autoprefixing -and common cross-browser flexbox bugs. Normally you don't need to think about it, but if -you'd prefer to add additional postprocessing to your SASS output you can specify plugins -in the plugin options - -## Relative paths & url() - -This plugin resolves `url()` paths relative to the entry SCSS/SASS file not – as might be expected – the location relative to the declaration. Under the hood, it makes use of [sass-loader](https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url) and this is documented in the [readme](https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url). - -Using [resolve-url-loader](https://github.com/bholloway/resolve-url-loader) may provide a workaround, but at present this is not in the build and implementation would demand customisation. +```bash +npm install --save-dev sass +``` -TODO link to a plugin that adds resolve-url-loader +```javascript +// in gatsby-config.js +plugins: [ + { + resolve: `gatsby-plugin-sass`, + options: { + implementation: require("sass"), + }, + }, +] +``` -## Other options +### SASS Precision SASS defaults to [5 digits of precision](https://github.com/sass/sass/issues/1122). If this is too low for you (e.g. [if you use Bootstrap](https://github.com/twbs/bootstrap-sass/blob/master/README.md#sass-number-precision)), you may configure it as follows: @@ -103,6 +100,26 @@ plugins: [ ] ``` +### With CSS Modules + +Using CSS Modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.scss` -> `App.module.scss`. +Any file with the `module` extension will use CSS Modules. + +### PostCSS plugins + +PostCSS is also included to handle some default optimizations like autoprefixing +and common cross-browser flexbox bugs. Normally you don't need to think about it, but if +you'd prefer to add additional postprocessing to your Sass output you can specify plugins +in the plugin options. + +## Relative paths & url() + +This plugin resolves `url()` paths relative to the entry SCSS/Sass file not – as might be expected – the location relative to the declaration. Under the hood, it makes use of [sass-loader](https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url) and this is documented in the [readme](https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url). + +Using [resolve-url-loader](https://github.com/bholloway/resolve-url-loader) may provide a workaround, but at present this is not in the build and implementation would demand customization. + + + ## Breaking changes history diff --git a/packages/gatsby-plugin-sass/package.json b/packages/gatsby-plugin-sass/package.json index 3ceb4a9fd533c..e0df8ab1ae3a5 100644 --- a/packages/gatsby-plugin-sass/package.json +++ b/packages/gatsby-plugin-sass/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-sass", "description": "Gatsby plugin to handle scss/sass files", - "version": "2.0.11", + "version": "2.0.13", "author": "Daniel Farrell ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-plugin-sharp/CHANGELOG.md b/packages/gatsby-plugin-sharp/CHANGELOG.md index 31e430e28c8a9..52705db6ecb3d 100644 --- a/packages/gatsby-plugin-sharp/CHANGELOG.md +++ b/packages/gatsby-plugin-sharp/CHANGELOG.md @@ -3,6 +3,28 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.1.9](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/compare/gatsby-plugin-sharp@2.1.6...gatsby-plugin-sharp@2.1.9) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/commit/2594623)) + +## [2.1.8](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/compare/gatsby-plugin-sharp@2.1.7...gatsby-plugin-sharp@2.1.8) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/commit/2594623)) + +## [2.1.7](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/compare/gatsby-plugin-sharp@2.1.6...gatsby-plugin-sharp@2.1.7) (2019-06-18) + +**Note:** Version bump only for package gatsby-plugin-sharp + +## [2.1.6](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/compare/gatsby-plugin-sharp@2.1.5...gatsby-plugin-sharp@2.1.6) (2019-06-18) + +### Features + +- **gatsby-cli:** move progressbar into ink ([#14220](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/issues/14220)) ([967597c](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/commit/967597c)) + ## [2.1.5](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp/compare/gatsby-plugin-sharp@2.1.3...gatsby-plugin-sharp@2.1.5) (2019-06-12) ### Bug Fixes diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json index 4574ee4b62499..8491e754499ef 100644 --- a/packages/gatsby-plugin-sharp/package.json +++ b/packages/gatsby-plugin-sharp/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-sharp", "description": "Wrapper of the Sharp image manipulation library for Gatsby plugins", - "version": "2.1.5", + "version": "2.1.9", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -19,7 +19,7 @@ "mini-svg-data-uri": "^1.0.0", "potrace": "^2.1.1", "probe-image-size": "^4.0.0", - "progress": "^1.1.8", + "progress": "^2.0.3", "semver": "^5.6.0", "sharp": "^0.22.1", "svgo": "^1.2.0" diff --git a/packages/gatsby-plugin-sharp/src/__tests__/utils.js b/packages/gatsby-plugin-sharp/src/__tests__/utils.js new file mode 100644 index 0000000000000..633988595d216 --- /dev/null +++ b/packages/gatsby-plugin-sharp/src/__tests__/utils.js @@ -0,0 +1,36 @@ +jest.mock(`gatsby-cli/lib/reporter`) +jest.mock(`progress`) +const { createProgress } = require(`../utils`) +const reporter = require(`gatsby-cli/lib/reporter`) +const progress = require(`progress`) + +describe(`createProgress`, () => { + beforeEach(() => { + progress.mockClear() + }) + + it(`should use createProgress from gatsby-cli when available`, () => { + createProgress(`test`, reporter) + expect(reporter.createProgress).toBeCalled() + expect(progress).not.toBeCalled() + }) + + it(`should fallback to a local implementation when createProgress does not exists on reporter`, () => { + reporter.createProgress = null + const bar = createProgress(`test`, reporter) + expect(progress).toHaveBeenCalledTimes(1) + expect(bar).toHaveProperty(`start`, expect.any(Function)) + expect(bar).toHaveProperty(`tick`, expect.any(Function)) + expect(bar).toHaveProperty(`done`, expect.any(Function)) + expect(bar).toHaveProperty(`total`) + }) + + it(`should fallback to a local implementation when no reporter is present`, () => { + const bar = createProgress(`test`) + expect(progress).toHaveBeenCalledTimes(1) + expect(bar).toHaveProperty(`start`, expect.any(Function)) + expect(bar).toHaveProperty(`tick`, expect.any(Function)) + expect(bar).toHaveProperty(`done`, expect.any(Function)) + expect(bar).toHaveProperty(`total`) + }) +}) diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index 83f476f58e3a8..17e992621260f 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -110,7 +110,8 @@ function queueImageResizing({ file, args = {}, reporter }) { const finishedPromise = scheduleJob( job, boundActionCreators, - pluginOptions + pluginOptions, + reporter ).then(() => { queue.delete(prefixedSrc) }) diff --git a/packages/gatsby-plugin-sharp/src/scheduler.js b/packages/gatsby-plugin-sharp/src/scheduler.js index 21cd7fa223dc4..4e691f4020129 100644 --- a/packages/gatsby-plugin-sharp/src/scheduler.js +++ b/packages/gatsby-plugin-sharp/src/scheduler.js @@ -1,8 +1,8 @@ const _ = require(`lodash`) -const ProgressBar = require(`progress`) const { existsSync } = require(`fs`) const queue = require(`async/queue`) const { processFile } = require(`./process-file`) +const { createProgress } = require(`./utils`) const toProcess = {} let totalJobs = 0 @@ -10,18 +10,20 @@ const q = queue((task, callback) => { task(callback) }, 1) -const bar = new ProgressBar( - `Generating image thumbnails [:bar] :current/:total :elapsed secs :percent`, - { - total: 0, - width: 30, +let bar +// when the queue is empty we stop the progressbar +q.drain = () => { + if (bar) { + bar.done() } -) + totalJobs = 0 +} exports.scheduleJob = async ( job, boundActionCreators, pluginOptions, + reporter, reportStatus = true ) => { const inputFileKey = job.inputPath.replace(/\./g, `%2E`) @@ -50,6 +52,10 @@ exports.scheduleJob = async ( deferred.resolve = resolve deferred.reject = reject }) + if (totalJobs === 0) { + bar = createProgress(`Generating image thumbnails`, reporter) + bar.start() + } totalJobs += 1 @@ -107,6 +113,7 @@ function runJobs( // We're now processing the file's jobs. let imagesFinished = 0 + bar.total = totalJobs try { diff --git a/packages/gatsby-plugin-sharp/src/utils.js b/packages/gatsby-plugin-sharp/src/utils.js new file mode 100644 index 0000000000000..acb49ad99c919 --- /dev/null +++ b/packages/gatsby-plugin-sharp/src/utils.js @@ -0,0 +1,28 @@ +const ProgressBar = require(`progress`) + +// TODO remove in V3 +export function createProgress(message, reporter) { + if (reporter && reporter.createProgress) { + return reporter.createProgress(message) + } + + const bar = new ProgressBar( + ` [:bar] :current/:total :elapsed s :percent ${message}`, + { + total: 0, + width: 30, + clear: true, + } + ) + + return { + start() {}, + tick() { + bar.tick() + }, + done() {}, + set total(value) { + bar.total = value + }, + } +} diff --git a/packages/gatsby-remark-graphviz/CHANGELOG.md b/packages/gatsby-remark-graphviz/CHANGELOG.md index a1f0a47cdf26b..492b4756b4e59 100644 --- a/packages/gatsby-remark-graphviz/CHANGELOG.md +++ b/packages/gatsby-remark-graphviz/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.13](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-graphviz/compare/gatsby-remark-graphviz@1.0.12...gatsby-remark-graphviz@1.0.13) (2019-06-19) + +**Note:** Version bump only for package gatsby-remark-graphviz + +## [1.0.12](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-graphviz/compare/gatsby-remark-graphviz@1.0.11...gatsby-remark-graphviz@1.0.12) (2019-06-18) + +**Note:** Version bump only for package gatsby-remark-graphviz + ## [1.0.11](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-graphviz/compare/gatsby-remark-graphviz@1.0.10...gatsby-remark-graphviz@1.0.11) (2019-06-10) ### Bug Fixes diff --git a/packages/gatsby-remark-graphviz/package.json b/packages/gatsby-remark-graphviz/package.json index e4844e7d5ca93..b5e2315931177 100644 --- a/packages/gatsby-remark-graphviz/package.json +++ b/packages/gatsby-remark-graphviz/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-remark-graphviz", "description": "Processes graphviz code blocks and renders to SVG using viz.js", - "version": "1.0.11", + "version": "1.0.13", "author": "Anthony Marcar ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -41,7 +41,7 @@ }, "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-graphviz", "scripts": { - "build": "babel --out-dir . src", + "build": "babel --out-dir . src --ignore **/__tests__", "prepare": "cross-env NODE_ENV=production npm run build", "watch": "babel -w src --out-dir . --ignore **/__tests__" } diff --git a/packages/gatsby-remark-graphviz/rendered-graph.svg b/packages/gatsby-remark-graphviz/rendered-graph.svg index 821ac55103974..386ea1c509fc1 100644 --- a/packages/gatsby-remark-graphviz/rendered-graph.svg +++ b/packages/gatsby-remark-graphviz/rendered-graph.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/gatsby-source-contentful/CHANGELOG.md b/packages/gatsby-source-contentful/CHANGELOG.md index 5de715bf95b14..c767a4929a6e9 100644 --- a/packages/gatsby-source-contentful/CHANGELOG.md +++ b/packages/gatsby-source-contentful/CHANGELOG.md @@ -3,6 +3,28 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.75](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/compare/gatsby-source-contentful@2.0.72...gatsby-source-contentful@2.0.75) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/commit/2594623)) + +## [2.0.74](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/compare/gatsby-source-contentful@2.0.73...gatsby-source-contentful@2.0.74) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/commit/2594623)) + +## [2.0.73](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/compare/gatsby-source-contentful@2.0.72...gatsby-source-contentful@2.0.73) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-contentful + +## [2.0.72](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/compare/gatsby-source-contentful@2.0.71...gatsby-source-contentful@2.0.72) (2019-06-18) + +### Bug Fixes + +- **gatsby-source-contentful:** Restricts images to 4000 max image width/height ([#14760](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/issues/14760)) ([177d35c](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/commit/177d35c)) + ## [2.0.71](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful/compare/gatsby-source-contentful@2.0.69...gatsby-source-contentful@2.0.71) (2019-06-12) **Note:** Version bump only for package gatsby-source-contentful diff --git a/packages/gatsby-source-contentful/package.json b/packages/gatsby-source-contentful/package.json index 49c82b8e751bf..bf69953eae898 100644 --- a/packages/gatsby-source-contentful/package.json +++ b/packages/gatsby-source-contentful/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-source-contentful", "description": "Gatsby source plugin for building websites using the Contentful CMS as a data source", - "version": "2.0.71", + "version": "2.0.75", "author": "Marcus Ericsson (mericsson.com)", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -15,8 +15,8 @@ "contentful": "^6.1.0", "deep-map": "^1.5.0", "fs-extra": "^4.0.2", - "gatsby-plugin-sharp": "^2.1.5", - "gatsby-source-filesystem": "^2.0.39", + "gatsby-plugin-sharp": "^2.1.9", + "gatsby-source-filesystem": "^2.0.43", "is-online": "^7.0.0", "joi": "^14.0.0", "json-stringify-safe": "^5.0.1", diff --git a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap index 1b38586e6a141..cadfac6d82cc8 100644 --- a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap +++ b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap @@ -10,9 +10,7 @@ Object { "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg", "height": 3000, "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250", - "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 1x, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=3375&h=4500 1.5x, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 2x", + "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 1x", "width": 2250, } `; @@ -53,9 +51,7 @@ Object { "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250", "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=563&h=751 563w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1125&h=1500 1125w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 2250w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=3375&h=4500 3375w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w", +//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 2250w", } `; @@ -70,8 +66,7 @@ Object { //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000 450w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&bg=rgb%3A000000 675w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&bg=rgb%3A000000 900w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&bg=rgb%3A000000 1350w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=3990&q=50&bg=rgb%3A000000 4500w", +//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&bg=rgb%3A000000 1350w", } `; @@ -86,8 +81,7 @@ Object { //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=300&h=400 300w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=600 450w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 600w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=1200 900w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w", +//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=1200 900w", } `; @@ -102,8 +96,7 @@ Object { //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=533 400w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 600w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 800w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w", +//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w", } `; @@ -118,8 +111,7 @@ Object { //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 800w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w, //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1600&h=2133 1600w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2400&h=3200 2400w, -//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w", +//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2400&h=3200 2400w", } `; diff --git a/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js b/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js index 2352dbcfc7b87..00a7f4168cf68 100644 --- a/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js @@ -101,7 +101,7 @@ describe(`contentful extend node type`, () => { const resp = await resolveFixed(image, { width: 2250, }) - expect(resp.srcSet.split(`,`).length).toBe(3) + expect(resp.srcSet.split(`,`).length).toBe(1) expect(resp).toMatchSnapshot() }) }) @@ -141,7 +141,7 @@ describe(`contentful extend node type`, () => { const resp = await resolveFluid(image, { maxWidth: 2250, }) - expect(resp.srcSet.split(`,`).length).toBe(5) + expect(resp.srcSet.split(`,`).length).toBe(3) expect(resp).toMatchSnapshot() }) }) diff --git a/packages/gatsby-source-contentful/src/download-contentful-assets.js b/packages/gatsby-source-contentful/src/download-contentful-assets.js index 9695e74f318ec..f185a80e3ad6e 100644 --- a/packages/gatsby-source-contentful/src/download-contentful-assets.js +++ b/packages/gatsby-source-contentful/src/download-contentful-assets.js @@ -25,6 +25,7 @@ const downloadContentfulAssets = async gatsbyFunctions => { store, cache, getNodes, + reporter, } = gatsbyFunctions // Any ContentfulAsset nodes will be downloaded, cached and copied to public/static @@ -62,6 +63,7 @@ const downloadContentfulAssets = async gatsbyFunctions => { cache, createNode, createNodeId, + reporter, }) if (fileNode) { diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js index 14cd7054d12c2..c7fb755fe33c8 100644 --- a/packages/gatsby-source-contentful/src/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/extend-node-type.js @@ -20,6 +20,9 @@ const { ImageCropFocusType, } = require(`./schemes`) +// @see https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/specify-width-&-height +const CONTENTFUL_IMAGE_MAX_SIZE = 4000 + const isImage = image => _.includes( [`image/jpeg`, `image/jpg`, `image/png`, `image/webp`, `image/gif`], @@ -113,8 +116,15 @@ const resolveFixed = (image, options) => { fixedSizes.push(options.width * 3) fixedSizes = fixedSizes.map(Math.round) - // Filter out sizes larger than the image's width. - const filteredSizes = fixedSizes.filter(size => size <= width) + // Filter out sizes larger than the image's width and the contentful image's max size. + const filteredSizes = fixedSizes.filter(size => { + const calculatedHeight = Math.round(size / desiredAspectRatio) + return ( + size <= CONTENTFUL_IMAGE_MAX_SIZE && + calculatedHeight <= CONTENTFUL_IMAGE_MAX_SIZE && + size <= width + ) + }) // Sort sizes for prettiness. const sortedSizes = _.sortBy(filteredSizes) @@ -214,12 +224,25 @@ const resolveFluid = (image, options) => { fluidSizes.push(options.maxWidth * 3) fluidSizes = fluidSizes.map(Math.round) - // Filter out sizes larger than the image's maxWidth. - const filteredSizes = fluidSizes.filter(size => size <= width) + // Filter out sizes larger than the image's maxWidth and the contentful image's max size. + const filteredSizes = fluidSizes.filter(size => { + const calculatedHeight = Math.round(size / desiredAspectRatio) + return ( + size <= CONTENTFUL_IMAGE_MAX_SIZE && + calculatedHeight <= CONTENTFUL_IMAGE_MAX_SIZE && + size <= width + ) + }) // Add the original image (if it isn't already in there) to ensure the largest image possible // is available for small images. - if (!filteredSizes.includes(parseInt(width))) filteredSizes.push(width) + if ( + !filteredSizes.includes(parseInt(width)) && + parseInt(width) < CONTENTFUL_IMAGE_MAX_SIZE && + Math.round(width / desiredAspectRatio) < CONTENTFUL_IMAGE_MAX_SIZE + ) { + filteredSizes.push(width) + } // Sort sizes for prettiness. const sortedSizes = _.sortBy(filteredSizes) diff --git a/packages/gatsby-source-contentful/src/gatsby-node.js b/packages/gatsby-source-contentful/src/gatsby-node.js index 20f51b5c9bd5c..b08c1d226e171 100644 --- a/packages/gatsby-source-contentful/src/gatsby-node.js +++ b/packages/gatsby-source-contentful/src/gatsby-node.js @@ -222,6 +222,7 @@ exports.sourceNodes = async ( store, cache, getNodes, + reporter, }) } diff --git a/packages/gatsby-source-drupal/CHANGELOG.md b/packages/gatsby-source-drupal/CHANGELOG.md index 515c8ce379b80..9f5fcdf27ad82 100644 --- a/packages/gatsby-source-drupal/CHANGELOG.md +++ b/packages/gatsby-source-drupal/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.1.16](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@3.1.13...gatsby-source-drupal@3.1.16) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/commit/2594623)) + +## [3.1.15](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@3.1.14...gatsby-source-drupal@3.1.15) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/commit/2594623)) + +## [3.1.14](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@3.1.13...gatsby-source-drupal@3.1.14) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-drupal + +## [3.1.13](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@3.1.12...gatsby-source-drupal@3.1.13) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-drupal + ## [3.1.12](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@3.1.11...gatsby-source-drupal@3.1.12) (2019-06-14) ### Features diff --git a/packages/gatsby-source-drupal/package.json b/packages/gatsby-source-drupal/package.json index ecc7683f9f0ad..304e66d635d0e 100644 --- a/packages/gatsby-source-drupal/package.json +++ b/packages/gatsby-source-drupal/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-source-drupal", "description": "Gatsby source plugin for building websites using the Drupal CMS as a data source", - "version": "3.1.12", + "version": "3.1.16", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -10,7 +10,7 @@ "@babel/runtime": "^7.0.0", "axios": "^0.19.0", "bluebird": "^3.5.0", - "gatsby-source-filesystem": "^2.0.39", + "gatsby-source-filesystem": "^2.0.43", "lodash": "^4.17.10", "tiny-async-pool": "^1.0.4" }, diff --git a/packages/gatsby-source-drupal/src/gatsby-node.js b/packages/gatsby-source-drupal/src/gatsby-node.js index 8846da95eb2ab..0518d942895d2 100644 --- a/packages/gatsby-source-drupal/src/gatsby-node.js +++ b/packages/gatsby-source-drupal/src/gatsby-node.js @@ -261,6 +261,7 @@ exports.sourceNodes = async ( createNodeId, parentNodeId: node.id, auth, + reporter, }) } catch (err) { reporter.error(err) diff --git a/packages/gatsby-source-filesystem/CHANGELOG.md b/packages/gatsby-source-filesystem/CHANGELOG.md index 290870d97f230..44c42b4e9c5b3 100644 --- a/packages/gatsby-source-filesystem/CHANGELOG.md +++ b/packages/gatsby-source-filesystem/CHANGELOG.md @@ -3,6 +3,28 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.43](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/compare/gatsby-source-filesystem@2.0.40...gatsby-source-filesystem@2.0.43) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/commit/2594623)) + +## [2.0.42](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/compare/gatsby-source-filesystem@2.0.41...gatsby-source-filesystem@2.0.42) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/commit/2594623)) + +## [2.0.41](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/compare/gatsby-source-filesystem@2.0.40...gatsby-source-filesystem@2.0.41) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-filesystem + +## [2.0.40](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/compare/gatsby-source-filesystem@2.0.39...gatsby-source-filesystem@2.0.40) (2019-06-18) + +### Features + +- **gatsby-cli:** move progressbar into ink ([#14220](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/issues/14220)) ([967597c](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/commit/967597c)) + ## [2.0.39](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem/compare/gatsby-source-filesystem@2.0.38...gatsby-source-filesystem@2.0.39) (2019-06-10) ### Features diff --git a/packages/gatsby-source-filesystem/index.d.ts b/packages/gatsby-source-filesystem/index.d.ts index 89812d4dc49fc..d6f72e353bd0c 100644 --- a/packages/gatsby-source-filesystem/index.d.ts +++ b/packages/gatsby-source-filesystem/index.d.ts @@ -33,6 +33,7 @@ export interface CreateRemoteFileNodeArgs { httpHeaders?: object ext?: string name?: string + reporter: object } export interface FileSystemNode extends Node { diff --git a/packages/gatsby-source-filesystem/package.json b/packages/gatsby-source-filesystem/package.json index 5c9f425abbdcd..9a1b5c0f689da 100644 --- a/packages/gatsby-source-filesystem/package.json +++ b/packages/gatsby-source-filesystem/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-source-filesystem", "description": "Gatsby plugin which parses files within a directory for further parsing by other plugins", - "version": "2.0.39", + "version": "2.0.43", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -17,7 +17,7 @@ "md5-file": "^3.1.1", "mime": "^2.2.0", "pretty-bytes": "^4.0.2", - "progress": "^1.1.8", + "progress": "^2.0.3", "read-chunk": "^3.0.0", "valid-url": "^1.0.9", "xstate": "^3.1.0" diff --git a/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js b/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js index 44aa34d2cae53..c2a80324fa0dd 100644 --- a/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js +++ b/packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js @@ -19,30 +19,31 @@ jest.mock(`got`, () => { stream: jest.fn(), } }) -jest.mock( - `progress`, - () => - class ProgressBar { - static total = 0 - static tick = jest.fn(() => (ProgressBar.total -= 1)) - - total = ProgressBar.total - tick = ProgressBar.tick - } -) + +jest.mock(`gatsby-cli/lib/reporter`, () => { + return { + createProgress: jest.fn(), + } +}) jest.mock(`../create-file-node`, () => { return { createFileNode: jest.fn(), } }) +const reporter = require(`gatsby-cli/lib/reporter`) +const progressBar = { + start: jest.fn(), + total: 0, + tick: jest.fn(), +} +reporter.createProgress.mockImplementation(() => progressBar) + const got = require(`got`) -const ProgressBar = require(`progress`) const createRemoteFileNode = require(`../create-remote-file-node`) const { createFileNode } = require(`../create-file-node`) beforeEach(() => { - ProgressBar.total = 0 - ProgressBar.tick.mockClear() + progressBar.tick.mockClear() }) describe(`create-remote-file-node`, () => { @@ -52,6 +53,7 @@ describe(`create-remote-file-node`, () => { cache: {}, createNode: jest.fn(), createNodeId: jest.fn(), + reporter, } describe(`basic functionality`, () => { @@ -73,8 +75,8 @@ describe(`create-remote-file-node`, () => { expect(value).rejects.toMatch(`wrong url: `) - expect(ProgressBar.total).toBe(0) - expect(ProgressBar.tick).not.toHaveBeenCalled() + expect(progressBar.total).toBe(0) + expect(progressBar.tick).not.toHaveBeenCalled() }) }) }) @@ -141,7 +143,8 @@ describe(`create-remote-file-node`, () => { it(`invokes ProgressBar tick`, async () => { await setup() - expect(ProgressBar.tick).toHaveBeenCalledTimes(1) + expect(progressBar.total).toBe(1) + expect(progressBar.tick).toHaveBeenCalledTimes(1) }) describe(`requesting remote image`, () => { diff --git a/packages/gatsby-source-filesystem/src/__tests__/utils.js b/packages/gatsby-source-filesystem/src/__tests__/utils.js index 298a7fe8f982a..e679448b2490f 100644 --- a/packages/gatsby-source-filesystem/src/__tests__/utils.js +++ b/packages/gatsby-source-filesystem/src/__tests__/utils.js @@ -1,4 +1,13 @@ -const { getRemoteFileExtension, getRemoteFileName, slash } = require(`../utils`) +jest.mock(`gatsby-cli/lib/reporter`) +jest.mock(`progress`) +const { + getRemoteFileExtension, + getRemoteFileName, + createProgress, + slash, +} = require(`../utils`) +const reporter = require(`gatsby-cli/lib/reporter`) +const progress = require(`progress`) describe(`create remote file node`, () => { it(`can correctly retrieve file name and extensions`, () => { @@ -23,6 +32,37 @@ describe(`create remote file node`, () => { }) }) +describe(`createProgress`, () => { + beforeEach(() => { + progress.mockClear() + }) + + it(`should use createProgress from gatsby-cli when available`, () => { + createProgress(`test`, reporter) + expect(reporter.createProgress).toBeCalled() + expect(progress).not.toBeCalled() + }) + + it(`should fallback to a local implementation when createProgress does not exists on reporter`, () => { + reporter.createProgress = null + const bar = createProgress(`test`, reporter) + expect(progress).toHaveBeenCalledTimes(1) + expect(bar).toHaveProperty(`start`, expect.any(Function)) + expect(bar).toHaveProperty(`tick`, expect.any(Function)) + expect(bar).toHaveProperty(`done`, expect.any(Function)) + expect(bar).toHaveProperty(`total`) + }) + + it(`should fallback to a local implementation when no reporter is present`, () => { + const bar = createProgress(`test`) + expect(progress).toHaveBeenCalledTimes(1) + expect(bar).toHaveProperty(`start`, expect.any(Function)) + expect(bar).toHaveProperty(`tick`, expect.any(Function)) + expect(bar).toHaveProperty(`done`, expect.any(Function)) + expect(bar).toHaveProperty(`total`) + }) +}) + describe(`slash path`, () => { it(`can correctly slash path`, () => { ;[ @@ -34,6 +74,7 @@ describe(`slash path`, () => { expect(slash(path)).toBe(expectRes) }) }) + it(`does not modify extended length paths`, () => { const extended = `\\\\?\\some\\path` expect(slash(extended)).toBe(extended) diff --git a/packages/gatsby-source-filesystem/src/create-remote-file-node.js b/packages/gatsby-source-filesystem/src/create-remote-file-node.js index 8471d1dbf4e1c..9cb43ac80ab79 100644 --- a/packages/gatsby-source-filesystem/src/create-remote-file-node.js +++ b/packages/gatsby-source-filesystem/src/create-remote-file-node.js @@ -6,19 +6,15 @@ const { isWebUri } = require(`valid-url`) const Queue = require(`better-queue`) const readChunk = require(`read-chunk`) const fileType = require(`file-type`) -const ProgressBar = require(`progress`) +const { createProgress } = require(`./utils`) const { createFileNode } = require(`./create-file-node`) const { getRemoteFileExtension, getRemoteFileName } = require(`./utils`) const cacheId = url => `create-remote-file-node-${url}` -const bar = new ProgressBar( - `Downloading remote files [:bar] :current/:total :elapsed secs :percent`, - { - total: 0, - width: 30, - } -) +let bar +// Keep track of the total number of jobs we push in the queue +let totalJobs = 0 /******************** * Type Definitions * @@ -34,6 +30,11 @@ const bar = new ProgressBar( * @see gatsby/packages/gatsby/utils/cache.js */ +/** + * @typedef {Reporter} + * @see gatsby/packages/gatsby-cli/lib/reporter.js + */ + /** * @typedef {Auth} * @type {Object} @@ -51,6 +52,7 @@ const bar = new ProgressBar( * @param {GatsbyCache} options.cache * @param {Function} options.createNode * @param {Auth} [options.auth] + * @param {Reporter} [options.reporter] */ const CACHE_DIR = `.cache` @@ -84,6 +86,14 @@ const queue = new Queue(pushToQueue, { concurrent: process.env.GATSBY_CONCURRENT_DOWNLOAD || 200, }) +// when the queue is empty we stop the progressbar +queue.on(`drain`, () => { + if (bar) { + bar.done() + } + totalJobs = 0 +}) + /** * @callback {Queue~queueCallback} * @param {*} error @@ -271,9 +281,6 @@ const pushTask = task => }) }) -// Keep track of the total number of jobs we push in the queue -let totalJobs = 0 - /*************** * Entry Point * ***************/ @@ -300,6 +307,7 @@ module.exports = ({ createNodeId, ext = null, name = null, + reporter, }) => { // validation of the input // without this it's notoriously easy to pass in the wrong `createNodeId` @@ -329,6 +337,11 @@ module.exports = ({ return Promise.reject(`wrong url: ${url}`) } + if (totalJobs === 0) { + bar = createProgress(`Downloading remote files`, reporter) + bar.start() + } + totalJobs += 1 bar.total = totalJobs diff --git a/packages/gatsby-source-filesystem/src/utils.js b/packages/gatsby-source-filesystem/src/utils.js index 24e03f31e525d..b511e5289b57b 100644 --- a/packages/gatsby-source-filesystem/src/utils.js +++ b/packages/gatsby-source-filesystem/src/utils.js @@ -1,5 +1,6 @@ const path = require(`path`) const Url = require(`url`) +const ProgressBar = require(`progress`) /** * getParsedPath @@ -40,6 +41,33 @@ export function getRemoteFileName(url) { return getParsedPath(url).name } +// TODO remove in V3 +export function createProgress(message, reporter) { + if (reporter && reporter.createProgress) { + return reporter.createProgress(message) + } + + const bar = new ProgressBar( + ` [:bar] :current/:total :elapsed s :percent ${message}`, + { + total: 0, + width: 30, + clear: true, + } + ) + + return { + start() {}, + tick() { + bar.tick() + }, + done() {}, + set total(value) { + bar.total = value + }, + } +} + /** * slash * -- diff --git a/packages/gatsby-source-shopify/CHANGELOG.md b/packages/gatsby-source-shopify/CHANGELOG.md index 86ca1e365290f..fa855d65064e7 100644 --- a/packages/gatsby-source-shopify/CHANGELOG.md +++ b/packages/gatsby-source-shopify/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.41](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/compare/gatsby-source-shopify@2.0.38...gatsby-source-shopify@2.0.41) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/commit/2594623)) + +## [2.0.40](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/compare/gatsby-source-shopify@2.0.39...gatsby-source-shopify@2.0.40) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/commit/2594623)) + +## [2.0.39](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/compare/gatsby-source-shopify@2.0.38...gatsby-source-shopify@2.0.39) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-shopify + +## [2.0.38](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/compare/gatsby-source-shopify@2.0.37...gatsby-source-shopify@2.0.38) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-shopify + ## [2.0.37](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify/compare/gatsby-source-shopify@2.0.36...gatsby-source-shopify@2.0.37) (2019-06-10) **Note:** Version bump only for package gatsby-source-shopify diff --git a/packages/gatsby-source-shopify/package.json b/packages/gatsby-source-shopify/package.json index 26c2b965cb2bd..9d9891b9a7337 100644 --- a/packages/gatsby-source-shopify/package.json +++ b/packages/gatsby-source-shopify/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-source-shopify", - "version": "2.0.37", + "version": "2.0.41", "description": "Gatsby source plugin for building websites using Shopfiy as a data source.", "scripts": { "build": "babel src --out-dir .", @@ -32,7 +32,7 @@ "babel-preset-gatsby-package": "^0.1.4", "chalk": "^2.4.1", "gatsby-node-helpers": "^0.3.0", - "gatsby-source-filesystem": "^2.0.39", + "gatsby-source-filesystem": "^2.0.43", "graphql-request": "^1.6.0", "lodash": "^4.17.4", "p-iteration": "^1.1.7", diff --git a/packages/gatsby-source-shopify/src/gatsby-node.js b/packages/gatsby-source-shopify/src/gatsby-node.js index ac01f6c1edccf..556dae7482eb3 100644 --- a/packages/gatsby-source-shopify/src/gatsby-node.js +++ b/packages/gatsby-source-shopify/src/gatsby-node.js @@ -25,7 +25,7 @@ import { } from "./queries" export const sourceNodes = async ( - { actions: { createNode, touchNode }, createNodeId, store, cache }, + { actions: { createNode, touchNode }, createNodeId, store, cache, reporter }, { shopName, accessToken, verbose = true, paginationSize = 250 } ) => { const client = createClient(shopName, accessToken) @@ -38,7 +38,14 @@ export const sourceNodes = async ( console.log(formatMsg(`starting to fetch data from Shopify`)) // Arguments used for file node creation. - const imageArgs = { createNode, createNodeId, touchNode, store, cache } + const imageArgs = { + createNode, + createNodeId, + touchNode, + store, + cache, + reporter, + } // Arguments used for node creation. const args = { diff --git a/packages/gatsby-source-shopify/src/nodes.js b/packages/gatsby-source-shopify/src/nodes.js index d8e9f900839bb..5ffd77a4a132a 100644 --- a/packages/gatsby-source-shopify/src/nodes.js +++ b/packages/gatsby-source-shopify/src/nodes.js @@ -23,7 +23,7 @@ const { createNodeFactory, generateNodeId } = createNodeHelpers({ const downloadImageAndCreateFileNode = async ( { url, nodeId }, - { createNode, createNodeId, touchNode, store, cache } + { createNode, createNodeId, touchNode, store, cache, reporter } ) => { let fileNodeID @@ -43,6 +43,7 @@ const downloadImageAndCreateFileNode = async ( createNode, createNodeId, parentNodeId: nodeId, + reporter, }) if (fileNode) { diff --git a/packages/gatsby-source-wordpress/CHANGELOG.md b/packages/gatsby-source-wordpress/CHANGELOG.md index 345bd584b2ddc..57a80b133f44a 100644 --- a/packages/gatsby-source-wordpress/CHANGELOG.md +++ b/packages/gatsby-source-wordpress/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.0.69](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/compare/gatsby-source-wordpress@3.0.66...gatsby-source-wordpress@3.0.69) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/commit/2594623)) + +## [3.0.68](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/compare/gatsby-source-wordpress@3.0.67...gatsby-source-wordpress@3.0.68) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/commit/2594623)) + +## [3.0.67](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/compare/gatsby-source-wordpress@3.0.66...gatsby-source-wordpress@3.0.67) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-wordpress + +## [3.0.66](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/compare/gatsby-source-wordpress@3.0.65...gatsby-source-wordpress@3.0.66) (2019-06-18) + +**Note:** Version bump only for package gatsby-source-wordpress + ## [3.0.65](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress/compare/gatsby-source-wordpress@3.0.64...gatsby-source-wordpress@3.0.65) (2019-06-10) **Note:** Version bump only for package gatsby-source-wordpress diff --git a/packages/gatsby-source-wordpress/package.json b/packages/gatsby-source-wordpress/package.json index 6b0c140f91ada..d1611fef28d27 100644 --- a/packages/gatsby-source-wordpress/package.json +++ b/packages/gatsby-source-wordpress/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-source-wordpress", "description": "Gatsby source plugin for building websites using the Wordpress CMS as a data source.", - "version": "3.0.65", + "version": "3.0.69", "author": "Sebastien Fichot ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -14,7 +14,7 @@ "bluebird": "^3.5.0", "deep-map": "^1.5.0", "deep-map-keys": "^1.2.0", - "gatsby-source-filesystem": "^2.0.39", + "gatsby-source-filesystem": "^2.0.43", "json-stringify-safe": "^5.0.1", "lodash": "^4.17.10", "minimatch": "^3.0.4", diff --git a/packages/gatsby-source-wordpress/src/gatsby-node.js b/packages/gatsby-source-wordpress/src/gatsby-node.js index 0cbb279c0597f..da35d8b92df73 100644 --- a/packages/gatsby-source-wordpress/src/gatsby-node.js +++ b/packages/gatsby-source-wordpress/src/gatsby-node.js @@ -24,7 +24,15 @@ let _excludedRoutes let _normalizer exports.sourceNodes = async ( - { actions, getNode, store, cache, createNodeId, createContentDigest }, + { + actions, + getNode, + store, + cache, + createNodeId, + createContentDigest, + reporter, + }, { baseUrl, protocol, @@ -123,6 +131,7 @@ exports.sourceNodes = async ( touchNode, getNode, _auth, + reporter, }) // Creates links between elements and parent element. diff --git a/packages/gatsby-source-wordpress/src/normalize.js b/packages/gatsby-source-wordpress/src/normalize.js index 0de9e2c4cf1ee..40358a5bb76e4 100644 --- a/packages/gatsby-source-wordpress/src/normalize.js +++ b/packages/gatsby-source-wordpress/src/normalize.js @@ -477,6 +477,7 @@ exports.downloadMediaFiles = async ({ touchNode, getNode, _auth, + reporter, }) => Promise.all( entities.map(async e => { @@ -511,6 +512,7 @@ exports.downloadMediaFiles = async ({ createNodeId, parentNodeId: e.id, auth: _auth, + reporter, }) if (fileNode) { diff --git a/packages/gatsby-telemetry/CHANGELOG.md b/packages/gatsby-telemetry/CHANGELOG.md index f9b028c27ecd5..6557eb5b63224 100644 --- a/packages/gatsby-telemetry/CHANGELOG.md +++ b/packages/gatsby-telemetry/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.12](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-telemetry/compare/gatsby-telemetry@1.0.11...gatsby-telemetry@1.0.12) (2019-06-18) + +**Note:** Version bump only for package gatsby-telemetry + ## [1.0.11](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-telemetry/compare/gatsby-telemetry@1.0.10...gatsby-telemetry@1.0.11) (2019-05-31) ### Bug Fixes diff --git a/packages/gatsby-telemetry/package.json b/packages/gatsby-telemetry/package.json index 26bf0a799b6a1..7e6fbfe3344e0 100644 --- a/packages/gatsby-telemetry/package.json +++ b/packages/gatsby-telemetry/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-telemetry", "description": "Gatsby Telemetry", - "version": "1.0.11", + "version": "1.0.12", "author": "Jarmo Isotalo ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -16,6 +16,7 @@ "envinfo": "^5.8.1", "fs-extra": "^7.0.1", "is-docker": "1.1.0", + "lodash": "^4.17.10", "node-fetch": "2.3.0", "resolve-cwd": "^2.0.0", "source-map": "^0.5.7", diff --git a/packages/gatsby-telemetry/src/index.js b/packages/gatsby-telemetry/src/index.js index 9579767f5e075..e02070c9af1c6 100644 --- a/packages/gatsby-telemetry/src/index.js +++ b/packages/gatsby-telemetry/src/index.js @@ -16,7 +16,7 @@ const tick = _ => { } module.exports = { - trackCli: (input, tags) => instance.captureEvent(input, tags), + trackCli: (input, tags, opts) => instance.captureEvent(input, tags, opts), trackError: (input, tags) => instance.captureError(input, tags), trackBuildError: (input, tags) => instance.captureBuildError(input, tags), setDefaultTags: tags => instance.decorateAll(tags), diff --git a/packages/gatsby-telemetry/src/telemetry.js b/packages/gatsby-telemetry/src/telemetry.js index e3bc144152f8b..46e6ad9d28b19 100644 --- a/packages/gatsby-telemetry/src/telemetry.js +++ b/packages/gatsby-telemetry/src/telemetry.js @@ -8,6 +8,7 @@ const { basename, join, sep } = require(`path`) const { execSync } = require(`child_process`) const isDocker = require(`is-docker`) const showAnalyticsNotification = require(`./showAnalyticsNotification`) +const lodash = require(`lodash`) module.exports = class AnalyticsTracker { store = new EventStorage() @@ -18,16 +19,29 @@ module.exports = class AnalyticsTracker { trackingEnabled // lazy componentVersion sessionId = uuid() + constructor() { try { this.componentVersion = require(`../package.json`).version this.installedGatsbyVersion = this.getGatsbyVersion() this.gatsbyCliVersion = this.getGatsbyCliVersion() + this.defaultTags = this.getTagsFromEnv() } catch (e) { // ignore } } + getTagsFromEnv() { + if (process.env.GATSBY_TELEMETRY_TAGS) { + try { + return JSON.parse(process.env.GATSBY_TELEMETRY_TAGS) + } catch (_) { + // ignore + } + } + return {} + } + getGatsbyVersion() { const packageInfo = require(join( process.cwd(), @@ -60,7 +74,7 @@ module.exports = class AnalyticsTracker { } return undefined } - captureEvent(type = ``, tags = {}) { + captureEvent(type = ``, tags = {}, opts = { debounce: false }) { if (!this.isTrackingEnabled()) { return } @@ -71,9 +85,21 @@ module.exports = class AnalyticsTracker { } const decoration = this.metadataCache[type] - delete this.metadataCache[type] const eventType = `${baseEventType}_${type}` - this.buildAndStoreEvent(eventType, Object.assign(tags, decoration)) + + if (opts.debounce) { + const debounceTime = 5 * 1000 + const now = Date.now() + const debounceKey = JSON.stringify({ type, decoration }) + const last = this.debouncer[debounceKey] || 0 + if (now - last < debounceTime) { + return + } + this.debouncer[debounceKey] = now + } + + delete this.metadataCache[type] + this.buildAndStoreEvent(eventType, lodash.merge({}, tags, decoration)) } captureError(type, tags = {}) { @@ -89,7 +115,7 @@ module.exports = class AnalyticsTracker { tags.error = sanitizeErrors(tags.error) } - this.buildAndStoreEvent(eventType, Object.assign(tags, decoration)) + this.buildAndStoreEvent(eventType, lodash.merge({}, tags, decoration)) } captureBuildError(type, tags = {}) { @@ -105,15 +131,14 @@ module.exports = class AnalyticsTracker { tags.error = sanitizeErrors(tags.error) } - this.buildAndStoreEvent(eventType, Object.assign(tags, decoration)) + this.buildAndStoreEvent(eventType, lodash.merge({}, tags, decoration)) } buildAndStoreEvent(eventType, tags) { const event = { installedGatsbyVersion: this.installedGatsbyVersion, gatsbyCliVersion: this.gatsbyCliVersion, - ...this.defaultTags, - ...tags, // The schema must include these + ...lodash.merge({}, this.defaultTags, tags), // The schema must include these eventType, sessionId: this.sessionId, time: new Date(), diff --git a/packages/gatsby-transformer-react-docgen/CHANGELOG.md b/packages/gatsby-transformer-react-docgen/CHANGELOG.md index 11cf325809cac..c4a9a570a6322 100644 --- a/packages/gatsby-transformer-react-docgen/CHANGELOG.md +++ b/packages/gatsby-transformer-react-docgen/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.0.4](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/compare/gatsby-transformer-react-docgen@4.0.2...gatsby-transformer-react-docgen@4.0.4) (2019-06-19) + +### Bug Fixes + +- **gatsby-transformer-react-docgen:** always create description nodes ([#14876](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/issues/14876)) ([48a9e10](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/commit/48a9e10)) + +## [4.0.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/compare/gatsby-transformer-react-docgen@4.0.2...gatsby-transformer-react-docgen@4.0.3) (2019-06-19) + +### Bug Fixes + +- **gatsby-transformer-react-docgen:** always create description nodes ([#14876](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/issues/14876)) ([48a9e10](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/commit/48a9e10)) + ## [4.0.2](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-react-docgen/compare/gatsby-transformer-react-docgen@4.0.1...gatsby-transformer-react-docgen@4.0.2) (2019-05-30) **Note:** Version bump only for package gatsby-transformer-react-docgen diff --git a/packages/gatsby-transformer-react-docgen/package.json b/packages/gatsby-transformer-react-docgen/package.json index 509d0a841317f..6db28ae5742a1 100644 --- a/packages/gatsby-transformer-react-docgen/package.json +++ b/packages/gatsby-transformer-react-docgen/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-transformer-react-docgen", "description": "Expose React component metadata and prop information as GraphQL types", - "version": "4.0.2", + "version": "4.0.4", "author": "Jason Quense ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js b/packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js index b4f0ce780b623..b8ece469ba5a5 100644 --- a/packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js +++ b/packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js @@ -15,8 +15,13 @@ const readFile = file => describe(`transformer-react-doc-gen: onCreateNode`, () => { let loadNodeContent, actions, node, createdNodes, updatedNodes const createNodeId = jest.fn() + let i + + beforeAll(() => { + i = 0 + createNodeId.mockImplementation(() => i++) + }) - createNodeId.mockReturnValue(`uuid-from-gatsby`) let run = (node, opts = {}) => { const createContentDigest = jest.fn().mockReturnValue(`contentDigest`) return onCreateNode( @@ -124,7 +129,19 @@ describe(`transformer-react-doc-gen: onCreateNode`, () => { await run(node) - expect(createdNodes[0].displayName).toEqual(`Unnamed`) + expect( + groupBy(createdNodes, `internal.type`).ComponentMetadata[0].displayName + ).toEqual(`Unnamed`) + }) + + it(`should create a description node when there is no description`, async () => { + node.__fixture = `unnamed.js` + + await run(node) + + expect( + groupBy(createdNodes, `internal.type`).ComponentDescription + ).toHaveLength(1) }) it(`should extract all propTypes`, async () => { @@ -138,13 +155,17 @@ describe(`transformer-react-doc-gen: onCreateNode`, () => { await run(node) let types = groupBy(createdNodes, `internal.type`) - expect(types.ComponentProp[0].description).toEqual( - `An object hash of field (fix this @mention?) errors for the form.` - ) + + const id = types.ComponentProp[0].id + expect(types.ComponentProp[0].doclets).toEqual([ { tag: `type`, value: `{Foo}` }, { tag: `default`, value: `blue` }, ]) + + expect(types.ComponentDescription.find(d => d.parent === id).text).toEqual( + `An object hash of field (fix this @mention?) errors for the form.` + ) }) it(`should extract create description nodes with markdown types`, async () => { diff --git a/packages/gatsby-transformer-react-docgen/src/on-node-create.js b/packages/gatsby-transformer-react-docgen/src/on-node-create.js index 8bef37520af32..5c1ed00f5775e 100644 --- a/packages/gatsby-transformer-react-docgen/src/on-node-create.js +++ b/packages/gatsby-transformer-react-docgen/src/on-node-create.js @@ -23,9 +23,10 @@ function createDescriptionNode( createNodeId, createContentDigest ) { - if (!entry.description) return node const { createNode } = actions + delete node.description + const descriptionNode = { id: createNodeId(descId(node.id)), parent: node.id, diff --git a/packages/gatsby-transformer-screenshot/CHANGELOG.md b/packages/gatsby-transformer-screenshot/CHANGELOG.md index ea8f9748e2afa..23fd546a53c58 100644 --- a/packages/gatsby-transformer-screenshot/CHANGELOG.md +++ b/packages/gatsby-transformer-screenshot/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.16](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/compare/gatsby-transformer-screenshot@2.0.14...gatsby-transformer-screenshot@2.0.16) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/commit/2594623)) + +## [2.0.15](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/compare/gatsby-transformer-screenshot@2.0.14...gatsby-transformer-screenshot@2.0.15) (2019-06-19) + +### Bug Fixes + +- fix gatsby-cli dep in source-filesystem & plugin-sharp ([#14881](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/issues/14881)) ([2594623](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/commit/2594623)) + ## [2.0.14](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot/compare/gatsby-transformer-screenshot@2.0.13...gatsby-transformer-screenshot@2.0.14) (2019-05-31) **Note:** Version bump only for package gatsby-transformer-screenshot diff --git a/packages/gatsby-transformer-screenshot/package.json b/packages/gatsby-transformer-screenshot/package.json index ec22081d0fb11..9450d9e35da60 100644 --- a/packages/gatsby-transformer-screenshot/package.json +++ b/packages/gatsby-transformer-screenshot/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-transformer-screenshot", "description": "Gatsby transformer plugin that uses AWS Lambda to take screenshots of websites", - "version": "2.0.14", + "version": "2.0.16", "author": "David Beckley ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-transformer-screenshot/src/gatsby-node.js b/packages/gatsby-transformer-screenshot/src/gatsby-node.js index 7f667137a8ed6..e4ffa79535fd2 100644 --- a/packages/gatsby-transformer-screenshot/src/gatsby-node.js +++ b/packages/gatsby-transformer-screenshot/src/gatsby-node.js @@ -16,7 +16,15 @@ const screenshotQueue = new Queue( ) exports.onPreBootstrap = ( - { store, cache, actions, createNodeId, getNodesByType, createContentDigest }, + { + store, + cache, + actions, + createNodeId, + getNodesByType, + createContentDigest, + reporter, + }, pluginOptions ) => { const { createNode, touchNode } = actions @@ -46,6 +54,7 @@ exports.onPreBootstrap = ( createNodeId, parentNodeId: n.id, createContentDigest, + reporter, }) } else { // Screenshot hasn't yet expired, touch the image node @@ -119,6 +128,7 @@ const createScreenshotNode = async ({ createNodeId, parentNodeId, createContentDigest, + reporter, }) => { try { let fileNode, expires @@ -139,6 +149,7 @@ const createScreenshotNode = async ({ createNode, createNodeId, parentNodeId, + reporter, }) expires = screenshotResponse.data.expires diff --git a/packages/gatsby-transformer-sqip/CHANGELOG.md b/packages/gatsby-transformer-sqip/CHANGELOG.md index 41b589fb5aa46..d76f0e6754da7 100644 --- a/packages/gatsby-transformer-sqip/CHANGELOG.md +++ b/packages/gatsby-transformer-sqip/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.46](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip/compare/gatsby-transformer-sqip@2.0.43...gatsby-transformer-sqip@2.0.46) (2019-06-19) + +**Note:** Version bump only for package gatsby-transformer-sqip + +## [2.0.45](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip/compare/gatsby-transformer-sqip@2.0.44...gatsby-transformer-sqip@2.0.45) (2019-06-19) + +**Note:** Version bump only for package gatsby-transformer-sqip + +## [2.0.44](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip/compare/gatsby-transformer-sqip@2.0.43...gatsby-transformer-sqip@2.0.44) (2019-06-18) + +**Note:** Version bump only for package gatsby-transformer-sqip + +## [2.0.43](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip/compare/gatsby-transformer-sqip@2.0.42...gatsby-transformer-sqip@2.0.43) (2019-06-18) + +**Note:** Version bump only for package gatsby-transformer-sqip + ## [2.0.42](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip/compare/gatsby-transformer-sqip@2.0.40...gatsby-transformer-sqip@2.0.42) (2019-06-12) **Note:** Version bump only for package gatsby-transformer-sqip diff --git a/packages/gatsby-transformer-sqip/package.json b/packages/gatsby-transformer-sqip/package.json index 2db21a5941b70..7540ac6528ab4 100644 --- a/packages/gatsby-transformer-sqip/package.json +++ b/packages/gatsby-transformer-sqip/package.json @@ -1,15 +1,17 @@ { "name": "gatsby-transformer-sqip", "description": "Generates geometric primitive version of images", - "version": "2.0.42", + "version": "2.0.46", "author": "Benedikt Rötsch ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" }, "dependencies": { "@babel/runtime": "^7.0.0", + "bluebird": "^3.5.4", "fs-extra": "^4.0.2", - "gatsby-plugin-sharp": "^2.1.5", + "gatsby-plugin-sharp": "^2.1.9", + "md5-file": "^4.0.0", "mini-svg-data-uri": "^1.0.0", "p-queue": "^2.3.0", "sqip": "^0.3.3" diff --git a/packages/gatsby-transformer-sqip/src/extend-node-type.js b/packages/gatsby-transformer-sqip/src/extend-node-type.js index 5ed8261a51c2c..de92da938717c 100644 --- a/packages/gatsby-transformer-sqip/src/extend-node-type.js +++ b/packages/gatsby-transformer-sqip/src/extend-node-type.js @@ -1,4 +1,5 @@ const { resolve } = require(`path`) +const md5File = require(`bluebird`).promisify(require(`md5-file`)) const { DuotoneGradientType, @@ -43,7 +44,9 @@ module.exports = async args => { async function sqipSharp({ type, cache, getNodeAndSavePathDependency, store }) { const program = store.getState().program - const cacheDir = resolve(`${program.directory}/.cache/sqip/`) + const cacheDir = resolve( + `${program.directory}/node_modules/.cache/gatsby-transformer-sqip/` + ) await ensureDir(cacheDir) @@ -107,6 +110,7 @@ async function sqipSharp({ type, cache, getNodeAndSavePathDependency, store }) { } const file = getNodeAndSavePathDependency(image.parent, context.path) + const { contentDigest } = image.internal const job = await queueImageResizing({ file, args: sharpArgs }) @@ -120,6 +124,7 @@ async function sqipSharp({ type, cache, getNodeAndSavePathDependency, store }) { return generateSqip({ cache, cacheDir, + contentDigest, absolutePath, numberOfPrimitives, blur, @@ -219,9 +224,12 @@ async function sqipContentful({ type, cache, store }) { const absolutePath = await cacheImage(store, asset, options) + const contentDigest = await md5File(absolutePath) + return generateSqip({ cache, cacheDir, + contentDigest, absolutePath, numberOfPrimitives, blur, diff --git a/packages/gatsby-transformer-sqip/src/generate-sqip.js b/packages/gatsby-transformer-sqip/src/generate-sqip.js index 2149cd39ccc47..a2f69d68a8a82 100644 --- a/packages/gatsby-transformer-sqip/src/generate-sqip.js +++ b/packages/gatsby-transformer-sqip/src/generate-sqip.js @@ -18,6 +18,7 @@ module.exports = async function generateSqip(options) { blur, mode, cacheDir, + contentDigest, } = options debug({ options }) @@ -35,17 +36,59 @@ module.exports = async function generateSqip(options) { .update(JSON.stringify(sqipOptions)) .digest(`hex`) - const cacheKey = `sqip-${name}-${optionsHash}` - const cachePath = resolve(cacheDir, `${name}-${optionsHash}.svg`) - let primitiveData = await cache.get(cacheKey) + const cacheKey = `${contentDigest}-${optionsHash}` + const cachePath = resolve(cacheDir, `${contentDigest}-${optionsHash}.svg`) - debug({ primitiveData }) + debug( + `Request preview generation for ${name} (${contentDigest}-${optionsHash})` + ) - if (!primitiveData) { + return queue.add(async () => { + let primitiveData = await cache.get(cacheKey) let svg - if (await exists(cachePath)) { - const svgBuffer = await readFile(cachePath) - svg = svgBuffer.toString() + + debug( + `Executing preview generation request for ${name} (${contentDigest}-${optionsHash})` + ) + + if (!primitiveData) { + if (await exists(cachePath)) { + debug( + `Primitive result file already exists for ${name} (${contentDigest}-${optionsHash})` + ) + const svgBuffer = await readFile(cachePath) + svg = svgBuffer.toString() + } else { + debug( + `Generate primitive result file of ${name} (${contentDigest}-${optionsHash})` + ) + + const result = await new Promise((resolve, reject) => { + try { + const result = sqip({ + filename: absolutePath, + ...sqipOptions, + }) + resolve(result) + } catch (error) { + reject(error) + } + }) + + svg = result.final_svg + + await writeFile(cachePath, svg) + debug( + `Wrote primitive result file to disk for ${name} (${contentDigest}-${optionsHash})` + ) + } + + primitiveData = { + svg, + dataURI: svgToMiniDataURI(svg), + } + + await cache.set(cacheKey, primitiveData) } else { debug(`generate sqip for ${name}`) const result = await queue.add( @@ -74,7 +117,7 @@ module.exports = async function generateSqip(options) { } await cache.set(cacheKey, primitiveData) - } - return primitiveData + return primitiveData + }) } diff --git a/packages/gatsby/CHANGELOG.md b/packages/gatsby/CHANGELOG.md index 01e465a1031f5..83d649dd81e86 100644 --- a/packages/gatsby/CHANGELOG.md +++ b/packages/gatsby/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.9.11](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.10...gatsby@2.9.11) (2019-06-19) + +### Bug Fixes + +- **gatsby:** Normalize paths for run queries before caching ([#14910](https://github.com/gatsbyjs/gatsby/issues/14910)) ([f03bf5c](https://github.com/gatsbyjs/gatsby/commit/f03bf5c)), closes [#14903](https://github.com/gatsbyjs/gatsby/issues/14903) + +## [2.9.10](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.9...gatsby@2.9.10) (2019-06-19) + +**Note:** Version bump only for package gatsby + +## [2.9.9](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.6...gatsby@2.9.9) (2019-06-19) + +**Note:** Version bump only for package gatsby + +## [2.9.8](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.7...gatsby@2.9.8) (2019-06-19) + +**Note:** Version bump only for package gatsby + +## [2.9.7](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.6...gatsby@2.9.7) (2019-06-18) + +**Note:** Version bump only for package gatsby + +## [2.9.6](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.5...gatsby@2.9.6) (2019-06-18) + +**Note:** Version bump only for package gatsby + +## [2.9.5](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.4...gatsby@2.9.5) (2019-06-18) + +**Note:** Version bump only for package gatsby + ## [2.9.4](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.9.2...gatsby@2.9.4) (2019-06-14) ### Bug Fixes diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 9d5cc54754050..db75f45799c62 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -1,7 +1,7 @@ { "name": "gatsby", "description": "Blazing fast modern site generator for React", - "version": "2.9.4", + "version": "2.9.11", "author": "Kyle Mathews ", "bin": { "gatsby": "./dist/bin/gatsby.js" @@ -66,12 +66,12 @@ "flat": "^4.0.0", "fs-exists-cached": "1.0.0", "fs-extra": "^5.0.0", - "gatsby-cli": "^2.6.7", + "gatsby-cli": "^2.6.13", "gatsby-graphiql-explorer": "^0.1.2", "gatsby-link": "^2.1.1", "gatsby-plugin-page-creator": "^2.0.13", "gatsby-react-router-scroll": "^2.0.7", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "glob": "^7.1.1", "got": "8.0.0", "graphql": "^14.1.1", diff --git a/packages/gatsby/src/commands/develop.js b/packages/gatsby/src/commands/develop.js index e887c26bff2c1..ee69609c95b14 100644 --- a/packages/gatsby/src/commands/develop.js +++ b/packages/gatsby/src/commands/develop.js @@ -428,7 +428,13 @@ module.exports = async (program: any) => { } function printInstructions(appName, urls, useYarn) { - console.log() + report._setStage({ + stage: `DevelopBootstrapFinished`, + context: { + url: urls.localUrlForBrowser, + appName, + }, + }) console.log(`You can now view ${chalk.bold(appName)} in the browser.`) console.log() diff --git a/packages/gatsby/src/utils/normalize-page-path.js b/packages/gatsby/src/utils/normalize-page-path.js new file mode 100644 index 0000000000000..b393690c738a6 --- /dev/null +++ b/packages/gatsby/src/utils/normalize-page-path.js @@ -0,0 +1,14 @@ +// This is a duplicate of the runtime util +// file cache-dir/normalize-page-path.js +module.exports = path => { + if (path === undefined) { + return path + } + if (path === `/`) { + return `/` + } + if (path.charAt(path.length - 1) === `/`) { + return path.slice(0, -1) + } + return path +} diff --git a/packages/gatsby/src/utils/websocket-manager.js b/packages/gatsby/src/utils/websocket-manager.js index 649eff73f5650..6ca2f55c6d52d 100644 --- a/packages/gatsby/src/utils/websocket-manager.js +++ b/packages/gatsby/src/utils/websocket-manager.js @@ -4,6 +4,10 @@ const path = require(`path`) const { store } = require(`../redux`) const fs = require(`fs`) const pageDataUtil = require(`../utils/page-data`) +const normalizePagePath = require(`../utils/normalize-page-path`) +const telemetry = require(`gatsby-telemetry`) +const url = require(`url`) +const { createHash } = require(`crypto`) type QueryResult = { id: string, @@ -37,6 +41,20 @@ const getCachedPageData = async ( } } +const hashPaths = paths => { + if (!paths) { + return undefined + } + return paths.map(path => { + if (!path) { + return undefined + } + return createHash(`sha256`) + .update(path) + .digest(`hex`) + }) +} + /** * Get cached StaticQuery results for components that Gatsby didn't run query yet. * @param {QueryResultsMap} resultsMap Already stored results for queries that don't need to be read from files. @@ -99,6 +117,7 @@ class WebsocketManager { this.emitPageData = this.emitPageData.bind(this) this.emitStaticQueryData = this.emitStaticQueryData.bind(this) this.emitError = this.emitError.bind(this) + this.connectedClients = 0 } init({ server, directory }) { @@ -117,6 +136,20 @@ class WebsocketManager { this.websocket.on(`connection`, s => { let activePath = null + if ( + s && + s.handshake && + s.handshake.headers && + s.handshake.headers.referer + ) { + const path = url.parse(s.handshake.headers.referer).path + if (path) { + activePath = path + this.activePaths.add(path) + } + } + + this.connectedClients += 1 // Send already existing static query results this.staticQueryResults.forEach(result => { this.websocket.send({ @@ -160,6 +193,17 @@ class WebsocketManager { why: `getDataForPath`, payload: this.pageResults.get(path), }) + + telemetry.trackCli( + `WEBSOCKET_PAGE_DATA_UPDATE`, + { + siteMeasurements: { + clientsCount: this.connectedClients, + paths: hashPaths(Array.from(this.activePaths)), + }, + }, + { debounce: true } + ) } s.on(`getDataForPath`, getDataForPath) @@ -172,6 +216,7 @@ class WebsocketManager { s.on(`disconnect`, s => { leaveRoom(activePath) + this.connectedClients -= 1 }) s.on(`unregisterPath`, path => { @@ -190,13 +235,34 @@ class WebsocketManager { this.staticQueryResults.set(data.id, data) if (this.isInitialised) { this.websocket.send({ type: `staticQueryResult`, payload: data }) + telemetry.trackCli( + `WEBSOCKET_EMIT_STATIC_PAGE_DATA_UPDATE`, + { + siteMeasurements: { + clientsCount: this.connectedClients, + paths: hashPaths(Array.from(this.activePaths)), + }, + }, + { debounce: true } + ) } } emitPageData(data: QueryResult) { + data.id = normalizePagePath(data.id) this.pageResults.set(data.id, data) if (this.isInitialised) { this.websocket.send({ type: `pageQueryResult`, payload: data }) + telemetry.trackCli( + `WEBSOCKET_EMIT_PAGE_DATA_UPDATE`, + { + siteMeasurements: { + clientsCount: this.connectedClients, + paths: hashPaths(Array.from(this.activePaths)), + }, + }, + { debounce: true } + ) } } emitError(id: string, message?: string) { diff --git a/starters/blog/package-lock.json b/starters/blog/package-lock.json index 18f419bf8b998..bbfe136c63736 100644 --- a/starters/blog/package-lock.json +++ b/starters/blog/package-lock.json @@ -797,12 +797,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -1595,12 +1595,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -2550,26 +2550,31 @@ "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" }, "cacache": { - "version": "11.3.2", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz", - "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==", + "version": "11.3.3", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.3.tgz", + "integrity": "sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==", "requires": { - "bluebird": "^3.5.3", + "bluebird": "^3.5.5", "chownr": "^1.1.1", "figgy-pudding": "^3.5.1", - "glob": "^7.1.3", + "glob": "^7.1.4", "graceful-fs": "^4.1.15", "lru-cache": "^5.1.1", "mississippi": "^3.0.0", "mkdirp": "^0.5.1", "move-concurrently": "^1.0.1", "promise-inflight": "^1.0.1", - "rimraf": "^2.6.2", + "rimraf": "^2.6.3", "ssri": "^6.0.1", "unique-filename": "^1.1.1", "y18n": "^4.0.0" }, "dependencies": { + "bluebird": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz", + "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==" + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -2720,21 +2725,21 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } } }, "caniuse-lite": { - "version": "1.0.30000974", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz", - "integrity": "sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==" + "version": "1.0.30000975", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000975.tgz", + "integrity": "sha512-ZsXA9YWQX6ATu5MNg+Vx/cMQ+hM6vBBSqDeJs8ruk9z0ky4yIHML15MoxcFt088ST2uyjgqyUGRJButkptWf0w==" }, "capture-stack-trace": { "version": "1.0.1", @@ -3131,9 +3136,9 @@ "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" }, "component-emitter": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", - "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" }, "component-inherit": { "version": "0.0.3", @@ -3355,22 +3360,22 @@ "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==" }, "core-js-compat": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.3.tgz", - "integrity": "sha512-EP018pVhgwsKHz3YoN1hTq49aRe+h017Kjz0NQz3nXV0cCRMvH3fLQl+vEPGr4r4J5sk4sU3tUC7U1aqTCeJeA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.4.tgz", + "integrity": "sha512-Z5zbO9f1d0YrJdoaQhphVAnKPimX92D6z8lCGphH89MNRxlL1prI9ExJPqVwP0/kgkQCv8c4GJGT8X16yUncOg==", "requires": { - "browserslist": "^4.6.0", - "core-js-pure": "3.1.3", - "semver": "^6.1.0" + "browserslist": "^4.6.2", + "core-js-pure": "3.1.4", + "semver": "^6.1.1" }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -3382,9 +3387,9 @@ } }, "core-js-pure": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.1.3.tgz", - "integrity": "sha512-k3JWTrcQBKqjkjI0bkfXS0lbpWPxYuHWfMMjC1VDmzU4Q58IwSbuXSo99YO/hUHlw/EB4AlfA2PVxOGkrIq6dA==" + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.1.4.tgz", + "integrity": "sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==" }, "core-util-is": { "version": "1.0.2", @@ -4464,9 +4469,9 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { - "version": "1.3.159", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.159.tgz", - "integrity": "sha512-bhiEr8/A97GUBcUzNb9MFNhzQOjakbKmEKBEAa6UMY45zG2e8PM63LOgAPXEJE9bQiaQH6nOdYiYf8X821tZjQ==" + "version": "1.3.165", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.165.tgz", + "integrity": "sha512-iIS8axR524EAnvUtWUNnREnYjQrS0zUvutIKYgTVuN3MzcjrV31EuJYKw7DGOtFO9DQw+JiXeaVDPQWMskG1wQ==" }, "elliptic": { "version": "6.4.1", @@ -4564,6 +4569,11 @@ "yeast": "0.1.2" }, "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", @@ -5460,9 +5470,9 @@ } }, "file-type": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.9.0.tgz", - "integrity": "sha512-9C5qtGR/fNibHC5gzuMmmgnjH3QDDLKMa8lYe9CiZVmAnI4aUaoMh40QyUPzzs0RYo837SOBKh7TYwle4G8E4w==" + "version": "10.11.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz", + "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==" }, "filename-reserved-regex": { "version": "2.0.0", @@ -6211,9 +6221,9 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, "gatsby": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.9.4.tgz", - "integrity": "sha512-01hd+GVgfUPctdzmOdypFG35Z80HDHl1uSOdtzK8OZ9Yohj/+n8XMxTKfiMhqALygQm0CiF0Mzb/YvLmnf6L1Q==", + "version": "2.9.9", + "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.9.9.tgz", + "integrity": "sha512-jAAMCn7NNeymwTQ2+EcpWQmwbOEjd6RiBAxc7aBvfSg3PDJUG50bCeWC9TaYC81hiHq3XSHgJLDB+02BSJmjkw==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/core": "^7.0.0", @@ -6271,12 +6281,12 @@ "flat": "^4.0.0", "fs-exists-cached": "1.0.0", "fs-extra": "^5.0.0", - "gatsby-cli": "^2.6.7", + "gatsby-cli": "^2.6.12", "gatsby-graphiql-explorer": "^0.1.2", "gatsby-link": "^2.1.1", "gatsby-plugin-page-creator": "^2.0.13", "gatsby-react-router-scroll": "^2.0.7", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "glob": "^7.1.1", "got": "8.0.0", "graphql": "^14.1.1", @@ -6412,9 +6422,9 @@ } }, "gatsby-cli": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.6.7.tgz", - "integrity": "sha512-ngGOkozh0Wp2R2kblAUnMfMdPT84MoKMmuROqJVw+JUweB9zTrrGQsrH3ii26nw+7DDsrg6+AAkbELjp5SlYNA==", + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.6.12.tgz", + "integrity": "sha512-Ed1oM9ahiI32iO47QgcIw1hBLeroqVFURjrNCHebOWEVJcTS1JaslcACJWN2Hq5OUyHC42hN7bDKU6IkmGe/Uw==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/runtime": "^7.0.0", @@ -6430,7 +6440,7 @@ "execa": "^0.8.0", "fs-exists-cached": "^1.0.0", "fs-extra": "^4.0.1", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "hosted-git-info": "^2.6.0", "ink": "^2.0.5", "ink-spinner": "^3.0.1", @@ -6441,6 +6451,7 @@ "object.entries": "^1.1.0", "opentracing": "^0.14.3", "pretty-error": "^2.1.1", + "progress": "^2.0.3", "prompts": "^2.1.0", "react": "^16.8.4", "resolve-cwd": "^2.0.0", @@ -6736,9 +6747,9 @@ } }, "gatsby-plugin-sharp": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.1.5.tgz", - "integrity": "sha512-qHW0HJ3PK/HrTxg9wEqh8oHPv4R2SThn9z2n5m7pkrHOK9ZLHTkUaXtSNqcKzTap9cd7K4sjgw3EXaM5G7Jc8A==", + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.1.9.tgz", + "integrity": "sha512-iRZujOoPQOc2XfgCz9/OG6B2AmffwRtPib954Am6DjX3D3gqJGa4jbzE7gLRng1mrJGv+xBe5wPJGY7U1aVeBQ==", "requires": { "@babel/runtime": "^7.0.0", "async": "^2.1.2", @@ -6752,7 +6763,7 @@ "mini-svg-data-uri": "^1.0.0", "potrace": "^2.1.1", "probe-image-size": "^4.0.0", - "progress": "^1.1.8", + "progress": "^2.0.3", "semver": "^5.6.0", "sharp": "^0.22.1", "svgo": "^1.2.0" @@ -6775,11 +6786,6 @@ "jsonfile": "^4.0.0", "universalify": "^0.1.0" } - }, - "progress": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz", - "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=" } } }, @@ -6896,9 +6902,9 @@ } }, "gatsby-source-filesystem": { - "version": "2.0.39", - "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.0.39.tgz", - "integrity": "sha512-RL5J1WTrb6snyTeCmylt8/6cmhJxftjZGFLFHByEERyVEgMMiNDRHWqmrW/oWwkQ6Gvxi4GNnYUPsps+9Azv8Q==", + "version": "2.0.43", + "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.0.43.tgz", + "integrity": "sha512-z4HMnTcigoXtd3rRa/yQScgFJU5w13c9T5Yw/k58M+ysrnpFEG34VOxwot22mEuMXMM/Fdg5PwH4a54F3OQTcQ==", "requires": { "@babel/runtime": "^7.0.0", "better-queue": "^3.8.7", @@ -6910,7 +6916,7 @@ "md5-file": "^3.1.1", "mime": "^2.2.0", "pretty-bytes": "^4.0.2", - "progress": "^1.1.8", + "progress": "^2.0.3", "read-chunk": "^3.0.0", "valid-url": "^1.0.9", "xstate": "^3.1.0" @@ -6942,11 +6948,6 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==" }, - "progress": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz", - "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=" - }, "read-chunk": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz", @@ -6964,9 +6965,9 @@ } }, "gatsby-telemetry": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/gatsby-telemetry/-/gatsby-telemetry-1.0.11.tgz", - "integrity": "sha512-pEGt8lpjB52KF2ekdL7TvARTpE+iHzx31f8ILS7r7ZqgCp2v+MhaLGIDh4SiCM801mFYGgsp87mx4q8DCqPeDQ==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/gatsby-telemetry/-/gatsby-telemetry-1.0.12.tgz", + "integrity": "sha512-TDzcwhbwnHU0PqiCP751qBLyFfSbRbduCKCCsdbBOnsVYMO3L/YUQ4RWe/FUh3xNXmTLPCfoCejtmnZn7d7MnA==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/runtime": "^7.0.0", @@ -6977,6 +6978,7 @@ "envinfo": "^5.8.1", "fs-extra": "^7.0.1", "is-docker": "1.1.0", + "lodash": "^4.17.10", "node-fetch": "2.3.0", "resolve-cwd": "^2.0.0", "source-map": "^0.5.7", @@ -8502,9 +8504,9 @@ "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" }, "is-glob": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz", - "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", "requires": { "is-extglob": "^2.1.1" } @@ -11028,12 +11030,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -11167,12 +11169,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -11222,12 +11224,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -11430,12 +11432,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -11490,12 +11492,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -12094,9 +12096,9 @@ } }, "react-hot-loader": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.11.0.tgz", - "integrity": "sha512-EXwYmn+7bU9GgidYjx36IfX1t9/mZlKN8TuGXW6C4J2fEL6cKh4QUtpY/toZe9QBoKMot7UfksFKzl7Wq2qJ+w==", + "version": "4.11.1", + "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.11.1.tgz", + "integrity": "sha512-HAC0UedYzM3mD+ZaQHesntFO0yi2ftOV4ZMMRTj43E4GvW5sQqYTPvur+6J7EaH3MDr/RqjDKXyCqKepV8+y7w==", "requires": { "fast-levenshtein": "^2.0.6", "global": "^4.3.0", @@ -13303,6 +13305,11 @@ "to-array": "0.1.4" }, "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", @@ -13328,6 +13335,11 @@ "isarray": "2.0.1" }, "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", @@ -13958,12 +13970,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -14036,9 +14048,9 @@ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" }, "table": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/table/-/table-5.4.0.tgz", - "integrity": "sha512-nHFDrxmbrkU7JAFKqKbDJXfzrX2UBsWmrieXFTGxiI5e4ncg3VqsZeI4EzNmX0ncp4XNGVeoxIWJXfCIXwrsvw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.1.tgz", + "integrity": "sha512-E6CK1/pZe2N75rGZQotFOdmzWQ1AILtgYbMAbAjvms0S1l5IDB47zG3nCnFGB/w+7nB3vKofbLXCH7HPBo864w==", "requires": { "ajv": "^6.9.1", "lodash": "^4.17.11", @@ -15157,9 +15169,9 @@ } }, "webpack-dev-server": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.7.1.tgz", - "integrity": "sha512-GSBjjDMQ+uJI/Rcw/NfXDq5QpfE4HviafCy2SdbJ8Q22MwsnyoHd5TbWRfxgkbklsMx+ZNgWIKK+cB28ynjiDQ==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.7.2.tgz", + "integrity": "sha512-mjWtrKJW2T9SsjJ4/dxDC2fkFVUw8jlpemDERqV0ZJIkjjjamR2AbQlr3oz+j4JLhYCHImHnXZK5H06P2wvUew==", "requires": { "ansi-html": "0.0.7", "bonjour": "^3.5.0", @@ -15175,7 +15187,7 @@ "internal-ip": "^4.3.0", "ip": "^1.1.5", "killable": "^1.0.1", - "loglevel": "^1.6.2", + "loglevel": "^1.6.3", "opn": "^5.5.0", "p-retry": "^3.0.1", "portfinder": "^1.0.20", @@ -15918,9 +15930,9 @@ "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" }, "xstate": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.6.1.tgz", - "integrity": "sha512-f4HqFkGYVN03kDgxIM3Vp4zC9yDvunN6FHhEjbusEuAqwMFkyWg0VOUKdj/K7+W5fDcDHox7OgPYYfGIGWyJ8Q==" + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.6.2.tgz", + "integrity": "sha512-3lRM7w72lnijswRniT49v/Y0hiuhAQ5f1L7d1fhLA+jcKreebGM+7/NgFMSuzjsC1q7sC9cQ9QqTUfVzgDRFmA==" }, "xtend": { "version": "4.0.1", diff --git a/starters/blog/package.json b/starters/blog/package.json index 05e10478789f4..2c68925614154 100644 --- a/starters/blog/package.json +++ b/starters/blog/package.json @@ -8,21 +8,21 @@ "url": "https://github.com/gatsbyjs/gatsby/issues" }, "dependencies": { - "gatsby": "^2.9.4", + "gatsby": "^2.9.9", "gatsby-image": "^2.1.4", "gatsby-plugin-feed": "^2.2.3", "gatsby-plugin-google-analytics": "^2.0.21", "gatsby-plugin-manifest": "^2.1.1", "gatsby-plugin-offline": "^2.1.3", "gatsby-plugin-react-helmet": "^3.0.12", - "gatsby-plugin-sharp": "^2.1.5", + "gatsby-plugin-sharp": "^2.1.9", "gatsby-plugin-typography": "^2.2.13", "gatsby-remark-copy-linked-files": "^2.0.13", "gatsby-remark-images": "^3.0.16", "gatsby-remark-prismjs": "^3.2.11", "gatsby-remark-responsive-iframe": "^2.1.1", "gatsby-remark-smartypants": "^2.0.9", - "gatsby-source-filesystem": "^2.0.39", + "gatsby-source-filesystem": "^2.0.43", "gatsby-transformer-remark": "^2.4.0", "gatsby-transformer-sharp": "^2.1.21", "prismjs": "^1.16.0", diff --git a/starters/blog/src/components/bio.js b/starters/blog/src/components/bio.js index e3199b531a1dd..64e41093be7ed 100644 --- a/starters/blog/src/components/bio.js +++ b/starters/blog/src/components/bio.js @@ -1,75 +1,68 @@ /** * Bio component that queries for data - * with Gatsby's StaticQuery component + * with Gatsby's useStaticQuery component * - * See: https://www.gatsbyjs.org/docs/static-query/ + * See: https://www.gatsbyjs.org/docs/use-static-query/ */ import React from "react" -import { StaticQuery, graphql } from "gatsby" +import { useStaticQuery, graphql } from "gatsby" import Image from "gatsby-image" import { rhythm } from "../utils/typography" -function Bio() { - return ( - { - const { author, social } = data.site.siteMetadata - return ( -
- {author} -

- Written by {author} who lives and works in San - Francisco building useful things. - {` `} - - You should follow him on Twitter - -

-
- ) - }} - /> - ) -} - -const bioQuery = graphql` - query BioQuery { - avatar: file(absolutePath: { regex: "/profile-pic.jpg/" }) { - childImageSharp { - fixed(width: 50, height: 50) { - ...GatsbyImageSharpFixed +const Bio = () => { + const data = useStaticQuery(graphql` + query BioQuery { + avatar: file(absolutePath: { regex: "/profile-pic.jpg/" }) { + childImageSharp { + fixed(width: 50, height: 50) { + ...GatsbyImageSharpFixed + } } } - } - site { - siteMetadata { - author - social { - twitter + site { + siteMetadata { + author + social { + twitter + } } } } - } -` + `) + + const { author, social } = data.site.siteMetadata + return ( +
+ {author} +

+ Written by {author} who lives and works in San + Francisco building useful things. + {` `} + + You should follow him on Twitter + +

+
+ ) +} export default Bio diff --git a/starters/default/package-lock.json b/starters/default/package-lock.json index c6f26f5b19af3..8aefea29412e0 100644 --- a/starters/default/package-lock.json +++ b/starters/default/package-lock.json @@ -797,12 +797,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -1590,12 +1590,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -2517,26 +2517,31 @@ "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" }, "cacache": { - "version": "11.3.2", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz", - "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==", + "version": "11.3.3", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.3.tgz", + "integrity": "sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==", "requires": { - "bluebird": "^3.5.3", + "bluebird": "^3.5.5", "chownr": "^1.1.1", "figgy-pudding": "^3.5.1", - "glob": "^7.1.3", + "glob": "^7.1.4", "graceful-fs": "^4.1.15", "lru-cache": "^5.1.1", "mississippi": "^3.0.0", "mkdirp": "^0.5.1", "move-concurrently": "^1.0.1", "promise-inflight": "^1.0.1", - "rimraf": "^2.6.2", + "rimraf": "^2.6.3", "ssri": "^6.0.1", "unique-filename": "^1.1.1", "y18n": "^4.0.0" }, "dependencies": { + "bluebird": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz", + "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==" + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -2687,21 +2692,21 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } } }, "caniuse-lite": { - "version": "1.0.30000974", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz", - "integrity": "sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==" + "version": "1.0.30000975", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000975.tgz", + "integrity": "sha512-ZsXA9YWQX6ATu5MNg+Vx/cMQ+hM6vBBSqDeJs8ruk9z0ky4yIHML15MoxcFt088ST2uyjgqyUGRJButkptWf0w==" }, "capture-stack-trace": { "version": "1.0.1", @@ -3042,9 +3047,9 @@ "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" }, "component-emitter": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", - "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" }, "component-inherit": { "version": "0.0.3", @@ -3252,22 +3257,22 @@ "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==" }, "core-js-compat": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.3.tgz", - "integrity": "sha512-EP018pVhgwsKHz3YoN1hTq49aRe+h017Kjz0NQz3nXV0cCRMvH3fLQl+vEPGr4r4J5sk4sU3tUC7U1aqTCeJeA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.4.tgz", + "integrity": "sha512-Z5zbO9f1d0YrJdoaQhphVAnKPimX92D6z8lCGphH89MNRxlL1prI9ExJPqVwP0/kgkQCv8c4GJGT8X16yUncOg==", "requires": { - "browserslist": "^4.6.0", - "core-js-pure": "3.1.3", - "semver": "^6.1.0" + "browserslist": "^4.6.2", + "core-js-pure": "3.1.4", + "semver": "^6.1.1" }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -3279,9 +3284,9 @@ } }, "core-js-pure": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.1.3.tgz", - "integrity": "sha512-k3JWTrcQBKqjkjI0bkfXS0lbpWPxYuHWfMMjC1VDmzU4Q58IwSbuXSo99YO/hUHlw/EB4AlfA2PVxOGkrIq6dA==" + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.1.4.tgz", + "integrity": "sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==" }, "core-util-is": { "version": "1.0.2", @@ -4324,9 +4329,9 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { - "version": "1.3.159", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.159.tgz", - "integrity": "sha512-bhiEr8/A97GUBcUzNb9MFNhzQOjakbKmEKBEAa6UMY45zG2e8PM63LOgAPXEJE9bQiaQH6nOdYiYf8X821tZjQ==" + "version": "1.3.165", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.165.tgz", + "integrity": "sha512-iIS8axR524EAnvUtWUNnREnYjQrS0zUvutIKYgTVuN3MzcjrV31EuJYKw7DGOtFO9DQw+JiXeaVDPQWMskG1wQ==" }, "elliptic": { "version": "6.4.1", @@ -4424,6 +4429,11 @@ "yeast": "0.1.2" }, "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", @@ -5320,9 +5330,9 @@ } }, "file-type": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.9.0.tgz", - "integrity": "sha512-9C5qtGR/fNibHC5gzuMmmgnjH3QDDLKMa8lYe9CiZVmAnI4aUaoMh40QyUPzzs0RYo837SOBKh7TYwle4G8E4w==" + "version": "10.11.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz", + "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==" }, "filename-reserved-regex": { "version": "2.0.0", @@ -6071,9 +6081,9 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, "gatsby": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.9.4.tgz", - "integrity": "sha512-01hd+GVgfUPctdzmOdypFG35Z80HDHl1uSOdtzK8OZ9Yohj/+n8XMxTKfiMhqALygQm0CiF0Mzb/YvLmnf6L1Q==", + "version": "2.9.9", + "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.9.9.tgz", + "integrity": "sha512-jAAMCn7NNeymwTQ2+EcpWQmwbOEjd6RiBAxc7aBvfSg3PDJUG50bCeWC9TaYC81hiHq3XSHgJLDB+02BSJmjkw==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/core": "^7.0.0", @@ -6131,12 +6141,12 @@ "flat": "^4.0.0", "fs-exists-cached": "1.0.0", "fs-extra": "^5.0.0", - "gatsby-cli": "^2.6.7", + "gatsby-cli": "^2.6.12", "gatsby-graphiql-explorer": "^0.1.2", "gatsby-link": "^2.1.1", "gatsby-plugin-page-creator": "^2.0.13", "gatsby-react-router-scroll": "^2.0.7", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "glob": "^7.1.1", "got": "8.0.0", "graphql": "^14.1.1", @@ -6272,9 +6282,9 @@ } }, "gatsby-cli": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.6.7.tgz", - "integrity": "sha512-ngGOkozh0Wp2R2kblAUnMfMdPT84MoKMmuROqJVw+JUweB9zTrrGQsrH3ii26nw+7DDsrg6+AAkbELjp5SlYNA==", + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.6.12.tgz", + "integrity": "sha512-Ed1oM9ahiI32iO47QgcIw1hBLeroqVFURjrNCHebOWEVJcTS1JaslcACJWN2Hq5OUyHC42hN7bDKU6IkmGe/Uw==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/runtime": "^7.0.0", @@ -6290,7 +6300,7 @@ "execa": "^0.8.0", "fs-exists-cached": "^1.0.0", "fs-extra": "^4.0.1", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "hosted-git-info": "^2.6.0", "ink": "^2.0.5", "ink-spinner": "^3.0.1", @@ -6301,6 +6311,7 @@ "object.entries": "^1.1.0", "opentracing": "^0.14.3", "pretty-error": "^2.1.1", + "progress": "^2.0.3", "prompts": "^2.1.0", "react": "^16.8.4", "resolve-cwd": "^2.0.0", @@ -6565,9 +6576,9 @@ } }, "gatsby-plugin-sharp": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.1.5.tgz", - "integrity": "sha512-qHW0HJ3PK/HrTxg9wEqh8oHPv4R2SThn9z2n5m7pkrHOK9ZLHTkUaXtSNqcKzTap9cd7K4sjgw3EXaM5G7Jc8A==", + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.1.9.tgz", + "integrity": "sha512-iRZujOoPQOc2XfgCz9/OG6B2AmffwRtPib954Am6DjX3D3gqJGa4jbzE7gLRng1mrJGv+xBe5wPJGY7U1aVeBQ==", "requires": { "@babel/runtime": "^7.0.0", "async": "^2.1.2", @@ -6581,7 +6592,7 @@ "mini-svg-data-uri": "^1.0.0", "potrace": "^2.1.1", "probe-image-size": "^4.0.0", - "progress": "^1.1.8", + "progress": "^2.0.3", "semver": "^5.6.0", "sharp": "^0.22.1", "svgo": "^1.2.0" @@ -6604,11 +6615,6 @@ "jsonfile": "^4.0.0", "universalify": "^0.1.0" } - }, - "progress": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz", - "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=" } } }, @@ -6623,9 +6629,9 @@ } }, "gatsby-source-filesystem": { - "version": "2.0.39", - "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.0.39.tgz", - "integrity": "sha512-RL5J1WTrb6snyTeCmylt8/6cmhJxftjZGFLFHByEERyVEgMMiNDRHWqmrW/oWwkQ6Gvxi4GNnYUPsps+9Azv8Q==", + "version": "2.0.43", + "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.0.43.tgz", + "integrity": "sha512-z4HMnTcigoXtd3rRa/yQScgFJU5w13c9T5Yw/k58M+ysrnpFEG34VOxwot22mEuMXMM/Fdg5PwH4a54F3OQTcQ==", "requires": { "@babel/runtime": "^7.0.0", "better-queue": "^3.8.7", @@ -6637,7 +6643,7 @@ "md5-file": "^3.1.1", "mime": "^2.2.0", "pretty-bytes": "^4.0.2", - "progress": "^1.1.8", + "progress": "^2.0.3", "read-chunk": "^3.0.0", "valid-url": "^1.0.9", "xstate": "^3.1.0" @@ -6669,11 +6675,6 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==" }, - "progress": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz", - "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=" - }, "read-chunk": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz", @@ -6691,9 +6692,9 @@ } }, "gatsby-telemetry": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/gatsby-telemetry/-/gatsby-telemetry-1.0.11.tgz", - "integrity": "sha512-pEGt8lpjB52KF2ekdL7TvARTpE+iHzx31f8ILS7r7ZqgCp2v+MhaLGIDh4SiCM801mFYGgsp87mx4q8DCqPeDQ==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/gatsby-telemetry/-/gatsby-telemetry-1.0.12.tgz", + "integrity": "sha512-TDzcwhbwnHU0PqiCP751qBLyFfSbRbduCKCCsdbBOnsVYMO3L/YUQ4RWe/FUh3xNXmTLPCfoCejtmnZn7d7MnA==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/runtime": "^7.0.0", @@ -6704,6 +6705,7 @@ "envinfo": "^5.8.1", "fs-extra": "^7.0.1", "is-docker": "1.1.0", + "lodash": "^4.17.10", "node-fetch": "2.3.0", "resolve-cwd": "^2.0.0", "source-map": "^0.5.7", @@ -8031,9 +8033,9 @@ "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" }, "is-glob": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz", - "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", "requires": { "is-extglob": "^2.1.1" } @@ -10370,12 +10372,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -10509,12 +10511,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -10564,12 +10566,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -10772,12 +10774,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -10832,12 +10834,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -11420,9 +11422,9 @@ } }, "react-hot-loader": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.11.0.tgz", - "integrity": "sha512-EXwYmn+7bU9GgidYjx36IfX1t9/mZlKN8TuGXW6C4J2fEL6cKh4QUtpY/toZe9QBoKMot7UfksFKzl7Wq2qJ+w==", + "version": "4.11.1", + "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.11.1.tgz", + "integrity": "sha512-HAC0UedYzM3mD+ZaQHesntFO0yi2ftOV4ZMMRTj43E4GvW5sQqYTPvur+6J7EaH3MDr/RqjDKXyCqKepV8+y7w==", "requires": { "fast-levenshtein": "^2.0.6", "global": "^4.3.0", @@ -12452,6 +12454,11 @@ "to-array": "0.1.4" }, "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", @@ -12477,6 +12484,11 @@ "isarray": "2.0.1" }, "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", @@ -13059,12 +13071,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -13137,9 +13149,9 @@ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" }, "table": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/table/-/table-5.4.0.tgz", - "integrity": "sha512-nHFDrxmbrkU7JAFKqKbDJXfzrX2UBsWmrieXFTGxiI5e4ncg3VqsZeI4EzNmX0ncp4XNGVeoxIWJXfCIXwrsvw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.1.tgz", + "integrity": "sha512-E6CK1/pZe2N75rGZQotFOdmzWQ1AILtgYbMAbAjvms0S1l5IDB47zG3nCnFGB/w+7nB3vKofbLXCH7HPBo864w==", "requires": { "ajv": "^6.9.1", "lodash": "^4.17.11", @@ -14039,9 +14051,9 @@ } }, "webpack-dev-server": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.7.1.tgz", - "integrity": "sha512-GSBjjDMQ+uJI/Rcw/NfXDq5QpfE4HviafCy2SdbJ8Q22MwsnyoHd5TbWRfxgkbklsMx+ZNgWIKK+cB28ynjiDQ==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.7.2.tgz", + "integrity": "sha512-mjWtrKJW2T9SsjJ4/dxDC2fkFVUw8jlpemDERqV0ZJIkjjjamR2AbQlr3oz+j4JLhYCHImHnXZK5H06P2wvUew==", "requires": { "ansi-html": "0.0.7", "bonjour": "^3.5.0", @@ -14057,7 +14069,7 @@ "internal-ip": "^4.3.0", "ip": "^1.1.5", "killable": "^1.0.1", - "loglevel": "^1.6.2", + "loglevel": "^1.6.3", "opn": "^5.5.0", "p-retry": "^3.0.1", "portfinder": "^1.0.20", @@ -14790,9 +14802,9 @@ "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" }, "xstate": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.6.1.tgz", - "integrity": "sha512-f4HqFkGYVN03kDgxIM3Vp4zC9yDvunN6FHhEjbusEuAqwMFkyWg0VOUKdj/K7+W5fDcDHox7OgPYYfGIGWyJ8Q==" + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.6.2.tgz", + "integrity": "sha512-3lRM7w72lnijswRniT49v/Y0hiuhAQ5f1L7d1fhLA+jcKreebGM+7/NgFMSuzjsC1q7sC9cQ9QqTUfVzgDRFmA==" }, "xtend": { "version": "4.0.1", diff --git a/starters/default/package.json b/starters/default/package.json index 34b0a0c2b7537..975e7ce6fd851 100644 --- a/starters/default/package.json +++ b/starters/default/package.json @@ -5,13 +5,13 @@ "version": "0.1.0", "author": "Kyle Mathews ", "dependencies": { - "gatsby": "^2.9.4", + "gatsby": "^2.9.9", "gatsby-image": "^2.1.4", "gatsby-plugin-manifest": "^2.1.1", "gatsby-plugin-offline": "^2.1.3", "gatsby-plugin-react-helmet": "^3.0.12", - "gatsby-plugin-sharp": "^2.1.5", - "gatsby-source-filesystem": "^2.0.39", + "gatsby-plugin-sharp": "^2.1.9", + "gatsby-source-filesystem": "^2.0.43", "gatsby-transformer-sharp": "^2.1.21", "prop-types": "^15.7.2", "react": "^16.8.6", diff --git a/starters/default/src/components/image.js b/starters/default/src/components/image.js index ef4d21778b8d9..e61edb684de4e 100644 --- a/starters/default/src/components/image.js +++ b/starters/default/src/components/image.js @@ -1,32 +1,32 @@ import React from "react" -import { StaticQuery, graphql } from "gatsby" +import { useStaticQuery, graphql } from "gatsby" import Img from "gatsby-image" /* * This component is built using `gatsby-image` to automatically serve optimized * images with lazy loading and reduced file sizes. The image is loaded using a - * `StaticQuery`, which allows us to load the image from directly within this + * `useStaticQuery`, which allows us to load the image from directly within this * component, rather than having to pass the image data down from pages. * * For more information, see the docs: * - `gatsby-image`: https://gatsby.dev/gatsby-image - * - `StaticQuery`: https://gatsby.dev/staticquery + * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ */ -const Image = () => ( - { + const data = useStaticQuery(graphql` + query { + placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { + childImageSharp { + fluid(maxWidth: 300) { + ...GatsbyImageSharpFluid } } } - `} - render={data => } - /> -) + } + `) + + return +} + export default Image diff --git a/starters/default/src/components/layout.js b/starters/default/src/components/layout.js index 52dda9b012c48..8d559875eb270 100644 --- a/starters/default/src/components/layout.js +++ b/starters/default/src/components/layout.js @@ -1,50 +1,49 @@ /** * Layout component that queries for data - * with Gatsby's StaticQuery component + * with Gatsby's useStaticQuery component * - * See: https://www.gatsbyjs.org/docs/static-query/ + * See: https://www.gatsbyjs.org/docs/use-static-query/ */ import React from "react" import PropTypes from "prop-types" -import { StaticQuery, graphql } from "gatsby" +import { useStaticQuery, graphql } from "gatsby" import Header from "./header" import "./layout.css" -const Layout = ({ children }) => ( - { + const data = useStaticQuery(graphql` + query SiteTitleQuery { + site { + siteMetadata { + title } } - `} - render={data => ( - <> -
-
-
{children}
-
- © {new Date().getFullYear()}, Built with - {` `} - Gatsby -
-
- - )} - /> -) + } + `) + + return ( + <> +
+
+
{children}
+
+ © {new Date().getFullYear()}, Built with + {` `} + Gatsby +
+
+ + ) +} Layout.propTypes = { children: PropTypes.node.isRequired, diff --git a/starters/hello-world/package-lock.json b/starters/hello-world/package-lock.json index ffeff7244e044..ad31a08066c01 100644 --- a/starters/hello-world/package-lock.json +++ b/starters/hello-world/package-lock.json @@ -790,12 +790,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -1532,12 +1532,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -2158,21 +2158,21 @@ "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" }, "cacache": { - "version": "11.3.2", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz", - "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==", + "version": "11.3.3", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.3.tgz", + "integrity": "sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==", "requires": { - "bluebird": "^3.5.3", + "bluebird": "^3.5.5", "chownr": "^1.1.1", "figgy-pudding": "^3.5.1", - "glob": "^7.1.3", + "glob": "^7.1.4", "graceful-fs": "^4.1.15", "lru-cache": "^5.1.1", "mississippi": "^3.0.0", "mkdirp": "^0.5.1", "move-concurrently": "^1.0.1", "promise-inflight": "^1.0.1", - "rimraf": "^2.6.2", + "rimraf": "^2.6.3", "ssri": "^6.0.1", "unique-filename": "^1.1.1", "y18n": "^4.0.0" @@ -2312,21 +2312,21 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } } }, "caniuse-lite": { - "version": "1.0.30000974", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz", - "integrity": "sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==" + "version": "1.0.30000975", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000975.tgz", + "integrity": "sha512-ZsXA9YWQX6ATu5MNg+Vx/cMQ+hM6vBBSqDeJs8ruk9z0ky4yIHML15MoxcFt088ST2uyjgqyUGRJButkptWf0w==" }, "capture-stack-trace": { "version": "1.0.1", @@ -2821,22 +2821,22 @@ "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==" }, "core-js-compat": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.3.tgz", - "integrity": "sha512-EP018pVhgwsKHz3YoN1hTq49aRe+h017Kjz0NQz3nXV0cCRMvH3fLQl+vEPGr4r4J5sk4sU3tUC7U1aqTCeJeA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.4.tgz", + "integrity": "sha512-Z5zbO9f1d0YrJdoaQhphVAnKPimX92D6z8lCGphH89MNRxlL1prI9ExJPqVwP0/kgkQCv8c4GJGT8X16yUncOg==", "requires": { - "browserslist": "^4.6.0", - "core-js-pure": "3.1.3", - "semver": "^6.1.0" + "browserslist": "^4.6.2", + "core-js-pure": "3.1.4", + "semver": "^6.1.1" }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -2848,9 +2848,9 @@ } }, "core-js-pure": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.1.3.tgz", - "integrity": "sha512-k3JWTrcQBKqjkjI0bkfXS0lbpWPxYuHWfMMjC1VDmzU4Q58IwSbuXSo99YO/hUHlw/EB4AlfA2PVxOGkrIq6dA==" + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.1.4.tgz", + "integrity": "sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==" }, "core-util-is": { "version": "1.0.2", @@ -3651,9 +3651,9 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { - "version": "1.3.159", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.159.tgz", - "integrity": "sha512-bhiEr8/A97GUBcUzNb9MFNhzQOjakbKmEKBEAa6UMY45zG2e8PM63LOgAPXEJE9bQiaQH6nOdYiYf8X821tZjQ==" + "version": "1.3.165", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.165.tgz", + "integrity": "sha512-iIS8axR524EAnvUtWUNnREnYjQrS0zUvutIKYgTVuN3MzcjrV31EuJYKw7DGOtFO9DQw+JiXeaVDPQWMskG1wQ==" }, "elliptic": { "version": "6.4.1", @@ -5244,9 +5244,9 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, "gatsby": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.9.4.tgz", - "integrity": "sha512-01hd+GVgfUPctdzmOdypFG35Z80HDHl1uSOdtzK8OZ9Yohj/+n8XMxTKfiMhqALygQm0CiF0Mzb/YvLmnf6L1Q==", + "version": "2.9.9", + "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.9.9.tgz", + "integrity": "sha512-jAAMCn7NNeymwTQ2+EcpWQmwbOEjd6RiBAxc7aBvfSg3PDJUG50bCeWC9TaYC81hiHq3XSHgJLDB+02BSJmjkw==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/core": "^7.0.0", @@ -5304,12 +5304,12 @@ "flat": "^4.0.0", "fs-exists-cached": "1.0.0", "fs-extra": "^5.0.0", - "gatsby-cli": "^2.6.7", + "gatsby-cli": "^2.6.12", "gatsby-graphiql-explorer": "^0.1.2", "gatsby-link": "^2.1.1", "gatsby-plugin-page-creator": "^2.0.13", "gatsby-react-router-scroll": "^2.0.7", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "glob": "^7.1.1", "got": "8.0.0", "graphql": "^14.1.1", @@ -5445,9 +5445,9 @@ } }, "gatsby-cli": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.6.7.tgz", - "integrity": "sha512-ngGOkozh0Wp2R2kblAUnMfMdPT84MoKMmuROqJVw+JUweB9zTrrGQsrH3ii26nw+7DDsrg6+AAkbELjp5SlYNA==", + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.6.12.tgz", + "integrity": "sha512-Ed1oM9ahiI32iO47QgcIw1hBLeroqVFURjrNCHebOWEVJcTS1JaslcACJWN2Hq5OUyHC42hN7bDKU6IkmGe/Uw==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/runtime": "^7.0.0", @@ -5463,7 +5463,7 @@ "execa": "^0.8.0", "fs-exists-cached": "^1.0.0", "fs-extra": "^4.0.1", - "gatsby-telemetry": "^1.0.11", + "gatsby-telemetry": "^1.0.12", "hosted-git-info": "^2.6.0", "ink": "^2.0.5", "ink-spinner": "^3.0.1", @@ -5474,6 +5474,7 @@ "object.entries": "^1.1.0", "opentracing": "^0.14.3", "pretty-error": "^2.1.1", + "progress": "^2.0.3", "prompts": "^2.1.0", "react": "^16.8.4", "resolve-cwd": "^2.0.0", @@ -5708,9 +5709,9 @@ } }, "gatsby-telemetry": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/gatsby-telemetry/-/gatsby-telemetry-1.0.11.tgz", - "integrity": "sha512-pEGt8lpjB52KF2ekdL7TvARTpE+iHzx31f8ILS7r7ZqgCp2v+MhaLGIDh4SiCM801mFYGgsp87mx4q8DCqPeDQ==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/gatsby-telemetry/-/gatsby-telemetry-1.0.12.tgz", + "integrity": "sha512-TDzcwhbwnHU0PqiCP751qBLyFfSbRbduCKCCsdbBOnsVYMO3L/YUQ4RWe/FUh3xNXmTLPCfoCejtmnZn7d7MnA==", "requires": { "@babel/code-frame": "^7.0.0", "@babel/runtime": "^7.0.0", @@ -5721,6 +5722,7 @@ "envinfo": "^5.8.1", "fs-extra": "^7.0.1", "is-docker": "1.1.0", + "lodash": "^4.17.10", "node-fetch": "2.3.0", "resolve-cwd": "^2.0.0", "source-map": "^0.5.7", @@ -8560,12 +8562,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -8699,12 +8701,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -8754,12 +8756,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -8962,12 +8964,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -9022,12 +9024,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } } @@ -9514,9 +9516,9 @@ "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw==" }, "react-hot-loader": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.11.0.tgz", - "integrity": "sha512-EXwYmn+7bU9GgidYjx36IfX1t9/mZlKN8TuGXW6C4J2fEL6cKh4QUtpY/toZe9QBoKMot7UfksFKzl7Wq2qJ+w==", + "version": "4.11.1", + "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.11.1.tgz", + "integrity": "sha512-HAC0UedYzM3mD+ZaQHesntFO0yi2ftOV4ZMMRTj43E4GvW5sQqYTPvur+6J7EaH3MDr/RqjDKXyCqKepV8+y7w==", "requires": { "fast-levenshtein": "^2.0.6", "global": "^4.3.0", @@ -10852,12 +10854,12 @@ }, "dependencies": { "browserslist": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.2.tgz", - "integrity": "sha512-2neU/V0giQy9h3XMPwLhEY3+Ao0uHSwHvU8Q1Ea6AgLVL1sXbX3dzPrJ8NWe5Hi4PoTkCYXOtVR9rfRLI0J/8Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz", + "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==", "requires": { - "caniuse-lite": "^1.0.30000974", - "electron-to-chromium": "^1.3.150", + "caniuse-lite": "^1.0.30000975", + "electron-to-chromium": "^1.3.164", "node-releases": "^1.1.23" } }, @@ -10930,9 +10932,9 @@ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" }, "table": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/table/-/table-5.4.0.tgz", - "integrity": "sha512-nHFDrxmbrkU7JAFKqKbDJXfzrX2UBsWmrieXFTGxiI5e4ncg3VqsZeI4EzNmX0ncp4XNGVeoxIWJXfCIXwrsvw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.1.tgz", + "integrity": "sha512-E6CK1/pZe2N75rGZQotFOdmzWQ1AILtgYbMAbAjvms0S1l5IDB47zG3nCnFGB/w+7nB3vKofbLXCH7HPBo864w==", "requires": { "ajv": "^6.9.1", "lodash": "^4.17.11", @@ -11659,9 +11661,9 @@ } }, "webpack-dev-server": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.7.1.tgz", - "integrity": "sha512-GSBjjDMQ+uJI/Rcw/NfXDq5QpfE4HviafCy2SdbJ8Q22MwsnyoHd5TbWRfxgkbklsMx+ZNgWIKK+cB28ynjiDQ==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.7.2.tgz", + "integrity": "sha512-mjWtrKJW2T9SsjJ4/dxDC2fkFVUw8jlpemDERqV0ZJIkjjjamR2AbQlr3oz+j4JLhYCHImHnXZK5H06P2wvUew==", "requires": { "ansi-html": "0.0.7", "bonjour": "^3.5.0", @@ -11677,7 +11679,7 @@ "internal-ip": "^4.3.0", "ip": "^1.1.5", "killable": "^1.0.1", - "loglevel": "^1.6.2", + "loglevel": "^1.6.3", "opn": "^5.5.0", "p-retry": "^3.0.1", "portfinder": "^1.0.20", @@ -12180,9 +12182,9 @@ "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" }, "xstate": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.6.1.tgz", - "integrity": "sha512-f4HqFkGYVN03kDgxIM3Vp4zC9yDvunN6FHhEjbusEuAqwMFkyWg0VOUKdj/K7+W5fDcDHox7OgPYYfGIGWyJ8Q==" + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.6.2.tgz", + "integrity": "sha512-3lRM7w72lnijswRniT49v/Y0hiuhAQ5f1L7d1fhLA+jcKreebGM+7/NgFMSuzjsC1q7sC9cQ9QqTUfVzgDRFmA==" }, "xtend": { "version": "4.0.1", diff --git a/starters/hello-world/package.json b/starters/hello-world/package.json index 0713494846b12..ff46d0885374b 100644 --- a/starters/hello-world/package.json +++ b/starters/hello-world/package.json @@ -13,7 +13,7 @@ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" }, "dependencies": { - "gatsby": "^2.9.4", + "gatsby": "^2.9.9", "react": "^16.8.6", "react-dom": "^16.8.6" }, diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 9d8b13bc0ba54..34163212a9042 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -268,7 +268,12 @@ exports.createPages = ({ graphql, actions, reporter }) => { createRedirect({ fromPath: `/docs/advanced-tutorials/`, - toPath: `/tutorial/advanced-tutorials/`, + toPath: `/tutorial/additional-tutorials/`, + isPermanent: true, + }) + createRedirect({ + fromPath: `/tutorial/advanced-tutorials/`, + toPath: `/tutorial/additional-tutorials/`, isPermanent: true, }) createRedirect({ diff --git a/www/src/assets/algolia.svg b/www/src/assets/algolia.svg index 5cb39c3edce2c..4afbe23868181 100644 --- a/www/src/assets/algolia.svg +++ b/www/src/assets/algolia.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/bg-featured-sites.svg b/www/src/assets/bg-featured-sites.svg index 8911e3d55c776..e7950e6c48032 100644 --- a/www/src/assets/bg-featured-sites.svg +++ b/www/src/assets/bg-featured-sites.svg @@ -1,3 +1,3 @@ - + diff --git a/www/src/assets/blog.svg b/www/src/assets/blog.svg index fb16cccc5e3c3..01f7bd0112d8a 100644 --- a/www/src/assets/blog.svg +++ b/www/src/assets/blog.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/docs.svg b/www/src/assets/docs.svg index 99078bbfdabed..e9e4642349afe 100644 --- a/www/src/assets/docs.svg +++ b/www/src/assets/docs.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/ecosystem.svg b/www/src/assets/ecosystem.svg index cfe1be4e3e322..f692f2c33315f 100644 --- a/www/src/assets/ecosystem.svg +++ b/www/src/assets/ecosystem.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/fabric.svg b/www/src/assets/fabric.svg index f7bd673bac02d..0a35966a87e41 100644 --- a/www/src/assets/fabric.svg +++ b/www/src/assets/fabric.svg @@ -1,3 +1,3 @@ - + diff --git a/www/src/assets/featured-detailpage-featuredicon.svg b/www/src/assets/featured-detailpage-featuredicon.svg index f0d2ed6304d88..3f510c76a1502 100644 --- a/www/src/assets/featured-detailpage-featuredicon.svg +++ b/www/src/assets/featured-detailpage-featuredicon.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/featured-sites-icons--white.svg b/www/src/assets/featured-sites-icons--white.svg index ad91b67344f38..ee88db8e464f5 100644 --- a/www/src/assets/featured-sites-icons--white.svg +++ b/www/src/assets/featured-sites-icons--white.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/featured-sites-icons.svg b/www/src/assets/featured-sites-icons.svg index 2f17a1e22cb24..d7d9d09c2a4de 100644 --- a/www/src/assets/featured-sites-icons.svg +++ b/www/src/assets/featured-sites-icons.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/formidable.svg b/www/src/assets/formidable.svg index 42502dad5dd2c..7f55314df3046 100644 --- a/www/src/assets/formidable.svg +++ b/www/src/assets/formidable.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/graphql.svg b/www/src/assets/graphql.svg index b57be4039cde8..bd95f77b5606b 100644 --- a/www/src/assets/graphql.svg +++ b/www/src/assets/graphql.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/info-icon.svg b/www/src/assets/info-icon.svg index 619565570b6a9..f27ff2bc9449a 100644 --- a/www/src/assets/info-icon.svg +++ b/www/src/assets/info-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/jekyll.svg b/www/src/assets/jekyll.svg index 20c53cab4288e..3e74e2abc193e 100644 --- a/www/src/assets/jekyll.svg +++ b/www/src/assets/jekyll.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/js.svg b/www/src/assets/js.svg index 5f8fe3d577cc7..332f53cc1a1c9 100644 --- a/www/src/assets/js.svg +++ b/www/src/assets/js.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/netlify.svg b/www/src/assets/netlify.svg index 98dd801e2675e..37ed61a5f8a7b 100644 --- a/www/src/assets/netlify.svg +++ b/www/src/assets/netlify.svg @@ -1,3 +1,3 @@ - + diff --git a/www/src/assets/newsletter-form-ornament.svg b/www/src/assets/newsletter-form-ornament.svg index 2ee83af842e3b..324b6a2ef6881 100644 --- a/www/src/assets/newsletter-form-ornament.svg +++ b/www/src/assets/newsletter-form-ornament.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/plugins-ecosystem.svg b/www/src/assets/plugins-ecosystem.svg index 9b80d2c4d1afa..fbd688ed0e2ce 100644 --- a/www/src/assets/plugins-ecosystem.svg +++ b/www/src/assets/plugins-ecosystem.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/plugins.svg b/www/src/assets/plugins.svg index 5f9170ca30df9..21e3d29236dac 100644 --- a/www/src/assets/plugins.svg +++ b/www/src/assets/plugins.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/quotation-mark-ornament.svg b/www/src/assets/quotation-mark-ornament.svg index 009663e66ac7e..b8dd5acc08154 100644 --- a/www/src/assets/quotation-mark-ornament.svg +++ b/www/src/assets/quotation-mark-ornament.svg @@ -1,3 +1,3 @@ - + diff --git a/www/src/assets/react.svg b/www/src/assets/react.svg index abdfbbc9eeeca..eec0e97aeed5e 100644 --- a/www/src/assets/react.svg +++ b/www/src/assets/react.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/showcase-feather.svg b/www/src/assets/showcase-feather.svg index 9cedd550e693b..4e77573ba1749 100644 --- a/www/src/assets/showcase-feather.svg +++ b/www/src/assets/showcase-feather.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/showcase-magic.svg b/www/src/assets/showcase-magic.svg index 4bb99ce4cd0fa..928626c14a89a 100644 --- a/www/src/assets/showcase-magic.svg +++ b/www/src/assets/showcase-magic.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/showcase.svg b/www/src/assets/showcase.svg index b9b597213b254..ed27a050b5c12 100644 --- a/www/src/assets/showcase.svg +++ b/www/src/assets/showcase.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/star-ornament.svg b/www/src/assets/star-ornament.svg index 791e061c60f05..9ebd85cda7ec4 100644 --- a/www/src/assets/star-ornament.svg +++ b/www/src/assets/star-ornament.svg @@ -1,3 +1,3 @@ - + diff --git a/www/src/assets/starters.svg b/www/src/assets/starters.svg index d547c073611ca..31e60aa754c31 100644 --- a/www/src/assets/starters.svg +++ b/www/src/assets/starters.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/tutorial.svg b/www/src/assets/tutorial.svg index 8a6103be156e8..6a573385148aa 100644 --- a/www/src/assets/tutorial.svg +++ b/www/src/assets/tutorial.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/v2icon.svg b/www/src/assets/v2icon.svg index 7bb811a59b7d0..fa59495f0c97b 100644 --- a/www/src/assets/v2icon.svg +++ b/www/src/assets/v2icon.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/assets/webpack.svg b/www/src/assets/webpack.svg index 3a57aa5f0ff90..9e5471abd226a 100644 --- a/www/src/assets/webpack.svg +++ b/www/src/assets/webpack.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index fcd7f73b5e8b9..8197207bf86a7 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -210,16 +210,18 @@ items: - title: Typography.js link: /docs/typography-js/ + - title: Using Sass + link: /docs/sass/ - title: Using PostCSS link: /docs/post-css/ - title: Using TailwindCSS link: /docs/tailwind-css/ - title: Using Bulma link: /docs/bulma/ - - title: Adding Components to Content with MDX + - title: Adding Components to Markdown with MDX link: /docs/mdx/ items: - - title: Getting Started + - title: Getting Started with MDX link: /docs/mdx/getting-started/ - title: Writing Pages link: /docs/mdx/writing-pages/ @@ -528,8 +530,6 @@ link: /docs/gatsby-vendor-partnership/ - title: Agency Partnership Program link: /docs/gatsby-agency-partnership/ - - title: Advanced Tutorials - link: /tutorial/advanced-tutorials/ - title: Commands (Gatsby CLI) link: /docs/gatsby-cli/ - title: Cheat Sheet diff --git a/www/src/data/sidebars/tutorial-links.yaml b/www/src/data/sidebars/tutorial-links.yaml index e8eb9b2c0d494..2bb0a3b707239 100644 --- a/www/src/data/sidebars/tutorial-links.yaml +++ b/www/src/data/sidebars/tutorial-links.yaml @@ -111,8 +111,8 @@ link: /tutorial/part-eight/#add-page-metadata - title: Keep making it better link: /tutorial/part-eight/#keep-making-it-better - - title: Advanced Tutorials - link: /tutorial/advanced-tutorials/ + - title: Additional Tutorials + link: /tutorial/additional-tutorials/ items: - title: Making a Site with User Authentication link: /tutorial/authentication-tutorial/ diff --git a/www/src/logo.svg b/www/src/logo.svg index 47326250be03d..fbb2098cf5bae 100644 --- a/www/src/logo.svg +++ b/www/src/logo.svg @@ -1,4 +1,4 @@ - + diff --git a/www/src/monogram.svg b/www/src/monogram.svg index 2cfe563f306c1..11a22b25029da 100644 --- a/www/src/monogram.svg +++ b/www/src/monogram.svg @@ -1,3 +1,3 @@ - + diff --git a/www/src/pages/docs/index.js b/www/src/pages/docs/index.js index d950c895fa0c9..013e03ce828c3 100644 --- a/www/src/pages/docs/index.js +++ b/www/src/pages/docs/index.js @@ -27,13 +27,14 @@ class IndexRoute extends React.Component {

Gatsby is a blazing fast modern site generator for React.

Get Started

-

There are four main ways to get started with Gatsby:

+

There are five main ways to get started with Gatsby:

  1. - Tutorial: Step-by-step instructions - on how to install Gatsby and start a project: written for people - without Gatsby or web development experience, though it has - helped developers of all skill levels. + Tutorials: Step-by-step + instructions on how to install Gatsby and start a project: + written for people without Gatsby or web development experience, + though these learning resources have helped developers of all + skill levels.
  2. Quick start: One page @@ -53,11 +54,6 @@ class IndexRoute extends React.Component { about the many different topics around building with Gatsby, like sourcing data, deployment, and more.
    3. -
  3. - Ecosystem: Check out libraries - for Gatsby starters and plugins, as well as external - community resources. -
  4. Gatsby API Reference: Learn more about Gatsby APIs and configuration. @@ -77,13 +73,6 @@ class IndexRoute extends React.Component { Gatsby Internals: Dig into how Gatsby works behind the scenes.
    5. -
  5. - - Advanced Tutorials - - : Learn about topics that are too large for a doc and - warrant a tutorial. -
  6. Using Gatsby Professionally @@ -94,6 +83,11 @@ class IndexRoute extends React.Component {
    7. +
  7. + Check out the Ecosystem libraries + for Gatsby starters and plugins, as well as external community + resources. +

Visit the Contributing section to diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js index d8930527cc490..094af2d39f258 100644 --- a/www/src/utils/typography.js +++ b/www/src/utils/typography.js @@ -2,7 +2,7 @@ import Typography from "typography" import CodePlugin from "typography-plugin-code" import { space, - fontSizes, + fontSizes as fontSizeTokens, colors, transition, radii, @@ -13,6 +13,8 @@ import { fontWeights, } from "./tokens" +const fontSizes = fontSizeTokens.map(token => `${token / 16}rem`) + const _options = { bodyFontFamily: fonts.system, headerFontFamily: fonts.header, @@ -24,6 +26,7 @@ const _options = { overrideStyles: ({ rhythm }) => { return { html: { + backgroundColor: colors.white, WebkitFontSmoothing: `antialiased`, MozOsxFontSmoothing: `grayscale`, }, @@ -135,6 +138,12 @@ const _options = { background: `#ff9800`, color: colors.white, }, + ".gatsby-highlight pre[class='language-mdx']::before": { + content: `'mdx'`, + background: `#f9ac00`, + color: colors.white, + fontWeight: `400`, + }, ".gatsby-highlight pre[class='language-shell']::before": { content: `'shell'`, }, diff --git a/www/src/views/creators/check.svg b/www/src/views/creators/check.svg index 28223b2e0bfb6..5b7ceadc5b9d3 100644 --- a/www/src/views/creators/check.svg +++ b/www/src/views/creators/check.svg @@ -1,3 +1,3 @@ - + diff --git a/www/static/Gatsby-Logo.svg b/www/static/Gatsby-Logo.svg index 93194642f49dc..37aa217394330 100644 --- a/www/static/Gatsby-Logo.svg +++ b/www/static/Gatsby-Logo.svg @@ -1,5 +1,7 @@ - Gatsby + + Gatsby + diff --git a/www/static/Gatsby-Monogram.svg b/www/static/Gatsby-Monogram.svg index d6975a5e98c09..5578b06cb2490 100644 --- a/www/static/Gatsby-Monogram.svg +++ b/www/static/Gatsby-Monogram.svg @@ -1,5 +1,7 @@ - Gatsby + + Gatsby + diff --git a/www/static/monogram.svg b/www/static/monogram.svg index 2cfe563f306c1..11a22b25029da 100644 --- a/www/static/monogram.svg +++ b/www/static/monogram.svg @@ -1,3 +1,3 @@ - + diff --git a/www/static/safari-pinned-tab.svg b/www/static/safari-pinned-tab.svg index 7521076c0a02e..fd3db7bcc5181 100644 --- a/www/static/safari-pinned-tab.svg +++ b/www/static/safari-pinned-tab.svg @@ -1,3 +1,3 @@ - + diff --git a/yarn.lock b/yarn.lock index ca26934352770..938f56ffbf660 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5101,6 +5101,11 @@ bluebird@^3.5.3: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7" integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw== +bluebird@^3.5.4: + version "3.5.5" + resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f" + integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w== + bmp-js@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.0.3.tgz#64113e9c7cf1202b376ed607bf30626ebe57b18a" @@ -14654,6 +14659,11 @@ md5-file@^3.1.1: dependencies: buffer-alloc "^1.1.0" +md5-file@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-4.0.0.tgz#f3f7ba1e2dd1144d5bf1de698d0e5f44a4409584" + integrity sha512-UC0qFwyAjn4YdPpKaDNw6gNxRf7Mcx7jC1UGCY4boCzgvU2Aoc1mOGzTtrjjLKhM5ivsnhoKpQVxKPp+1j1qwg== + md5.js@^1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d" @@ -15414,6 +15424,11 @@ node-fetch@^1.0.1, node-fetch@^1.7.3: encoding "^0.1.11" is-stream "^1.0.1" +node-fetch@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd" + integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA== + node-forge@0.7.5: version "0.7.5" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df" @@ -17462,16 +17477,16 @@ process@~0.5.1: resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf" integrity sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8= -progress@^1.1.8: - version "1.1.8" - resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be" - integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74= - progress@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f" integrity sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8= +progress@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" + integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA== + promise-inflight@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"