From ecf189ea879ee201fd417adc4164bb1ce03a0d11 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:27:34 -0800 Subject: [PATCH 1/8] Commit git conflicts --- docs/contributing/organize-a-gatsby-event.md | 8 + docs/docs/add-404-page.md | 14 +- docs/docs/add-custom-webpack-config.md | 19 + docs/docs/adding-search-with-elasticlunr.md | 5 + docs/docs/audit-with-lighthouse.md | 4 + docs/docs/babel.md | 20 +- docs/docs/browser-support.md | 31 +- docs/docs/building-an-e-commerce-site.md | 13 + docs/docs/bulma.md | 6 +- docs/docs/gatsby-cli.md | 4 + docs/docs/gatsby-lifecycle-apis.md | 38 +- ...y-source-filesystem-programmatic-import.md | 9 - docs/docs/how-shadowing-works.md | 384 ++++++++++++++++++ docs/docs/index.md | 9 + .../mdx/programmatically-creating-pages.md | 19 +- docs/docs/path-prefix.md | 14 + docs/docs/preparing-your-environment.md | 6 + docs/docs/quick-start.md | 10 + docs/docs/sourcing-from-buttercms.md | 6 +- docs/docs/typography-js.md | 6 + docs/docs/upgrading-node-js.md | 4 + docs/docs/using-graphql-playground.md | 16 + docs/tutorial/using-a-theme.md | 4 + .../wordpress-source-plugin-tutorial.md | 8 +- 24 files changed, 592 insertions(+), 65 deletions(-) delete mode 100644 docs/docs/gatsby-source-filesystem-programmatic-import.md create mode 100644 docs/docs/how-shadowing-works.md diff --git a/docs/contributing/organize-a-gatsby-event.md b/docs/contributing/organize-a-gatsby-event.md index d48042c..bc97f00 100644 --- a/docs/contributing/organize-a-gatsby-event.md +++ b/docs/contributing/organize-a-gatsby-event.md @@ -2,14 +2,19 @@ title: Organize a Gatsby Event --- +<<<<<<< HEAD Interested in organizing a Gatsby event? We want to help build the Gatsby community in your area. If your event meets a few basic requirements listed below, you’ll be eligible to receive support from Gatsby such as Gatsby swag, \$300 for food, learning resources, and more. Get started by requesting event support below. [Request Event Support](https://airtable.com/shrpwc99yogJm9sfI) +======= +Our communiy event support offerings and process are undergoing some changes. Check back soon to see our updated community event support opportunities! +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ## What constitutes a Gatsby event? A community organized Gatsby event can be a local meetup, a small conference, a _lunch and learn_ with coworkers, or a larger event. It’s up to you how many people you want to invite and how casual the environment. You can organize an event at your workplace or for the local community. +<<<<<<< HEAD ## What support does Gatsby provide? There are several ways Gatsby may support your event: @@ -35,5 +40,8 @@ To request support and submit your event to the Gatsby events page, apply at the [Request Event Support](https://airtable.com/shrpwc99yogJm9sfI) ## Related Links: +======= +## Related Links +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc - [Gatsby's Community Events](/contributing/events/) diff --git a/docs/docs/add-404-page.md b/docs/docs/add-404-page.md index a74801d..83c8073 100644 --- a/docs/docs/add-404-page.md +++ b/docs/docs/add-404-page.md @@ -2,6 +2,7 @@ title: "Добавление страницы 404" --- +<<<<<<< HEAD Для добавления страницы 404 создайте страницу, путь которой соответствует регулярному выражению `^\/?404\/?$` (`/404/`, `/404`, `404/` или `404`). Как правило, React-компонент для такой страницы будет находиться по пути `src/pages/404.js`. @@ -18,10 +19,17 @@ Gatsby позаботится о том, чтобы 404 страница был которая переопределяет вашу страницу 404. Тем не менее, вы всё равно можете посмотреть вашу страницу 404, нажав "Preview custom 404 page", чтобы убедиться, что она корректно отображается. Это удобно во время разработки, потому что можно посмотреть все доступные страницы. +======= +To create a 404 page create a page whose path matches the regex `^\/?404\/?$` (`/404/`, `/404`, `404/` or `404`). Most often you'll want to create a React component page at `src/pages/404.js`. -The screenshot below shows the default 404 page that Gatsby creates. -It also lists out all the pages on your website. Clicking the "Preview custom 404 -page" button will allow you to view the 404 page you created. +Gatsby ensures that your 404 page is built as `404.html` as many static hosting platforms default to using this as your 404 error page. If you're hosting your site another way you'll need to set up a custom rule to serve this file for 404 errors. + +Because Gatsby creates this page for you by default, there is no need to configure it in your `gatsby-node.js` file. + +When developing using `gatsby develop`, Gatsby uses a default 404 page that overrides your custom 404 page. However, you can still preview your 404 page by clicking "Preview custom 404 page" to verify that it's working as expected. This is useful when you're developing so that you can see all the available pages. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc + +The screenshot below shows the default 404 page that Gatsby creates. It also lists out all the pages on your website. Clicking the "Preview custom 404 page" button will allow you to view the 404 page you created. ![Gatsby Default 404 Page](./images/gatsby-default-404.png) The screenshot below shows the custom 404 page. diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md index 838a299..eaa9ac7 100644 --- a/docs/docs/add-custom-webpack-config.md +++ b/docs/docs/add-custom-webpack-config.md @@ -2,6 +2,7 @@ title: "Добавление пользовательской конфигурации webpack" --- +<<<<<<< HEAD _Перед созданием пользовательского файла конфигурации Webpack поищите уже готовый Gatsby-плагин, который решает вашу проблему, в [разделе плагинов](/docs/plugins/). Если ничего найти не удалось, а ваш случай @@ -35,6 +36,24 @@ Gatsby генерирует ряд webpack-сборок с несколько о например, [Sass](/packages/gatsby-plugin-sass/), [TypeScript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/) и многих других! +======= +_Before creating custom webpack configuration, check to see if there's a Gatsby plugin already built that handles your use case in the [plugins section](/docs/plugins/). If there's not yet one and your use case is a general one, it is highly encouraged you to contribute back your plugin to the Gatsby Plugin Library so it's available to others (including your future self)._ + +To add custom webpack configurations, create (if there's not one already) a `gatsby-node.js` file in your root directory. Inside this file, export a function called `onCreateWebpackConfig`. + +When Gatsby creates its webpack config, this function will be called allowing you to modify the default webpack config using [webpack-merge](https://github.com/survivejs/webpack-merge). + +Gatsby does multiple webpack builds with somewhat different configuration. Gatsby calls each build type a "stage". The following stages exist: + +1. develop: when running the `gatsby develop` command. Has configuration for hot reloading and CSS injection into page +2. develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component. +3. build-javascript: production JavaScript and CSS build. Creates route JS bundles as well as common chunks for JS and CSS. +4. build-html: production build static HTML pages + +Check [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) for the source. + +There are many plugins in the Gatsby repo using this API to look to for examples e.g. [Sass](/packages/gatsby-plugin-sass/), [TypeScript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/), and many more! +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ## Примеры diff --git a/docs/docs/adding-search-with-elasticlunr.md b/docs/docs/adding-search-with-elasticlunr.md index 3dbb42c..84475b2 100644 --- a/docs/docs/adding-search-with-elasticlunr.md +++ b/docs/docs/adding-search-with-elasticlunr.md @@ -1,5 +1,10 @@ --- +<<<<<<< HEAD title: Adding search with elasticlunr +======= +title: Adding Search with Elasticlunr +issue: https://github.com/gatsbyjs/gatsby/issues/21066 +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc --- This is a stub. Help our community expand it. diff --git a/docs/docs/audit-with-lighthouse.md b/docs/docs/audit-with-lighthouse.md index f51fd58..545c507 100644 --- a/docs/docs/audit-with-lighthouse.md +++ b/docs/docs/audit-with-lighthouse.md @@ -26,7 +26,11 @@ gatsby build gatsby serve ``` +<<<<<<< HEAD Как только команда запустится, вы можете посмотреть сайт по адресу `localhost:9000`. +======= +Once this starts, you can now view your site at `http://localhost:9000`. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ### Запуск аудита с помощью Lighthouse diff --git a/docs/docs/babel.md b/docs/docs/babel.md index 6829dec..b9cbf19 100644 --- a/docs/docs/babel.md +++ b/docs/docs/babel.md @@ -2,29 +2,25 @@ title: Babel --- -Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable -support for writing modern JavaScript — while still supporting older browsers. +Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable support for writing modern JavaScript — while still supporting older browsers. ## How to specify which browsers to support -Gatsby supports by default the last two versions of major browsers, IE 9+, as well as -any browser that still has 1%+ browser share. +Gatsby supports by default the last two versions of major browsers, IE 9+, as well as any browser that still has 1%+ browser share. +<<<<<<< HEAD This means we automatically compile your JavaScript to ensure it works on older browsers. We also automatically add polyfills as needed — no more shipping code which mysteriously breaks on older browsers! +======= +This means that your JavaScript is automatically compiled to ensure it works on older browsers. Polyfills are also automatically added — no more shipping code which mysteriously breaks on older browsers! +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc -If you only target newer browsers, see the [Browser -Support](/docs/browser-support/) docs page for how to instruct Gatsby on which -browsers you support and then Babel will start compiling for only these -browsers. +If you only target newer browsers, see the [Browser Support](/docs/browser-support/) docs page for how to instruct Gatsby on which browsers you support and then Babel will start compiling for only these browsers. ## How to use a custom .babelrc file -Gatsby ships with a default .babelrc setup that should work for most sites. If you'd like -to add custom Babel presets or plugins, you can create your own `.babelrc` at the root of -your site, import [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby), -and add additional plugins, presets, and pass options to `babel-preset-gatsby`, e.g. `targets`. +Gatsby ships with a default .babelrc setup that should work for most sites. If you'd like to add custom Babel presets or plugins, you can create your own `.babelrc` at the root of your site, import [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby), and add additional plugins, presets, and pass options to `babel-preset-gatsby`, e.g. `targets`. ```shell npm install --save-dev babel-preset-gatsby diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index fdbdafe..2ed2e8e 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -2,36 +2,21 @@ title: Browser Support --- -Gatsby supports -[the same browsers as the current stable version of React.js](https://facebook.github.io/react/docs/react-dom.html#browser-support) -which is currently IE9+ as well as the most recent versions of other popular -browsers. +Gatsby supports [the same browsers as the current stable version of React.js](https://facebook.github.io/react/docs/react-dom.html#browser-support) which is currently IE9+ as well as the most recent versions of other popular browsers. ## Polyfills -Gatsby leverages Babel 7's ability to automatically add polyfills for your -target browsers. +Gatsby leverages Babel 7's ability to automatically add polyfills for your target browsers. -Newer browsers support more JavaScript APIs than older browsers. For older -versions, Gatsby (via Babel) automatically adds the minimum "polyfills" -necessary for your code to work in those browsers. +Newer browsers support more JavaScript APIs than older browsers. For older versions, Gatsby (via Babel) automatically adds the minimum "polyfills" necessary for your code to work in those browsers. -If you start using a newer JavaScript API like `[].includes` that isn't -supported by some of your targeted browsers, you won't have to worry about it -breaking the older browsers as Babel will automatically add the needed polyfill -`core-js/modules/es7.array.includes`. +If you start using a newer JavaScript API like `[].includes` that isn't supported by some of your targeted browsers, you won't have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill `core-js/modules/es7.array.includes`. ## Specify what browsers your project supports using "Browserslist" -You may customize your list of supported browser versions by declaring a -[`"browserslist"`](https://github.com/ai/browserslist) key within your -`package.json`. Changing these values will modify your JavaScript (via -[`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) -and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) -output. +You may customize your list of supported browser versions by declaring a [`"browserslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via[`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output. -This article is a good introduction to the growing community of tools around -Browserslist — https://css-tricks.com/browserlist-good-idea/ +This article is a good introduction to the growing community of tools around Browserslist — https://css-tricks.com/browserlist-good-idea/ By default, Gatsby emulates the following config: @@ -41,6 +26,7 @@ By default, Gatsby emulates the following config: } ``` +<<<<<<< HEAD If you only support newer browsers, make sure to specify this in your `package.json`. This will often enable you to ship smaller JavaScript files. @@ -49,3 +35,6 @@ If you only support newer browsers, make sure to specify this in your React depends on collection types `Map` and `Set`. While these are not used by Gatsby, Gatsby uses React and you will need to polyfill these if you support older browsers and devices including IE < 11. Read more about this in [ReactJS Docs - JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html) +======= +If you only support newer browsers, make sure to specify this in your `package.json`. This will often enable you to ship smaller JavaScript files. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc diff --git a/docs/docs/building-an-e-commerce-site.md b/docs/docs/building-an-e-commerce-site.md index bcd3c7d..550eb58 100644 --- a/docs/docs/building-an-e-commerce-site.md +++ b/docs/docs/building-an-e-commerce-site.md @@ -1,4 +1,5 @@ --- +<<<<<<< HEAD title: Building an e-commerce site --- @@ -6,3 +7,15 @@ This is a stub. Help our community expand it. Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your pull request gets accepted. +======= +title: Building an e-commerce Site +--- + +The speed and performance of sites built with Gatsby make it a great tool for building e-commerce sites. There are existing plugins for connecting services like [Shopify](/packages/gatsby-source-shopify/) and [Snipcart](/packages/gatsby-plugin-snipcart/) to Gatsby, and this section contains reference guides to help get things setup. + +To see examples of e-commerce sites built with Gatsby, check out the [showcase](/showcase/?filters%5B0%5D=eCommerce). + + + +_You can also check out the ["Making an e-commerce Site with Stripe" tutorial](/tutorial/ecommerce-tutorial/) for more information._ +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc diff --git a/docs/docs/bulma.md b/docs/docs/bulma.md index 203fc16..61d0b59 100644 --- a/docs/docs/bulma.md +++ b/docs/docs/bulma.md @@ -22,7 +22,7 @@ plugins: [`gatsby-plugin-sass`], Now is the time to create a scss-file that holds our simple style customisation and the import statement for bulma. -(To keep things simple, insert the file next to index.js in the pages-directory) +(To keep things simple, insert the file next to `index.js` in the pages-directory) ```scss:title=mystyles.scss @charset "utf-8"; @@ -37,7 +37,11 @@ $title-color: #ff0000; The last step is to import the style and use it. +<<<<<<< HEAD Let's replace the default contents of the index.js file. +======= +Replace the default contents of the `index.js` file. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ```jsx:title=index.js import React from "react" diff --git a/docs/docs/gatsby-cli.md b/docs/docs/gatsby-cli.md index ab5019a..48746d3 100644 --- a/docs/docs/gatsby-cli.md +++ b/docs/docs/gatsby-cli.md @@ -81,7 +81,11 @@ You can now view gatsbyjs.org in the browser. On Your Network: http://192.168.0.212:8000/ // highlight-line ``` +<<<<<<< HEAD **Примечание**: вы не можете посетить 0.0.0.0:8000 в Windows (но всё будет работать с использованием localhost:8000 или "On Your Network" URL в Windows) +======= +**Note**: To access Gatsby on your local machine, use either `http://localhost:8000` or the "On Your Network" URL. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ### `build` diff --git a/docs/docs/gatsby-lifecycle-apis.md b/docs/docs/gatsby-lifecycle-apis.md index d578e4e..a2fb6e2 100644 --- a/docs/docs/gatsby-lifecycle-apis.md +++ b/docs/docs/gatsby-lifecycle-apis.md @@ -2,8 +2,6 @@ title: Gatsby Lifecycle APIs --- -import LayerModel from "../../www/src/components/layer-model" - Gatsby provides a rich set of lifecycle APIs to hook into its bootstrap, build, and client runtime operations. @@ -23,22 +21,34 @@ The following model gives a conceptual overview of how data is sourced and trans ## Bootstrap sequence -During "bootstrap" Gatsby: - -- reads `gatsby-config.js` to load in your list of plugins -- initializes its cache (stored in `/.cache`) -- pulls in and preprocesses data ("source and transform nodes") into a GraphQL schema -- creates pages in memory - - from your `/pages` folder - - from your `gatsby-node.js` if you implement `createPages`/`createPagesStatefully` (e.g. templates) - - from any plugins that implement `createPages`/`createPagesStatefully` -- extracts, runs, and replaces graphql queries for pages and `StaticQuery`s -- writes out the pages to cache +During the main bootstrap sequence, Gatsby (in this order): + +- reads and validates `gatsby-config.js` to load in your list of plugins (it doesn't run them yet). +- deletes HTML and CSS files from previous builds (public folder) +- initializes its cache (stored in `/.cache`) and checks if any plugins have been updated since the last run, if so it deletes the cache +- sets up `gatsby-browser` and `gatsby-ssr` for plugins that have them +- starts main bootstrap process + - runs [onPreBootstrap](/docs/node-apis/#onPreBootstrap). e.g. implemented by [`gatsby-plugin-typography`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typography/src/gatsby-node.js) +- runs [sourceNodes](/docs/node-apis/#sourceNodes) e.g. implemented by [`gatsby-source-wikipedia`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wikipedia/src/gatsby-node.js) + - within this, `createNode` can be called multiple times, which then triggers [onCreateNode](/docs/node-apis/#onCreateNode) +- creates initial GraphQL schema +- runs [resolvableExtensions](/docs/node-apis/#resolvableExtensions) which lets plugins register file types or extensions e.g. [`gatsby-plugin-typescript`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typescript/src/gatsby-node.js) +- runs [createPages](/docs/node-apis/#createPages) from the gatsby-node.js in the root directory of the project e.g. implemented by [`page-hot-reloader`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/page-hot-reloader.js) + - within this, `createPage` can be called any number of times, which then triggers [onCreatePage](/docs/node-apis/#onCreatePage) +- runs [createPagesStatefully](/docs/node-apis/#createPagesStatefully) +- runs source nodes again and updates the GraphQL schema to include pages this time +- runs [onPreExtractQueries](/docs/node-apis/#onPreExtractQueries) e.g. implemented by [`gatsby-transformer-sharp`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/gatsby-node.js) and [`gatsby-source-contentful`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/gatsby-node.js), and extracts queries from pages and components (`StaticQuery`) +- compiles GraphQL queries and creates the Abstract Syntax Tree (AST) +- runs query validation based on schema +- executes queries and stores their respective results +- writes page redirects (if any) to `.cache/redirects.json` +- the [onPostBootstrap](/docs/node-apis/#onPostBootstrap) lifecycle is executed In development this is a running process powered by [Webpack](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L128) and [`react-hot-loader`](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L104), so changes to any files get re-run through the sequence again, with [smart cache invalidation](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js#L141). For example, `gatsby-source-filesystem` watches files for changes, and each change triggers re-running queries. Other plugins may also perform this service. Queries are also watched, so if you modify a query, your development app is hot reloaded. The core of the bootstrap process is the "api-runner", which helps to execute APIs in sequence, with state managed in Redux. Gatsby exposes a number of lifecycle APIs which can either be implemented by you (or any of your configured plugins) in `gatsby-node.js`, `gatsby-browser.js` or `gatsby-ssr.js`. +<<<<<<< HEAD The sequence of the **main** bootstrap Node API lifecycles are: - [onPreBootstrap](/docs/node-apis/#onPreBootstrap) e.g. implemented by [`gatsby-plugin-typography`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typography/src/gatsby-node.js) @@ -54,6 +64,8 @@ The sequence of the **main** bootstrap Node API lifecycles are: - The [queries are run](https://github.com/gatsbyjs/gatsby/blob/6de0e4408e14e599d4ec73948eb4153dc3cde849/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js#L120), and the [pages are written out](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js) - [onPostBootstrap](/docs/node-apis/#onPostBootstrap) is called (but it is not often used) +======= +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ## Build sequence (to be written) diff --git a/docs/docs/gatsby-source-filesystem-programmatic-import.md b/docs/docs/gatsby-source-filesystem-programmatic-import.md deleted file mode 100644 index 5157cd6..0000000 --- a/docs/docs/gatsby-source-filesystem-programmatic-import.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: gatsby-source-filesystem programmatic import -issue: https://github.com/gatsbyjs/gatsby/issues/9018 ---- - -This is a stub. Help our community expand it. - -Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your -pull request gets accepted. diff --git a/docs/docs/how-shadowing-works.md b/docs/docs/how-shadowing-works.md new file mode 100644 index 0000000..d43a785 --- /dev/null +++ b/docs/docs/how-shadowing-works.md @@ -0,0 +1,384 @@ +--- +title: How Shadowing Works +--- + +Shadowing is a powerful feature that allows theme users to override components, objects, and anything else in a theme's `src` directory. + +> **Note** This is a technical deep dive into how Shadowing works. If you'd +> like to learn about what Shadowing is, see the [What is Component Shadowing?](/blog/2019-04-29-component-shadowing/) +> blog post. + +<<<<<<< HEAD:docs/docs/how-shadowing-works.mdx +Shadowing works by using a [webpack resolver plugin](https://webpack.js.org/api/resolvers/) +that maps themes in a `gatsby-config.js` to possible shadowed files. This gets +especially mind melty because themes can add parent themes to a configuration so we +need to be able to walk the composition of themes to determine the "last shadow" +since the last shadowed theme file wins in the algorithm. +======= +Shadowing works by using a [webpack resolver plugin](https://webpack.js.org/api/resolvers/) that maps themes in a `gatsby-config.js` to possible shadowed files. This gets especially mind melty because themes can add parent themes to a configuration so you need to be able to walk the composition of themes to determine the "last shadow" since the last shadowed theme file wins in the algorithm. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc:docs/docs/how-shadowing-works.md + +## Theme Composition + +It's important to begin discussing how the composition of themes works. An end user of a theme can configure any number of themes. Each of these themes are considered sibling themes. Here is a `gatsby-config.js` that configures two sibling themes: + +```js:title=gatsby-config.js +module.exports = { + plugins: ["gatsby-theme-tomato-blog", "gatsby-theme-tomato-portfolio"], +} +``` + +<<<<<<< HEAD:docs/docs/how-shadowing-works.mdx +Both of the themes above (blog and portfolio) can install and configure +any other theme so we end up with a tree of themes which we call a theme +composition. +======= +Both of the themes above (blog and portfolio) can install and configure any other theme so you end up with a tree of themes which we call a theme composition. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc:docs/docs/how-shadowing-works.md + +The theme composition itself has a few properties: + +- the last theme wins +- a theme that uses another theme is the child theme +- a theme that is used by another theme is the parent theme +- theme trees are flattened during resolution + +<<<<<<< HEAD:docs/docs/how-shadowing-works.mdx +These characteristics are what we use in the component shadowing algorithm +to decide which component to render. So, for example, if `gatsby-theme-tomato-blog` +has `gastby-theme-parent` as a parent theme we'd result in the following themes +array: +======= +These characteristics are used in the component shadowing algorithm to decide which component to render. So, for example, if `gatsby-theme-tomato-blog` has `gatsby-theme-parent` as a parent theme it results in the following themes array: +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc:docs/docs/how-shadowing-works.md + +```js +const themesArray = [ + "gatsby-theme-parent", + "gatsby-theme-tomato-blog", + "gatsby-theme-tomato-portfolio", +] +``` + +This means that `gatsby-theme-tomato-portfolio` receives priority for component resolution, because it is last in the array. + +## Modifying the webpack Config + +Component shadowing is a bit meta because it is implemented as an internal Gatsby plugin that applies a webpack plugin which modifies how module resolution happens for files that are shadowed. + +The plugin consists of a `gatsby-node.js` and the webpack plugin code. +The `gatsby-node` file is pretty straightforward: + +```js +const GatsbyThemeComponentShadowingResolverPlugin = require(`.`) + +exports.onCreateWebpackConfig = ( + { store, stage, getConfig, rules, loaders, actions }, + pluginOptions +) => { + const { themes, flattenedPlugins } = store.getState() + + actions.setWebpackConfig({ + resolve: { + plugins: [ + new GatsbyThemeComponentShadowingResolverPlugin({ + themes: themes.themes + ? themes.themes + : flattenedPlugins.map(plugin => { + return { + themeDir: plugin.pluginFilepath, + themeName: plugin.name, + } + }), + }), + ], + }, + }) +} +``` + +We first check for themes in the redux store. This is for backwards-compatibility since themes are now merged with plugins. If the `themes` key was used in the user's `gatsby-config.js` those are passed to the shadowing resolver plugin. Otherwise, the flattened plugin list is passed. + +## Structure of a webpack Plugin + +The webpack plugin itself has a constructor and an apply function which webpack calls as part of module resolution. We tie into the "relative" hook in [the pipeline](https://github.com/webpack/enhanced-resolve/blob/5c1495a947060cf11106abc325b8adf1a0eff9b1/lib/ResolverFactory.js#L158). + +```js:title=packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js +module.exports = class GatsbyThemeComponentShadowingResolverPlugin { + constructor({ projectRoot, themes }) { + this.themes = themes + this.projectRoot = projectRoot + } + + apply(resolver) { + resolver.plugin(`relative`, (request, callback) => { + // highlight-line + // ... + }) + } +} +``` + +### Get matching themes + +The `request` contains the path of the file which we want to use to find potential matches in themes. + +```js +resolver.plugin(`relative`, (request, callback) => { + const matchingThemes = this.getMatchingThemesForPath(request.path) +}) +``` + +Which is defined on the class: + +```js +module.exports = class GatsbyThemeComponentShadowingResolverPlugin { + // ... + + getMatchingThemesForPath(filepath) { + // find out which theme's src/components dir we're requiring from + const allMatchingThemes = this.themes.filter(({ themeName }) => + filepath.includes(path.join(themeName, `src`)) + ) + + // The same theme can be included twice in the themes list causing multiple + // matches. This case should only be counted as a single match for that theme. + return _.uniq(allMatchingThemes.map(({ themeName }) => themeName)) + } + + // ... +} +``` + +This is run for all files in the site bundle and checks for potential matches. So, if a request is `/some/path/my-site/gatsby-theme-tomato/src/button/heading.js` and `gatsby-theme-tomato` is installed on the site, we'll return `gatsby-theme-tomato`. + +We perform this match so that we can determine the theme that is being required from so we can check for shadowed files in the user's site or other themes to match against. We also make sure the matched themes are unique because two themes can bring in the same theme to the theme composition. When that's the case we won't worry about them being different. Though, it is important to note that when performing resolution to build the site, the last theme added will always win. + +#### Handle too many matches + +Next, we check to make sure that if there is more than one matching theme there is some sort of ambiguity and we should return an error. This can happen if there's a path like `gatsby-theme-blog/src/components/gatsby-theme-something/src/components` in the project. + +#### No matches + +If there are no theme matches we return the invoked callback because there's nothing more to do, time to let webpack continue on it's way with module resolution. + +```js +if (matchingThemes.length === 0) { + return callback() +} +``` + +### The matched theme + +Now, if we still haven't returned the callback or thrown an error (due to ambiguity) it means we have a file being required from a theme. The file being required will look something like `/some/path/my-site/gatsby-theme-tomato/src/box` and so the first thing we want to do is get the relative path for the file within the theme's `src` directory: + +```js +const [theme] = matchingThemes +const [, component] = request.path.split(path.join(theme, `src`)) +``` + +So, with the example path above we'll end up with `/box`. This can then be used to see if the user's site or any other themes are shadowing the file. + +### The component shadow + +Since a file from a theme is being required we need to figure out which path should be resolved for the requested component. We do this by calling `resolveComponentPath` which uses the theming algorithm to attempt to find a shadowed component. If nothing is found we return the original request which points at the original theme's component. + +```js +const builtComponentPath = this.resolveComponentPath({ + matchingTheme: theme, + themes: this.themes, + component, +}) + +return resolver.doResolve( + `describedRelative`, + { ...request, path: builtComponentPath || request.path }, + null, + {}, + callback +) +``` + +We call `doResolve` on the resolver which specifies the shadowed component path if one is found, otherwise the original request. This is what tells webpack to resolve and bundle that particular file. + +#### Resolving a shadowed component + +When looking for a component we perform a search that occurs in two locations: + +- user's project +- themes + +##### User's project + +In order to ensure that the user's project always takes precedence in terms of shadowing it's prepended to the theme list when attempting to resolve the component. This ensures that `my-site/src/gatsby-theme-tomato/box.js` will take priority over any other theme that might want to shadow the same component. + +##### Themes + +As discussed before, themes are flattened into a list and then all possible shadow paths are constructed to match against. When concatenating with the user's project it's important to note again that the themes array is reversed. This is how we ensure that "the last theme wins" when resolving a shadowed file. We walk the list for matches from start to finish. + +```js +const locationsToCheck = [ + // User's site + path.join(path.resolve(`.`), `src`, theme), +].concat( + Array.from(themes) + // Last theme wins, so start matching reverse + .reverse() + // Create the full theme directory path to check against + .map(({ themeDir }) => path.join(themeDir, `src`, theme)) +) +``` + +Additionally, the original theme is removed because that's the default behavior of webpack so we don't need to resolve a theme to itself. + +```js +const themes = ogThemes.filter(({ themeName }) => themeName !== theme) +``` + +#### All together + +The shadowing algorithm can be boiled down the following function that's roughly 20 lines of code: + +```js +resolveComponentPath({ + matchingTheme: theme, + themes: ogThemes, + component, +}) { + // don't include matching theme in possible shadowing paths + const themes = ogThemes.filter(({ themeName }) => themeName !== theme) + if (!this.cache[`${theme}-${component}`]) { + this.cache[`${theme}-${component}`] = [ + path.join(path.resolve(`.`), `src`, theme), + ] + .concat( + Array.from(themes) + .reverse() + .map(({ themeDir }) => path.join(themeDir, `src`, theme)) + ) + .map(dir => path.join(dir, component)) + .find(possibleComponentPath => { + debug(`possibleComponentPath`, possibleComponentPath) + let dir + try { + // we use fs/path instead of require.resolve to work with + // TypeScript and alternate syntaxes + dir = fs.readdirSync(path.dirname(possibleComponentPath)) + } catch (e) { + return false + } + const exists = dir + .map(filepath => { + const ext = path.extname(filepath) + const filenameWithoutExtension = path.basename(filepath, ext) + return filenameWithoutExtension + }) + .includes( + path.basename( + possibleComponentPath, + path.extname(possibleComponentPath) + ) + ) + return exists + }) + } +``` + +### Handling component extending + +This is where things begin to get a bit whacky. In addition to overriding a file, we want it to be possible to import the very component you're shadowing so that you can wrap it or even add props. + +```js +import React from "react" +import { Author } from "gatsby-theme-blog/src/components/author" +import Card from "../components/card" + +export default props => ( + + + +) +``` + +[Learn more about extending components](/blog/2019-07-02-extending-components/) + +This is the first case we'll handle when attempting to resolve the file. + +In order to do this we need to leverage the **issuer** of the request. This points to the file that the request came from. This means it refers to _where_ the `import` occurs. +The **request** refers to what the import points to. + +This is implemented by another method on the plugin's class which we call `requestPathIsIssuerShadowPath` which has the following method signature: + +```js +requestPathIsIssuerShadowPath({ + theme, + component, + requestPath: request.path, + issuerPath: request.context.issuer, +}) +``` + +`requestPathIsIssuerShadowPath` checks all possible directories for shadowing and then returns whether the issuer's path is found. Let's first take a look at the code and then unpack what's happening here. + +```js +requestPathIsIssuerShadowPath({ requestPath, issuerPath, theme }) { + const shadowFiles = this.getBaseShadowDirsForThemes(theme).map(dir => + path.join(dir, component) + ) + + return shadowFiles.includes(pathWithoutExtension(issuerPath)) +} +``` + +In the above code block `getBaseShadowDirsForThemes` returns: + +```js +const baseDirs = [ + "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-rebeccapurple/src/gatsby-theme-tomato", + "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-tomato/src", +] +``` + +This constructs the shadowable files for `gatsby-theme-tomato`'s Box component. +Then, we join the component path and end up with: + +```js +const fullPaths = [ + "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-rebeccapurple/src/gatsby-theme-tomato/box", + "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-tomato/src/box", +] +``` + +We then know that if the issuer _matches_ one of these components that it's being extended. This means that a shadowed component is extending the same component from its parent. + +When this happens, we return the next path, so here the original location of the theme: `/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-tomato/src/box`. + +This means that when our shadowed file imports Box from a shadowed file we return the original box component defined in the theme. + +As a result, the following will work as we expect: + +```js +import React from "react" +import Box from "gatsby-theme-tomato/src/box" +import Card from "../components/card" + +export default props => ( +
+ +
+) +``` + +Now, all usages of the Box in `gatsby-theme-tomato` will be also wrapped in a purple box. + +#### An edge case + +If a theme sets [`module` config](https://webpack.js.org/configuration/resolve/#resolvemodules) the issuer will be null. As such we need to first check that the `request.context.issuer` is present before we attempt to resolve the shadowed component. + +It's important to note that we don't recommend appending to the modules list in themes. +Though, if you do, we will make sure we don't arbitrarily error. + +## Summary + +Shadowing uses a predictable algorithm that leverages webpack to dynamically change module resolution based on a `gatsby-config` and theme composition. +The last theme will take precedence in the shadowing algorithm, and the user's `src` directory is always take into account first. diff --git a/docs/docs/index.md b/docs/docs/index.md index 373d0ca..48a0cd1 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -1,4 +1,5 @@ --- +<<<<<<< HEAD title: Документация Gatsby.js disableTableOfContents: true --- @@ -6,6 +7,14 @@ disableTableOfContents: true import EmailCaptureForm from "../../www/src/components/email-capture-form" Gatsby это быстрый и современный генератор сайтов для React. +======= +title: Gatsby.js Documentation +description: The one stop location for tutorials, guides, and information about building with Gatsby +disableTableOfContents: true +--- + +Gatsby is a blazing fast modern site generator for React. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ## Для Начала diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index c0f181a..1e5736e 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/docs/docs/mdx/programmatically-creating-pages.md @@ -129,8 +129,8 @@ to set up our page. `/blog${value}` is a [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) that will result in: -- blog-1.mdx => localhost:8000/blog/blog-1/ -- blog-2.mdx => localhost:8000/blog/blog-2/ +- blog-1.mdx => http://localhost:8000/blog/blog-1/ +- blog-2.mdx => http://localhost:8000/blog/blog-2/ [`createFilePath`](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=gatsby-source#createfilepath) is a function from `gatsby-source-filesystem` that translates file @@ -146,8 +146,13 @@ In order to create pages from the sourced MDX files, you need to construct a query that finds all MDX nodes and pulls out the `slug` field added earlier. +<<<<<<< HEAD > **NOTE**: You can open up a GraphiQL console for query testing > in your browser at +======= +> **Note**: You can open up a GraphiQL console for query testing +> in your browser at `http://localhost:8000/___graphql` +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ```graphql query { @@ -224,19 +229,27 @@ will be rendered as the template for all posts. There's a component, `MDXRenderer` which is used by `gatsby-plugin-mdx` that will be used to render any programmatically accessed MDX content. +For now, to update imports within .mdx files, you should rerun your Gatsby development environment. Otherwise, it will raise a `ReferenceError`. To import things dynamically, you can use the `MDXProvider` component and provide it all the common components you'll be using, such as `Link`. + First, create a component that accepts the queried MDX data (which will be added in the next step). ```jsx:title=src/components/posts-page-layout.js import React from "react" import { graphql } from "gatsby" +import { MDXProvider } from "@mdx-js/react" import { MDXRenderer } from "gatsby-plugin-mdx" +import { Link } from "gatsby" + +const shortcodes = { Link } // Provide common components here export default function PageTemplate({ data: { mdx } }) { return (

{mdx.frontmatter.title}

- {mdx.body} + + {mdx.body} +
) } diff --git a/docs/docs/path-prefix.md b/docs/docs/path-prefix.md index b223587..29cf607 100644 --- a/docs/docs/path-prefix.md +++ b/docs/docs/path-prefix.md @@ -33,7 +33,21 @@ gatsby build --prefix-paths If this flag is not passed, Gatsby will ignore your `pathPrefix` and build the site as if hosted from the root domain. +<<<<<<< HEAD ### In-app linking +======= +## Serve + +Serve your application with the `--prefix-paths` flag, like so: + +```shell +gatsby serve --prefix-paths +``` + +If this flag is not passed, Gatsby will ignore your `pathPrefix`. + +## In-app linking +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc Gatsby provides APIs and libraries to make using this feature seamless. Specifically, the [`Link`](/docs/gatsby-link/) component has built-in functionality to handle path prefixing. diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md index df65432..3375685 100644 --- a/docs/docs/preparing-your-environment.md +++ b/docs/docs/preparing-your-environment.md @@ -5,9 +5,15 @@ overview: true To get started with Gatsby, you'll need to make sure you have the following software tools installed: +<<<<<<< HEAD 1. [Node.js](/tutorial/part-zero/#install-nodejs) 2. [npm CLI](/tutorial/part-zero/#familiarize-with-npm) 3. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli) +======= +1. [Node.js](/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) +2. [npm CLI](/tutorial/part-zero/#check-your-nodejs-installation) +3. [Gatsby CLI](/tutorial/part-zero/#using-the-gatsby-cli) +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/). diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index 7ecde13..e0eddf3 100644 --- a/docs/docs/quick-start.md +++ b/docs/docs/quick-start.md @@ -17,7 +17,13 @@ title: "Быстрый старт" npm install -g gatsby-cli ``` +<<<<<<< HEAD ### Создание нового сайта. +======= +> The above command installs Gatsby CLI globally on your machine. + +### Create a new site +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ```shell gatsby new gatsby-site @@ -35,7 +41,11 @@ cd gatsby-site gatsby develop ``` +<<<<<<< HEAD Gatsby запустит рабочее окружение с горячей перезагрузкой доступное по умолчанию на `localhost:8000`. +======= +Gatsby will start a hot-reloading development environment accessible by default at `http://localhost:8000`. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc Попробуйте изменить страницы с JavaScript в `src/pages`. Сохранённые изменения автоматически перезагружаются в браузере. diff --git a/docs/docs/sourcing-from-buttercms.md b/docs/docs/sourcing-from-buttercms.md index 2683a3a..0fbb857 100644 --- a/docs/docs/sourcing-from-buttercms.md +++ b/docs/docs/sourcing-from-buttercms.md @@ -265,7 +265,7 @@ in your terminal, run gatsby develop ``` -Now open up [localhost:8000/home](http://localhost:8000/home) to see the home page populated with the content you created on butter. +Now open up `http://localhost:8000/home` to see the home page populated with the content you created on butter. ## Create multiple pages using Page Types @@ -303,7 +303,11 @@ gatsby develop ### Testing with GrapiQl +<<<<<<< HEAD You can test out your Graphql queries with GrahiQl( A graphql debugger) fire up Graphiql on [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) +======= +You can test out your GraphQL queries with GraphiQL (a GraphQL debugger) fire up GraphiQL on `http://localhost:8000/___graphql` +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc Once graphiql is opened paste the query below : diff --git a/docs/docs/typography-js.md b/docs/docs/typography-js.md index 40a450c..7562c8b 100644 --- a/docs/docs/typography-js.md +++ b/docs/docs/typography-js.md @@ -86,6 +86,12 @@ const typography = new Typography( export default typography; ``` +<<<<<<< HEAD After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme just installed. +======= +After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme. + +**Note**: If your fonts remains unchanged, remove all `font-family` calls in your CSS and check again. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc If you would like to find more themes to install into your project check out at the official [Typography.js](https://kyleamathews.github.io/typography.js/) website. diff --git a/docs/docs/upgrading-node-js.md b/docs/docs/upgrading-node-js.md index 65e92da..f94ea44 100644 --- a/docs/docs/upgrading-node-js.md +++ b/docs/docs/upgrading-node-js.md @@ -35,7 +35,11 @@ There are multiple ways to update your version of Node depending on how you orig This is our recommended way to install a newer version of Node. +<<<<<<< HEAD You will have homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-zero/#-install-nodejs-and-npm). Homebrew is a program that allows you to install specific versions of Node (and other software). +======= +You will have Homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system). Homebrew is a program that allows you to install specific versions of Node.js (and other software). +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc To update from Node.js 8 to Node.js 10 using Homebrew, open a terminal and run the following commands: diff --git a/docs/docs/using-graphql-playground.md b/docs/docs/using-graphql-playground.md index 3a26712..90c7aca 100644 --- a/docs/docs/using-graphql-playground.md +++ b/docs/docs/using-graphql-playground.md @@ -18,7 +18,23 @@ To access this experimental feature utilizing GraphQL Playground with Gatsby, ad "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop", ``` +<<<<<<< HEAD Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `https://localhost:8000/___graphql` +======= +If you are on **Windows** then you should use: + +``` +"develop": "cross-env GATSBY_GRAPHQL_IDE=playground gatsby develop", +``` + +If you haven't installed **cross-env**, you can do it with: + +``` +npm install --save-dev cross-env +``` + +Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `http://localhost:8000/___graphql` +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc To still be able to use `gatsby develop` you would require the dotenv package to your gatsby-config.js file and add an [environment variable](/docs/environment-variables/) file, typically called `.env.development`. Finally, add `GATSBY_GRAPHQL_IDE=playground` to the `.env.development` file. diff --git a/docs/tutorial/using-a-theme.md b/docs/tutorial/using-a-theme.md index 1911c77..159fa07 100644 --- a/docs/tutorial/using-a-theme.md +++ b/docs/tutorial/using-a-theme.md @@ -65,7 +65,11 @@ module.exports = { When using Gatsby themes, you can take advantage of something called component shadowing. +<<<<<<< HEAD The Gatsby blog theme package has a component that contains the content of the site author's biography. The file path to that component (in the blog theme package, not your site) is `gatsby-theme-blog/src/components/bio-content.js`. +======= +The Gatsby blog theme package has a component that contains the content of the site author's biography. The file path to that component (in the blog theme package, not your site) is `src/gatsby-theme-blog/components/bio-content.js`. You can find this path by looking through the theme in your site's `node_modules/gatsby-theme-blog` directory. +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc If you look at the file tree of your site, you'll see it looks like this: diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 56a9b5f..3776c29 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -112,7 +112,7 @@ Run: gatsby develop ``` -In your browser, open localhost:8000 to see your site, and open localhost:8000/\_\_\_graphql so that you can create your GraphQL queries. +In your browser, open `http://localhost:8000` to see your site, and open `http://localhost:8000/___graphql` so that you can create your GraphQL queries. As an exercise, try re-creating the following queries in your GraphiQL explorer. This first query will pull in the blogpost content from WordPress: @@ -194,7 +194,11 @@ export const pageQuery = graphql` //highlight-end ``` +<<<<<<< HEAD Save these changes and look at localhost:8000 to see your new homepage with list of sorted blog posts! +======= +Save these changes and look at `http://localhost:8000` to see your new homepage with a list of sorted blog posts! +>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ![WordPress home after query](./images/wordpress-source-plugin-home.jpg) @@ -322,7 +326,7 @@ exports.createPages = ({ graphql, actions }) => { } ``` -You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like [http://localhost:8000/asdf](http://localhost:8000/asdf), you should see the two sample posts created and be able to click on them to go to the sample posts: +You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like `http://localhost:8000/asdf`, you should see the two sample posts created and be able to click on them to go to the sample posts: ![Sample post links](./images/wordpress-source-plugin-sample-post-links.gif) From 87a6c3c81ec7d43f55ab656d838436100d7081e3 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:35:33 -0800 Subject: [PATCH 2/8] fix english errors --- docs/contributing/organize-a-gatsby-event.md | 34 ------------------- docs/docs/adding-search-with-elasticlunr.md | 4 --- docs/docs/babel.md | 6 ---- docs/docs/browser-support.md | 11 ------ docs/docs/building-an-e-commerce-site.md | 10 ------ docs/docs/bulma.md | 4 --- docs/docs/gatsby-lifecycle-apis.md | 18 ---------- docs/docs/how-shadowing-works.md | 21 ------------ .../mdx/programmatically-creating-pages.md | 5 --- docs/docs/path-prefix.md | 4 --- docs/docs/preparing-your-environment.md | 6 ---- docs/docs/sourcing-from-buttercms.md | 4 --- docs/docs/typography-js.md | 4 --- docs/docs/upgrading-node-js.md | 4 --- docs/docs/using-graphql-playground.md | 4 --- docs/tutorial/using-a-theme.md | 4 --- .../wordpress-source-plugin-tutorial.md | 4 --- 17 files changed, 147 deletions(-) diff --git a/docs/contributing/organize-a-gatsby-event.md b/docs/contributing/organize-a-gatsby-event.md index bc97f00..8e66f2a 100644 --- a/docs/contributing/organize-a-gatsby-event.md +++ b/docs/contributing/organize-a-gatsby-event.md @@ -2,46 +2,12 @@ title: Organize a Gatsby Event --- -<<<<<<< HEAD -Interested in organizing a Gatsby event? We want to help build the Gatsby community in your area. If your event meets a few basic requirements listed below, you’ll be eligible to receive support from Gatsby such as Gatsby swag, \$300 for food, learning resources, and more. Get started by requesting event support below. - -[Request Event Support](https://airtable.com/shrpwc99yogJm9sfI) -======= Our communiy event support offerings and process are undergoing some changes. Check back soon to see our updated community event support opportunities! ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ## What constitutes a Gatsby event? A community organized Gatsby event can be a local meetup, a small conference, a _lunch and learn_ with coworkers, or a larger event. It’s up to you how many people you want to invite and how casual the environment. You can organize an event at your workplace or for the local community. -<<<<<<< HEAD -## What support does Gatsby provide? - -There are several ways Gatsby may support your event: - -- Promote event on the [Gatsbyjs.org Events Page](/contributing/events/) -- Promote event via [Gatsby’s Twitter handle](https://twitter.com/gatsbyjs) -- \$300 off food related expenses -- Free Gatsby stickers from the [Gatsby Swag Store](https://store.gatsbyjs.org/) -- 20% off swag in the [Gatsby Swag Store](https://store.gatsbyjs.org/) for your attendees -- Gatsby team member speaker (when available) - -## Requirements - -- The event must have at least half of the content focused on Gatsby or a Gatsby-related topic (such as JAMstack) -- Both US and international events qualify for support -- If you’re requesting the \$300 food credit, then you must submit a receipt for the expense -- The event must be in harmony with the [Gatsby Code of Conduct](/contributing/code-of-conduct/) and follow the [Gatsby brand guidelines](/guidelines/logo/) - -## How do you qualify for Gatsby support? - -To request support and submit your event to the Gatsby events page, apply at the link below. - -[Request Event Support](https://airtable.com/shrpwc99yogJm9sfI) - -## Related Links: -======= ## Related Links ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc - [Gatsby's Community Events](/contributing/events/) diff --git a/docs/docs/adding-search-with-elasticlunr.md b/docs/docs/adding-search-with-elasticlunr.md index 84475b2..ffee981 100644 --- a/docs/docs/adding-search-with-elasticlunr.md +++ b/docs/docs/adding-search-with-elasticlunr.md @@ -1,10 +1,6 @@ --- -<<<<<<< HEAD -title: Adding search with elasticlunr -======= title: Adding Search with Elasticlunr issue: https://github.com/gatsbyjs/gatsby/issues/21066 ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc --- This is a stub. Help our community expand it. diff --git a/docs/docs/babel.md b/docs/docs/babel.md index b9cbf19..afc3036 100644 --- a/docs/docs/babel.md +++ b/docs/docs/babel.md @@ -8,13 +8,7 @@ Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable suppor Gatsby supports by default the last two versions of major browsers, IE 9+, as well as any browser that still has 1%+ browser share. -<<<<<<< HEAD -This means we automatically compile your JavaScript to ensure it works on older browsers. -We also automatically add polyfills as needed — no more shipping code which mysteriously -breaks on older browsers! -======= This means that your JavaScript is automatically compiled to ensure it works on older browsers. Polyfills are also automatically added — no more shipping code which mysteriously breaks on older browsers! ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc If you only target newer browsers, see the [Browser Support](/docs/browser-support/) docs page for how to instruct Gatsby on which browsers you support and then Babel will start compiling for only these browsers. diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index 2ed2e8e..eebaad9 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -26,15 +26,4 @@ By default, Gatsby emulates the following config: } ``` -<<<<<<< HEAD -If you only support newer browsers, make sure to specify this in your -`package.json`. This will often enable you to ship smaller JavaScript files. - -## Note about IE < 11 - -React depends on collection types `Map` and `Set`. While these are not used by Gatsby, Gatsby uses React and you will need to polyfill these if you support older browsers and devices including IE < 11. - -Read more about this in [ReactJS Docs - JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html) -======= If you only support newer browsers, make sure to specify this in your `package.json`. This will often enable you to ship smaller JavaScript files. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc diff --git a/docs/docs/building-an-e-commerce-site.md b/docs/docs/building-an-e-commerce-site.md index 550eb58..6e48ffc 100644 --- a/docs/docs/building-an-e-commerce-site.md +++ b/docs/docs/building-an-e-commerce-site.md @@ -1,13 +1,4 @@ --- -<<<<<<< HEAD -title: Building an e-commerce site ---- - -This is a stub. Help our community expand it. - -Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your -pull request gets accepted. -======= title: Building an e-commerce Site --- @@ -18,4 +9,3 @@ To see examples of e-commerce sites built with Gatsby, check out the [showcase]( _You can also check out the ["Making an e-commerce Site with Stripe" tutorial](/tutorial/ecommerce-tutorial/) for more information._ ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc diff --git a/docs/docs/bulma.md b/docs/docs/bulma.md index 61d0b59..04a148d 100644 --- a/docs/docs/bulma.md +++ b/docs/docs/bulma.md @@ -37,11 +37,7 @@ $title-color: #ff0000; The last step is to import the style and use it. -<<<<<<< HEAD -Let's replace the default contents of the index.js file. -======= Replace the default contents of the `index.js` file. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ```jsx:title=index.js import React from "react" diff --git a/docs/docs/gatsby-lifecycle-apis.md b/docs/docs/gatsby-lifecycle-apis.md index a2fb6e2..3a223b6 100644 --- a/docs/docs/gatsby-lifecycle-apis.md +++ b/docs/docs/gatsby-lifecycle-apis.md @@ -48,24 +48,6 @@ In development this is a running process powered by [Webpack](https://github.com The core of the bootstrap process is the "api-runner", which helps to execute APIs in sequence, with state managed in Redux. Gatsby exposes a number of lifecycle APIs which can either be implemented by you (or any of your configured plugins) in `gatsby-node.js`, `gatsby-browser.js` or `gatsby-ssr.js`. -<<<<<<< HEAD -The sequence of the **main** bootstrap Node API lifecycles are: - -- [onPreBootstrap](/docs/node-apis/#onPreBootstrap) e.g. implemented by [`gatsby-plugin-typography`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typography/src/gatsby-node.js) -- [sourceNodes](/docs/node-apis/#sourceNodes) e.g. implemented by [`gatsby-source-wikipedia`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wikipedia/src/gatsby-node.js) - - within this `createNode` can be called multiple times, which then triggers [onCreateNode](/docs/node-apis/#onCreateNode). -- (the first schema build happens here) -- [resolvableExtensions](/docs/node-apis/#resolvableExtensions) for filetype/language extensions e.g. [`gatsby-plugin-typescript`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typescript/src/gatsby-node.js) -- [createPages](/docs/node-apis/#createPages) e.g. implemented by [`page-hot-reloader`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/page-hot-reloader.js) - - within this `createPage` can be called any number of times, which then triggers [onCreatePage](/docs/node-apis/#onCreatePage) -- [onPreExtractQueries](/docs/node-apis/#onPreExtractQueries) e.g. implemented by [`gatsby-transformer-sharp`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/gatsby-node.js) and [`gatsby-source-contentful`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/gatsby-node.js) -- (schema update happens here) -- **extract queries from components** where the [queryCompiler](https://github.com/gatsbyjs/gatsby/blob/6de0e4408e14e599d4ec73948eb4153dc3cde849/packages/gatsby/src/internal-plugins/query-runner/query-compiler.js#L189) replaces page GraphQL queries and `StaticQueries` -- The [queries are run](https://github.com/gatsbyjs/gatsby/blob/6de0e4408e14e599d4ec73948eb4153dc3cde849/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js#L120), and the [pages are written out](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js) -- [onPostBootstrap](/docs/node-apis/#onPostBootstrap) is called (but it is not often used) - -======= ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ## Build sequence (to be written) diff --git a/docs/docs/how-shadowing-works.md b/docs/docs/how-shadowing-works.md index d43a785..b429508 100644 --- a/docs/docs/how-shadowing-works.md +++ b/docs/docs/how-shadowing-works.md @@ -8,15 +8,7 @@ Shadowing is a powerful feature that allows theme users to override components, > like to learn about what Shadowing is, see the [What is Component Shadowing?](/blog/2019-04-29-component-shadowing/) > blog post. -<<<<<<< HEAD:docs/docs/how-shadowing-works.mdx -Shadowing works by using a [webpack resolver plugin](https://webpack.js.org/api/resolvers/) -that maps themes in a `gatsby-config.js` to possible shadowed files. This gets -especially mind melty because themes can add parent themes to a configuration so we -need to be able to walk the composition of themes to determine the "last shadow" -since the last shadowed theme file wins in the algorithm. -======= Shadowing works by using a [webpack resolver plugin](https://webpack.js.org/api/resolvers/) that maps themes in a `gatsby-config.js` to possible shadowed files. This gets especially mind melty because themes can add parent themes to a configuration so you need to be able to walk the composition of themes to determine the "last shadow" since the last shadowed theme file wins in the algorithm. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc:docs/docs/how-shadowing-works.md ## Theme Composition @@ -28,13 +20,7 @@ module.exports = { } ``` -<<<<<<< HEAD:docs/docs/how-shadowing-works.mdx -Both of the themes above (blog and portfolio) can install and configure -any other theme so we end up with a tree of themes which we call a theme -composition. -======= Both of the themes above (blog and portfolio) can install and configure any other theme so you end up with a tree of themes which we call a theme composition. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc:docs/docs/how-shadowing-works.md The theme composition itself has a few properties: @@ -43,14 +29,7 @@ The theme composition itself has a few properties: - a theme that is used by another theme is the parent theme - theme trees are flattened during resolution -<<<<<<< HEAD:docs/docs/how-shadowing-works.mdx -These characteristics are what we use in the component shadowing algorithm -to decide which component to render. So, for example, if `gatsby-theme-tomato-blog` -has `gastby-theme-parent` as a parent theme we'd result in the following themes -array: -======= These characteristics are used in the component shadowing algorithm to decide which component to render. So, for example, if `gatsby-theme-tomato-blog` has `gatsby-theme-parent` as a parent theme it results in the following themes array: ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc:docs/docs/how-shadowing-works.md ```js const themesArray = [ diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index 1e5736e..98e684a 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/docs/docs/mdx/programmatically-creating-pages.md @@ -146,13 +146,8 @@ In order to create pages from the sourced MDX files, you need to construct a query that finds all MDX nodes and pulls out the `slug` field added earlier. -<<<<<<< HEAD -> **NOTE**: You can open up a GraphiQL console for query testing -> in your browser at -======= > **Note**: You can open up a GraphiQL console for query testing > in your browser at `http://localhost:8000/___graphql` ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ```graphql query { diff --git a/docs/docs/path-prefix.md b/docs/docs/path-prefix.md index 29cf607..196973b 100644 --- a/docs/docs/path-prefix.md +++ b/docs/docs/path-prefix.md @@ -33,9 +33,6 @@ gatsby build --prefix-paths If this flag is not passed, Gatsby will ignore your `pathPrefix` and build the site as if hosted from the root domain. -<<<<<<< HEAD -### In-app linking -======= ## Serve Serve your application with the `--prefix-paths` flag, like so: @@ -47,7 +44,6 @@ gatsby serve --prefix-paths If this flag is not passed, Gatsby will ignore your `pathPrefix`. ## In-app linking ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc Gatsby provides APIs and libraries to make using this feature seamless. Specifically, the [`Link`](/docs/gatsby-link/) component has built-in functionality to handle path prefixing. diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md index 3375685..169e843 100644 --- a/docs/docs/preparing-your-environment.md +++ b/docs/docs/preparing-your-environment.md @@ -5,15 +5,9 @@ overview: true To get started with Gatsby, you'll need to make sure you have the following software tools installed: -<<<<<<< HEAD -1. [Node.js](/tutorial/part-zero/#install-nodejs) -2. [npm CLI](/tutorial/part-zero/#familiarize-with-npm) -3. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli) -======= 1. [Node.js](/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) 2. [npm CLI](/tutorial/part-zero/#check-your-nodejs-installation) 3. [Gatsby CLI](/tutorial/part-zero/#using-the-gatsby-cli) ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/). diff --git a/docs/docs/sourcing-from-buttercms.md b/docs/docs/sourcing-from-buttercms.md index 0fbb857..4929947 100644 --- a/docs/docs/sourcing-from-buttercms.md +++ b/docs/docs/sourcing-from-buttercms.md @@ -303,11 +303,7 @@ gatsby develop ### Testing with GrapiQl -<<<<<<< HEAD -You can test out your Graphql queries with GrahiQl( A graphql debugger) fire up Graphiql on [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) -======= You can test out your GraphQL queries with GraphiQL (a GraphQL debugger) fire up GraphiQL on `http://localhost:8000/___graphql` ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc Once graphiql is opened paste the query below : diff --git a/docs/docs/typography-js.md b/docs/docs/typography-js.md index 7562c8b..3400c91 100644 --- a/docs/docs/typography-js.md +++ b/docs/docs/typography-js.md @@ -86,12 +86,8 @@ const typography = new Typography( export default typography; ``` -<<<<<<< HEAD -After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme just installed. -======= After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme. **Note**: If your fonts remains unchanged, remove all `font-family` calls in your CSS and check again. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc If you would like to find more themes to install into your project check out at the official [Typography.js](https://kyleamathews.github.io/typography.js/) website. diff --git a/docs/docs/upgrading-node-js.md b/docs/docs/upgrading-node-js.md index f94ea44..8c6f5c6 100644 --- a/docs/docs/upgrading-node-js.md +++ b/docs/docs/upgrading-node-js.md @@ -35,11 +35,7 @@ There are multiple ways to update your version of Node depending on how you orig This is our recommended way to install a newer version of Node. -<<<<<<< HEAD -You will have homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-zero/#-install-nodejs-and-npm). Homebrew is a program that allows you to install specific versions of Node (and other software). -======= You will have Homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system). Homebrew is a program that allows you to install specific versions of Node.js (and other software). ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc To update from Node.js 8 to Node.js 10 using Homebrew, open a terminal and run the following commands: diff --git a/docs/docs/using-graphql-playground.md b/docs/docs/using-graphql-playground.md index 90c7aca..71197e5 100644 --- a/docs/docs/using-graphql-playground.md +++ b/docs/docs/using-graphql-playground.md @@ -18,9 +18,6 @@ To access this experimental feature utilizing GraphQL Playground with Gatsby, ad "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop", ``` -<<<<<<< HEAD -Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `https://localhost:8000/___graphql` -======= If you are on **Windows** then you should use: ``` @@ -34,7 +31,6 @@ npm install --save-dev cross-env ``` Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `http://localhost:8000/___graphql` ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc To still be able to use `gatsby develop` you would require the dotenv package to your gatsby-config.js file and add an [environment variable](/docs/environment-variables/) file, typically called `.env.development`. Finally, add `GATSBY_GRAPHQL_IDE=playground` to the `.env.development` file. diff --git a/docs/tutorial/using-a-theme.md b/docs/tutorial/using-a-theme.md index 159fa07..5cc77f2 100644 --- a/docs/tutorial/using-a-theme.md +++ b/docs/tutorial/using-a-theme.md @@ -65,11 +65,7 @@ module.exports = { When using Gatsby themes, you can take advantage of something called component shadowing. -<<<<<<< HEAD -The Gatsby blog theme package has a component that contains the content of the site author's biography. The file path to that component (in the blog theme package, not your site) is `gatsby-theme-blog/src/components/bio-content.js`. -======= The Gatsby blog theme package has a component that contains the content of the site author's biography. The file path to that component (in the blog theme package, not your site) is `src/gatsby-theme-blog/components/bio-content.js`. You can find this path by looking through the theme in your site's `node_modules/gatsby-theme-blog` directory. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc If you look at the file tree of your site, you'll see it looks like this: diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 3776c29..8dad27e 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -194,11 +194,7 @@ export const pageQuery = graphql` //highlight-end ``` -<<<<<<< HEAD -Save these changes and look at localhost:8000 to see your new homepage with list of sorted blog posts! -======= Save these changes and look at `http://localhost:8000` to see your new homepage with a list of sorted blog posts! ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc ![WordPress home after query](./images/wordpress-source-plugin-home.jpg) From 3614fa2237868070defdeeb862348de4a8f5aad9 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:38:13 -0800 Subject: [PATCH 3/8] 404 page --- docs/docs/add-404-page.md | 26 ++++---------------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/docs/docs/add-404-page.md b/docs/docs/add-404-page.md index 83c8073..2ec502e 100644 --- a/docs/docs/add-404-page.md +++ b/docs/docs/add-404-page.md @@ -2,32 +2,14 @@ title: "Добавление страницы 404" --- -<<<<<<< HEAD -Для добавления страницы 404 создайте страницу, путь которой соответствует регулярному выражению -`^\/?404\/?$` (`/404/`, `/404`, `404/` или `404`). Как правило, React-компонент для такой страницы будет находиться по пути -`src/pages/404.js`. +Для добавления страницы 404 создайте страницу, путь которой соответствует регулярному выражению `^\/?404\/?$` (`/404/`, `/404`, `404/` или `404`). Как правило, React-компонент для такой страницы будет находиться по пути `src/pages/404.js`. -Gatsby позаботится о том, чтобы 404 страница была доступна как `404.html`, поскольку большинство хостингов -статичных файлов по умолчанию использует это имя файла для обработки ошибки 404. Если в вашем случае -это не так, то потребуется дополнительно настроить свой хостинг на использование именно этого файла для -страницы ошибки 404. +Gatsby позаботится о том, чтобы 404 страница была доступна как `404.html`, поскольку большинство хостингов статичных файлов по умолчанию использует это имя файла для обработки ошибки 404. Если в вашем случае это не так, то потребуется дополнительно настроить свой хостинг на использование именно этого файла для страницы ошибки 404. -Поскольку Gatsby по умолчанию создает эту страницу, -вам не нужно дополнительно настраивать его в файле `gatsby-node.js`. +Поскольку Gatsby по умолчанию создает эту страницу, вам не нужно дополнительно настраивать его в файле `gatsby-node.js`. При разработке с помощью команды `gatsby develop`, Gatsby использует собственную страницу 404, -которая переопределяет вашу страницу 404. Тем не менее, вы всё равно можете посмотреть вашу страницу 404, -нажав "Preview custom 404 page", чтобы убедиться, что она корректно отображается. Это удобно -во время разработки, потому что можно посмотреть все доступные страницы. -======= -To create a 404 page create a page whose path matches the regex `^\/?404\/?$` (`/404/`, `/404`, `404/` or `404`). Most often you'll want to create a React component page at `src/pages/404.js`. - -Gatsby ensures that your 404 page is built as `404.html` as many static hosting platforms default to using this as your 404 error page. If you're hosting your site another way you'll need to set up a custom rule to serve this file for 404 errors. - -Because Gatsby creates this page for you by default, there is no need to configure it in your `gatsby-node.js` file. - -When developing using `gatsby develop`, Gatsby uses a default 404 page that overrides your custom 404 page. However, you can still preview your 404 page by clicking "Preview custom 404 page" to verify that it's working as expected. This is useful when you're developing so that you can see all the available pages. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc +которая переопределяет вашу страницу 404. Тем не менее, вы всё равно можете посмотреть вашу страницу 404, нажав "Preview custom 404 page", чтобы убедиться, что она корректно отображается. Это удобно во время разработки, потому что можно посмотреть все доступные страницы. The screenshot below shows the default 404 page that Gatsby creates. It also lists out all the pages on your website. Clicking the "Preview custom 404 page" button will allow you to view the 404 page you created. ![Gatsby Default 404 Page](./images/gatsby-default-404.png) From 69497d86ef9845c1150840e6cb203009fcc2146c Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:39:51 -0800 Subject: [PATCH 4/8] webpack-config --- docs/docs/add-custom-webpack-config.md | 56 +++++--------------------- 1 file changed, 10 insertions(+), 46 deletions(-) diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md index eaa9ac7..9937821 100644 --- a/docs/docs/add-custom-webpack-config.md +++ b/docs/docs/add-custom-webpack-config.md @@ -2,58 +2,22 @@ title: "Добавление пользовательской конфигурации webpack" --- -<<<<<<< HEAD -_Перед созданием пользовательского файла конфигурации Webpack поищите уже готовый -Gatsby-плагин, который решает вашу проблему, в -[разделе плагинов](/docs/plugins/). Если ничего найти не удалось, а ваш случай -распространен, пожалуйста, добавьте ваш плагин в Библиотеку Плагинов Gatsby, -чтобы другие люди смогли им воспользоваться (включая вас самого в будущем 😀)._ - -Чтобы добавить пользовательскую конфигурацию Webpack, создайте (если уже не создан) -`gatsby-node.js` файл в корневой директории. Внутри этого файла экспортируйте -функцию с именем `onCreateWebpackConfig`. - -При создании собственной webpack-конфигурации Gatsby вызовет эту функцию, -позволяя вам изменить настройку webpack по умолчанию с помощью -[webpack-merge](https://github.com/survivejs/webpack-merge). - -Gatsby генерирует ряд webpack-сборок с несколько отличной друг от друга конфигурацией. -Каждую из таких сборок мы называем "стадия". Существуют следующие стадии: - -1. develop: при запуске `gatsby develop` команды. Включает настройку для горячей - перезагрузки и добавления CSS на страницу. -2. develop-html: то же самое, что и develop, но без react-hmre в конфигурации babel для - рендеринга HTML-компонента. -3. build-javascript: продакшен-сборка JavaScript и CSS. Создает как маршрут для JS-бандлов, - так и чанки с общим кодом для JS и CSS. -4. build-html: продакшен-сборка статических HTML-страниц. - -Ознакомьтесь с -[webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) -в качестве источника. +_Перед созданием пользовательского файла конфигурации Webpack поищите уже готовый Gatsby-плагин, который решает вашу проблему, в [разделе плагинов](/docs/plugins/). Если ничего найти не удалось, а ваш случай распространен, пожалуйста, добавьте ваш плагин в Библиотеку Плагинов Gatsby, чтобы другие люди смогли им воспользоваться (включая вас самого в будущем 😀)._ -Примеры использования этого API можно найти в плагинах из репозитория Gatsby, -например, [Sass](/packages/gatsby-plugin-sass/), -[TypeScript](/packages/gatsby-plugin-typescript/), -[Glamor](/packages/gatsby-plugin-glamor/) и многих других! -======= -_Before creating custom webpack configuration, check to see if there's a Gatsby plugin already built that handles your use case in the [plugins section](/docs/plugins/). If there's not yet one and your use case is a general one, it is highly encouraged you to contribute back your plugin to the Gatsby Plugin Library so it's available to others (including your future self)._ +Чтобы добавить пользовательскую конфигурацию Webpack, создайте (если уже не создан) `gatsby-node.js` файл в корневой директории. Внутри этого файла экспортируйте функцию с именем `onCreateWebpackConfig`. -To add custom webpack configurations, create (if there's not one already) a `gatsby-node.js` file in your root directory. Inside this file, export a function called `onCreateWebpackConfig`. +При создании собственной webpack-конфигурации Gatsby вызовет эту функцию, позволяя вам изменить настройку webpack по умолчанию с помощью [webpack-merge](https://github.com/survivejs/webpack-merge). -When Gatsby creates its webpack config, this function will be called allowing you to modify the default webpack config using [webpack-merge](https://github.com/survivejs/webpack-merge). +Gatsby генерирует ряд webpack-сборок с несколько отличной друг от друга конфигурацией. Каждую из таких сборок мы называем "стадия". Существуют следующие стадии: -Gatsby does multiple webpack builds with somewhat different configuration. Gatsby calls each build type a "stage". The following stages exist: - -1. develop: when running the `gatsby develop` command. Has configuration for hot reloading and CSS injection into page -2. develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component. -3. build-javascript: production JavaScript and CSS build. Creates route JS bundles as well as common chunks for JS and CSS. -4. build-html: production build static HTML pages +1. develop: при запуске `gatsby develop` команды. Включает настройку для горячей перезагрузки и добавления CSS на страницу. +2. develop-html: то же самое, что и develop, но без react-hmre в конфигурации babel для рендеринга HTML-компонента. +3. build-javascript: продакшен-сборка JavaScript и CSS. Создает как маршрут для JS-бандлов, так и чанки с общим кодом для JS и CSS. +4. build-html: продакшен-сборка статических HTML-страниц. -Check [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) for the source. +Ознакомьтесь с [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) в качестве источника. -There are many plugins in the Gatsby repo using this API to look to for examples e.g. [Sass](/packages/gatsby-plugin-sass/), [TypeScript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/), and many more! ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc +Примеры использования этого API можно найти в плагинах из репозитория Gatsby, например, [Sass](/packages/gatsby-plugin-sass/), [TypeScript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/) и многих других! ## Примеры From 940c5f6b3df0b4e4531517c768c944e8db000971 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:40:15 -0800 Subject: [PATCH 5/8] audit with lighthouse --- docs/docs/audit-with-lighthouse.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/docs/audit-with-lighthouse.md b/docs/docs/audit-with-lighthouse.md index 545c507..0ef2a19 100644 --- a/docs/docs/audit-with-lighthouse.md +++ b/docs/docs/audit-with-lighthouse.md @@ -26,11 +26,7 @@ gatsby build gatsby serve ``` -<<<<<<< HEAD -Как только команда запустится, вы можете посмотреть сайт по адресу `localhost:9000`. -======= -Once this starts, you can now view your site at `http://localhost:9000`. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc +Как только команда запустится, вы можете посмотреть сайт по адресу `http://localhost:9000`. ### Запуск аудита с помощью Lighthouse @@ -38,7 +34,7 @@ Once this starts, you can now view your site at `http://localhost:9000`. 1. Откройте сайт в Chrome (если ещё не открыли в нём) и откройте инструменты разработки Chrome. -2. Нажмите на вкладку "Audits", где вы увидите экран, который выглядит примерно так: +2. Нажмите на вкладку "Audits", где вы увидите экран, который выглядит примерно так: ![Начальная страница аудита в Lighthouse](./images/lighthouse-audit.png) From 35e792d1068bcc090e0ddc31380399cf3d1d7617 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:41:50 -0800 Subject: [PATCH 6/8] docs/index --- docs/docs/index.md | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/docs/docs/index.md b/docs/docs/index.md index 48a0cd1..b54b629 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -1,20 +1,10 @@ --- -<<<<<<< HEAD title: Документация Gatsby.js -disableTableOfContents: true ---- - -import EmailCaptureForm from "../../www/src/components/email-capture-form" - -Gatsby это быстрый и современный генератор сайтов для React. -======= -title: Gatsby.js Documentation description: The one stop location for tutorials, guides, and information about building with Gatsby disableTableOfContents: true --- -Gatsby is a blazing fast modern site generator for React. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc +Gatsby это быстрый и современный генератор сайтов для React. ## Для Начала @@ -28,7 +18,7 @@ Gatsby is a blazing fast modern site generator for React. 1. [Рецепты](/docs/recipes/): Найдите быстрые ответы о том, как решить те или иные задачи с Gatsby. 2. Выберите для себя по каким секциям документации Gatsby вы хотели бы пройтись: - - [Справочное Руководство](/docs/guides/): Изучайте разные темы по работе с Gatsby, например получение данных, публикация и другие. + - [Справочное Руководство](/docs/guides/): Изучайте разные темы по работе с Gatsby, например получение данных, публикация и другие. - [Руководство по Gatsby API](/docs/api-reference/): Узнайте больше о Gatsby API. - [Релиз и Миграция](/docs/releases-and-migration/): Найдите заметки о релизах и руководства по миграции между основными версиями. - [Концептуальное Руководство](/docs/conceptual-guide/): Прочтите высокоуровневые обзоры о подходах к Gatsby. From c8471d380a54ff1d4b2172d89497cfe959d5b6f9 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 19 Feb 2020 13:44:18 -0800 Subject: [PATCH 7/8] quick-start --- docs/docs/quick-start.md | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index e0eddf3..8ac27cd 100644 --- a/docs/docs/quick-start.md +++ b/docs/docs/quick-start.md @@ -11,45 +11,37 @@ title: "Быстрый старт" lessonTitle="Быстрый старт с Gatsby: создавайте, разрабатывайте и собирайте Gatsby сайты из командной строки" /> -### Установка Gatsby CLI. +### Установка Gatsby CLI ```shell npm install -g gatsby-cli ``` -<<<<<<< HEAD -### Создание нового сайта. -======= > The above command installs Gatsby CLI globally on your machine. -### Create a new site ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc +### Создание нового сайта ```shell gatsby new gatsby-site ``` -### Изменение директории на папку с сайтом. +### Изменение директории на папку с сайтом ```shell cd gatsby-site ``` -### Запуск сервера разработки. +### Запуск сервера разработки ```shell gatsby develop ``` -<<<<<<< HEAD -Gatsby запустит рабочее окружение с горячей перезагрузкой доступное по умолчанию на `localhost:8000`. -======= -Gatsby will start a hot-reloading development environment accessible by default at `http://localhost:8000`. ->>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc +Gatsby запустит рабочее окружение с горячей перезагрузкой доступное по умолчанию на `http://localhost:8000`. Попробуйте изменить страницы с JavaScript в `src/pages`. Сохранённые изменения автоматически перезагружаются в браузере. -### Создание продакшен-сборки. +### Создание продакшен-сборки ```shell gatsby build @@ -57,7 +49,7 @@ gatsby build Gatsby выполнит оптимизированную продакшен-сборку для вашего сайта, генерируя статические HTML и бандлы JavaScript для каждого маршрута. -### Запуск продакшен-сборки локально. +### Запуск продакшен-сборки локально ```shell gatsby serve From 2543fc0af7c80a834fce2a5bd06aa32548535fcf Mon Sep 17 00:00:00 2001 From: Alexandr Tovmach Date: Sat, 15 Aug 2020 19:05:45 +0300 Subject: [PATCH 8/8] Applied translations to PR --- docs/docs/index.md | 2 +- docs/docs/quick-start.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/index.md b/docs/docs/index.md index b54b629..a9abe25 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -1,6 +1,6 @@ --- title: Документация Gatsby.js -description: The one stop location for tutorials, guides, and information about building with Gatsby +description: Единое место для учебных пособий, руководств и информации по работе с Gatsby disableTableOfContents: true --- diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index 8ac27cd..4505da9 100644 --- a/docs/docs/quick-start.md +++ b/docs/docs/quick-start.md @@ -17,7 +17,7 @@ title: "Быстрый старт" npm install -g gatsby-cli ``` -> The above command installs Gatsby CLI globally on your machine. +> Приведенная выше команда устанавливает Gatsby CLI глобально на ваш компьютер. ### Создание нового сайта