From 09542a36a8c63c30ff62139fa191e2012da54e39 Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Tue, 25 Sep 2018 14:02:49 -0700 Subject: [PATCH 01/12] fix: change teams to reduce noise for people MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The admin team includes people who aren’t responsible for monitoring OSS. The new @gatsbyjs/core team includes only people who _should_ get notified for critical PRs. --- CODEOWNERS | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/CODEOWNERS b/CODEOWNERS index 91a1e22500ce3..ae980454a3721 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -3,17 +3,17 @@ # These files have the highest likelihood to cause chaos, so we require an # admin to review and approve pull requests that affect these. -/packages/gatsby/ @gatsbyjs/admin -/packages/babel-plugin-remove-graphql-queries/ @gatsbyjs/admin -/packages/gatsby-link/ @gatsbyjs/admin -/packages/gatsby-dev-cli/ @gatsbyjs/admin -/packages/gatsby-cli/ @gatsbyjs/admin +/packages/gatsby/ @gatsbyjs/core +/packages/babel-plugin-remove-graphql-queries/ @gatsbyjs/core +/packages/gatsby-link/ @gatsbyjs/core +/packages/gatsby-dev-cli/ @gatsbyjs/core +/packages/gatsby-cli/ @gatsbyjs/core # We also need to be careful with CI/CD and repo config files. -.circleci/ @gatsbyjs/admin -.travis.yml @gatsbyjs/admin -appveyor.yml @gatsbyjs/admin -.github/ @gatsbyjs/admin +.circleci/ @gatsbyjs/core +.travis.yml @gatsbyjs/core +appveyor.yml @gatsbyjs/core +.github/ @gatsbyjs/core # The website auto-deploys, so we need an extra check to avoid shenanigans. /www/ @gatsbyjs/website From 1010fba09d21f8f2f2319ec29d555f0b5e5cc6a9 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Tue, 25 Sep 2018 15:18:24 -0600 Subject: [PATCH 02/12] Update the GraphQL stitching blog post & docs (#8516) * Updates to post * Update GraphQL stitching blog post & docs * Remove extra tag * Update URL * Fixes from review --- .../2018-07-17-gatsby-source-graphql/index.md | 71 --------------- .../index.md | 87 +++++++++++++++++++ docs/docs/third-party-graphql.md | 4 +- www/src/data/sidebars/doc-links.yaml | 2 + 4 files changed, 91 insertions(+), 73 deletions(-) delete mode 100644 docs/blog/2018-07-17-gatsby-source-graphql/index.md create mode 100644 docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md diff --git a/docs/blog/2018-07-17-gatsby-source-graphql/index.md b/docs/blog/2018-07-17-gatsby-source-graphql/index.md deleted file mode 100644 index b43f641d11db9..0000000000000 --- a/docs/blog/2018-07-17-gatsby-source-graphql/index.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Simple GraphQL APIs with Gatsby -date: "2018-08-03" -author: "Mikhail Novikov" -tags: ["gatsby", "graphql", "plugin", "source"] ---- - -Gatsby 2.0 adds support for schema stitching of its internal schema. Schema stitching allows merging multiple GraphQL schemas together, which greatly simplifies working with third-party GraphQL APIs. Along with low-level support for stitching in general, we are shipping an official [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/) plugin, which enables connecting to an arbitrary GraphQL API with just a few lines of configuration. - -# Getting started - -Gatsby's data model is powered by an internal GraphQL API. It is a great abstraction that allows you to define the data requirements of your app, be it some files in the filesystem or a third-party API. However, including any API required a specialized source plugin. Naturally, it's a pain to write a custom plugin every time you want to use a third-party API. Now you don't need to. Add this to your `gatsby-config.js`. - -```js -// In your gatsby-config.js -module.exports = { - plugins: [ - { - resolve: "gatsby-source-graphql", - options: { - // This type will contain the remote schema Query type - typeName: "SWAPI", - // This is the field under which it's accessible - fieldName: "swapi", - // URL to query from - url: "https://api.graphcms.com/simple/v1/swapi", - }, - }, - ], -} -``` - -After this you will have a field named `swapi` in your Gatsby GraphQL and you can query it. - -```graphql -{ - # Field name parameter defines how you can access third party API - swapi { - allSpecies { - name - } - } - - # Other Gatsby querying works normally - site { - siteMetadata { - siteName - } - } -} -``` - -# Why is it needed? - -To understand why a separate new plugin is needed, let's dive into how Gatsby source plugins work. Gatsby's GraphQL schema can be extended with source plugins. Source plugins can extend the schema by adding _nodes_ - items that have some kind of global id. This way a `gatsby-source-filesystem` plugin can add all the files from a directory as nodes. Gatsby introspects the nodes that it gets and creates a GraphQL schema which you can use to fetch all those nodes. - -This system works really well for many cases and it's very intuitive, you don't need to care about creating a GraphQL schema or types for the nodes, any objects can be used. However, this is a limitation when using existing GraphQL APIs. First of all, you won't be able to use the same API as the one provided by the third-party API, because it will be replaced by Gatsby's internal node API. This can be confusing, because you can't consult the third-party API's documentation. Secondly, the plugin needs to proactively fetch all the possible data from the API, which can be complicated because the plugin author would have to predict which data might be needed. - -When there weren't many existing GraphQL APIs in the wild, that wasn't that much of a problem. For the few available APIs there was a source plugin. With the rise of both public GraphQL APIs, like Github or Shopify, and with so many more people having a GraphQL API of their own (or using one of the GraphQL solutions like Prisma, GraphCMS or AppSync), writing a plugin for each one became unfeasible. Meet `gatsby-source-graphql`. - -# How does it work? - -Instead of creating nodes for all potential items in a third-party API, `gatsby-source-graphql` uses schema stitching to combine the schema of a third-party API with the Gatsby schema. Schema stitching combines multiple GraphQL schemas into one, [read more about it here](https://www.apollographql.com/docs/graphql-tools/schema-stitching.html). - -The plugin puts the full third-party GraphQL API under one field in Gatsby's API. This way any types or fields of that API can be queried. There is no need to prefetch that data beforehand to create nodes, because the data will be fetched on-demand as required by the page queries. - -The actual stitching happens on the Gatsby level. There is a new action, `addThirdPartySchema`, that can be used to add arbitrary schemas for stitching. It's a deliberately low-level API that we hope other plugin authors can use in the future to implement some mind-blowing GraphQL functionality. (**_TODO_** Link to docs) - -# Conclusions - -`gatsby-source-graphql` is going to part of Gatsby's 2.0 release. Try it now with the latest Gatsby beta (**_TODO VERSION WHEN IT WILL BE RELEASED_**). [Check out the docs](/docs/third-party-graphql) or [a sample project using Github's GraphQL API](https://github.com/freiksenet/gatsby-github-displayer). diff --git a/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md b/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md new file mode 100644 index 0000000000000..833ea09e2c181 --- /dev/null +++ b/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md @@ -0,0 +1,87 @@ +--- +title: Announcing support for natively querying 3rd-party GraphQL APIs with Gatsby +date: "2018-09-25" +author: "Mikhail Novikov" +tags: ["graphql", "plugin", "source"] +--- + +When Gatsby was started 3.5 years ago, [GraphQL](https://www.graphql.com/) was still an internal project at Facebook and had yet to be open sourced. + +Since being open sourced, GraphQL's usage has exploded and [1000s of companies use it to power critical apps and websites](https://www.graphql.com/case-studies/). + +Gatsby's vision is to be the integration layer for modern websites gluing together data and code into highly performant websites and apps. GraphQL is integral to this vision. + +Gatsby v1 shipped last year with a plugin-powered data layer that let you easily pull data from any source using GraphQL. At the time, there was still very few public GraphQL schemas so we built a system that let plugins transform data from REST APIs into a GraphQL schema. + +But in the last year, a lot has changed. More and more services are shipping with native GraphQL APIs. CMSs like [GraphCMS](https://graphcms.com/), [AppSync](https://aws.amazon.com/appsync/), and [TakeShape](https://www.takeshape.io/) all have launched GraphQL APIs. [Contentful](https://www.contentful.com/) is launching a [native GraphQL API as well soon](https://www.contentful.com/blog/2018/07/04/graphql-abstract-syntax-tree-new-schema/). + +Watching the spread of GraphQL has all been incredibly exciting to watch and a fullfillment of our vision for the future of the web where sites easily stitch together data from many sources. + +But unfortunately, these new GraphQL APIs have been awkward to use inside Gatsby as you first had to wrap the API inside a Gatsby source plugin before you could query the data from your components. + +To fix this, [Gatsby 2.0](/blog/2018-09-17-gatsby-v2/) adds experimental support for schema stitching of external GraphQL APIs to its internal schema. Schema stitching allows merging multiple GraphQL schemas together, which greatly simplifies working with third-party GraphQL APIs. Along with low-level support for stitching in general, we are shipping an official [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/) plugin, which enables connecting to an arbitrary GraphQL API with just a few lines of configuration! + +# Getting started + +Gatsby's data model is powered by an internal GraphQL API. It is a great abstraction that allows you to define the data requirements of your app, be it some files in the filesystem or a third-party API. + +Previously, when you wanted to add a 3rd-party GraphQL API, you needed to write a custom source plugin. But now, you simply add a small bit of config to your site's gatsby-config.js. The following example adds the Star Wars GraphQL API: + +```js +// In your gatsby-config.js +module.exports = { + plugins: [ + { + resolve: "gatsby-source-graphql", + options: { + // This type will contain the remote schema Query type + typeName: "SWAPI", + // This is the field under which it's accessible + fieldName: "swapi", + // URL to query from + url: "https://api.graphcms.com/simple/v1/swapi", + }, + }, + ], +} +``` + +After this you will have a field named `swapi` in your Gatsby GraphQL and you can query it. + +```graphql +{ + # Field name parameter defines how you can access third party API + swapi { + allSpecies { + name + } + } + + # Other Gatsby querying works normally + site { + siteMetadata { + siteName + } + } +} +``` + +# Why is it needed? + +To understand why a separate new plugin is needed, let's dive into how Gatsby source plugins work. Gatsby's GraphQL schema can be extended with source plugins. Source plugins can extend the schema by adding _nodes_ - objects that have some kind of global id. This way a `gatsby-source-filesystem` plugin can add all the files from a directory as nodes. Gatsby introspects the nodes that it gets and creates a GraphQL schema which you can use to fetch all those nodes. + +This system works really well for many cases and it's very intuitive, you don't need to care about creating a GraphQL schema or types for the nodes, any objects can be used. However, this is a limitation when using existing GraphQL APIs. First of all, you won't be able to use the same API as the one provided by the third-party API, because it will be replaced by Gatsby's internal node API. This can be confusing, because you can't consult the third-party API's documentation. Secondly, the plugin needs to proactively fetch all the possible data from the API, which can be complicated because the plugin author would have to predict which data might be needed. + +When there weren't many existing GraphQL APIs in the wild, that wasn't that much of a problem. For the few available APIs there was a source plugin. With the rise of both public GraphQL APIs, like GitHub or Shopify, and with so many more people having a GraphQL API of their own (or using one of the GraphQL solutions like Prisma, GraphCMS or AppSync), writing a plugin for each one became unfeasible. Meet `gatsby-source-graphql`. + +# How does it work? + +Instead of creating nodes for all potential items in a third-party API, `gatsby-source-graphql` uses schema stitching to combine the schema of a third-party API with the Gatsby schema. Schema stitching combines multiple GraphQL schemas into one, [read more about it here](https://www.apollographql.com/docs/graphql-tools/schema-stitching.html). + +The plugin puts the full third-party GraphQL API under one field in Gatsby's API. This way any types or fields of that API can be queried. There is no need to prefetch that data beforehand to create nodes, because the data will be fetched on-demand as required by the page queries. + +The actual stitching happens on the Gatsby level. There is a new action, [`addThirdPartySchema`](/docs/actions/#addThirdPartySchema), that can be used to add arbitrary schemas for stitching. It's a deliberately low-level API that we hope other plugin authors can use in the future to implement some mind-blowing GraphQL functionality. + +# Conclusions + +`gatsby-source-graphql` is part of [Gatsby's 2.0 release](/blog/2018-09-17-gatsby-v2/). Try it out now! [Check out the docs](/docs/third-party-graphql) or [a sample project using GitHub's GraphQL API](https://github.com/freiksenet/gatsby-github-displayer). diff --git a/docs/docs/third-party-graphql.md b/docs/docs/third-party-graphql.md index 5d64699f3d7eb..642d0514e080c 100644 --- a/docs/docs/third-party-graphql.md +++ b/docs/docs/third-party-graphql.md @@ -9,10 +9,10 @@ Gatsby v2 introduces a simple way to integrate any GraphQL API into Gatsby's Gra First install the plugin. ``` -yarn add gatsby-source-graphql +npm install gatsby-source-graphql ``` -Providing there is a GraphQL API under a `url`, adding it to an API just requires adding this to the config. +Provided there is a GraphQL API under a `url`, adding it to an API just requires adding this to the config. ```js module.exports = { diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index 17cfcfb0f32ab..ea1bb2174e3ba 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -105,6 +105,8 @@ link: /docs/page-query/ - title: Querying data in components with StaticQuery link: /docs/static-query/ + - title: Using third-party GraphQL APIs + link: /docs/third-party-graphql/ - title: Adding Markdown pages link: /docs/adding-markdown-pages/ - title: Adding a list of Markdown blog posts From 105bd153d5ad4a4315c0391630b470786b7d08b0 Mon Sep 17 00:00:00 2001 From: Lennart Date: Tue, 25 Sep 2018 23:43:34 +0200 Subject: [PATCH 03/12] [www] a11y improvements (#8536) - Changed some generic div tags to HTML semantic tags, e.g. added the
tag to index page or doc template - Give the nav div the
) } diff --git a/www/src/components/search-icon.js b/www/src/components/search-icon.js index aa8fd8fcc6df1..065bf807b4f8e 100644 --- a/www/src/components/search-icon.js +++ b/www/src/components/search-icon.js @@ -6,6 +6,8 @@ const SearchIcon = ({ overrideCSS }) => ( viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="currentColor" + focusable="false" + aria-hidden="true" css={{ ...overrideCSS }} > {/* Based on the 'search' icon in https://github.com/ionic-team/ionicons */} diff --git a/www/src/components/sidebar/sidebar.js b/www/src/components/sidebar/sidebar.js index 0c786da21f8bd..543449d7e6811 100644 --- a/www/src/components/sidebar/sidebar.js +++ b/www/src/components/sidebar/sidebar.js @@ -194,16 +194,21 @@ class SidebarBody extends Component { const { openSectionHash, activeItemLink, activeItemParents } = this.state return ( -
+
{!itemList[0].disableExpandAll && ( -
+
-
+ )} -
{ // get proper scroll position const position = nativeEvent.target.scrollTop @@ -241,8 +246,8 @@ class SidebarBody extends Component { /> ))} -
-
+ + ) } } diff --git a/www/src/components/sidebar/sticky-responsive-sidebar.js b/www/src/components/sidebar/sticky-responsive-sidebar.js index 069c6d4580ae9..c0646959fcfc6 100644 --- a/www/src/components/sidebar/sticky-responsive-sidebar.js +++ b/www/src/components/sidebar/sticky-responsive-sidebar.js @@ -69,6 +69,9 @@ class StickyResponsiveSidebar extends Component { css={{ ...styles.sidebarToggleButton }} onClick={this._openSidebar} role="button" + aria-label="Show Secondary Navigation" + aria-controls="SecondaryNavigation" + aria-expanded={open ? "true" : "false"} tabIndex={0} >
diff --git a/www/src/pages/index.js b/www/src/pages/index.js index f0bbff8bb8663..614208c795e9d 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -53,7 +53,7 @@ class IndexRoute extends React.Component { }, }} > -
-
+ diff --git a/www/src/views/community/index.js b/www/src/views/community/index.js index 9581cced04458..606ef22636147 100644 --- a/www/src/views/community/index.js +++ b/www/src/views/community/index.js @@ -143,7 +143,7 @@ class CommunityView extends Component {
diff --git a/www/src/views/showcase/showcase-item-categories.js b/www/src/views/showcase/showcase-item-categories.js index 3581377e66447..2944842ab6842 100644 --- a/www/src/views/showcase/showcase-item-categories.js +++ b/www/src/views/showcase/showcase-item-categories.js @@ -30,7 +30,7 @@ const ShowcaseItemCategories = ({ categories, onClickHandler, showcase }) => { Date: Tue, 25 Sep 2018 16:39:04 -0600 Subject: [PATCH 04/12] Rfc process doc (#8537) * #8103 rfc process doc draft * simplified headers --- docs/docs/rfc-process.md | 129 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 126 insertions(+), 3 deletions(-) diff --git a/docs/docs/rfc-process.md b/docs/docs/rfc-process.md index ed44c82c156d5..3051fec96af05 100644 --- a/docs/docs/rfc-process.md +++ b/docs/docs/rfc-process.md @@ -2,7 +2,130 @@ title: RFC process --- -This is a stub. Help our community expand it. +## What is the RFC process? -Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your -pull request gets accepted. +Many changes, including bug fixes and documentation improvements can be +implemented and reviewed via the normal GitHub pull request workflow. + +Some changes, however, are "substantial", and we ask that these be put through +a bit of a design process and produce a consensus among the Gatsby core team. + +The "RFC" (request for comments) process is intended to provide a consistent +and controlled path for new features to enter the project. + +[Active RFC List](https://github.com/gatsbyjs/rfcs/pulls) + +Gatsby is still **actively developing** this process, and it will still change +as more features are implemented and the community settles on specific +approaches to feature development. + +## When to follow this process + +You should consider using this process if you intend to make "substantial" +changes to Gatsby or its documentation. Some examples that would benefit from +an RFC are: + +- A new feature that creates new API surface area, and would + require a feature flag if introduced. +- The removal of features that already shipped as part of the release + channel. +- The introduction of new idiomatic usage or conventions, even if they + do not include code changes to Gatsby itself. + +The RFC process is a great opportunity to get more eyeballs on your proposal +before it becomes a part of a released version of Gatsby. Quite often, even +proposals that seem "obvious" can be significantly improved once a wider group +of interested people have a chance to weigh in. + +The RFC process can also be helpful to encourage discussions about a proposed +feature as it is being designed, and incorporate important constraints into the +design while it's easier to change, before the design has been fully +implemented. + +Some changes do not require an RFC: + +- Rephrasing, reorganizing or refactoring addition or removal of warnings +- Additions that strictly improve objective, numerical quality + criteria (speedup, better browser support) +- Additions only likely to be _noticed by_ other implementors-of-Gatsby, + invisible to users-of-Gatsby. + +## What the process is + +In short, to get a major feature added to Gatsby, one usually first gets the +RFC merged into the RFC repo as a markdown file. At that point the RFC is +'active' and may be implemented with the goal of eventual inclusion into +Gatsby. + +- Fork the RFC repo http://github.com/gatsbyjs/rfcs Copy `0000-template.md` to +- `text/0000-my-feature.md` (where + 'my-feature' is descriptive. Don't assign an RFC number yet). +- Fill in the RFC. Put care into the details: **RFCs that do not + present convincing motivation, demonstrate understanding of the impact of the + design, or are disingenuous about the drawbacks or alternatives tend to be + poorly-received**. +- Submit a pull request. As a pull request the RFC will receive design + feedback from the larger community, and the author should be prepared to revise + it in response. +- Build consensus and integrate feedback. RFCs that have broad support + are much more likely to make progress than those that don't receive any + comments. +- Eventually, the team will decide whether the RFC is a candidate + for inclusion in Gatsby. +- RFCs that are candidates for inclusion in Gatsby will enter a "final comment + period" lasting 3 calendar days. The beginning of this period will be signaled + with a comment and tag on the RFCs pull request. +- An RFC can be modified based upon feedback from the team and community. + Significant modifications may trigger a new final comment period. +- An RFC may be rejected by the team after public discussion has settled + and comments have been made summarizing the rationale for rejection. A member + of the team should then close the RFCs associated pull request. +- An RFC may be accepted at the close of its final comment period. A team + member will merge the RFCs associated pull request, at which point the RFC will + become 'active'. + +## The RFC life-cycle + +Once an RFC becomes active, then authors may implement it and submit the +feature as a pull request to the Gatsby repo. Becoming 'active' is not a rubber +stamp, and in particular still does not mean the feature will ultimately be +merged; it does mean that the core team has agreed to it in principle and are +amenable to merging it. + +Furthermore, the fact that a given RFC has been accepted and is 'active' +implies nothing about what priority is assigned to its implementation, nor +whether anybody is currently working on it. + +Modifications to active RFCs can be done in followup PRs. We strive to write +each RFC in a manner that it will reflect the final design of the feature; but +the nature of the process means that we cannot expect every merged RFC to +actually reflect what the end result will be at the time of the next major +release; therefore we try to keep each RFC document somewhat in sync with the +language feature as planned, tracking such changes via followup pull requests +to the document. + +## Implementing an RFC + +The author of an RFC is not obligated to implement it. Of course, the RFC +author (like any other developer) is welcome to post an implementation for +review after the RFC has been accepted. + +If you are interested in working on the implementation for an 'active' RFC, but +cannot determine if someone else is already working on it, feel free to ask +(e.g. by leaving a comment on the associated issue). + +## Reviewing RFCs + +Each week the team will attempt to review some set of open RFC pull requests. + +We try to make sure that any RFC that we accept is accepted at the weekly team +meeting. Every accepted feature should have a core team champion, who will +represent the feature and its progress. + +**Gatsby's RFC process owes its inspiration to the [React RFC process], [Yarn +RFC process], [Rust RFC process], and [Ember RFC process]** + +[react rfc process]: https://github.com/reactjs/rfcs +[yarn rfc process]: https://github.com/yarnpkg/rfcs +[rust rfc process]: https://github.com/rust-lang/rfcs +[ember rfc process]: https://github.com/emberjs/rfcs From 92f3790641f2b46f79a422184c6e657506bce6d4 Mon Sep 17 00:00:00 2001 From: Florian Kissling <21834+fk@users.noreply.github.com> Date: Wed, 26 Sep 2018 03:58:03 +0200 Subject: [PATCH 05/12] [www] Site/Starter Showcase refactor, rinse II (#8411) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [www] Site/Starter Showcase refactor, rinse II * fix #7754 - change the Starter Showcase main content headline from "All 60 Starters" to “Gatsby Starters (60)” * DRY — add a couple of shared components: * ResetFilters button * SidebarContainer, SidebarHeader, SidebarBody * ContentHeader with title („Starters“/„Sites“) and count, adjusting title on filter and search * link Creator Showcase detail page GitHub icon * Revert minor stuff to resolve merge conflicts --- www/src/views/shared/reset-filters.js | 35 ++++ www/src/views/shared/sidebar.js | 67 ++++++ www/src/views/shared/styles.js | 65 +++++- www/src/views/showcase/filtered-showcase.js | 96 +++------ www/src/views/showcase/filters.js | 87 ++------ www/src/views/showcase/showcase-list.js | 16 +- .../starter-showcase/filtered-showcase.js | 191 +++--------------- 7 files changed, 236 insertions(+), 321 deletions(-) create mode 100644 www/src/views/shared/reset-filters.js create mode 100644 www/src/views/shared/sidebar.js diff --git a/www/src/views/shared/reset-filters.js b/www/src/views/shared/reset-filters.js new file mode 100644 index 0000000000000..19c8d0c090f22 --- /dev/null +++ b/www/src/views/shared/reset-filters.js @@ -0,0 +1,35 @@ +import React from "react" +import MdClear from "react-icons/lib/md/clear" + +import { options, scale, rhythm } from "../../utils/typography" +import presets, { colors } from "../../utils/presets" + +const ResetFilters = ({ onClick }) => ( +
+ +
+) + +export default ResetFilters diff --git a/www/src/views/shared/sidebar.js b/www/src/views/shared/sidebar.js new file mode 100644 index 0000000000000..637db20e4c480 --- /dev/null +++ b/www/src/views/shared/sidebar.js @@ -0,0 +1,67 @@ +import React from "react" +import { merge, css } from "glamor" +import MdFilterList from "react-icons/lib/md/filter-list" +import styles from "../shared/styles" + +export const SidebarContainer = ({ children }) => ( +
{children}
+) + +export const SidebarBody = ({ children }) => ( +
{children}
+) + +export const SidebarHeader = () => ( +

+ Filter & Refine + {` `} + + + +

+) + +export const ContentContainer = ({ children }) => ( +
{children}
+) + +export const ContentHeader = ({ children }) => ( +
{children}
+) + +export const ContentTitle = ({ + search, + items, + filters, + edges, + label, + // todo smooth that out ("Starters" uses "size") + what = `length`, +}) => ( +

+ {search.length === 0 ? ( + filters[what] === 0 ? ( + // no search or filters + + {label}s ({edges.length}) + + ) : ( + + {items.length} + {` `} + {filters[what] === 1 && filters.values()[0]} + {` `} + {label} + {items.length > 1 && `s`} + {` `} + (filtered) + + ) + ) : ( + + {items.length} search result + {items.length !== 1 && `s`} + + )} +

+) diff --git a/www/src/views/shared/styles.js b/www/src/views/shared/styles.js index a56eb089c1df5..c0fe4e9041e9f 100644 --- a/www/src/views/shared/styles.js +++ b/www/src/views/shared/styles.js @@ -141,7 +141,7 @@ const styles = { }, }, meta: { - ...scale(-1 / 5), + ...scale(-1 / 4), alignItems: `baseline`, "&&": { color: colors.gray.bright, @@ -198,6 +198,69 @@ const styles = { filterCount: { color: colors.gray.bright, }, + sidebarHeader: { + margin: 0, + [presets.Desktop]: { + ...scale(1 / 8), + // display: `flex`, + display: `none`, + borderBottom: `1px solid ${colors.ui.light}`, + color: colors.gray.calm, + fontWeight: `normal`, + flexShrink: 0, + lineHeight: 1, + height: presets.headerHeight, + margin: 0, + paddingLeft: rhythm(3 / 4), + paddingRight: rhythm(3 / 4), + paddingTop: rhythm(options.blockMarginBottom), + paddingBottom: rhythm(options.blockMarginBottom), + }, + }, + sidebarBody: { + paddingLeft: rhythm(3 / 4), + height: `calc(100vh - ((${presets.headerHeight}) + ${ + presets.bannerHeight + }))`, + display: `flex`, + flexDirection: `column`, + }, + sidebarContainer: { + display: `none`, + [presets.Desktop]: { + // background: colors.ui.whisper, + display: `block`, + flexBasis: `15rem`, + minWidth: `15rem`, + paddingTop: 0, + borderRight: `1px solid ${colors.ui.light}`, + height: `calc(100vh - (${presets.headerHeight} + ${ + presets.bannerHeight + }))`, + }, + }, + contentHeader: { + alignItems: `center`, + background: `rgba(255,255,255,0.98)`, + // background: colors.ui.whisper, + borderBottom: `1px solid ${colors.ui.light}`, + display: `flex`, + flexDirection: `row`, + height: presets.headerHeight, + paddingLeft: `${rhythm(3 / 4)}`, + paddingRight: `${rhythm(3 / 4)}`, + zIndex: 1, + }, + contentTitle: { + color: colors.gatsby, + margin: 0, + ...scale(1 / 5), + lineHeight: 1, + }, + resultCount: { + color: colors.lilac, + fontWeight: `normal`, + }, } export default styles diff --git a/www/src/views/showcase/filtered-showcase.js b/www/src/views/showcase/filtered-showcase.js index 8c7f72369bb41..30e400460a3bd 100644 --- a/www/src/views/showcase/filtered-showcase.js +++ b/www/src/views/showcase/filtered-showcase.js @@ -7,9 +7,13 @@ import ShowcaseList from "./showcase-list" import Filters from "./filters" import SearchIcon from "../../components/search-icon" import Button from "../../components/button" -import { rhythm, scale } from "../../utils/typography" -import presets, { colors } from "../../utils/presets" +import { colors } from "../../utils/presets" import URLQuery from "../../components/url-query" +import { + ContentHeader, + ContentTitle, + ContentContainer, +} from "../shared/sidebar" const filterByCategories = (list, categories) => { const items = list.reduce((aggregated, edge) => { @@ -101,71 +105,21 @@ class FilteredShowcase extends Component { return (
-
- -
-
-
-

- {this.state.search.length === 0 ? ( - filters.length === 0 ? ( - - All {data.allSitesYaml.edges.length} Showcase Sites - - ) : ( - - {items.length} - {` `} - {filters.length === 1 && filters.values()[0]} - {` `} - Sites - - ) - ) : ( - {items.length} search results - )} -

+ + + +
-
+ @@ -212,7 +164,7 @@ class FilteredShowcase extends Component { Load More )} -
+
) }} diff --git a/www/src/views/showcase/filters.js b/www/src/views/showcase/filters.js index 3dd23f7ab9f5e..5345e422a527b 100644 --- a/www/src/views/showcase/filters.js +++ b/www/src/views/showcase/filters.js @@ -1,11 +1,8 @@ import React from "react" import CollapsibleFilterList from "./collapsible-filter-list" -import MdFilterList from "react-icons/lib/md/filter-list" -import MdClear from "react-icons/lib/md/clear" - -import { options, scale, rhythm } from "../../utils/typography" -import presets, { colors } from "../../utils/presets" +import { SidebarHeader, SidebarBody, SidebarContainer } from "../shared/sidebar" +import ResetFilters from "../shared/reset-filters" const Filters = ({ filters, @@ -13,75 +10,17 @@ const Filters = ({ aggregatedCategories, updateQuery, }) => ( -
-

- Filter & Refine - {` `} - - - -

-
+ + + {filters.length > 0 && ( -
{ + updateQuery(() => { + return { filters: [] } + }) }} - > - -
+ /> )} -
-
+ + ) export default Filters diff --git a/www/src/views/showcase/showcase-list.js b/www/src/views/showcase/showcase-list.js index 6a1cd0077dab8..227a52992e49a 100644 --- a/www/src/views/showcase/showcase-list.js +++ b/www/src/views/showcase/showcase-list.js @@ -17,11 +17,7 @@ const ShowcaseList = ({ items, count }) => { if (count) items = items.slice(0, count) return ( -
+
{items.map( ({ node }) => node.fields && @@ -80,11 +76,7 @@ const ShowcaseList = ({ items, count }) => {
{node.featured && ( { icon )} diff --git a/www/src/views/starter-showcase/filtered-showcase.js b/www/src/views/starter-showcase/filtered-showcase.js index 737a2e7014c7d..471ff96465a9d 100644 --- a/www/src/views/starter-showcase/filtered-showcase.js +++ b/www/src/views/starter-showcase/filtered-showcase.js @@ -1,12 +1,9 @@ import React, { Component } from "react" import SearchIcon from "../../components/search-icon" -import MdFilterList from "react-icons/lib/md/filter-list" -import MdClear from "react-icons/lib/md/clear" import MdArrowDownward from "react-icons/lib/md/arrow-downward" -import MdArrowForward from "react-icons/lib/md/arrow-forward" import MdSort from "react-icons/lib/md/sort" -import { options, scale, rhythm } from "../../utils/typography" +import { options, rhythm } from "../../utils/typography" import presets, { colors } from "../../utils/presets" import styles from "../shared/styles" @@ -14,6 +11,15 @@ import styles from "../shared/styles" import LHSFilter from "./lhs-filter" import ShowcaseList from "./showcase-list" import Button from "../../components/button" +import { + SidebarHeader, + SidebarBody, + SidebarContainer, + ContentHeader, + ContentTitle, + ContentContainer, +} from "../shared/sidebar" +import ResetFilters from "../shared/reset-filters" export default class FilteredShowcase extends Component { state = { @@ -28,6 +34,7 @@ export default class FilteredShowcase extends Component { sort: this.props.urlState.sort === `recent` ? `stars` : `recent`, }) resetFilters = () => this.props.setURLState({ c: null, d: null, s: `` }) + render() { const { data, urlState, setURLState } = this.props const { @@ -71,93 +78,12 @@ export default class FilteredShowcase extends Component { } return ( -
-
-

- Filter & Refine - {` `} - - - -

-
+
+ + + {(filters.size > 0 || urlState.s.length > 0) && ( // search is a filter too https://gatsbyjs.slack.com/archives/CB4V648ET/p1529224551000008 -
- -
+ )} -
-
-
-
-

- {urlState.s.length === 0 ? ( - filters.size === 0 ? ( - - All {data.allMarkdownRemark.edges.length} Starters - - ) : ( - - {items.length} - {` `} - {filters.size === 1 && filters.values()[0]} - {` `} - Sites - - ) - ) : ( - {items.length} search results - )} -

+ + + + +
-
-
+ )} -
+
) } From d2a8302170f6fc60b2ba3007c62a20494fde9d67 Mon Sep 17 00:00:00 2001 From: Lipis Date: Wed, 26 Sep 2018 13:05:07 +0300 Subject: [PATCH 06/12] chore: remove npm-run-all dep and update deps in e2e tests (#8529) --- integration-tests/gatsby-image/package.json | 27 +++++++++---------- integration-tests/path-prefix/package.json | 19 +++++++------ .../production-runtime/package.json | 11 ++++---- 3 files changed, 27 insertions(+), 30 deletions(-) diff --git a/integration-tests/gatsby-image/package.json b/integration-tests/gatsby-image/package.json index 7773525176081..8668768e01f30 100644 --- a/integration-tests/gatsby-image/package.json +++ b/integration-tests/gatsby-image/package.json @@ -5,16 +5,16 @@ "author": "Kyle Mathews ", "dependencies": { "cypress": "^3.1.0", - "gatsby": "next", - "gatsby-image": "^2.0.5", - "gatsby-plugin-manifest": "next", - "gatsby-plugin-offline": "next", - "gatsby-plugin-react-helmet": "next", - "gatsby-plugin-sharp": "^2.0.0-rc.7", - "gatsby-source-filesystem": "next", - "gatsby-transformer-sharp": "^2.1.1-rc.3", - "react": "^16.4.2", - "react-dom": "^16.4.2", + "gatsby": "latest", + "gatsby-image": "latest", + "gatsby-plugin-manifest": "latest", + "gatsby-plugin-offline": "latest", + "gatsby-plugin-react-helmet": "latest", + "gatsby-plugin-sharp": "latest", + "gatsby-source-filesystem": "latest", + "gatsby-transformer-sharp": "latest", + "react": "^16.5.2", + "react-dom": "^16.5.2", "react-helmet": "^5.2.0" }, "keywords": [ @@ -25,16 +25,15 @@ "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write '**/*.js'", - "test": "npm-run-all -s build start-server-and-test", + "test": "npm run build && npm run start-server-and-test", "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run", "serve": "gatsby serve", "cy:open": "cypress open", "cy:run": "cypress run --browser chrome" }, "devDependencies": { - "npm-run-all": "^4.1.3", - "prettier": "^1.14.2", - "start-server-and-test": "^1.7.0" + "prettier": "^1.14.3", + "start-server-and-test": "^1.7.1" }, "repository": { "type": "git", diff --git a/integration-tests/path-prefix/package.json b/integration-tests/path-prefix/package.json index 2a806dc9830ec..87eb1dc517e2f 100644 --- a/integration-tests/path-prefix/package.json +++ b/integration-tests/path-prefix/package.json @@ -5,12 +5,12 @@ "author": "Kyle Mathews ", "dependencies": { "cypress": "^3.1.0", - "gatsby": "^2.0.6", - "gatsby-plugin-manifest": "next", - "gatsby-plugin-offline": "next", - "gatsby-plugin-react-helmet": "next", - "react": "^16.4.2", - "react-dom": "^16.4.2", + "gatsby": "latest", + "gatsby-plugin-manifest": "latest", + "gatsby-plugin-offline": "latest", + "gatsby-plugin-react-helmet": "latest", + "react": "^16.5.2", + "react-dom": "^16.5.2", "react-helmet": "^5.2.0" }, "keywords": [ @@ -21,16 +21,15 @@ "build": "gatsby build --prefix-paths", "develop": "gatsby develop", "format": "prettier --write '**/*.js'", - "test": "npm-run-all -s build start-server-and-test", + "test": "npm run build && npm run start-server-and-test", "start-server-and-test": "start-server-and-test serve http://localhost:9000/blog cy:run", "serve": "gatsby serve --prefix-paths", "cy:open": "cypress open", "cy:run": "cypress run --browser chrome" }, "devDependencies": { - "npm-run-all": "^4.1.3", - "prettier": "^1.14.2", - "start-server-and-test": "^1.7.0" + "prettier": "^1.14.3", + "start-server-and-test": "^1.7.1" }, "repository": { "type": "git", diff --git a/integration-tests/production-runtime/package.json b/integration-tests/production-runtime/package.json index 3ebfcde1c3af5..49594e179cd0e 100644 --- a/integration-tests/production-runtime/package.json +++ b/integration-tests/production-runtime/package.json @@ -9,8 +9,8 @@ "gatsby-plugin-manifest": "latest", "gatsby-plugin-offline": "latest", "gatsby-plugin-react-helmet": "latest", - "react": "^16.4.2", - "react-dom": "^16.4.2", + "react": "^16.5.2", + "react-dom": "^16.5.2", "react-helmet": "^5.2.0" }, "keywords": [ @@ -21,16 +21,15 @@ "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write '**/*.js'", - "test": "npm-run-all -s build start-server-and-test", + "test": "npm run build && npm run start-server-and-test", "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run", "serve": "gatsby serve", "cy:open": "cypress open", "cy:run": "cypress run --browser chrome" }, "devDependencies": { - "npm-run-all": "^4.1.3", - "prettier": "^1.14.2", - "start-server-and-test": "^1.7.0" + "prettier": "^1.14.3", + "start-server-and-test": "^1.7.1" }, "repository": { "type": "git", From 3e48ea91cc8cd96b7bac2bf9cd0f61f34a9fad87 Mon Sep 17 00:00:00 2001 From: Mike Allanson Date: Wed, 26 Sep 2018 11:38:30 +0100 Subject: [PATCH 07/12] chore(release): Publish - gatsby-image@2.0.10 - gatsby-link@2.0.2 - gatsby-plugin-manifest@2.0.4 - gatsby-plugin-react-css-modules@2.0.1 - gatsby-plugin-styletron@3.0.1 - gatsby-remark-images-contentful@2.0.2 - gatsby-remark-images@2.0.3 - gatsby-remark-prismjs@3.0.1 - gatsby-source-drupal@3.0.1 - gatsby-transformer-remark@2.1.4 - gatsby@2.0.9 --- packages/gatsby-image/CHANGELOG.md | 6 ++++++ packages/gatsby-image/package.json | 2 +- packages/gatsby-link/CHANGELOG.md | 9 +++++++++ packages/gatsby-link/package.json | 2 +- packages/gatsby-plugin-manifest/CHANGELOG.md | 6 ++++++ packages/gatsby-plugin-manifest/package.json | 2 +- packages/gatsby-plugin-react-css-modules/CHANGELOG.md | 6 ++++++ packages/gatsby-plugin-react-css-modules/package.json | 2 +- packages/gatsby-plugin-styletron/CHANGELOG.md | 6 ++++++ packages/gatsby-plugin-styletron/package.json | 2 +- packages/gatsby-remark-images-contentful/CHANGELOG.md | 6 ++++++ packages/gatsby-remark-images-contentful/package.json | 2 +- packages/gatsby-remark-images/CHANGELOG.md | 6 ++++++ packages/gatsby-remark-images/package.json | 2 +- packages/gatsby-remark-prismjs/CHANGELOG.md | 8 ++++++++ packages/gatsby-remark-prismjs/package.json | 2 +- packages/gatsby-source-drupal/CHANGELOG.md | 6 ++++++ packages/gatsby-source-drupal/package.json | 2 +- packages/gatsby-transformer-remark/CHANGELOG.md | 6 ++++++ packages/gatsby-transformer-remark/package.json | 2 +- packages/gatsby/CHANGELOG.md | 8 ++++++++ packages/gatsby/package.json | 4 ++-- 22 files changed, 85 insertions(+), 12 deletions(-) diff --git a/packages/gatsby-image/CHANGELOG.md b/packages/gatsby-image/CHANGELOG.md index e60515b09a8f1..278654f902672 100644 --- a/packages/gatsby-image/CHANGELOG.md +++ b/packages/gatsby-image/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. + + +## [2.0.10](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image/compare/gatsby-image@2.0.9...gatsby-image@2.0.10) (2018-09-26) + +**Note:** Version bump only for package gatsby-image + ## [2.0.9](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image/compare/gatsby-image@2.0.8...gatsby-image@2.0.9) (2018-09-24) diff --git a/packages/gatsby-image/package.json b/packages/gatsby-image/package.json index 62c7a9e312aeb..218f1740d7f75 100644 --- a/packages/gatsby-image/package.json +++ b/packages/gatsby-image/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-image", "description": "Lazy-loading React image component with optional support for the blur-up effect.", - "version": "2.0.9", + "version": "2.0.10", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-link/CHANGELOG.md b/packages/gatsby-link/CHANGELOG.md index 04df8df3ec4fd..4c9927e666357 100644 --- a/packages/gatsby-link/CHANGELOG.md +++ b/packages/gatsby-link/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +## [2.0.2](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/compare/gatsby-link@2.0.1...gatsby-link@2.0.2) (2018-09-26) + +### Bug Fixes + +- **gatsby-link:** use path prefix in navigate/replace/push calls ([#8289](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/issues/8289)) ([df3ac18](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/commit/df3ac18)), closes [#8155](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/issues/8155) +- scroll behaviour when navigating back to anchor on the same page ([#8061](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/issues/8061)) ([ef44cff](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/commit/ef44cff)) + ## [2.0.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link/compare/gatsby-link@2.0.0-rc.4...gatsby-link@2.0.1) (2018-09-17) diff --git a/packages/gatsby-link/package.json b/packages/gatsby-link/package.json index ce62e9e186b71..7866e268eacc7 100644 --- a/packages/gatsby-link/package.json +++ b/packages/gatsby-link/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-link", "description": "An enhanced Link component for Gatsby sites with support for resource prefetching", - "version": "2.0.1", + "version": "2.0.2", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-plugin-manifest/CHANGELOG.md b/packages/gatsby-plugin-manifest/CHANGELOG.md index aa7b3db11d4ff..49962bed1e3c5 100644 --- a/packages/gatsby-plugin-manifest/CHANGELOG.md +++ b/packages/gatsby-plugin-manifest/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. + + +## [2.0.4](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest/compare/gatsby-plugin-manifest@2.0.3...gatsby-plugin-manifest@2.0.4) (2018-09-26) + +**Note:** Version bump only for package gatsby-plugin-manifest + ## [2.0.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest/compare/gatsby-plugin-manifest@2.0.2-rc.1...gatsby-plugin-manifest@2.0.3) (2018-09-24) diff --git a/packages/gatsby-plugin-manifest/package.json b/packages/gatsby-plugin-manifest/package.json index ec1433b4d663b..f4e4151e106e3 100644 --- a/packages/gatsby-plugin-manifest/package.json +++ b/packages/gatsby-plugin-manifest/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-manifest", "description": "Gatsby plugin which adds a manifest.webmanifest to make sites progressive web apps", - "version": "2.0.3", + "version": "2.0.4", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-plugin-react-css-modules/CHANGELOG.md b/packages/gatsby-plugin-react-css-modules/CHANGELOG.md index 6bd2522ced04f..880d136aae584 100644 --- a/packages/gatsby-plugin-react-css-modules/CHANGELOG.md +++ b/packages/gatsby-plugin-react-css-modules/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. + + +## [2.0.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-css-modules/compare/gatsby-plugin-react-css-modules@2.0.0...gatsby-plugin-react-css-modules@2.0.1) (2018-09-26) + +**Note:** Version bump only for package gatsby-plugin-react-css-modules + # [2.0.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-css-modules/compare/gatsby-plugin-react-css-modules@2.0.0-rc.5...gatsby-plugin-react-css-modules@2.0.0) (2018-09-17) diff --git a/packages/gatsby-plugin-react-css-modules/package.json b/packages/gatsby-plugin-react-css-modules/package.json index a98bfac32367c..0f9f93edd80e5 100644 --- a/packages/gatsby-plugin-react-css-modules/package.json +++ b/packages/gatsby-plugin-react-css-modules/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-react-css-modules", "description": "Gatsby plugin that transforms styleName to className using compile time CSS module resolution", - "version": "2.0.0", + "version": "2.0.1", "author": "Ming Aldrich-Gan ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-plugin-styletron/CHANGELOG.md b/packages/gatsby-plugin-styletron/CHANGELOG.md index 015e4571a45a5..41f883bdaf8d3 100644 --- a/packages/gatsby-plugin-styletron/CHANGELOG.md +++ b/packages/gatsby-plugin-styletron/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. + + +## [3.0.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-styletron/compare/gatsby-plugin-styletron@3.0.0...gatsby-plugin-styletron@3.0.1) (2018-09-26) + +**Note:** Version bump only for package gatsby-plugin-styletron + # [3.0.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-styletron/compare/gatsby-plugin-styletron@3.0.0-rc.1...gatsby-plugin-styletron@3.0.0) (2018-09-17) diff --git a/packages/gatsby-plugin-styletron/package.json b/packages/gatsby-plugin-styletron/package.json index 1031a590f1e92..276bebc2a48e6 100644 --- a/packages/gatsby-plugin-styletron/package.json +++ b/packages/gatsby-plugin-styletron/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-styletron", "description": "A Gatsby plugin for styletron with built-in server-side rendering support", - "version": "3.0.0", + "version": "3.0.1", "author": "Nadiia Dmytrenko ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-remark-images-contentful/CHANGELOG.md b/packages/gatsby-remark-images-contentful/CHANGELOG.md index 06b12d1d5a5a2..99adb428cb4c9 100644 --- a/packages/gatsby-remark-images-contentful/CHANGELOG.md +++ b/packages/gatsby-remark-images-contentful/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. + + +## [2.0.2](https://github.com/gatsbyjs/gatsby/compare/gatsby-remark-images-contentful@2.0.1...gatsby-remark-images-contentful@2.0.2) (2018-09-26) + +**Note:** Version bump only for package gatsby-remark-images-contentful + ## [2.0.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-remark-images-contentful@2.0.0-rc.6...gatsby-remark-images-contentful@2.0.1) (2018-09-24) diff --git a/packages/gatsby-remark-images-contentful/package.json b/packages/gatsby-remark-images-contentful/package.json index 74b79de5bca91..ad5822701145c 100644 --- a/packages/gatsby-remark-images-contentful/package.json +++ b/packages/gatsby-remark-images-contentful/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-remark-images-contentful", - "version": "2.0.1", + "version": "2.0.2", "description": "Process Images in Contentful markdown so they can use the images API.", "main": "index.js", "scripts": { diff --git a/packages/gatsby-remark-images/CHANGELOG.md b/packages/gatsby-remark-images/CHANGELOG.md index 0dce7bde3e67f..929dd5d082dc2 100644 --- a/packages/gatsby-remark-images/CHANGELOG.md +++ b/packages/gatsby-remark-images/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. + + +## [2.0.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images/compare/gatsby-remark-images@2.0.2...gatsby-remark-images@2.0.3) (2018-09-26) + +**Note:** Version bump only for package gatsby-remark-images + ## [2.0.2](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images/compare/gatsby-remark-images@2.0.1-rc.5...gatsby-remark-images@2.0.2) (2018-09-24) diff --git a/packages/gatsby-remark-images/package.json b/packages/gatsby-remark-images/package.json index 08968a988cc57..0d21f862ce907 100644 --- a/packages/gatsby-remark-images/package.json +++ b/packages/gatsby-remark-images/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-remark-images", "description": "Processes images in markdown so they can be used in the production build.", - "version": "2.0.2", + "version": "2.0.3", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-remark-prismjs/CHANGELOG.md b/packages/gatsby-remark-prismjs/CHANGELOG.md index f1f0bef798959..9f14d69748da2 100644 --- a/packages/gatsby-remark-prismjs/CHANGELOG.md +++ b/packages/gatsby-remark-prismjs/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. + + +## [3.0.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs/compare/gatsby-remark-prismjs@3.0.0...gatsby-remark-prismjs@3.0.1) (2018-09-26) + +### Features + +- add noInlineHighlight option ([#7554](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs/issues/7554)) ([f7c07f7](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs/commit/f7c07f7)) + # [3.0.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs/compare/gatsby-remark-prismjs@3.0.0-rc.2...gatsby-remark-prismjs@3.0.0) (2018-09-17) diff --git a/packages/gatsby-remark-prismjs/package.json b/packages/gatsby-remark-prismjs/package.json index 8e533bde1859b..b3ec859abfab0 100644 --- a/packages/gatsby-remark-prismjs/package.json +++ b/packages/gatsby-remark-prismjs/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-remark-prismjs", "description": "Adds syntax highlighting to code blocks at build time using PrismJS", - "version": "3.0.0", + "version": "3.0.1", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-source-drupal/CHANGELOG.md b/packages/gatsby-source-drupal/CHANGELOG.md index c151acb20c763..c25dfa84de83f 100644 --- a/packages/gatsby-source-drupal/CHANGELOG.md +++ b/packages/gatsby-source-drupal/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. + + +## [3.0.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@2.2.0...gatsby-source-drupal@3.0.1) (2018-09-26) + +**Note:** Version bump only for package gatsby-source-drupal + # [2.2.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-drupal/compare/gatsby-source-drupal@2.2.0-rc.6...gatsby-source-drupal@2.2.0) (2018-09-17) diff --git a/packages/gatsby-source-drupal/package.json b/packages/gatsby-source-drupal/package.json index 5ce422baf58b0..38c6f8ec641f9 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.0.0", + "version": "3.0.1", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby-transformer-remark/CHANGELOG.md b/packages/gatsby-transformer-remark/CHANGELOG.md index 4f3b9e9efda76..970e0cb15df92 100644 --- a/packages/gatsby-transformer-remark/CHANGELOG.md +++ b/packages/gatsby-transformer-remark/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. + + +## [2.1.4](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark/compare/gatsby-transformer-remark@2.1.3...gatsby-transformer-remark@2.1.4) (2018-09-26) + +**Note:** Version bump only for package gatsby-transformer-remark + ## [2.1.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark/compare/gatsby-transformer-remark@2.1.2...gatsby-transformer-remark@2.1.3) (2018-09-18) diff --git a/packages/gatsby-transformer-remark/package.json b/packages/gatsby-transformer-remark/package.json index 4e1c8948e4896..a9fdee07122ae 100644 --- a/packages/gatsby-transformer-remark/package.json +++ b/packages/gatsby-transformer-remark/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-transformer-remark", "description": "Gatsby transformer plugin for Markdown using the Remark library and ecosystem", - "version": "2.1.3", + "version": "2.1.4", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby/CHANGELOG.md b/packages/gatsby/CHANGELOG.md index 3cf8990d5514d..9d27a1c910cd4 100644 --- a/packages/gatsby/CHANGELOG.md +++ b/packages/gatsby/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.9](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.0.8...gatsby@2.0.9) (2018-09-26) + +### Bug Fixes + +- scroll behaviour when navigating back to anchor on the same page ([#8061](https://github.com/gatsbyjs/gatsby/issues/8061)) ([ef44cff](https://github.com/gatsbyjs/gatsby/commit/ef44cff)) + ## [2.0.8](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.0.7...gatsby@2.0.8) (2018-09-24) diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 79f6df7bbcebb..52d8984b537c1 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.0.8", + "version": "2.0.9", "author": "Kyle Mathews ", "bin": { "gatsby": "./dist/bin/gatsby.js" @@ -62,7 +62,7 @@ "friendly-errors-webpack-plugin": "^1.6.1", "fs-extra": "^5.0.0", "gatsby-cli": "^2.4.1", - "gatsby-link": "^2.0.0-rc.4", + "gatsby-link": "^2.0.2", "gatsby-plugin-page-creator": "^2.0.0", "gatsby-react-router-scroll": "^2.0.0", "glob": "^7.1.1", From b52c51f6d4b67135c1950354149e2c4bb7d85446 Mon Sep 17 00:00:00 2001 From: Mike Allanson Date: Wed, 26 Sep 2018 14:07:04 +0100 Subject: [PATCH 08/12] Delete cds-takeaways.md (#8552) I think this got deleted before, but has crept back in..? --- cds-takeaways.md | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 cds-takeaways.md diff --git a/cds-takeaways.md b/cds-takeaways.md deleted file mode 100644 index e4f46abf5f5cb..0000000000000 --- a/cds-takeaways.md +++ /dev/null @@ -1,8 +0,0 @@ -- preload at top of page for resources ala flipkart -- marketing points — cost of aquisition, boosts from switching - to PWA. -- sites to copy — NASA website + polymer shop but for Packard cars -- On GraphQL errors — print the query plus where it came from and give - them the link to debug it in GraphiQL -- AggressiveSplitPlugin — limit max chunk size to 250kb. -- SW render-dom-stream and stream HTML to browser. From cd780aaa2b71157ba2ceaadc377991406b6f4127 Mon Sep 17 00:00:00 2001 From: Corey Ward Date: Wed, 26 Sep 2018 09:32:00 -0500 Subject: [PATCH 09/12] fix: don't expect `application/json` type nodes to be files (#8544) --- packages/gatsby-transformer-json/README.md | 10 +- .../__snapshots__/gatsby-node.js.snap | 145 ++++++++++- .../src/__tests__/gatsby-node.js | 232 +++++++++++------- .../src/gatsby-node.js | 7 +- 4 files changed, 290 insertions(+), 104 deletions(-) diff --git a/packages/gatsby-transformer-json/README.md b/packages/gatsby-transformer-json/README.md index f842ba02380e7..6a4410afc6d87 100644 --- a/packages/gatsby-transformer-json/README.md +++ b/packages/gatsby-transformer-json/README.md @@ -7,7 +7,7 @@ arrays of objects and single objects. `npm install --save gatsby-transformer-json` -You also need to have `gatsby-source-filesystem` installed and configured so it +If you want to transform json files, you also need to have `gatsby-source-filesystem` installed and configured so it points to your files. ## How to use @@ -182,15 +182,15 @@ or a function that receives the following arguments: [ { "level": "info", - "message": "hurray", + "message": "hurray" }, { "level": "info", - "message": "it works", + "message": "it works" }, { "level": "warning", - "message": "look out", + "message": "look out" } ] ``` @@ -201,7 +201,7 @@ module.exports = { { resolve: `gatsby-transformer-json`, options: { - typeName: (({ node, object, isArray }) => object.level), + typeName: ({ node, object, isArray }) => object.level, }, }, ], diff --git a/packages/gatsby-transformer-json/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-transformer-json/src/__tests__/__snapshots__/gatsby-node.js.snap index 9becd805297ba..be488f0d4c8d0 100644 --- a/packages/gatsby-transformer-json/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-transformer-json/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -41,7 +41,7 @@ Array [ "internal": Object { "contentDigest": "whatever", "mediaType": "application/json", - "name": "test", + "type": "File", }, "name": "nodeName", "parent": "SOURCE", @@ -51,6 +51,55 @@ Array [ ] `; +exports[`Process JSON nodes correctly correctly creates a node from JSON which is a single object and doesn't come from fs 1`] = ` +Array [ + Array [ + Object { + "blue": true, + "children": Array [], + "funny": "yup", + "id": "foo", + "internal": Object { + "contentDigest": "8838e569ae02d98806532310fb2a577a", + "type": "NotFileJson", + }, + "parent": "whatever", + }, + ], +] +`; + +exports[`Process JSON nodes correctly correctly creates a node from JSON which is a single object and doesn't come from fs 2`] = ` +Array [ + Array [ + Object { + "child": Object { + "blue": true, + "children": Array [], + "funny": "yup", + "id": "foo", + "internal": Object { + "contentDigest": "8838e569ae02d98806532310fb2a577a", + "type": "NotFileJson", + }, + "parent": "whatever", + }, + "parent": Object { + "children": Array [], + "content": "{\\"id\\":\\"foo\\",\\"blue\\":true,\\"funny\\":\\"yup\\"}", + "id": "whatever", + "internal": Object { + "contentDigest": "whatever", + "mediaType": "application/json", + "type": "NotFile", + }, + "parent": "SOURCE", + }, + }, + ], +] +`; + exports[`Process JSON nodes correctly correctly creates nodes from JSON which is an array of objects 1`] = ` Array [ Array [ @@ -100,11 +149,12 @@ Array [ "parent": Object { "children": Array [], "content": "[{\\"id\\":\\"foo\\",\\"blue\\":true,\\"funny\\":\\"yup\\"},{\\"blue\\":false,\\"funny\\":\\"nope\\"}]", + "dir": "/tmp/foo/", "id": "whatever", "internal": Object { "contentDigest": "whatever", "mediaType": "application/json", - "name": "test", + "type": "File", }, "name": "nodeName", "parent": "SOURCE", @@ -127,11 +177,12 @@ Array [ "parent": Object { "children": Array [], "content": "[{\\"id\\":\\"foo\\",\\"blue\\":true,\\"funny\\":\\"yup\\"},{\\"blue\\":false,\\"funny\\":\\"nope\\"}]", + "dir": "/tmp/foo/", "id": "whatever", "internal": Object { "contentDigest": "whatever", "mediaType": "application/json", - "name": "test", + "type": "File", }, "name": "nodeName", "parent": "SOURCE", @@ -140,3 +191,91 @@ Array [ ], ] `; + +exports[`Process JSON nodes correctly correctly creates nodes from JSON which is an array of objects and doesn't come from fs 1`] = ` +Array [ + Array [ + Object { + "blue": true, + "children": Array [], + "funny": "yup", + "id": "foo", + "internal": Object { + "contentDigest": "8838e569ae02d98806532310fb2a577a", + "type": "NotFileJson", + }, + "parent": "whatever", + }, + ], + Array [ + Object { + "blue": false, + "children": Array [], + "funny": "nope", + "id": "uuid-from-gatsby", + "internal": Object { + "contentDigest": "f624311d932d73dcd416d2a8bea2b67d", + "type": "NotFileJson", + }, + "parent": "whatever", + }, + ], +] +`; + +exports[`Process JSON nodes correctly correctly creates nodes from JSON which is an array of objects and doesn't come from fs 2`] = ` +Array [ + Array [ + Object { + "child": Object { + "blue": true, + "children": Array [], + "funny": "yup", + "id": "foo", + "internal": Object { + "contentDigest": "8838e569ae02d98806532310fb2a577a", + "type": "NotFileJson", + }, + "parent": "whatever", + }, + "parent": Object { + "children": Array [], + "content": "[{\\"id\\":\\"foo\\",\\"blue\\":true,\\"funny\\":\\"yup\\"},{\\"blue\\":false,\\"funny\\":\\"nope\\"}]", + "id": "whatever", + "internal": Object { + "contentDigest": "whatever", + "mediaType": "application/json", + "type": "NotFile", + }, + "parent": "SOURCE", + }, + }, + ], + Array [ + Object { + "child": Object { + "blue": false, + "children": Array [], + "funny": "nope", + "id": "uuid-from-gatsby", + "internal": Object { + "contentDigest": "f624311d932d73dcd416d2a8bea2b67d", + "type": "NotFileJson", + }, + "parent": "whatever", + }, + "parent": Object { + "children": Array [], + "content": "[{\\"id\\":\\"foo\\",\\"blue\\":true,\\"funny\\":\\"yup\\"},{\\"blue\\":false,\\"funny\\":\\"nope\\"}]", + "id": "whatever", + "internal": Object { + "contentDigest": "whatever", + "mediaType": "application/json", + "type": "NotFile", + }, + "parent": "SOURCE", + }, + }, + ], +] +`; diff --git a/packages/gatsby-transformer-json/src/__tests__/gatsby-node.js b/packages/gatsby-transformer-json/src/__tests__/gatsby-node.js index 6d4ba82dd16b9..809677c8b545d 100644 --- a/packages/gatsby-transformer-json/src/__tests__/gatsby-node.js +++ b/packages/gatsby-transformer-json/src/__tests__/gatsby-node.js @@ -2,41 +2,72 @@ const Promise = require(`bluebird`) const { onCreateNode } = require(`../gatsby-node`) +// Make some fake functions its expecting. +const loadNodeContent = node => Promise.resolve(node.content) + +const bootstrapTest = async (node, pluginOptions = {}) => { + const createNode = jest.fn() + const createParentChildLink = jest.fn() + const actions = { createNode, createParentChildLink } + const createNodeId = jest.fn() + createNodeId.mockReturnValue(`uuid-from-gatsby`) + + return await onCreateNode( + { + node, + loadNodeContent, + actions, + createNodeId, + }, + pluginOptions + ).then(() => { + return { + createNode, + createParentChildLink, + } + }) +} + describe(`Process JSON nodes correctly`, () => { - const node = { - name: `nodeName`, + const baseNode = { id: `whatever`, parent: `SOURCE`, children: [], internal: { contentDigest: `whatever`, mediaType: `application/json`, - name: `test`, }, } - // Make some fake functions its expecting. - const loadNodeContent = node => Promise.resolve(node.content) + const baseFileNode = { + ...baseNode, + name: `nodeName`, + dir: `/tmp/foo/`, + internal: { + ...baseNode.internal, + type: `File`, + }, + } + + const baseNonFileNode = { + ...baseNode, + internal: { + ...baseNode.internal, + type: `NotFile`, + }, + } it(`correctly creates nodes from JSON which is an array of objects`, async () => { const data = [ { id: `foo`, blue: true, funny: `yup` }, { blue: false, funny: `nope` }, ] - node.content = JSON.stringify(data) + const node = { + ...baseFileNode, + content: JSON.stringify(data), + } - const createNode = jest.fn() - const createParentChildLink = jest.fn() - const actions = { createNode, createParentChildLink } - const createNodeId = jest.fn() - createNodeId.mockReturnValue(`uuid-from-gatsby`) - - await onCreateNode({ - node, - loadNodeContent, - actions, - createNodeId, - }).then(() => { + return bootstrapTest(node).then(({ createNode, createParentChildLink }) => { expect(createNode.mock.calls).toMatchSnapshot() expect(createParentChildLink.mock.calls).toMatchSnapshot() expect(createNode).toHaveBeenCalledTimes(2) @@ -46,21 +77,12 @@ describe(`Process JSON nodes correctly`, () => { it(`correctly creates a node from JSON which is a single object`, async () => { const data = { id: `foo`, blue: true, funny: `yup` } - node.content = JSON.stringify(data) - node.dir = `/tmp/foo/` + const node = { + ...baseFileNode, + content: JSON.stringify(data), + } - const createNode = jest.fn() - const createParentChildLink = jest.fn() - const actions = { createNode, createParentChildLink } - const createNodeId = jest.fn() - createNodeId.mockReturnValue(`uuid-from-gatsby`) - - await onCreateNode({ - node, - loadNodeContent, - actions, - createNodeId, - }).then(() => { + return bootstrapTest(node).then(({ createNode, createParentChildLink }) => { expect(createNode.mock.calls).toMatchSnapshot() expect(createParentChildLink.mock.calls).toMatchSnapshot() expect(createNode).toHaveBeenCalledTimes(1) @@ -79,46 +101,41 @@ describe(`Process JSON nodes correctly`, () => { expectedNodeTypes: [`fixed`, `fixed`], }, { - typeName: (({ node, object }) => object.funny), + typeName: ({ node, object }) => object.funny, expectedNodeTypes: [`yup`, `nope`], }, - ].forEach(async ({ typeName, expectedNodeTypes: [expectedOne, expectedTwo] }) => { - const data = [ - { id: `foo`, blue: true, funny: `yup` }, - { blue: false, funny: `nope` }, - ] - node.content = JSON.stringify(data) - - const createNode = jest.fn() - const createParentChildLink = jest.fn() - const actions = { createNode, createParentChildLink } - const createNodeId = jest.fn() - createNodeId.mockReturnValue(`uuid-from-gatsby`) - - await onCreateNode({ - node, - loadNodeContent, - actions, - createNodeId, - }, { - typeName, - }).then(() => { - expect(createNode).toBeCalledWith( - expect.objectContaining({ - internal: expect.objectContaining({ - type: expectedOne, - }), - }) - ) - expect(createNode).toBeCalledWith( - expect.objectContaining({ - internal: expect.objectContaining({ - type: expectedTwo, - }), - }) + ].forEach( + async ({ typeName, expectedNodeTypes: [expectedOne, expectedTwo] }) => { + const data = [ + { id: `foo`, blue: true, funny: `yup` }, + { blue: false, funny: `nope` }, + ] + + const node = { + ...baseFileNode, + content: JSON.stringify(data), + } + + return bootstrapTest(node, { typeName }).then( + ({ createNode, createParentChildLink }) => { + expect(createNode).toBeCalledWith( + expect.objectContaining({ + internal: expect.objectContaining({ + type: expectedOne, + }), + }) + ) + expect(createNode).toBeCalledWith( + expect.objectContaining({ + internal: expect.objectContaining({ + type: expectedTwo, + }), + }) + ) + } ) - }) - }) + } + ) }) it(`correctly sets node type for single object`, async () => { @@ -132,36 +149,61 @@ describe(`Process JSON nodes correctly`, () => { expectedNodeType: `fixed`, }, { - typeName: (({ node, object }) => object.funny), + typeName: ({ node, object }) => object.funny, expectedNodeType: `yup`, }, ].forEach(async ({ typeName, expectedNodeType }) => { const data = { id: `foo`, blue: true, funny: `yup` } - node.content = JSON.stringify(data) - node.dir = `/tmp/foo/` - - const createNode = jest.fn() - const createParentChildLink = jest.fn() - const actions = { createNode, createParentChildLink } - const createNodeId = jest.fn() - createNodeId.mockReturnValue(`uuid-from-gatsby`) - - await onCreateNode({ - node, - loadNodeContent, - actions, - createNodeId, - }, { - typeName, - }).then(() => { - expect(createNode).toBeCalledWith( - expect.objectContaining({ - internal: expect.objectContaining({ - type: expectedNodeType, - }), - }) - ) - }) + + const node = { + ...baseFileNode, + content: JSON.stringify(data), + } + + return bootstrapTest(node, { typeName }).then( + ({ createNode, createParentChildLink }) => { + expect(createNode).toBeCalledWith( + expect.objectContaining({ + internal: expect.objectContaining({ + type: expectedNodeType, + }), + }) + ) + } + ) + }) + }) + + it(`correctly creates nodes from JSON which is an array of objects and doesn't come from fs`, async () => { + const data = [ + { id: `foo`, blue: true, funny: `yup` }, + { blue: false, funny: `nope` }, + ] + const node = { + ...baseNonFileNode, + content: JSON.stringify(data), + } + + return bootstrapTest(node).then(({ createNode, createParentChildLink }) => { + expect(createNode.mock.calls).toMatchSnapshot() + expect(createParentChildLink.mock.calls).toMatchSnapshot() + expect(createNode).toHaveBeenCalledTimes(2) + expect(createParentChildLink).toHaveBeenCalledTimes(2) + }) + }) + + it(`correctly creates a node from JSON which is a single object and doesn't come from fs`, async () => { + const data = { id: `foo`, blue: true, funny: `yup` } + const node = { + ...baseNonFileNode, + content: JSON.stringify(data), + } + + return bootstrapTest(node).then(({ createNode, createParentChildLink }) => { + expect(createNode.mock.calls).toMatchSnapshot() + expect(createParentChildLink.mock.calls).toMatchSnapshot() + expect(createNode).toHaveBeenCalledTimes(1) + expect(createParentChildLink).toHaveBeenCalledTimes(1) }) }) }) diff --git a/packages/gatsby-transformer-json/src/gatsby-node.js b/packages/gatsby-transformer-json/src/gatsby-node.js index d7d55243d53f3..a499e0282a596 100644 --- a/packages/gatsby-transformer-json/src/gatsby-node.js +++ b/packages/gatsby-transformer-json/src/gatsby-node.js @@ -2,12 +2,17 @@ const _ = require(`lodash`) const crypto = require(`crypto`) const path = require(`path`) -async function onCreateNode({ node, actions, loadNodeContent, createNodeId }, pluginOptions) { +async function onCreateNode( + { node, actions, loadNodeContent, createNodeId }, + pluginOptions +) { function getType({ node, object, isArray }) { if (pluginOptions && _.isFunction(pluginOptions.typeName)) { return pluginOptions.typeName({ node, object, isArray }) } else if (pluginOptions && _.isString(pluginOptions.typeName)) { return pluginOptions.typeName + } else if (node.internal.type !== `File`) { + return _.upperFirst(_.camelCase(`${node.internal.type} Json`)) } else if (isArray) { return _.upperFirst(_.camelCase(`${node.name} Json`)) } else { From c42924ab237c4eb784142b3fb2e8d9a768d73810 Mon Sep 17 00:00:00 2001 From: David Bailey <4248177+davidbailey00@users.noreply.github.com> Date: Wed, 26 Sep 2018 15:56:46 +0100 Subject: [PATCH 10/12] fix: fix displaying and hydrating 404 page in production builds (#8510) * Use 404 resources in EnsureResources if the page doesn't exist * Revert most changes to EnsureResources and refactor sync 404 handling * Use longhand if * Fix potential bugs with getResourcesForPathnameSync * Make sure resources exists before checking its path --- packages/gatsby/cache-dir/ensure-resources.js | 13 +++--- .../gatsby/cache-dir/load-directly-or-404.js | 41 +++++++++++-------- packages/gatsby/cache-dir/loader.js | 2 + packages/gatsby/cache-dir/navigation.js | 13 +++--- packages/gatsby/cache-dir/production-app.js | 19 ++++----- 5 files changed, 48 insertions(+), 40 deletions(-) diff --git a/packages/gatsby/cache-dir/ensure-resources.js b/packages/gatsby/cache-dir/ensure-resources.js index cbc8c63b2d845..c94146cd181c0 100644 --- a/packages/gatsby/cache-dir/ensure-resources.js +++ b/packages/gatsby/cache-dir/ensure-resources.js @@ -2,6 +2,7 @@ import React from "react" import PropTypes from "prop-types" import loader from "./loader" import shallowCompare from "shallow-compare" +import { getRedirectUrl } from "./load-directly-or-404" // Pass pathname in as prop. // component will try fetching resources. If they exist, @@ -97,15 +98,11 @@ class EnsureResources extends React.Component { process.env.NODE_ENV === `production` && !(this.state.pageResources && this.state.pageResources.json) ) { - // Try to load the page directly - this should result in a 404 or - // network offline error. - const url = new URL(window.location) - if (url.search) { - url.search += `&no-cache=1` - } else { - url.search = `?no-cache=1` + // This should only occur if there's no custom 404 page + const url = getRedirectUrl(this.state.location.href) + if (url) { + window.location.replace(url) } - window.location.replace(url) return null } diff --git a/packages/gatsby/cache-dir/load-directly-or-404.js b/packages/gatsby/cache-dir/load-directly-or-404.js index 5c0c137417a14..2a40d5a001d38 100644 --- a/packages/gatsby/cache-dir/load-directly-or-404.js +++ b/packages/gatsby/cache-dir/load-directly-or-404.js @@ -1,3 +1,26 @@ +export function getRedirectUrl(path) { + const url = new URL(path, window.location.origin) + + // This should never happen, but check just in case - otherwise, there would + // be an infinite redirect loop + if (url.search.match(/\?(.*&)?no-cache=1(&|$)/)) { + console.log( + `Found no-cache=1 while attempting to load a page directly; ` + + `this is likely due to a bug in Gatsby, or a misconfiguration in your project.` + ) + return false + } + + // Append the appropriate query to the URL. + if (url.search) { + url.search += `&no-cache=1` + } else { + url.search = `?no-cache=1` + } + + return url +} + /** * When other parts of the code can't find resources for a page, they load the 404 page's * resources (if it exists) and then pass them here. This module then does the following: @@ -12,22 +35,8 @@ */ export default function(resources, path, replaceOnSuccess = false) { return new Promise((resolve, reject) => { - const url = new URL(window.location.origin + path) - - if (url.search.match(/\?(.*&)?no-cache=1(&|$)/)) { - console.log( - `Found no-cache=1 while attempting to load a page directly; ` + - `this is likely due to a bug in Gatsby, or a misconfiguration in your project.` - ) - return reject() - } - - // Append the appropriate query to the URL. - if (url.search) { - url.search += `&no-cache=1` - } else { - url.search = `?no-cache=1` - } + const url = getRedirectUrl(path) + if (!url) return reject(url) // Always navigate directly if a custom 404 page doesn't exist. if (!resources) { diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index 34bba67c1c2b8..1f0e1c7e6cc0b 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -257,6 +257,8 @@ const queue = { const page = findPage(path) if (page) { return pathScriptsCache[page.path] + } else if (path !== `/404.html`) { + return queue.getResourcesForPathnameSync(`/404.html`) } else { return null } diff --git a/packages/gatsby/cache-dir/navigation.js b/packages/gatsby/cache-dir/navigation.js index 08655cc472bfa..081a4e2e74d39 100644 --- a/packages/gatsby/cache-dir/navigation.js +++ b/packages/gatsby/cache-dir/navigation.js @@ -89,11 +89,14 @@ const navigate = (to, options = {}) => { }, 1000) loader.getResourcesForPathname(pathname).then(pageResources => { - if (!pageResources && process.env.NODE_ENV === `production`) { - loader.getResourcesForPathname(`/404.html`).then(resources => { - clearTimeout(timeoutId) - loadDirectlyOr404(resources, to).then(() => reachNavigate(to, options)) - }) + if ( + (!pageResources || pageResources.page.path === `/404.html`) && + process.env.NODE_ENV === `production` + ) { + clearTimeout(timeoutId) + loadDirectlyOr404(pageResources, to).then(() => + reachNavigate(to, options) + ) } else { reachNavigate(to, options) clearTimeout(timeoutId) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index c691a582d4793..0b4f1ad661009 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -80,18 +80,15 @@ apiRunnerAsync(`onClientEntry`).then(() => { loader .getResourcesForPathname(browserLoc.pathname) - .then(() => { - if (!loader.getPage(browserLoc.pathname)) { - return loader - .getResourcesForPathname(`/404.html`) - .then(resources => - loadDirectlyOr404( - resources, - browserLoc.pathname + browserLoc.search + browserLoc.hash, - true - ) - ) + .then(resources => { + if (!resources || resources.page.path === `/404.html`) { + return loadDirectlyOr404( + resources, + browserLoc.pathname + browserLoc.search + browserLoc.hash, + true + ) } + return null }) .then(() => { From 24ad2e5668166e27ff82505f38b2354d61717ddd Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Wed, 26 Sep 2018 08:04:16 -0700 Subject: [PATCH 11/12] fix: add ecosystem team for starters YAML MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This file doesn’t exist on `master` yet, but it will once @amberleyromo’s PR #8320 gets merged. --- CODEOWNERS | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CODEOWNERS b/CODEOWNERS index ae980454a3721..b4e86c862022f 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -15,5 +15,8 @@ appveyor.yml @gatsbyjs/core .github/ @gatsbyjs/core +# The ecosystem files are error-prone, so we require an extra set of eyes on them. +/docs/starters.yml @gatsbyjs/ecosystem + # The website auto-deploys, so we need an extra check to avoid shenanigans. /www/ @gatsbyjs/website From 0658f0bbec8f5fbfb770dc5bd368165116e5b7db Mon Sep 17 00:00:00 2001 From: David Bailey <4248177+davidbailey00@users.noreply.github.com> Date: Wed, 26 Sep 2018 16:08:43 +0100 Subject: [PATCH 12/12] feat(cache-dir): Add a button for custom 404s in development (#8548) - Pass the `JSONStore` to the dev 404 page if `404.html` exists (since the 404 page will be rendered here) - Detect whether there's a custom 404 page and if so, add a button to display it - otherwise, instruct the user how to create one Fixes #8234 --- docs/docs/add-404-page.md | 4 +-- packages/gatsby/cache-dir/root.js | 28 +++++++++++++++---- .../dev-404-page/raw_dev-404-page.js | 27 +++++++++++++++++- 3 files changed, 50 insertions(+), 9 deletions(-) diff --git a/docs/docs/add-404-page.md b/docs/docs/add-404-page.md index f36e8c472e5bb..a12883a50d767 100644 --- a/docs/docs/add-404-page.md +++ b/docs/docs/add-404-page.md @@ -12,5 +12,5 @@ site another way, you'll need to setup a custom rule to serve this file for 404 errors. When developing, Gatsby adds a default 404 page that overrides your custom 404 -page. But you can still visit the exact url for your 404 page to verify it's -working as expected. +page. But you can still preview your 404 page by clicking "Preview custom 404 +page" to verify it's working as expected. diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js index 4d3ba9604bcbf..40e4e6d87d81e 100644 --- a/packages/gatsby/cache-dir/root.js +++ b/packages/gatsby/cache-dir/root.js @@ -76,12 +76,28 @@ class RouteHandler extends React.Component { ) } else { const dev404Page = pages.find(p => /^\/dev-404-page\/?$/.test(p.path)) - return createElement( - syncRequires.components[dev404Page.componentChunkName], - { - pages, - ...this.props, - } + const custom404 = locationAndPageResources => + loader.getPage(`/404.html`) ? ( + + ) : null + + return ( + + {locationAndPageResources => + createElement( + syncRequires.components[dev404Page.componentChunkName], + { + pages, + custom404: custom404(locationAndPageResources), + ...this.props, + } + ) + } + ) } } diff --git a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js index 827811f980c57..91fa272be4fb5 100644 --- a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js +++ b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js @@ -5,8 +5,20 @@ import { Link } from "gatsby" class Dev404Page extends React.Component { static propTypes = { pages: PropTypes.arrayOf(PropTypes.object), + custom404: PropTypes.element, location: PropTypes.object, } + + constructor(props) { + super(props) + this.state = { showCustom404: false } + this.showCustom404 = this.showCustom404.bind(this) + } + + showCustom404() { + this.setState({ showCustom404: true }) + } + render() { const { pathname } = this.props.location const pages = this.props.pages.filter( @@ -20,13 +32,26 @@ class Dev404Page extends React.Component { } else { newFilePath = `src/pages${pathname}.js` } - return ( + + return this.state.showCustom404 ? ( + this.props.custom404 + ) : (

Gatsby.js development 404 page

{`There's not a page yet at `} {pathname}

+ {this.props.custom404 ? ( +

+ +

+ ) : ( +

+ {`A custom 404 page wasn't detected - if you would like to add one, create a component in your site directory at `} + src/pages/404.js. +

+ )}

Create a React.js component in your site directory at {` `}