diff --git a/docs/contributing/blog-contributions.md b/docs/contributing/blog-contributions.md new file mode 100644 index 000000000..330dd242e --- /dev/null +++ b/docs/contributing/blog-contributions.md @@ -0,0 +1,55 @@ +--- +title: Blog Contributions +--- + +If you'd like to contribute a post to the Gatsby blog, please review the process and guidelines outlined below and submit your idea for the post to our [Gatsby blog proposal form](https://airtable.com/shr3449954866i3iF) + +## Blog proposal submission process + +1. Complete and submit the [Gatsby blog proposal form](https://airtable.com/shr3449954866i3iF). +2. A Gatsby team member will review your proposal and let you know if the proposal has been accepted within the next week or so. + - **If the post is accepted:** A Gatsby team member will work with you on a timeline for submitting and reviewing a draft of your blog post and set a tentative publishing date. + - **If the post is not accepted:** We’ll let you know if there are any alternative offers we can make (e.g. offer to retweet if you publish the piece elsewhere, suggest submitting it as an addition to a Gatsby doc, etc.). We’ll also do our best to explain why your proposal was not accepted and encourage you to revise your proposal based on that feedback and resubmit. Please don’t be discouraged from submitting another post in the future! + +If you have any questions about the process or your submission, please email [marketing@gatsbyjs.com](mailto:marketing@gatsbyjs.com). + +## Content guidelines for submitting a blog post proposal + +As a Gatsby community member, you have unique insight into the ins and outs of learning Gatsby, building with Gatsby, and contributing to Gatsby’s open source community. Contributing to the Gatsby blog is a great way to share your experiences and insights. Here are some guidelines for what kind of content is and isn’t a good fit for the Gatsby blog. + +Things we’re looking for in Gatsby blog content: + +- Information to help others overcome challenges you’ve faced while working with Gatsby +- Stories about how Gatsby helped you overcome different challenges on work and personal projects +- Gatsby case studies +- Showcasing a tool, fix, or other content you or someone else have contributed to Gatsby’s open source community +- Showcasing a tool, fix, or other content someone else has contributed to Gatsby’s open source community +- Clear and thoughtful explanations of technical details or complex concepts related to React, GraphQL, web and application development, open-source contribution, Gatsby core, and other Gatsby-adjacent subject matter +- Guidance and resources for learning React, GraphQL, HTML/CSS, web development, best practices, accessibility, SEO, Gatsby, different tool and CMS integrations, and other Gatsby-adjacent subject matter. +- Other topics that you think would be valuable to people learning about or working with Gatsby + +Things we’d like to avoid on the Gatsby blog: + +- **Docs content.** Some content is better found in the Gatsby docs guides and tutorials, as it can be found in a section for related content and not buried under pages of other paginated blog posts. +- **Promotional content.** Please don’t submit content to the Gatsby blog solely for the purpose of promoting a product, yourself, or link-building. + - **Here’s what you can do instead:** If you have a product or project you want to share on the Gatsby blog, focus on practical information, and make sure there’s a clear relationship with Gatsby or Gatsby-adjacent topics. You could write a step by step guide to using your product with Gatsby. You could write a case study highlighting the direct impact Gatsby had on your awesome project and offer helpful tips for others to recreate your success. +- **Content that doesn’t seem to have a clear benefit for Gatsby users and/or the Gatsby community.** For example, if you’re writing about a use-case or integration that’s extremely niche or unique to specific conditions that are really uncommon outside of your organization, the Gatsby blog might not be the best place for your content. Likewise, if your blog post doesn’t seem to have any direct relationship with Gatsby (or an interesting indirect relationship with Gatsby), then it may be more appropriate for a personal blog or another community blog. + +**Please note** that these are guidelines, not rules. If you think your blog post belongs on the Gatsby blog, we absolutely encourage you to submit it. While we reserve the right to decide what is and isn’t appropriate for the Gatsby blog, we also value and encourage your creativity and your contributions. +<<<<<<< HEAD:docs/contributing/blog-and-website-contributions.md + +## Making changes to the website + +If you want to make changes, improvements, or add new functionality to the website, you don't have to set up the full Gatsby repo to contribute. You can spin up your own instance of the Gatsby website with these steps: + +- Clone [the Gatsby repo](https://github.com/gatsbyjs/gatsby/) and navigate to `/www` +- Run `yarn` to install all of the website's dependencies. +- Run `npm run develop` to preview the site at `http://localhost:8000/`. + +> Note: If you are experiencing issues on a Linux machine, run `sudo apt install libvips-dev`, to install a native dependency. You can also reference [Gatsby guide on Linux](/docs/gatsby-on-linux/) for other Linux-specific requirements. + +Now you can make and preview your changes before raising a Pull Request! + +For full repo setup instructions, visit the [code contributions](/contributing/code-contributions/) page. +======= +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097:docs/contributing/blog-contributions.md diff --git a/docs/contributing/community.md b/docs/contributing/community.md index 9dc77f124..ee8ce8a1d 100644 --- a/docs/contributing/community.md +++ b/docs/contributing/community.md @@ -33,7 +33,11 @@ Gatsby コミュニティーはあなたの貢献を歓迎しています。貢 Gatsby ニュースレターにサインアップし、 Gatsby コミュニティーの最新情報を購読してください！ニュースレターでは新機能やティップス、ちょっとしたテクニック、そしてほかの人々が何を作っているのかが確認できます。 +<<<<<<< HEAD [サインアップはこちら](/newsletter/) +======= + +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### Twitter diff --git a/docs/contributing/how-to-open-a-pull-request.md b/docs/contributing/how-to-open-a-pull-request.md index 888cd1719..48c9a68e5 100644 --- a/docs/contributing/how-to-open-a-pull-request.md +++ b/docs/contributing/how-to-open-a-pull-request.md @@ -89,7 +89,11 @@ Gatsby エコシステム内の様々な部分への貢献については、そ ### Blog posts +<<<<<<< HEAD Gatsby ブログに投稿をする場合、記事を投稿する前に、記事のアイデアについて Gatsby チームから承認される必要があります。アイデアの提案方法や、ローカルでブログを走らせる方法など、詳しい説明は[ブログとウェブサイトへの貢献](/contributing/blog-and-website-contributions/)をご覧ください。 +======= +For the Gatsby blog, it's necessary to run your content idea by the Gatsby team before submitting it. For more information, refer to the page on [blog contributions](/contributing/blog-contributions/), including how to propose an idea and setting up the blog to run locally. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## レビュー・提案によるフォローアップ diff --git a/docs/contributing/translation/index.md b/docs/contributing/translation/index.md index 271928c22..4c0441a0e 100644 --- a/docs/contributing/translation/index.md +++ b/docs/contributing/translation/index.md @@ -14,6 +14,7 @@ Gatsbyjs.org のコンテンツを複数の言語に翻訳する継続的な取 現在、以下の言語が翻訳されています。 +<<<<<<< HEAD - [アラビア語](https://github.com/gatsbyjs/gatsby-ar) - [ベンガル語](https://github.com/gatsbyjs/gatsby-bn) - [ドイツ語](https://github.com/gatsbyjs/gatsby-de) @@ -34,6 +35,9 @@ Gatsbyjs.org のコンテンツを複数の言語に翻訳する継続的な取 - [ベトナム語](https://github.com/gatsbyjs/gatsby-vi) - [簡体字中国語](https://github.com/gatsbyjs/gatsby-zh-Hans) - [繁体字中国語](https://github.com/gatsbyjs/gatsby-zh-Hant) +======= + +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 > ヒント: 新しい翻訳リポジトリーが作成されたら、PR で自由にここへ追加してください! diff --git a/docs/contributing/translation/style-guide.md b/docs/contributing/translation/style-guide.md index 161ee8781..abe4e8a68 100644 --- a/docs/contributing/translation/style-guide.md +++ b/docs/contributing/translation/style-guide.md @@ -6,19 +6,57 @@ title: 翻訳スタイルガイド いかなる言語の翻訳でも、Gatsby プロジェクト全体のゴール、およびバリューとして次のガイドラインに沿ってください。**技術レベル、経験レベル問わず、Gatsby を学ぶすべての人に対して友好的なコミュニティを提供すること。どんなコントリビューターも安心して貢献できる環境であること。** 翻訳されたドキュメントやチュートリアルは[これらのバリュー](/blog/2019-04-19-gatsby-why-we-write/)を守りつつ、**品質の高い文法**、正確な情報、統一された構成や目的を保つことを目指しましょう。ガイドラインに関して質問があるばあい、Gatsby チームに気軽に[お声がけ](/contributing/how-to-contribute/#not-sure-how-to-start-contributing)ください。 +<<<<<<< HEAD ### 用語集 +======= +## Glossary +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 スタイルガイドには[用語集](https://github.com/gatsbyjs/gatsby-i18n-source/blob/master/style-guide.md#glossary)が用意されています。翻訳をする上で共通の単語は、用語集を参考にしてください。翻訳する際に便利な単語に関しては原文の[用語集](/docs/glossary/)を参考にすると良いでしょう。 +<<<<<<< HEAD ### 共通スタイルガイド +======= +## Universal style guide +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 以下のルールは各言語のスタイルガイドのベースとして、すべての言語の翻訳スタイルガイドで適用しましょう。 +<<<<<<< HEAD #### 原文に忠実に +======= +### Keep the meaning of the source +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 原文がわかりにくかったり、タイポがあったとしても、基本的に原文に忠実に訳してください。もし、原文に間違いがあり、それが修正可能であれば、[Gatsby 本家のリポジトリ](https://github.com/gatsbyjs/gatsby)に Issue や Pull Request を立ててください。そうすれば、全ての翻訳版がその修正の恩恵を受けることができます。 +<<<<<<< HEAD ### コードブロック内のテキスト +======= +### Use soft line wraps + +Use soft line wraps for paragraphs: + +✅ DO: + +```md +No intuito de promover um ambiente aberto e acolhedor, nós, como contribuidores e mantenedores, nos comprometemos em tornar a participação em nossos projetos e em nossa comunidade o mais livre de assédio para todos, independentemente da idade, corpo, tamanho, deficiência, etnia, identidade ou expressão de gênero, nível de experiência, nacionalidade, aparência, raça, religião ou identidade e orientação sexual. +``` + +❌ DON'T: + +```md +No intuito de promover um ambiente aberto e acolhedor, nós, como contribuidores e mantenedores, +nos comprometemos em tornar a participação em nossos projetos e em nossa comunidade o mais livre +de assédio para todos, independentemente da idade, corpo, tamanho, deficiência, etnia, identidade +ou expressão de gênero, nível de experiência, nacionalidade, aparência, raça, religião ou identidade +e orientação sexual. +``` + +Using soft line wraps ensures that paragraphs are always matched with the original source paragraphs when syncing, and prevents weird errors with mismatched lines. + +### Text in code blocks +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 コードブロック内に関しては、基本的にコメント以外を翻訳しないでください。任意で文字列リテラルの中身を翻訳することはできますが、コード自体はそのままにしてください！ @@ -62,7 +100,11 @@ export default () => ( ) ``` +<<<<<<< HEAD #### 内部リンク +======= +### Internal links +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 サイト内部の別のページにリンクする文章は翻訳して構いません。しかし、リンク先の URL は原文と同じ URL を使うので、そのままにしておいてください。 @@ -78,7 +120,11 @@ export default () => ( - [開発環境のセットアップ](/tutorial/開発環境のセットアップ) ``` +<<<<<<< HEAD ### 外部リンク +======= +### External links +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 もし外部リンクが[MDN]や[Wikipedia]のような記事の場合であって、かつ十分なクオリティの日本語版が存在する場合は、翻訳版へのリンクを貼りましょう。 diff --git a/docs/docs/adding-comments.md b/docs/docs/adding-comments.md index 1c42a50a1..f3287be60 100644 --- a/docs/docs/adding-comments.md +++ b/docs/docs/adding-comments.md @@ -10,7 +10,10 @@ Gatsby でブログを動かしていて、いくつかのコンテンツを追 - [Commento](https://commento.io) - [Facebook Comments](https://www.npmjs.com/package/react-facebook) - [Staticman](https://staticman.net) +<<<<<<< HEAD - [JustComments](https://just-comments.com) \([Gatsby の公式プラグイン](https://www.gatsbyjs.org/packages/gatsby-plugin-just-comments/)\) +======= +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 - [TalkYard](https://www.talkyard.io) - [Gitalk](https://gitalk.github.io) diff --git a/docs/docs/data-storage-redux.md b/docs/docs/data-storage-redux.md index a1f89091e..2e61b493a 100644 --- a/docs/docs/data-storage-redux.md +++ b/docs/docs/data-storage-redux.md @@ -1,9 +1,63 @@ --- title: Data Storage (Redux) -issue: https://github.com/gatsbyjs/gatsby/issues/21068 --- -This is a stub. Help our community expand it. +During Gatsby's bootstrap & build phases, the state is stored and manipulated using the [Redux](https://redux.js.org/) library. The key purpose of using Redux in Gatsby internals is to centralize all of the state logic. Reviewing the Gatsby [reducers](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/redux/reducers) and [actions](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/redux/actions) folders gives a comprehensive picture of what state manipulations are possible. +<<<<<<< HEAD Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your Pull Request gets accepted. +======= +## Store + +The namespaces in Gatsby's Redux store are a great overview of the Gatsby internals, here are a few: + +- **[Nodes](/docs/node-interface/)** - All data that’s added to Gatsby is modeled using nodes. Nodes are most commonly added by Source plugins such as `gatsby-source-filesystem`. +- **[Schema](/docs/schema-generation/)** - GraphQL [schema](/docs/glossary#schema) [inferred](/docs/glossary#inference) from Nodes, available for querying by page and static queries. +- **[Pages](/docs/gatsby-internals-terminology/#page)** - A `Map` of page paths to page objects. Objects made via [Page Creation](/docs/page-creation) contain information needed to render a page such as component file path, page query and context. +- **[Components](/docs/gatsby-internals-terminology/#component)** - A `Map` of component file paths to page objects. +- **[Static Query Components](/docs/static-vs-normal-queries/#keeping-track-of-site-queries-during-build-in-redux-stores)** - A `Map` of any components detected with a [static query](/docs/static-query/). +- **Jobs** - Long-running and CPU-intensive processes, generally started as a side-effect to a GraphQL query. Gatsby doesn’t finish its process until all jobs are ended. +- **Webpack** - Config for the [Webpack](/docs/webpack-and-ssr/) bundler which handles code optimization and splitting of delivered javascript bundles. + +The Gatsby [redux index file](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/redux/index.ts) has two key exports, `store` and `emitter`. Throughout the bootstrap and build phases, `store` is used to get the current state and dispatch actions, while `emitter` is used to register listeners for particular actions. The store is also made available to Gatsby users through the [Node APIs](/docs/node-apis/). + +## Actions + +Actions dispatched in the store cause state changes through the reducers and also trigger listeners registered for that action on a [mitt](https://www.npmjs.com/package/mitt) `emitter`. While the `subscribe` Redux store method is typically used to connect a web framework like React, Gatsby only uses the `subscribe` method to connect the `emitter`. + +The [Gatsby actions](/docs/actions/) are all either internal, public or restricted. The public actions, and a context relevant subset of the restricted actions, are available to users through the [Node APIs](/docs/node-apis/). + +### Example action journey for `createRedirect` + +Gatsby actions have a similar journey through defining, exposing and dispatching. This section follows the [createRedirect](/docs/actions/#createRedirect) public action: + +- **Reducer case** - The redirects reducer will catch actions with a type `CREATE_REDIRECT` and make the necessary state manipulation. + +- **Side effect** - An `emitter` listener is registered for the `CREATE_REDIRECT` action type. + +- **Action creator** - An action creator, `createRedirect`, is defined in the public actions file. The action has a payload, the information needed to complete the action, and a type, the string that identifies this particular action. + +- **Expose bound action creator** - `createRedirect` is one of the public actions made available to all of the [Node APIs](/docs/node-apis/). A collection of public actions and the restricted actions available to the called API are bound to the Redux store dispatch. The bound action collection is then passed when calling the user's API function. + +- **Dispatch** - Here is an example of the `createRedirect` call that a Gatsby user could make with the [createPages](/docs/node-apis/#createPages) API in their project's [gatsby-node.js](/docs/api-files-gatsby-node/) file: + +```javascript:title=gatsby-node.js +module.exports = { + createPages: ({ actions }) => { + const { createRedirect } = actions + createRedirect({ + fromPath: "/legacy-path", + toPath: "/current-path", + }) + }, +} +``` + +By walking through an action scenario in detail, you can hopefully understand more about Gatsby's internals using Redux. + +## Additional resources + +- [Behind the Scenes: What Makes Gatsby Great](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/) +- [Gatsby Magic](/docs/gatsby-magic/) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/docs/deploying-to-aws-amplify.md b/docs/docs/deploying-to-aws-amplify.md index 315152a8c..19f9ca9a3 100644 --- a/docs/docs/deploying-to-aws-amplify.md +++ b/docs/docs/deploying-to-aws-amplify.md @@ -25,7 +25,11 @@ AWS Amplify はクライアントのライブラリー、CLI ツールチェー 1. デフォルトのビルド設定を承認します。サービスロールを持つフロントエンドでバックエンドリソースを反映する権限を Amplify Console に与えます。これによりコンソールは、コードをコミットするごとにバックエンドとフロントエンドの両方の変更を察知し、更新を行います。もし、サービスロールがなければ誘導に従い 1 つ作成し、作成したらコンソールに戻り、ドロップダウンから作成したサービスロールを選択します。 ![Gatsby Amplify2](./images/amplify-build-settings.gif) +<<<<<<< HEAD 1. 変更内容を吟味し、**Save and deploy** を選択します。Amplify Console はリポジトリーからコードを pull して、バックエンドとフロントエンドの変更をビルドし、ビルド成果物を `https://master.unique-id.amplifyapp.com` にデプロイします。おまけ：様々なデバイスでレイアウトの問題を見つけるためのアプリのスクリーンショット 🔥 +======= +1. Review your changes and then choose **Save and deploy**. The Amplify Console will pull code from your repository, build changes to the backend and frontend, and deploy your build artifacts at `https://master.unique-id.amplifyapp.com`. Bonus: Screenshots of your app on different devices to find layout issues 🔥 +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ![Gatsby Amplify2](./images/amplify-gatsby-deploy.gif) ## 参考資料： diff --git a/docs/docs/deploying-to-firebase.md b/docs/docs/deploying-to-firebase.md index 311a4b945..85c782c77 100644 --- a/docs/docs/deploying-to-firebase.md +++ b/docs/docs/deploying-to-firebase.md @@ -45,7 +45,69 @@ title: Firebase Hosting へのデプロイ 公開するディレクトリーの選択を求められたら、そのまま enter キーを押してください。デフォルトでは `public` ディレクトリーが設定されますが、Gatsby でビルドしたときのデフォルトも `public` ディレクトリーになります。 +<<<<<<< HEAD 1. サイトをデプロイする準備を整えるために `gatsby build` コマンドを実行してください。このコマンドは `public` ディレクトリーに公開用のコンテンツを生成します。 +======= +1. Update the `firebase.json` with the following cache settings + +```json +{ + "hosting": { + "public": "public", + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], + "headers": [ + { + "source": "**/*", + "headers": [ + { + "key": "cache-control", + "value": "cache-control: public, max-age=0, must-revalidate" + } + ] + }, + { + "source": "static/**", + "headers": [ + { + "key": "cache-control", + "value": "public, max-age=31536000, immutable" + } + ] + }, + { + "source": "**/*.@(css|js)", + "headers": [ + { + "key": "cache-control", + "value": "public, max-age=31536000, immutable" + } + ] + }, + { + "source": "sw.js", + "headers": [ + { + "key": "cache-control", + "value": "cache-control: public, max-age=0, must-revalidate" + } + ] + }, + { + "source": "page-data/**", + "headers": [ + { + "key": "cache-control", + "value": "cache-control: public, max-age=0, must-revalidate" + } + ] + } + ] + } +} +``` + +1. Prepare your site for deployment by running `gatsby build`. This generates a publishable version of your site in the `public` folder. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 1. つぎのコマンドでサイトをデプロイします。 diff --git a/docs/docs/environment-variables.md b/docs/docs/environment-variables.md index a12723b40..3fd46fb45 100644 --- a/docs/docs/environment-variables.md +++ b/docs/docs/environment-variables.md @@ -2,28 +2,28 @@ title: Environment Variables --- -## Environments and Environment Variables - -You can provide environment variables to your site to customise its behavior in different environments. +You can provide environment variables to your site to customize its behavior in different environments. Environment variables can be distinguished between different types. + There are environment variables that are defined in special places intended to be used in different deployment environments. You can call these “Project Env Vars”. + And there are true OS-level environment variables that might be used in command-line calls. You can call these “OS Env Vars”. In both cases you want to be able to access the relevant value of these variables for the environment you are in. -By default gatsby supports only 2 environments: +By default Gatsby supports 2 environments: -- If you run `gatsby develop`, then you will be in the 'development' environment. -- If you run `gatsby build` or `gatsby serve`, then you will be in the 'production' environment. +- **Development.** If you run `gatsby develop`, then you will be in the 'development' environment. +- **Production.** If you run `gatsby build` or `gatsby serve`, then you will be in the 'production' environment. -If you want to define other environments then you'll need to do a little more work. See ["Additional Environments" below](#additional-environments-staging-test-etc). You can also have a look at our [environment variables codesandbox](https://codesandbox.io/s/6w9jjrnnjn) while reading the examples below. +If you want to define other environments then you'll need to do a little more work. See ["Additional Environments" below](#additional-environments-staging-test-etc). You can also have a look at the [environment variables CodeSandbox](https://codesandbox.io/s/6w9jjrnnjn) while reading the examples. ## Accessing Environment Variables in JavaScript All of the Project and OS Env Vars are only directly available at build time, or -when Node.Js is running. They aren't immediately available at run time of the client code; they -need to be actively captured and embedded into our client-side JavaScript. +when Node.js is running. They aren't immediately available at run time of the client code; they +need to be actively captured and embedded into client-side JavaScript. This is achieved during the build using Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/). Once the environment variables have been embedded into the client-side code, they are accessible from the @@ -39,8 +39,7 @@ or rebuild your site after changing them. For Project Env Vars that you want to access in client-side browser JavaScript, you can define an environment config file, `.env.development` and/or `.env.production`, in your root folder. -Depending on your active environment, the correct one will be found and its values embedded as environment variables in the -browser JavaScript. +Depending on your active environment, the correct one will be found and its values embedded as environment variables in the browser JavaScript. In addition to these Project Environment Variables defined in `.env.*` files, you could also define OS Env Vars. OS Env Vars which are prefixed with `GATSBY_` will become available in @@ -54,7 +53,7 @@ GATSBY_API_URL=https://dev.example.com/api Gatsby runs several Node.js scripts at build time, notably `gatsby-config.js` and `gatsby-node.js`. OS Env Vars will already be available when Node is running, so you can add environment variables the -normal ways e.g. by adding environment variables through your hosting/build tool, your OS, or when +typical ways, e.g. by adding environment variables through your hosting/build tool, your OS, or when calling Gatsby on the command line. In Linux terminals this can be done with: @@ -67,8 +66,8 @@ In Windows it's a little more complex. [Check out this Stack Overflow article fo Project environment variables that you defined in the `.env.*` files will _NOT_ be immediately available in your Node.js scripts. To use those variables, use NPM package [dotenv](https://www.npmjs.com/package/dotenv) to -examine the active `.env.*` file and attached those values, -It's already a dependency of Gatsby, so you can require it in your `gatsby-config.js` or `gatsby-node.js` like this: +examine the active `.env.*` file and attach those values. +`dotenv` is already a dependency of Gatsby, so you can require it in your `gatsby-config.js` or `gatsby-node.js` like this: ```javascript:title=gatsby-config.js require("dotenv").config({ @@ -78,9 +77,9 @@ require("dotenv").config({ Now the variables are available on `process.env` as usual. -## Example +## Example of using an environment variable -Please note that you shouldn't commit `.env.*` files to your source control and rather use options given by your CD provider (e.g. Netlify with its [build environment variables](https://www.netlify.com/docs/continuous-deployment/#build-environment-variables)). +Please note that you shouldn't commit `.env.*` files to your source control and rather use options given by your Continuous Deployment (CD) provider. An example is Netlify with its [build environment variables](https://www.netlify.com/docs/continuous-deployment/#build-environment-variables). ```text:title=.env.development GATSBY_API_URL=https://dev.example.com/api @@ -93,6 +92,7 @@ API_KEY=927349872349798 ``` Note: since Gatsby uses the [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/) to make the environment variables available at runtime, they cannot be destructured from `process.env`; instead, they have to be fully referenced. + `GATSBY_API_URL` will be available to your site (Client-side and server-side) as `process.env.GATSBY_API_URL`.: ```jsx @@ -106,7 +106,11 @@ render() { } ``` +<<<<<<< HEAD In Node, your site has access to your `API_KEY` (Server-side) using the identifier `process.env.API_KEY`. To access it client-side, you can use a `.env.*` file containing `API_KEY`. However, we **strongly** advise against checking these files into source control as it's a security Issue to expose the API key. As a more secure alternative, you can prefix your variable with `GATSBY_` (as shown above). With this prefix, Gatsby automatically embeds the variable as process.env.GATSBY\_\* in compiled JS making it available in the browser context without exposing it elsewhere. +======= +In Node, your site has access to your `API_KEY` (Server-side) using the identifier `process.env.API_KEY`. To access it client-side, you can use a `.env.*` file containing `API_KEY`. However, you are **strongly** advised against checking these files into source control as it's a security issue to expose the API key. As a more secure alternative, you can prefix your variable with `GATSBY_` (as shown above). With this prefix, Gatsby automatically embeds the variable as `process.env.GATSBY\_\*` in compiled JS making it available in the browser context without exposing it elsewhere. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```js // In any server-side code, e.g. gatsby-config.js @@ -125,7 +129,7 @@ module.exports = { ## Reserved Environment Variables: > You can not override certain environment variables as some are used internally -> for optimizations during build +> for optimizations during build, such as: - `NODE_ENV` - `PUBLIC_DIR` @@ -136,7 +140,7 @@ Gatsby also allows you to specify another environment variable when running the If set to true, this will expose a `/__refresh` webhook that is able to receive `POST` requests to _refresh_ the sourced content. This exposed webhook can be triggered whenever remote data changes, which means you can update your data without re-launching the development server. -You can trigger this endpoint locally for example on Unix-based operating systems (like Ubuntu and MacOS) you can use `curl -X POST http://localhost:8000/__refresh`. +You can trigger this endpoint locally, for example, on Unix-based operating systems (like Ubuntu and MacOS) using `curl -X POST http://localhost:8000/__refresh`. ## Build Variables @@ -144,18 +148,19 @@ Gatsby uses additional environment variables in the build step to fine-tune the For example, you can set `CI=true` as an environment variable to allow Gatsby's build script to tailor the terminal output to an automated deployment environment. Some CI/CD tooling may already set this environment variable. This is useful for limiting the verbosity of the build output for [dumb terminals](https://en.wikipedia.org/wiki/Computer_terminal#Dumb_terminals), such as terminal in progress animations. -Gatsby detects an optimal level of parallelism for the render phase of `gatsby build` based on the reported number of physical CPUs. For builds that are run in virtual environments, you may need to adjust the number of worker parallelism with the `GATSBY_CPU_COUNT` environment variable. See [Multi-core builds](https://www.gatsbyjs.org/docs/multi-core-builds/). +Gatsby detects an optimal level of parallelism for the render phase of `gatsby build` based on the reported number of physical CPUs. For builds that are run in virtual environments, you may need to adjust the number of worker parallelism with the `GATSBY_CPU_COUNT` environment variable. See [Multi-core builds](/docs/multi-core-builds/). -## Additional Environments (Staging, Test, etc) +## Additional Environments (Staging, Test, etc.) As noted above `NODE_ENV` is a reserved environment variable in Gatsby as it is needed by the build system to make key optimizations when compiling React and other modules. For this reason it is necessary to make use of a secondary environment variable for additional environment support, and manually make the environment variables available to the client-side code. You can define your own OS Env Var to track the active environment, and then to locate the relevant Project Env Vars to load. Gatsby itself will not do anything with that OS Env Var, but you can use it in `gatsby-config.js`. -Specifically, you can use `dotenv` and your individual OS Env Var to locate the `.env.myCustomEnvironment` file, and then use module.exports to store those Project Env Vars somewhere that the client-side JavaScript can access the values (via GraphQL queries). -For instance: if you would like to add a `staging` environment with a custom Google Analytics Tracking ID, and a dedicated `apiUrl`. You can add `.env.staging` at the root of your project with the following modification to your `gatsby-config.js` +Specifically, you can use `dotenv` and your individual OS Env Var to locate the `.env.myCustomEnvironment` file, and then use `module.exports` to store those Project Env Vars somewhere that the client-side JavaScript can access the values (via GraphQL queries). + +### Google Analytics env var example -### Example +If you would like to add a `staging` environment with a custom Google Analytics Tracking ID, and a dedicated `apiUrl` you can add `.env.staging` at the root of your project. In order to do so, use the following modification to your `gatsby-config.js`: ```text:title=.env.staging GA_TRACKING_ID="UA-1234567890" diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index 3d5f7ee5a..c3dd6a4e6 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -10,7 +10,11 @@ ESLint とは JavaScript の静的解析に使われるオープンソースの Gatsby は [ESLint](https://eslint.org) をデフォルトで組み込んでいます。ほとんどのユーザーにとってはそのままの設定で十分でしょう。もしあなたが ESLint の設定をさらにカスタマイズ（例えば組織特有の設定など）したいのであれば、このガイドを参考にしてください。 +<<<<<<< HEAD Gatsby にあらかじめ用意されている [ESLint config](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.js)を応用して、お好みのルールやプラグインを追加してください。 +======= +You'll replicate (mostly) the [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts) so you can then add additional presets, plugins, and rules. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```shell @@ -38,7 +42,11 @@ module.exports = { } ``` +<<<<<<< HEAD ヒント： ESLint ファイルが存在しない場合、Gatsby は ESLint ローダーを追加します。このローダーは ESLint の実行結果を、Gatsby が実行されているターミナル画面と、ブラウザーの開発コンソールに表示させます。これにより新たに保存したファイルに対しての分析結果をいちはやく確認できます。カスタマイズされた `.eslintrc` ファイルが存在する場合、Gatsby は開発者に ESLint の管理を完全にまかせます。したがって `eslint-loader` はオーバーライドされ、ルールを変更するには開発者が全てを管理する必要があります。これを実現するひとつの手段として、[`gatsby-eslint-plugin`](/packages/gatsby-plugin-eslint/)が用意されているのでそちらも参考にしてみてください。これを使う場合もあらかじめ Gatsby に用意されている [ESLint config](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.js)は完全にオーバーライドされます。もしこれらの設定を活用したければ、作成される設定ファイルにコピーする必要があります。 +======= +Note: When there is no ESLint file Gatsby implicitly adds a barebones ESLint loader. This loader pipes ESLint feedback into the terminal window where you are running or building Gatsby and also to the console in your browser developer tools. This gives you consolidated, immediate feedback on newly-saved files. When you include a custom `.eslintrc` file, Gatsby gives you full control over the ESLint configuration. This means that it will override the built-in `eslint-loader` and you need to enable any and all rules yourself. One way to do this is to use the Community plugin [`gatsby-eslint-plugin`](/packages/gatsby-plugin-eslint/). This also means that the default [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts) will be entirely overwritten. If you would still like to take advantage of those rules, you'll need to copy them to your local file. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### ESLint を無効にする diff --git a/docs/docs/gatsby-cli.md b/docs/docs/gatsby-cli.md index c06cafdb2..15800ba9d 100644 --- a/docs/docs/gatsby-cli.md +++ b/docs/docs/gatsby-cli.md @@ -33,10 +33,17 @@ gatsby new [ []] #### 引数 +<<<<<<< HEAD | 引数 | 概要 | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | site-name | プロジェクトのディレクトリーを作成するのに使われる Gatsby を用いて作りたいサイトの名前 | | starter-url | Gatsby スターターの URL またはローカルのファイルパス。 デフォルトは [gatsby-starter-default](https://github.com/gatsbyjs/gatsby-starter-default)。 詳細は [Gatsby starters](/docs/gatsby-starters/) をご覧ください。 | +======= +| Argument | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| site-name | Your Gatsby site name, which is also used to create a project directory. | +| starter-url | A Gatsby starter URL or local file path. Defaults to [gatsby-starter-default](https://github.com/gatsbyjs/gatsby-starter-default); see the [Gatsby starters](/docs/starters/) docs for more information. | +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 > 注釈: `site-name` には文字と数字の組み合わせしか使えません。 もし、 `.` や `./`、 `` が名前に含まれていた場合、`gatsby new` コマンドはエラーで異常終了します。 @@ -112,12 +119,22 @@ Gatsby サイトのルートディレクトリーにて、アプリをコンパ #### オプション +<<<<<<< HEAD | オプション | 概要 | | :--------------------------: | -------------------------------------------------------------------------------------------------------------------- | | `--prefix-paths` | リンクのパスに与えられた引数を追加して、サイトをビルドします。(config に pathPrefix の設定が必要） | | `--no-uglify` | JS バンドルに uglify をかけずに、サイトをビルドします。（デバッグ用） | | `--open-tracing-config-file` | トレーサー設定ファイル（OpenTracing 互換）。詳細は[Performance Tracing](/docs/performance-tracing/) をご覧ください。 | | `--no-color`, `--no-colors` | ターミナルの出力の色付けを無効にします。 | +======= +| Option | Description | +| :--------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `--prefix-paths` | Build site with link paths prefixed (set pathPrefix in your config) | +| `--no-uglify` | Build site without uglifying JS bundles (for debugging) | +| `--profile` | Build site with react profiling. See [Profiling Site Performance with React Profiler](/docs/profiling-site-performance-with-react-profiler/) | +| `--open-tracing-config-file` | Tracer configuration file (OpenTracing compatible). See [Performance Tracing](/docs/performance-tracing/) | +| `--no-color`, `--no-colors` | Disables colored terminal output | +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 上記に加えて、ビルドを最適化するためのより高度な設定のためにいくつかの [build environment variables](/docs/environment-variables/#build-variables) があります。例えば、　`CI=true` を環境変数として設定すると[ダム端末](https://ja.wikipedia.org/wiki/%E7%AB%AF%E6%9C%AB#%E3%83%80%E3%83%A0%E7%AB%AF%E6%9C%AB)向けに出力を調整できます。 diff --git a/docs/docs/gatsby-image.md b/docs/docs/gatsby-image.md index 826f1e6ed..a992cd302 100644 --- a/docs/docs/gatsby-image.md +++ b/docs/docs/gatsby-image.md @@ -8,6 +8,7 @@ Gatsby のサイトが非常に高速である理由のひとつに、私たち デモ：[https://using-gatsby-image.gatsbyjs.org/](https://using-gatsby-image.gatsbyjs.org/) +<<<<<<< HEAD ## このドキュメントで取り扱うこと - [Gatsby Image を始める準備](#setting-up-gatsby-image) @@ -20,6 +21,9 @@ Gatsby のサイトが非常に高速である理由のひとつに、私たち - [Gatsby Image プロパティ](#gatsby-image-props) ## Gatsby Image を始める準備 +======= +## Setting up Gatsby Image +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Gatsby Image を使用するには、`gatsby-image` と共に必要なプラグインである `gatsby-transformer-sharp` と `gatsby-plugin-sharp` をインストールします。あなたの `gatsby-config.js` ファイル内のパッケージを参照してください。また、この設定ファイルで [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/) にオプションを追加することもできます。 @@ -129,7 +133,11 @@ file(relativePath: { eq: "images/default.jpg" }) { } ``` +<<<<<<< HEAD 詳細については、[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/?=#fixed) をご覧ください。 +======= +Read more about fixed image queries in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/#fixed) README. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### _可変_ コンテナに合わせて伸縮する画像 @@ -175,20 +183,26 @@ export default () => { - `maxWidth` (int, 初期値：800) - `maxHeight`(int) +<<<<<<< HEAD - `quality` (int, 初期値：50) - `srcSetBreakpoints` (array of int, 初期値：`[]`) - `fit` (string, 初期値：`[sharp.fit.cover][6]`) - `background` (string, 初期値：`rgba(0,0,0,1)`) +======= +- `quality` (int, default: 50) +- `srcSetBreakpoints` (array of int, default: []) +- `background` (string, default: `rgba(0,0,0,1)`) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### 返り値 - `base64` (string) -- `src` (string) -- `width` (int) -- `height` (int) - `aspectRatio` (float) - `src` (string) - `srcSet` (string) +- `srcSetType` (string) +- `sizes` (string) +- `originalImg` (string) ここでは、クエリーにすべての項目を入力しなくても上記の項目を 1 行ですべて返してくれる `GatsbyImageSharpFluid` のようなフラグメントが便利です。 @@ -204,7 +218,11 @@ file(relativePath: { eq: "images/default.jpg" }) { } ``` +<<<<<<< HEAD 詳細については、[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/?=#fluid) をご覧ください。 +======= +Read more about fluid image queries in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/#fluid) README. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### サイズ変更した画像 @@ -240,6 +258,7 @@ allImageSharp { } ``` +<<<<<<< HEAD ### 共用クエリーパラメーター `gatsby-config.js` 内の `gatsby-plugin-sharp` の設定に加えて、_固定_ と _可変_ の両方に適用できる追加のクエリーオプションがあります。 @@ -249,6 +268,21 @@ allImageSharp { - `toFormat` (string, 初期値：\`\`) - `cropFocus` (string, 初期値：`[sharp.strategy.attention][6]`) - `pngCompressionSpeed` (int, 初期値：4) +======= +Read more about resized image queries in the [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/#resize) README. + +### Shared query parameters + +In addition to `gatsby-plugin-sharp` settings in `gatsby-config.js`, there are additional query options that apply to _fluid_, _fixed_, and _resized_ images: + +- [`grayscale`](/packages/gatsby-plugin-sharp/#grayscale) (bool, default: false) +- [`duotone`](/packages/gatsby-plugin-sharp/#duotone) (bool|obj, default: false) +- [`toFormat`](/packages/gatsby-plugin-sharp/#toformat) (string, default: \`\`) +- [`cropFocus`](/packages/gatsby-plugin-sharp/#cropfocus) (string, default: `ATTENTION`) +- [`fit`](/packages/gatsby-plugin-sharp/#fit) (string, default: `COVER`) +- [`pngCompressionSpeed`](/packages/gatsby-plugin-sharp/#pngcompressionspeed) (int, default: 4) +- [`rotate`](/packages/gatsby-plugin-sharp/#rotate) (int, default: 0) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ここでは、`duotone` オプションを固定画像に適用してみます。 @@ -263,10 +297,18 @@ fixed( ```
+<<<<<<< HEAD Jay Gatsby holding wine class in normal color and duotone.
デュオトーン | 適用前 - 適用後
+======= + Jay Gatsby holding wine class in normal color and duotone. +
Duotone | Before - After
+>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097
そして、`grayscale` オプションを固定画像に適用した例です。 @@ -278,6 +320,7 @@ fixed( ```
+<<<<<<< HEAD Jay Gatsby holding wine class in normal color and duotone.
グレースケール | 適用前 - 適用後 @@ -285,12 +328,26 @@ fixed(
詳細については、[`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) をご覧ください。 +======= + Jay Gatsby holding wine class in normal color and duotone. +
Grayscale | Before - After
+ + +Read more about shared image query parameters in the [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/#shared-options) README. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## 画像のクエリーフラグメント GraphQL には、「クエリーフラグメント」と呼ばれる考え方があり、これは再利用可能なクエリーの一部です。`gatsby-image` を使った構築を簡単にするため、`gatsby-image` をサポートする Gatsby 画像処理プラグインにはあなたがクエリーに簡単に含めることができるフラグメントが付属しています。 +<<<<<<< HEAD > ヒント: クエリーでフラグメントを使用するかどうかはあなたが設定したデータソースによって異なります。詳しくは [gatsby-image](/packages/gatsby-image#fragments) をご覧ください。 +======= +> Note: using fragments in your queries depends on which data source(s) you have configured. Read more about image query fragments in the [gatsby-image](/packages/gatsby-image/#fragments) README. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### `gatsby-transformer-sharp` の共通フラグメント diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md index 801c39aa1..372ac4bf4 100644 --- a/docs/docs/glossary.md +++ b/docs/docs/glossary.md @@ -6,8 +6,8 @@ disableTableOfContents: true Gatsby をはじめたばかりの時は、覚えるべき用語がたくさんあって大変でしょう。この用語集ではよく使われる用語の意味と、Gatsby のサイト上でどのように使われているかを説明します。 ## A @@ -34,7 +34,11 @@ API とは Application Programming Interface の略で、アプリ間の連絡 サイトの[表](#public)には出ない、裏で走っている機能のことです。このサイトでは、主に [CMS](#cms) のコントロールパネルのことを指します。これらは、Node.js, PHP, Go, ASP.net, Ruby, Java 等のサーバーサイド言語によって実装されています。 +<<<<<<< HEAD ### ビルド (Build) +======= +### [Build](/docs/glossary/build/) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Gatsby では、ビルドとはあなたのコードやコンテンツを 1 つのパッケージとして、ホストしてアクセスるウェブサイトに仕上げる行為を指します。「_ビルド時_」とも呼ばれます。参照：[バックエンド](#backend)、[サーバサイド](#server-side)。 @@ -76,7 +80,15 @@ CMS とはコンテンツ・マネジメント・システム (Content Managemen 設定ファイルのこと。Gatsby では `gatsby-config.js` を使って Gatsby にあなたのサイトの設定を行います。よく使われる設定としては、サイトの metadata を設定してあなたのサイトの SEO を向上させるものがあります。 +<<<<<<< HEAD ### [継続的デプロイ (Continuous Deployment)](/docs/glossary/continuous-deployment) +======= +### [Content Delivery Network](/docs/glossary/content-delivery-network) + +A content delivery network (CDN) is a highly distributed network of servers that stores copies of your content in locations that are closer to your site's visitors. Content delivery networks improve your site's performance by reducing the time needed to complete a network request. + +### [Continuous Deployment](/docs/glossary/continuous-deployment) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 継続的デプロイ (Continuout Deployment, CD) とは、あなたのプロジェクトのリリースプロセスを自動化するものです。継続的デプロイワークフローは自動的にあなたのプロジェクトのテスト、およびビルドを行い、差分に問題が無いと判断されたら自動的に公開されます。 @@ -206,11 +218,11 @@ Linting はコードを解析し、構文エラー等を検出するためのプ ## M -### MDX +### [MDX](/docs/glossary/mdx/) [React](#react) の[コンポーネント](#component)を [Markdown](#markdown) 上でそのまま使用するための拡張機能。 -### Markdown +### [Markdown](/docs/glossary/markdown/) HTML のコンテンツをプレーンテキストで書くための手法です。コンテンツのタイプを特別な文字列を使って表します。例えば、ハッシュ（#)を使って[見出し](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements)を表したり、下線（\_)やアスタリスク（\*)を使ってテキストの強調を表したりします。 @@ -294,7 +306,15 @@ Gatsby に元から用意されてなかった機能を追加するためのコ ### サーバーサイド (Server-side) +<<<<<<< HEAD [クライアント・サーバモデル](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%83%BC%E3%83%90%E3%83%A2%E3%83%87%E3%83%AB)におけるサーバーサイドとは、ネットワーク上のサービスやリソースへとアクセスする為にプログラムによって実行された操作のことです。Gatsby では [Node.js](#nodejs) というサーバーサイドの技術を使ってビルド時にページをコンパイルしています。他のサービスでは[クライアントサイド](#client-side) JavaScript を用いて[ブラウザーのランタイム](#runtime)でページを提供しているサービスもあります。参照：[フロントエンド](#frontend)、[バックエンド](#backend). +======= +The server-side part of the [client-server relationship](https://en.wikipedia.org/wiki/Client%E2%80%93server_model) refers to operations performed by a computer program which manages access to a centralized resource or service in a computer network. See also: [frontend](#frontend) and [backend](#backend). + +### [Server-side rendering](/docs/glossary/server-side-rendering/) + +Using a [Node.js](#nodejs)-based server to generate HTML in response to a request from a user agent such as a browser. Gatsby uses the server-side technology [Node.js](#nodejs) to compile pages at build time, as opposed to serving them at [browser runtime](#runtime) with [client-side](#client-side) JavaScript. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### ソースコード (Source Code) @@ -348,6 +368,10 @@ UI とはユーザーインターフェースの事を指します。HCI (Human Gatsby が使用する [JavaScript](#javascript) アプリで、ウェブサイトのコードをバンドルするのに使われます。これは[ビルド時](#build)に自動的に行われます。 +### [WPGraphQL](/docs/glossary/wpgraphql) + +A WordPress plugin that adds [GraphQL](#graphql) capabilities to WordPress. It's another way that you can use WordPress as a content source for Gatsby. + ## X ## Y diff --git a/docs/docs/graphql.md b/docs/docs/graphql.md index 5cb907644..a5f4b9bbb 100644 --- a/docs/docs/graphql.md +++ b/docs/docs/graphql.md @@ -3,7 +3,11 @@ title: GraphQL と Gatsby overview: true --- +<<<<<<< HEAD あなたが Gatsby でページを作る時、データには [GraphQL](http://graphql.org/) という問い合わせ言語を用いてアクセスします。GraphQL によって、あなたがデータに求めるものを宣言的に表現できます。GraphQL は `クエリー` と共に実行されます。クエリーとは、あなたが必要なデータを表したものです。クエリーはこのような見た目になります。 +======= +When building with Gatsby, you access your data through a query language named [GraphQL](https://graphql.org/). GraphQL allows you to declaratively express your data needs. This is done with `queries`, queries are the representation of the data you need. A query looks like this: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```graphql { diff --git a/docs/docs/mdx/getting-started.md b/docs/docs/mdx/getting-started.md index dba2800c1..e1aec00db 100644 --- a/docs/docs/mdx/getting-started.md +++ b/docs/docs/mdx/getting-started.md @@ -52,6 +52,15 @@ MDX を追加したい Gatsby サイトがあるなら、以下の手順で [gat > **ヒント:** Frontmatter や エクスポート、`tableOfContents` といったフィールドのデータを取得したいなら、`src/pages` を読み込むよう設定した `gatsby-source-filesystem` をプロジェクトに追加しておくとよいでしょう。 +<<<<<<< HEAD ## 次は？ +======= + + +## What's next? +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 [MDX の書き方](/docs/mdx/writing-pages) に進み、Gatsby と MDX で他にどんなことができるのか見てみましょう！ diff --git a/docs/docs/performance.md b/docs/docs/performance.md index 5a0a041ff..3e36ce49a 100644 --- a/docs/docs/performance.md +++ b/docs/docs/performance.md @@ -3,9 +3,15 @@ title: パフォーマンス overview: true --- +<<<<<<< HEAD パフォーマンスはすでに Gatsby の心臓部となってますが、利用者ができるだけ速くコンテンツを利用できるようにやれることを全部やるのはとても重要です。利用者のすべてが高速回線やデスクトップからのブラウジングを享受してはいません。利用者がどこから来ていようと最適な体験を届けるためには、何も仮定せず、できるだけ最小で最高速のサイトを届けることが重要です。Gatsby が重労働の多くをすでにやってくれているのでサイトの超高速化に必要なことは多くないのですが、以下のガイドに従うことで、できうる限り最良のパフォーマンスとコンテンツの配信を確実にできます。 このセクションではキャッシュを最適化するいくつかの方法、パフォーマンス特性を簡単にテストするための `localhost` での `https` のセットアップ、さらにウェブサイトのパフォーマンスの計測方法をカバーしており、ウェブサイトのパフォーマンスを最大化するのに必要なツールがすべて手に入るでしょう。なぜパフォーマンスがそんなに重要なのかについてのより掘り下げた説明をお望みであれば、Addy Osmani による JavaScript のコストについての[こちらの記事](https://v8.dev/blog/cost-of-javascript-2019)をチェックしてみてください。 +======= +While performance is already at the heart of Gatsby, it's important to ensure you are doing all you can to make your content available to your users as fast as possible. Not all users are enjoying high speed connections, or browsing from a desktop. It's important to make no assumptions and serve the smallest and fastest site possible, to provide an optimal experience for wherever your users might be coming from. Since Gatsby is already doing a lot of the heavy lifting for you there isn't a lot required out of the box to make your site blazing fast, but by following these guides you can ensure the best possible performance and delivery of your content to your users. + +This section will cover some ways you can optimize caching, set up `https` on `localhost` for easier testing of performance features, as well as how to measure the performance of your websites, giving you all the tools you need to maximize site performance. If you would like a more in-depth explanation of why performance matters so much, check out this article by Addy Osmani on the [Cost of JavaScript]](https://v8.dev/blog/cost-of-javascript-2019). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Lighthouse のスコアがすべてグリーンとなりますように 😀。 diff --git a/docs/docs/recipes.md b/docs/docs/recipes.md index e1800a003..f0dc88831 100644 --- a/docs/docs/recipes.md +++ b/docs/docs/recipes.md @@ -46,6 +46,7 @@ tableOfContentsDepth: 2 あなたのウェブサイトにスタイルを追加する手段はたくさんあります。公式チームとコミュニティーが提供するプラグインのおかげで、ほとんどすべての方法が Gatsby で使えます。 +<<<<<<< HEAD - [レイアウトコンポーネントを使わないグローバル CSS の使用](/docs/recipes/styling-css#using-global-css-files-without-a-layout-component) - [レイアウトコンポーネント内のグローバルなスタイル](/docs/recipes/styling-css#using-global-styles-in-a-layout-component) - [Styled Components](/docs/recipes/styling-css#using-styled-components) @@ -56,12 +57,36 @@ tableOfContentsDepth: 2 - [Google Fonts](/docs/recipes/styling-css#using-google-fonts) ## [3. スターターを活用する](/docs/recipes/working-with-starters) +======= +- [Using global CSS files without a Layout component](/docs/recipes/styling-css#using-global-css-files-without-a-layout-component) +- [Using global styles in a layout component](/docs/recipes/styling-css#using-global-styles-in-a-layout-component) +- [Using Styled Components](/docs/recipes/styling-css#using-styled-components) +- [Using CSS Modules](/docs/recipes/styling-css#using-css-modules) +- [Using Sass/SCSS](/docs/recipes/styling-css#using-sassscss) +- [Adding a Local Font](/docs/recipes/styling-css#adding-a-local-font) +- [Using Emotion](/docs/recipes/styling-css#using-emotion) +- [Using Google Fonts](/docs/recipes/styling-css#using-google-fonts) +- [Using Font Awesome](/docs/recipes/styling-css#using-fontawesome) + +## [3. Working with plugins](/docs/recipes/working-with-plugins) + +[Plugins](/docs/plugins/) are Node.js packages that implement Gatsby APIs that are maintained officially, or by the community. + +- [Using a plugin](/docs/recipes/working-with-plugins#using-a-plugin) +- [Creating a new plugin using a plugin starter](/docs/recipes/working-with-plugins#creating-a-new-plugin-using-a-plugin-starter) + +## [4. Working with starters](/docs/recipes/working-with-starters) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 [スターター](/docs/starters/) は、公式チームやコミュニティーによってメンテナンスされている Gatsby サイトの雛形です。 - [スターターを使う](/docs/recipes/working-with-starters#using-a-starter) +<<<<<<< HEAD ## [4. テーマを使う](/docs/recipes/working-with-themes) +======= +## [5. Working with themes](/docs/recipes/working-with-themes) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Gatsby テーマを使用するとサイトの見た目を統一できます。 テーマをシームレスに更新したり、まとめて作成したり、あるいは互換性のあるテーマを別のものに交換したりすることもできます。 @@ -69,7 +94,11 @@ Gatsby テーマを使用するとサイトの見た目を統一できます。 - [テーマスターターを使って新しいサイトをつくる](/docs/recipes/working-with-themes#creating-a-new-site-using-a-theme-starter) - [新しいテーマをつくる](/docs/recipes/working-with-themes#building-a-new-theme) +<<<<<<< HEAD ## [5. データの取得](/docs/recipes/sourcing-data) +======= +## [6. Sourcing data](/docs/recipes/sourcing-data) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ファイルシステムやデータベースなど、複数の場所からデータを取得し Gatsby サイトに取り込みます。 @@ -80,7 +109,11 @@ Gatsby テーマを使用するとサイトの見た目を統一できます。 - [GraphQL を使わずに外部からデータを取得しページを作成する](/docs/recipes/sourcing-data#pulling-data-from-an-external-source-and-creating-pages-without-graphql) - [Drupal からデータを取得する](/docs/recipes/sourcing-data#sourcing-content-from-drupal) +<<<<<<< HEAD ## [6. データを要求する](/docs/recipes/querying-data) +======= +## [7. Querying data](/docs/recipes/querying-data) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Gatsby では、単一の GraphQL インターフェイスを通じてあらゆるソースからデータにアクセスできます。 @@ -94,7 +127,11 @@ Gatsby では、単一の GraphQL インターフェイスを通じてあらゆ - [GraphQL Query Fragments](/docs/recipes/querying-data#graphql-query-fragments) - [fetch によるクライアントサイドクエリ](/docs/recipes/querying-data#querying-data-client-side-with-fetch) +<<<<<<< HEAD ## [7. 画像を取り扱う](/docs/recipes/working-with-images) +======= +## [8. Working with images](/docs/recipes/working-with-images) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 イメージを静的なリソースとして使ったり、あるいはプラグインを通じて最適化プロセスを自動化しましょう。 @@ -103,17 +140,32 @@ Gatsby では、単一の GraphQL インターフェイスを通じてあらゆ - [gatsby-image を使って画像を最適化するクエリを書く](/docs/recipes/working-with-images#optimizing-and-querying-local-images-with-gatsby-image) - [Front-matter で gatsby-image による最適化を指示する](/docs/recipes/working-with-images#optimizing-and-querying-images-in-post-frontmatter-with-gatsby-image) +<<<<<<< HEAD ## [8. データの変換](/docs/recipes/transforming-data) +======= +## [9. Transforming data](/docs/recipes/transforming-data) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Gatsby でのデータ変換はプラグインによって実現されています。Transformer プラグインは source プラグインを通じてデータを取得し、実際に使う形式へ変換します（例：JSON を JavaScript オブジェクトにする等）。 - [Markdown を HTML に変換する](/docs/recipes/transforming-data#transforming-markdown-into-html) - [GraphQL を使って画像をグレースケールに変換する](/docs/recipes/transforming-data#transforming-images-into-grayscale-using-graphql) +<<<<<<< HEAD ## [9. サイトのデプロイ](/docs/recipes/deploying-your-site) +======= +## [10. Deploying your site](/docs/recipes/deploying-your-site) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 お披露目の時間です。サイトの出来栄えに満足したら、全世界に公開しましょう！ +<<<<<<< HEAD - [デプロイの準備](/docs/recipes/deploying-your-site#preparing-for-deployment) - [Netlify によるデプロイ](/docs/recipes/deploying-your-site#deploying-to-netlify) - [ZEIT Now によるデプロイ](/docs/recipes/deploying-your-site#deploying-to-zeit-now) +======= +- [Preparing for deployment](/docs/recipes/deploying-your-site#preparing-for-deployment) +- [Deploying to Netlify](/docs/recipes/deploying-your-site#deploying-to-netlify) +- [Deploying to ZEIT Now](/docs/recipes/deploying-your-site#deploying-to-zeit-now) +- [Deploying to Cloudflare Workers](/docs/recipes/deploying-your-site#deploying-to-cloudflare-workers) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/docs/recipes/deploying-your-site.md b/docs/docs/recipes/deploying-your-site.md index a6790830e..fd96c7227 100644 --- a/docs/docs/recipes/deploying-your-site.md +++ b/docs/docs/recipes/deploying-your-site.md @@ -104,4 +104,34 @@ gatsby build && gatsby serve ### 追加資料 +<<<<<<< HEAD - [ZEIT Now にデプロイする](/docs/deploying-to-zeit-now/) +======= +- [Deploying to ZEIT Now](/docs/deploying-to-zeit-now/) + +## Deploying to Cloudflare Workers + +Use [`wrangler`](https://developers.cloudflare.com/workers/tooling/wrangler/) to deploy your Gatsby application globally without leaving the command-line interface. + +### Prerequisites + +- An account on [Cloudflare](https://dash.cloudflare.com/sign-up) +- A [Workers Unlimited plan](https://developers.cloudflare.com/workers/about/pricing/) for \$5/month to enable the KV store, which is required to serve the Gatsby files. +- A [Gatsby site](/docs/quick-start) set up with Gatsby's CLI +- [wrangler](https://developers.cloudflare.com/workers/tooling/wrangler/install/) installed globally (`npm i -g @cloudflare/wrangler`) + +### Directions + +1. Build your Gatsby application using `gatsby build` +2. Run `wrangler config` where you'll be prompted for your [Cloudflare API token](https://developers.cloudflare.com/workers/quickstart/#api-token) +3. Run `wrangler init --site` +4. Configure `wrangler.toml`. First add [account ID](https://developers.cloudflare.com/workers/quickstart/#account-id-and-zone-id) field and then either + 1. A free workers.dev domain by setting `workers_dev = true` + 2. A custom domain on Cloudflare by setting `workers_dev = false`, `zone_id = "abdc..` and `route = customdomain.com/*` +5. In `wrangler.toml` set `bucket = "./public"` +6. Run `wrangler publish` and your site will be deployed in seconds! + +### Additional resources + +- [Hosting on Cloudflare](/docs/deploying-to-cloudflare-workers) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/docs/recipes/sourcing-data.md b/docs/docs/recipes/sourcing-data.md index 067e1f3e7..2a4ae5990 100644 --- a/docs/docs/recipes/sourcing-data.md +++ b/docs/docs/recipes/sourcing-data.md @@ -57,10 +57,17 @@ query MyPokemonQuery { ### 追加資料 +<<<<<<< HEAD - [チュートリアル パート 5](/tutorial/part-five/#source-plugins) にて、`gatsby-source-filesystem` を用いた例の概略 - [Gatsby ライブラリ](/plugins/?=source)内で検索可能なデータ取得プラグイン - [Pixabay データ取得プラグインのチュートリアル](/docs/pixabay-source-plugin-tutorial/) 内での、データ取得プラグインのハンズオン - createNode の[ドキュメント](/docs/actions/#createNode) +======= +- Walk through an example using the `gatsby-source-filesystem` plugin in [tutorial part five](/tutorial/part-five/#source-plugins) +- Search available source plugins in the [Gatsby library](/plugins/?=source) +- Understand source plugins by building one in the [Pixabay source plugin tutorial](/tutorial/pixabay-source-plugin-tutorial/) +- The createNode function [documentation](/docs/actions/#createNode) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## GraphQL を用いたブログ投稿やページの為の Markdown データの取得 diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md index 2208f6501..86e1b2533 100644 --- a/docs/docs/recipes/styling-css.md +++ b/docs/docs/recipes/styling-css.md @@ -413,6 +413,53 @@ _ヒント: 上記の例の場合、ふさわしい CSS の宣言は `font-famil ### 追加のリソース +<<<<<<< HEAD - [Typography.js](/docs/typography-js/) - Google fonts を Gatsby 製のサイトで使う他のオプション - [The Typefaces Project ドキュメント](https://github.com/KyleAMathews/typefaces/blob/master/README.md) - [Kyle Mathews' blog による実例](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/) +======= +- [Typography.js](/docs/typography-js/) - Another option for using Google fonts on a Gatsby site +- [The Typefaces Project Docs](https://github.com/KyleAMathews/typefaces/blob/master/README.md) +- [Live example on Kyle Mathews' blog](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/) + +## Using Font Awesome + +Using [Font Awesome](https://fontawesome.com/) gives you access to thousands of icons for use on your site. Since Gatsby sites are React sites, it's recommended to use the [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) SVG library. + +### Prerequisites + +- The [Gatsby CLI](/docs/gatsby-cli/) installed +- A [Gatsby site](/docs/quick-start) + +### Directions + +1. Install the `react-fontawesome` dependencies. + +```shell +npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome +``` + +> Note that there are multiple icon libraries within `react-fontawesome`. You may also be interested in `free-regular-svg-icons` and `free-solid-svg-icons` which you would install the same way. + +2. Import the `FontAwesomeIcon` component and the icon you want to use. Then use the icon as a component directly in your JSX files: + +```jsx:title=index.js +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faReact } from "@fortawesome/free-brands-svg-icons" + +const IndexPage = () => ( + + //highlight-line + +) + +export default IndexPage +``` + +> This example imports a single, specific icon and uses it for improved performance. As an alternative, you can [import the icons and build a library](https://github.com/FortAwesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently). + +### Additional resources + +- [Font Awesome](https://fontawesome.com/) +- [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/docs/recipes/working-with-themes.md b/docs/docs/recipes/working-with-themes.md index f9aba7142..688a468f6 100644 --- a/docs/docs/recipes/working-with-themes.md +++ b/docs/docs/recipes/working-with-themes.md @@ -9,7 +9,11 @@ tableOfContentsDepth: 1 あなたのプロジェクトで使いたいテーマが見つかりましたか？すばらしい！以下の手順に沿ってテーマを適用できます。 +<<<<<<< HEAD > もっと他のテーマを探したい場合は、[テーマ一覧](https://www.npmjs.com/search?q=gatsby-theme)を参照。 +======= +> If you'd like to take a look at more theme options, check out this [list of themes](/plugins?=gatsby-theme). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### 前提条件 @@ -32,11 +36,15 @@ cd {your-project-name} npm install gatsby-theme-blog ``` +<<<<<<< HEAD 3. `gatsby.config.js` にテーマを追加します。 +======= +3. Add theme to `gatsby-config.js` +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 あなたが使いたいテーマの README に沿って、必要な設定を加えてください。 -```shell +```javascript:title=gatsby-config.js module.exports = { plugins: [ { @@ -55,15 +63,27 @@ module.exports = { } ``` +<<<<<<< HEAD 4. `gatsby develop` を起動してください。`http://localhost:8000/{basePath}` にて、テーマが適用されたページが表示されるはずです。 > 例で使用した `gatsby-theme-blog` のテーマをさらにカスタマイズしたい場合は、[Gatsby-theme-blog Documentation](https://www.npmjs.com/package/gatsby-theme-blog) に手順が記載されています。 +======= +4. Run `gatsby develop`, the theme should now be running on your site. In this case with the blog theme configured with the `basePath` to `"/blog"`, it should be available at `http://localhost:8000/blog`. + +> To learn how to further customize a theme, check out the available paths on [Gatsby-theme-blog Documentation](/packages/gatsby-theme-blog/#theme-options). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### 追加の資料 +<<<<<<< HEAD - テーマをさらにカスタマイズしたい場合は、[Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/) のドキュメントを参照。 - プロジェクトに[複数のテーマを適用](https://www.gatsbyjs.org/docs/themes/using-multiple-gatsby-themes/)することも可能です。 +======= +- To learn how to further customize a theme, check out the docs on [Gatsby theme shadowing.](/docs/themes/shadowing/) + +- You can also [use multiple themes](/docs/themes/using-multiple-gatsby-themes/) on a project. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## テーマスターターを使用して新しくサイトを作成する diff --git a/docs/docs/seo.md b/docs/docs/seo.md index e8e2eb893..ff928981f 100644 --- a/docs/docs/seo.md +++ b/docs/docs/seo.md @@ -72,4 +72,8 @@ Google は、あらゆる Web や世界中の情報を収集するのはもち ## その他の資料 +<<<<<<< HEAD より詳しく知りたい場合は、[Gatsby における SEO についての記事](/blog/tags/seo/)をご覧ください。 +======= +You might also be interested in [blog posts about SEO in Gatsby](/blog/tags/seo/) and [an advanced tutorial about SEO and social sharing cards](/tutorial/seo-and-social-sharing-cards-tutorial/). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index df0277946..c38e2e029 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -14,7 +14,11 @@ gatsby new gatsby-YAML-JSON-at-buildtime https://github.com/gatsbyjs/gatsby-star ## YAML からデータを直接インポートする +<<<<<<< HEAD この項では YAML からデータを取得します。代わりに JSON を使用してインポートする方法を確認するには、[次の項](#Directly-importing-data-with-JSON) に移動してください。 +======= +This section starts with YAML data sourcing. If you want to see how to do it using JSON instead, jump to the [next section](#directly-import-data-with-json). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### YAML コンテンツを追加する diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index d89d641de..7576cd9fd 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -24,7 +24,11 @@ gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default ### ソースプラグインを追加する +<<<<<<< HEAD 加えて、`gatsby-source-graphql` が必要です。GraphCMS は GraphQL をネイティブで使用するので、Gatsby の機能を利用してふたつの GraphQL API をつなぎ合わせるだけで、コンテンツの変換に必要な時間を短縮できます。gatsby-source-x-cms のような特別なプラグインは必要なく、`gatsby-source-graphql` があれば十分です。 +======= +Additionally, you need the `gatsby-source-graphql` library. Because GraphCMS uses GraphQL natively, you will take advantage of Gatsby's ability to simply stitch two GraphQL APIs together, reducing the time required to transform content. There is no need to use a special gatsby-source-x-cms plugin, the GraphQL source plugin is all you need. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 次のコマンドでインストールできます。 diff --git a/docs/docs/sourcing-from-private-apis.md b/docs/docs/sourcing-from-private-apis.md index c52e45ec8..f78ea2569 100644 --- a/docs/docs/sourcing-from-private-apis.md +++ b/docs/docs/sourcing-from-private-apis.md @@ -8,9 +8,15 @@ Gatsby の視点からすると、パブリック API とプライベート API プライベート API からデータを取得するために使用できる 3 つの方法があります： +<<<<<<< HEAD 1. プライベート API が GraphQL API である場合、 [`gatsby-source-graphql`](/packages/gatsby-source-graphql/) が利用できます。 2. プライベート API が GraphQL API ではなく、また GraphQL を利用するのが初めてであれば、ガイド「[GraphQL 外から Gatsby を使用する](/docs/using-gatsby-without-graphql/)」で説明されているように、データを非構造化データとして扱い、ビルドする際に取得します。ただし、ガイドでも強調されているように、この方法にはいくつかのトレードオフが伴います。 3. チュートリアル「[ソースプラグインチュートリアル](/docs/pixabay-source-plugin-tutorial/)」にしたがって、ソースプラグインを作成します。 +======= +1. If your private API is a GraphQL API, you can use [`gatsby-source-graphql`](/packages/gatsby-source-graphql/). +2. If your private API is not a GraphQL API and you are new to GraphQL, treat the data as unstructured data and fetch it during build time, as described by the guide "[Using Gatsby without GraphQL](/docs/using-gatsby-without-graphql/)". However, as highlighted in the guide, this approach comes with some tradeoffs. +3. Create a source plugin, as described in the tutorial "[Source plugin tutorial](/tutorial/pixabay-source-plugin-tutorial/)". +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## その他の考慮事項 diff --git a/docs/docs/themes.md b/docs/docs/themes.md index 885cf4fd0..d9c8ccb5e 100644 --- a/docs/docs/themes.md +++ b/docs/docs/themes.md @@ -17,6 +17,12 @@ Gatsby テーマを使うことで、すべてのデフォルトの設定（共 ## その他の資料 +<<<<<<< HEAD - [Gatsby テーマのチュートリアル](/tutorial/theme-tutorials/) - [テーマに関する Gatsby の記事](/blog/tags/themes) - [プラグイン・テーマ・スターター](/docs/plugins-themes-and-starters/) +======= +- [Gatsby theme tutorials](/tutorial/plugin-and-theme-tutorials/) +- [Gatsby blog posts on themes](/blog/tags/themes) +- [Plugins, Themes, and Starters](/docs/plugins-themes-and-starters/) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/docs/themes/conventions.md b/docs/docs/themes/conventions.md index 8246847f4..c3fecc6d0 100644 --- a/docs/docs/themes/conventions.md +++ b/docs/docs/themes/conventions.md @@ -6,7 +6,12 @@ Gatsby テーマを作成する方法が定式化および標準化されるよ ## 命名 +<<<<<<< HEAD テーマのプレフィックスとして `gatsby-theme-` をつける必要があります。したがって、テーマに「awesome」という名前を付けたい場合、`gatsby-theme-awesome` と命名し、`package.json` の `name` キーに配置します。`gatsby-theme` で始まるテーマ名を付けることで、Gatsby がコンパイルするテーマパッケージを識別できます。 +======= +It's required to prefix themes with `gatsby-theme-`. So if you'd like to name your theme "awesome" you +can name it `gatsby-theme-awesome` and place that as the `name` key in your `package.json`. Prefixing themes with `gatsby-theme-` enables Gatsby in identifying theme packages for compilation. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## 必要なディレクトリーの初期化 @@ -33,7 +38,11 @@ exports.onPreBootstrap = ({ store, reporter }) => { ## クエリーとプレゼンテーショナルコンポーネントの分離 +<<<<<<< HEAD テーマの作成者として、データの収集とデータをレンダリングするコンポーネントは分離することが望ましいです。これにより、エンドユーザーは [PageQuery](/docs/page-query) や [StaticQuery](/docs/static-query) を記述することなく、`PostList` や `AuthorCard` といったコンポーネントを簡単にオーバーライドできます。 +======= +As a theme author, it's preferable to separate your data gathering and the components that render the data. This makes it easier for end users to be able to shadow a component like `PostList` or `AuthorCard` without having to write a [pageQuery](/docs/page-query) or [StaticQuery](/docs/static-query). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### PageQuery diff --git a/docs/docs/typography-js.md b/docs/docs/typography-js.md index 502d6d5a4..79529f9e5 100644 --- a/docs/docs/typography-js.md +++ b/docs/docs/typography-js.md @@ -10,7 +10,15 @@ Typography.js はサイトに合うタイプデザインを調査し、カスタ Gatsby はプロジェクトに Typography.js を導入するため、`gatsby-plugin-typography` というプラグインを用意しています。 +<<<<<<< HEAD `npm install gatsby-plugin-typography react-typography typography --save` というコマンドを打つことで、プラグインとその peer dependencies のインストールを行うことができます。 +======= +You can install the plugin and its peer dependencies into your project by running the following command: + +```shell +npm install gatsby-plugin-typography react-typography typography +``` +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 インストールが完了したら、プロジェクトルートにある `gatsby-config.js` ファイルを開き、以下のようにプラグインの設定を足します。 @@ -68,7 +76,15 @@ Typography.js のすべての要素のフォントサイズは上記で設定し ## Typography テーマのインストール +<<<<<<< HEAD Typography.js にはサイトのフォントスタイルを決める時間を節約してくれるビルトインテーマがあります。Funston というテーマは Typography によってメンテナンスされているビルトインテーマの 1 つです。この Funston を npm からインストールするには、`npm install typography-theme-funston --save` というコマンドを打ってください。 +======= +Typography.js has built in themes that can save time when defining your website's font styling. The Funston theme, maintained by Typography, is one of the built in themes. To install the Funston theme from npm, run the command: + +```shell +npm install typography-theme-funston +``` +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 このテーマを使うには、先程作成した `typography.js` ファイルを次のように編集します。 diff --git a/docs/docs/using-client-side-only-packages.md b/docs/docs/using-client-side-only-packages.md index f68507dfe..29b4da968 100644 --- a/docs/docs/using-client-side-only-packages.md +++ b/docs/docs/using-client-side-only-packages.md @@ -50,7 +50,11 @@ class MyComponent extends Component { } ``` +<<<<<<< HEAD ## 3 つ目の回避策： react-loadable を用いてクライアントサイドに依存するコンポーネントを読み込む +======= +## Workaround 3: Load client-side dependent components with loadable-components +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 [loadable-components](https://github.com/smooth-code/loadable-components) をインストールして、クライアントサイドでしか実行できないパッケージを利用したいコンポーネントをラップしましょう。 diff --git a/docs/docs/what-is-a-plugin.md b/docs/docs/what-is-a-plugin.md index 3d499c205..3d6f206e5 100644 --- a/docs/docs/what-is-a-plugin.md +++ b/docs/docs/what-is-a-plugin.md @@ -2,7 +2,11 @@ title: プラグインとは? --- +<<<<<<< HEAD Gatsby プラグインは、Gatsby API を実装する Node.js パッケージです。より大規模で複雑なサイトの場合、プラグインを使用するとサイトのカスタマイズをサイト固有のプラグインにモジュール化できます。 +======= +Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific functionality. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 Gatsby に機能を追加するもっとも良い方法の 1 つは、プラグインシステムを使用することです。Gatsby は拡張可能に設計されています。つまり、プラグインは Gatsby が行うほぼすべてを拡張および変更できます。 diff --git a/docs/docs/what-you-dont-need-plugins-for.md b/docs/docs/what-you-dont-need-plugins-for.md index 2078d5b28..6bb9e4595 100644 --- a/docs/docs/what-you-dont-need-plugins-for.md +++ b/docs/docs/what-you-dont-need-plugins-for.md @@ -9,6 +9,10 @@ title: プラグインを必要としないのはどのような時か - `lodash` や `axios` のような一般的な機能を提供している Javascript のパッケージをインポートする場合 - `Highcharts` や `d3` のような視覚化に関するライブラリーを統合する場合 +<<<<<<< HEAD 一般に、あなたが Javascript や React アプリケーションに取り組んでいる間に使用する npm パッケージは、 Gatsby アプリケーションと共に使用できます。プラグインが提供するものは、複数の Gatsby コア API をあらかじめまとめておいたものです。これは、最小の設定で利用できるので、あなたの時間とエネルギーの節約になります。 +======= +As a general rule, any npm package you might use while working on another JavaScript or React application can also be used with a Gatsby application. What plugins offer is a prepackaged integration into the core Gatsby APIs to save you time and energy, with minimal configuration. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 プラグインの良い使用例は、`Styled Components` でしょう。あなたはアプリケーションの root 近くにある `Provider` コンポーネントを自分でレンダリングできます。また、あなたは [gatsby-plugin-styled-components](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/) を使用することもできます。このプラグインは、Styled Components をサーバーサイドレンダリングで使用するための設定に必要なあらゆる難題を代わりに行ってくれます。 diff --git a/docs/docs/working-with-images-in-markdown.md b/docs/docs/working-with-images-in-markdown.md index e279e47a3..d0ba1a64f 100644 --- a/docs/docs/working-with-images-in-markdown.md +++ b/docs/docs/working-with-images-in-markdown.md @@ -55,7 +55,11 @@ featuredImage: shiba-inu.png ### Markdown と画像を別のディレクトリーで管理する場合の設定 +<<<<<<< HEAD 設定する画像を Markdown とは別の `/images` のようなディレクトリーで管理したい場合があると思います。このような場合は別々のソースとして設定する必要があります。 +======= +There are also occasions when you may want to source images from a different directory than where your Markdown posts or pages are located, such as in an external `/images` folder. You can set this up by specifying two distinct sources, one for the pages and the other for images: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```js:title=gatsby-config.js module.exports = { diff --git a/docs/tutorial/authentication-tutorial.md b/docs/tutorial/authentication-tutorial.md index b323880f1..e1a2908be 100644 --- a/docs/tutorial/authentication-tutorial.md +++ b/docs/tutorial/authentication-tutorial.md @@ -307,12 +307,19 @@ import { getUser, isLoggedIn, logout } from "../services/auth" // highlight-line // highlight-start export default () => { - const content = { message: "", login: true } + let greetingMessage = "" if (isLoggedIn()) { +<<<<<<< HEAD content.message = `こんにちは、${getUser().name}さん` } else { content.message = "ログインしていません。" +======= + greetingMessage = `Hello ${getUser().name}` + } else { + greetingMessage = "You are not logged in" +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 } + return ( // highlight-end
{ borderBottom: "1px solid #d1c1e0", }} > - {content.message} {/* highlight-line */} + {greetingMessage} {/* highlight-line */}
) } +======= + return ( +
+

{sku.attributes.name}

+

Price: {formatPrice(sku.price, sku.currency)}

+ +
+ ) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 } export default SkuCard ``` +<<<<<<< HEAD このコンポーネントは SKU 名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々の SKU ごとに適切なカードをレンダリングします。「購入」ボタンは対応する SKU ID で `redirectToCheckout()` 関数をトリガーします。 最後に、`Skus` コンポーネントをリファクタリングして Stripe.js クライアントを初期化し、`props` で Stripe.js クライアントを伝えながら `SkuCards` をレンダリングする必要があります。 +======= +This component renders a neat card for each individual SKU, with the SKU name, nicely formatted pricing, and a "BUY ME" button. The button triggers the `redirectToCheckout` function with the corresponding SKU ID. + +Lastly, you need to refactor your `Skus` component to `loadStripe`, and render `SkuCards` while handing down the Stripe promise in the `props`: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```jsx:title=src/components/Products/Skus.js -import React, { Component } from "react" +import React from "react" import { graphql, StaticQuery } from "gatsby" -import SkuCard from "./SkuCard" // highlight-line +import SkuCard from "./SkuCard" +import { loadStripe } from "@stripe/stripe-js" const containerStyles = { display: "flex", @@ -497,50 +612,36 @@ const containerStyles = { padding: "1rem 0 1rem 0", } -class Skus extends Component { - // Initialise Stripe.js with your publishable key. - // You can find your key in the Dashboard: - // https://dashboard.stripe.com/account/apikeys - // highlight-start - state = { - stripe: null, - } - - componentDidMount() { - const stripe = window.Stripe(process.env.GATSBY_STRIPE_PUBLIC_KEY) - this.setState({ stripe }) - } - // highlight-end - - render() { - return ( - { + return ( + ( -
- {skus.edges.map(({ node: sku }) => ( - {/* highlight-line */} - ))} -
- )} - /> - ) - } + } + `} + render={({ skus }) => ( +
+ {skus.edges.map(({ node: sku }) => ( + + ))} +
+ )} + /> + ) } export default Skus diff --git a/docs/tutorial/index.md b/docs/tutorial/index.md index 6e0f1638e..3e3f898fd 100644 --- a/docs/tutorial/index.md +++ b/docs/tutorial/index.md @@ -24,6 +24,7 @@ Gatsby へようこそ！あなたがここにいることを嬉しく思いま 7. [データからプログラムによるページ作成](/tutorial/part-seven/): 投稿したブログから一通りのページをプログラムで作成する方法を学びます。 8. [サイト公開の準備](/tutorial/part-eight/): サイトのパフォーマンスを監査する方法とアクセシビリティや SEO などのベストプラクティスを学びます。 +<<<<<<< HEAD ## テーマのチュートリアル Gatsby テーマは、すべてのデフォルト設定（共有機能、データ取得、デザイン）を抽象化して、サイトからインストール可能なパッケージにします。 @@ -31,6 +32,13 @@ Gatsby テーマは、すべてのデフォルト設定（共有機能、デー つまり、構成と機能はプロジェクトに直接書き込むのではなく、バージョン管理し、一元管理して依存関係としてインストールします。テーマをシームレスに更新したり、テーマをまとめて構成したり、あるいは互換性のあるテーマを別のものと交換できます。 テーマの使用と構築に関しては[Gatsby テーマチュートリアル](/tutorial/theme-tutorials/)で詳細を参照してください。 +======= +## Plugin & Theme tutorials + +Gatsby plugins are a way to encapsulate, re-use, and compose functionality, such as data sourcing. Gatsby themes are a type of plugin which abstracts your default configuration (shared functionality, data sourcing, design) out of your site and into an installable package. + +Learn how to build and use plugins and themes step-by-step in the [Plugin and Theme Tutorials](/tutorial/plugin-and-theme-tutorials/). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## 追加チュートリアル diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index e1125ec22..73d88d813 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -17,8 +17,13 @@ GraphiQL は GraphQL の統合開発環境（IDE）です。強力で万能な 開発サーバーが起動しているときは `http://localhost:8000/___graphql` にアクセスできます。 `Site` を展開して使用できるフィールドを確認します。ここには以前のチュートリアルで使用した `siteMetadata` オブジェクトも含まれています。GraphiQL でデータを操作してみてください！Ctrl + Space（または Shift + Space）でオートコンプリートのウィンドウを表示することができ、Ctrl + Enter で GraphQL クエリを実行することができます。残りのチュートリアルでは、GraphiQL をさらに使用していきます。 diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md index 03168a9bc..2e5b05cbc 100644 --- a/docs/tutorial/part-four/index.md +++ b/docs/tutorial/part-four/index.md @@ -55,7 +55,13 @@ disableTableOfContents: true ### GraphQL を用いた Gatsby のデータ層でコンポーネントにデータを取り込む方法 +<<<<<<< HEAD React コンポーネントにデータを取り込む方法にはさまざまな選択肢があります。そのうちのもっとも人気でパワフルな技術のひとつに [GraphQL](http://graphql.org/) があります。 +======= +There are many options for loading data into React components. One of the most +popular and powerful of these is a technology called +[GraphQL](https://graphql.org/). +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 GraphQL は、必要なデータをプロダクトエンジニアがコンポーネントに取り込むのを助けるために Facebook によって開発されました。 diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index a970eed49..49443cc91 100644 --- a/docs/tutorial/part-one/index.md +++ b/docs/tutorial/part-one/index.md @@ -45,8 +45,13 @@ _ヒント: 繰り返しますが、ここに示すエディターは Visual Stu 1. "Hello World!" という文字列を "Hello Gatsby!" に変更して、ファイルを保存します。ウィンドウを横に並べている場合、ファイルを保存すると、コードとコンテンツの変更がブラウザーへほぼ即座に反映されることがわかります。 > 💡 Gatsby は**ホットリローディング**を使用して開発プロセスをスピードアップします。基本的に、Gatsby 開発サーバーを実行している場合、Gatsby サイトのファイルをバックグラウンドで「監視」しています。ファイルを保存すると、変更がすぐにブラウザへ反映されます。ページをハードリフレッシュしたり、開発サーバーを再起動したりする必要はありません。変更はすぐに表示されます。 @@ -327,8 +332,13 @@ export default () => ( ファイルを保存すると、"Contact" ページを表示し、ホームページへのリンクをたどることができます。 Gatsby の `` コンポーネントは、サイト内のページ間をリンクするためのものです。Gatsby サイトで処理しない外部へのリンクは、通常の HTML の `` タグを使用します。 diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 7c02a67f3..a729e074c 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -16,7 +16,16 @@ disableTableOfContents: true ## ページのスラッグの生成 +<<<<<<< HEAD ページの生成には 2 つの手順があります。 +======= +A ‘slug’ is the unique identifying part of a web address, +such as the `/tutorial/part-seven` part of the page `https://www.gatsbyjs.org/tutorial/part-seven/`. + +It is also referred to as the ‘path’ but this tutorial will use the term ‘slug’ for consistency. + +Creating new pages has two steps: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 1. ページのパスかスラッグを生成する。 2. ページを生成する。 diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index 775f74624..ee30348b2 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -32,7 +32,11 @@ Gatsby チュートリアルのパート 2 へようこそ！ Gatsby サイトを新しく作成することから始めます。とくにコマンドラインを初めて使う方の場合、[パート 1](/tutorial/part-one/) で使用したターミナルウィンドウを閉じて、パート 2 の新しいターミナルセッションを開始しましょう。 +<<<<<<< HEAD 新しいターミナルウィンドウを開き、新しい「hello world」という gatsby サイトを作成して、開発サーバーを起動します。 +======= +Open a new terminal window, create a new "hello world" Gatsby site in a directory called `tutorial-part-two`, and then move to this new directory: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```shell gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world @@ -48,7 +52,11 @@ Gatsby の「hello world」スターターに基づいた新しい Gatsby が作 │   └── index.js ``` +<<<<<<< HEAD #### ✋ CSS ファイルにスタイルを追加する +======= +#### ✋ Add styles to a CSS file +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 1. 新しいプロジェクトに `.css` ファイルを作成します。 @@ -80,7 +88,11 @@ html { } ``` +<<<<<<< HEAD > ヒント: 例で使用している css ファイルを `/src/styles/` フォルダーに配置するのは任意です。 +======= +> Note: The placement of the example CSS file in a `/src/styles/` folder is arbitrary. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### ✋ `gatsby-browser.js` にスタイルシートを含める @@ -130,7 +142,11 @@ gatsby develop ## コンポーネントスコープの CSS の使用 +<<<<<<< HEAD ここまでは、従来よくあるアプローチである、標準的な CSS スタイルシートを使用した方法について説明してきました。次に、CSS をモジュール化してコンポーネント指向の方法でスタイリングするためのさまざまな方法について説明します。 +======= +So far, we've talked about the more traditional approach of using standard CSS stylesheets. Now, we'll talk about various methods of modularizing CSS to tackle styling in a component-oriented way. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### CSS Modules @@ -161,7 +177,11 @@ export default ({ children }) => ( ) ``` +<<<<<<< HEAD `container.module.css` という名前の css module ファイルをインポートしていることに気づいたことでしょう。そのファイルを作成しましょう。 +======= +You'll notice you imported a CSS module file named `container.module.css`. Let's create that file now. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 2. 同じディレクトリ（`src/components`）で、`container.module.css` ファイルを作成し、以下をコピーして貼り付けします。 diff --git a/docs/tutorial/part-zero/index.md b/docs/tutorial/part-zero/index.md index be1d6dff8..58ff3041c 100644 --- a/docs/tutorial/part-zero/index.md +++ b/docs/tutorial/part-zero/index.md @@ -12,7 +12,11 @@ disableTableOfContents: true コンピュータのコマンドラインインターフェイス（CLI）を見つけて開いてみましょう。使用しているオペレーティングシステムに応じて、[**Mac の手順**](http://www.macworld.co.uk/feature/mac-software/how-use-terminal-on-mac-3608274/)、[**Windows の手順**](https://www.quora.com/How-do-I-open-terminal-in-windows)、または[**Linux の手順**](https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/)を参照してください。 +<<<<<<< HEAD _コマンドラインがはじめての方へ: コマンドを「実行する」とは、与えられた一連の指示をコマンドプロンプトに入力して、エンターキーを押すことを意味します。コマンドは、`node --version`のようにハイライトしたボックスの中に記載します。しかし、ハイライトしたボックスの中のすべてがコマンドというわけではありません！実行する必要があるコマンドは、明示的にそれを実行するよう書かれています。_ +======= +_**Note:** If you’re new to the command line, "running" a command, means "writing a given set of instructions in your command prompt, and hitting the Enter key". Commands will be shown in a highlighted box, something like `node --version`, but not every highlighted box is a command! If something is a command it will be mentioned as something you have to run/execute._ +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ## お使いの OS に適切な Node.js をインストールする @@ -24,23 +28,59 @@ Gatsby と Node.js をインストールするには、[Homebrew](https://brew.s #### コンピューターに Homebrew をインストールするには： +<<<<<<< HEAD 1. ターミナルを開きます。 2. `brew -v`を実行して Homebrew がインストールされているか確認します。"Homebrew"という文字列とバージョン番号が表示されるはずです。 3. もし表示されない場合は、[Homebrew の指示](https://docs.brew.sh/Installation)にしたがって、ダウンロードしてインストールします。 4. Homebrew をインストールしたら、手順 2 を繰り返して確認します。 +======= +1. Open your Terminal. +2. See if Homebrew is installed. You should see "Homebrew" and a version number. + +```shell +brew -v +``` + +3. If not, download and install [Homebrew with the instructions](https://docs.brew.sh/Installation). +4. Once you've installed Homebrew, repeat step 2 to verify. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### Xcode コマンドラインツールのインストール： +<<<<<<< HEAD 1. ターミナルを開きます。 2. `xcode-select --install`を実行して Xcode コマンドラインツールをインストールします。 - もし失敗した場合は、Apple 開発者アカウントでサインインして、[Apple のサイトから直接](https://developer.apple.com/download/more/)ダウンロードします。 3. インストール開始のプロンプトが表示された後、プロンプトが再度表示されて、ダウンロードするツールのソフトウェアライセンスに同意するように求められます。 +======= +1. Open your Terminal. +2. Install Xcode Command line tools by running: + +```shell +xcode-select --install +``` + +> 💡 If that fails, download it [directly from Apple's site](https://developer.apple.com/download/more/), after signing-in with an Apple developer account. + +3. After being prompted to start the installation, you'll be prompted again to accept a software license for the tools to download. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### Node のインストール +<<<<<<< HEAD 1. ターミナルを開きます 2. `brew install node`を実行します - もし Homebrew でインストールしたくない場合は、[Node.js の公式ウェブサイト](https://nodejs.org/ja/)より、最新バージョンの Node.js をダウンロードして、ダブルクリックして表示されるインストール手順にしたがってください。 +======= +1. Open your Terminal +2. Install node with Homebrew: + +```shell +brew install node +``` + +> 💡 If you don't want to install it through Homebrew, download the latest Node.js version from [the official Node.js website](https://nodejs.org/en/), double click on the downloaded file and go through the installation process. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### Windows の手順 @@ -50,44 +90,144 @@ Gatsby と Node.js をインストールするには、[Homebrew](https://brew.s nvm (Node Version Manager) と必要な依存関係をインストールします。nvm は Node.js および、関連ツールのバージョンを管理するために使用します。 +<<<<<<< HEAD _💡 パッケージをインストールしている際、確認が求められるので、`y`を入力してエンターを押します。_ +======= +> 💡 When installing a package, if it asks for confirmation, type `y` and press enter. + +Select your distro: + +- [Ubuntu, Debian, and other apt based distros](#ubuntu-debian-and-other-apt-based-distros) +- [Arch, Manjaro and other pacman based distros](#arch-manjaro-and-other-pacman-based-distros) +- [Fedora, RedHat, and other dnf based distros](#fedora-redhat-and-other-dnf-based-distros) + +> 💡 If the Linux distribution you are using is not listed here, please find instructions on the web. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### Ubuntu, Debian などの `apt` ベースのディストリビューションの場合： +<<<<<<< HEAD 1. 次の手順へ進む前に、`sudo apt update`を実行し、次に `sudo apt -y upgrade` を実行して、Linux ディストリビューションを万全の状態にしておきます。 2. `sudo apt-get install curl`を実行して curl をインストールします。これにより、データ転送と追加の依存関係のダウンロードができます。 3. インストールが完了したら、`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash`を実行して、最新バージョンの nvm をダウンロードします。 4. 動作を確認するには、次のコマンドを使用します。 `nvm --version`。バージョン番号が出力されるはずです。 5. [デフォルトの Node.js バージョンをセットします](#set-default-nodejs-version) +======= +1. Make sure your Linux distribution is ready to go run an update and an upgrade: + +```shell +sudo apt update +sudo apt -y upgrade +``` + +2. Install curl which allows you to transfer data and download additional dependencies: + +```shell +sudo apt-get install curl +``` + +3. After it finishes installing, download the latest nvm version: + +```shell +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash +``` + +4. Confirm this has worked. The output should be a version number. + +```shell +nvm --version +``` + +5. Continue with the section: [Set default Node.js version](#set-default-nodejs-version) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### Arch, Manjaro などの `pacman` ベースのディストリビューションの場合： +<<<<<<< HEAD 1. `sudo pacman -Sy`を実行して、環境を万全の状態にしておきます。 2. これらのディストリビューションには curl がすでにインストールされているので、それを使って nvm をダウンロードできます。 `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash` 3. nvm を使用する前に、`sudo pacman -S grep awk tar` を実行してさらなる依存パッケージをインストールする必要があります。 4. 動作を確認するには、次のコマンドを使用します。 `nvm --version`。バージョン番号が出力されるはずです。 5. [デフォルトの Node.js バージョンをセットする](#set-default-nodejs-version) +======= +1. Make sure your distribution is ready to go: + +```shell +sudo pacman -Sy +``` + +2. These distros come installed with curl, so you can use that to download nvm: + +```shell +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash +``` + +3. Before using nvm, you need to install additional dependencies by running: + +```shell +sudo pacman -S grep awk tar +``` + +4. Confirm this has worked. The output should be a version number. + +```shell +nvm --version +``` + +5. Continue with the section: [Set default Node.js version](#set-default-nodejs-version) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### Fedora, RedHat などの `dnf` ベースのディストリビューションの場合： +<<<<<<< HEAD 1. これらのディストリビューションには curl がインストールされているので、それを使用して nvm をダウンロードできます。 `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash` 2. 動作を確認するには、次のコマンドを使用します。 `nvm --version`。バージョン番号が出力されるはずです。 3. [デフォルトの Node.js バージョンをセットする](#set-default-nodejs-version) もし、お使いの Linux ディストリビューションが一覧にない場合は、web 上で手順を探してください。 +======= +1. These distros come installed with curl, so you can use that to download nvm: + +```shell +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash +``` + +2. Confirm this has worked. The output should be a version number. + +```shell +nvm --version +``` + +3. Continue with the section: [Set default Node.js version](#set-default-nodejs-version) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 #### デフォルトの Node.js バージョンをセットする +<<<<<<< HEAD nvm をインストールしても、デフォルトでは特定の node バージョンになりません。必要なバージョンをインストールし、nvm にそれを使用するための指示を与える必要があります。この例では、現状最新のリリースであるバージョン 10 を使用していますが、もっと最新のバージョン番号があればそちらを使用することもできます。 +======= +When nvm is installed, it does not default to a particular node version. You’ll need to install the version you want and give nvm instructions to use it. This example uses the version 10 release, but more recent version numbers can be used instead. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```shell nvm install 10 nvm use 10 ``` +<<<<<<< HEAD 動作を確認するには、`npm --version`と `node --version` を実行します。出力は下記のスクリーンショットのように、コマンドの応答としてバージョン番号を表示します。 +======= +Confirm that this worked: + +```shell +npm --version +node --version +``` + +The output should look similar to the screenshot below, showing version numbers in response to the commands. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ![ターミナルで node と npm のバージョンを確認する](01-node-npm-versions.png) @@ -107,11 +247,27 @@ Git をダウンロードしてインストールする手順は、オペレー Gatsby CLI ツールを使用すると、新しい Gatsby を搭載したサイトをすばやく作成し、Gatsby サイトを開発するためのコマンドを実行できます。これは npm パッケージとして公開されています。 +<<<<<<< HEAD Gatsby CLI は npm 経由で利用でき、 `npm install -g gatsby-cli`を実行してグローバルにインストールする必要があります。 +======= +The Gatsby CLI is available via npm and should be installed globally by running: + +```shell +npm install -g gatsby-cli +``` +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 _**ヒント**: Gatsby をインストールして初めて実行すると、Gatsby コマンドが収集する匿名の使用状況データについて通知する短いメッセージを表示します。そのデータをどのように取得し、使用するのかの詳細は [テレメトリドキュメント](/docs/telemetry)で確認ができます。_ +<<<<<<< HEAD 利用可能なコマンドを確認するには、 `gatsby --help`を実行します。 +======= +See the available commands: + +```shell +gatsby --help +``` +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ![ターミナルでgatsbyコマンドを確認](05-gatsby-help.png) @@ -121,6 +277,7 @@ _**ヒント**: Gatsby をインストールして初めて実行すると、Gat これで、Gatsby CLI ツールを使用して最初の Gatsby サイトを作成する準備ができました。このツールを使用すると、「スターター」（一部のデフォルト構成の部分的に構築されたサイト）をダウンロードして、特定のタイプのサイトの作成を迅速に進めることができます。ここで使用する"Hello World"スターターは、Gatsby サイトに必要な最低限の要素を備えたスターターです。 +<<<<<<< HEAD 1. ターミナルを開きます。 2. `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`を実行します。（_注: ダウンロード速度に応じて、これにかかる時間は異なります。簡潔にするため、以下の gif はインストール中に一時停止しています_）。 3. `cd hello-world`を実行します。 @@ -132,26 +289,57 @@ _**ヒント**: Gatsby をインストールして初めて実行すると、Gat 何が起きたの？ +======= +1. Open up your terminal. +2. Create a new site from a starter: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```shell gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world ``` +<<<<<<< HEAD - `new`は、新しい Gatsby プロジェクトを作成する gatsby コマンドです。 - ここで、"hello-world" は任意のタイトルなので、お好みのタイトルを入力できます。CLI ツールは、新しいサイトのコードを "hello-world" という新しいフォルダーに配置します。 - 最後に、指定した GitHub の URL は、使用するスターターコードを保持するコードのリポジトリーを指します。 +======= +> 💡 What just happened? +> +> - `new` is a gatsby command to create a new Gatsby project. +> - Here, `hello-world` is an arbitrary title — you could pick anything. The CLI tool will place the code for your new site in a new folder called “hello-world”. +> - Lastly, the GitHub URL specified points to a code repository that holds the starter code you want to use. + +> 💡 Depending on your download speed, the amount of time this takes will vary. For brevity's sake, the gif below was paused during part of the install + +3. Change into the working directory: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```shell cd hello-world ``` +<<<<<<< HEAD - これは、**"hello-world" サブフォルダにディレクトリーを変更（`cd`）したい**という意味になります。サイトに対してコマンドを実行したいときはいつでも、そのサイトのコンテキスト内にいる必要があります（ようするに、ターミナルはサイトコードが存在するディレクトリーを指す必要があります）。 +======= +> 💡 This says _'I want to change directories (`cd`) to the “hello-world” subfolder'_. Whenever you want to run any commands for your site, you need to be in the context for that site (aka, your terminal needs to be pointed at the directory where your site code lives). + +4. Start the development mode: +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ```shell gatsby develop ``` +<<<<<<< HEAD - このコマンドは、開発サーバーを起動します。開発環境またはローカル（コンピューターにあり、インターネットに公開されていない）で新しいサイトを表示し、やりとりができます。 +======= +> 💡 This command starts a development server. You will be able to see and interact with your new site in a development environment — local (on your computer, not published to the internet). + + +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### サイトをローカルに表示する @@ -163,7 +351,11 @@ gatsby develop おめでとうございます！これが、最初の Gatsby サイトの始まりです！🎉 +<<<<<<< HEAD +======= +_**Note:** If you are using VM setup like `vagrant` and/or would like to listen on your local IP address, run `gatsby develop --host=0.0.0.0`. Now, the development server listens on both `http://localhost` and your local IP._ +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 開発サーバーが実行されている限り、`http://localhost:8000`でローカルのサイトにアクセスできます。これは、`gatsby develop`コマンドを実行して開始したプロセスです。そのプロセスの実行を停止（または「開発サーバーの実行を停止」）するには、ターミナルウィンドウに戻り、「コントロール」キーを押しながら「c」(ctrl-c)を押します。もう一度起動するには、再度 `gatsby develop` を実行してください！ @@ -208,11 +400,15 @@ Gatsby のドキュメントには、VS Code で撮影したスクリーンシ すでにこれらのエキスパートである必要はありません。そうでない場合でも心配しないでください！このチュートリアルシリーズのコースを通じて多くのことを学べます。これらは、Gatsby サイトを構築するときに使用する主な Web テクノロジーの一部です。 +<<<<<<< HEAD - **HTML**: すべての Web ブラウザーが理解できるマークアップ言語。HyperText Markup Language の略です。HTML は、Web コンテンツに普遍的な情報構造を与え、見出し、段落などを定義します。 - **CSS**: Web コンテンツの外観（フォント、色、レイアウトなど）のスタイルを設定するために使用するプレゼンテーション言語。Cascading Style Sheets の略です。 - **JavaScript**: ウェブを動的かつインタラクティブにするプログラミング言語。 - **React**: ユーザーインターフェイスを構築するためのコードライブラリー（JavaScript で構築）。これは、Gatsby がページの構築とコンテンツの構造化に使用しているフレームワークです。 - **GraphQL**: データをウェブサイトに取得するためのクエリ言語。これは、Gatsby がサイトデータの管理に使用するインターフェイスです。 +======= +For a comprehensive introduction to what a website is -- including an intro to HTML and CSS -- check out “[**Building your first web page**](https://learn.shayhowe.com/html-css/building-your-first-web-page/)”. It’s a great place to start learning about the web. For a more hands-on introduction to [**HTML**](https://www.codecademy.com/learn/learn-html), [**CSS**](https://www.codecademy.com/learn/learn-css), and [**JavaScript**](https://www.codecademy.com/learn/introduction-to-javascript), check out the tutorials from Codecademy. [**React**](https://reactjs.org/tutorial/tutorial.html) and [**GraphQL**](https://graphql.org/graphql-js/) also have their own introductory tutorials. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 ### ウェブサイトとは何ですか？ diff --git a/docs/tutorial/theme-tutorials.md b/docs/tutorial/theme-tutorials.md deleted file mode 100644 index 3be97e002..000000000 --- a/docs/tutorial/theme-tutorials.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: テーマの利用 ---- - -Gatsby テーマは Gatsby の機能をカプセル化、再利用、構成するための新しい方法です。 - -この章では、下記についてのチュートリアルを扱います。 - -1. 単一のテーマ（ブログテーマ）を用いてサイトを立ち上げる。 -2. 複数のテーマ（ブログテーマとメモテーマ）を組み合わせたサイトを立ち上げる。 - -テーマ全般についてもっと詳しく知りたい方は、[ドキュメント内のテーマの章]（/docs/themes）もご参照ください。 - - diff --git a/docs/tutorial/using-a-theme.md b/docs/tutorial/using-a-theme.md index c3771d3f0..6a0335a31 100644 --- a/docs/tutorial/using-a-theme.md +++ b/docs/tutorial/using-a-theme.md @@ -183,4 +183,12 @@ export default merge(defaultThemeColors, { ## まとめ +<<<<<<< HEAD 今回紹介した内容は、特定の Gatsby テーマを用いてテーマを使用するための順を追った内容でした。テーマにより異なるカスタマイズオプションが存在し、異なるテーマが異なる方法で構築されることに注意してください。さらに深く掘り下げるには、[Gatsby テーマについてのドキュメント](/docs/themes/)をご覧ください。 +======= +This was a step-by-step introduction to using a Gatsby theme through looking at a specific example. Note that different themes will be built differently, to accept different customization options. To dive deeper, check out the [Gatsby Theme docs](/docs/themes/). + +## What's next? + +- [Using multiple themes together](/tutorial/using-multiple-themes-together/) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/tutorial/using-multiple-themes-together.md b/docs/tutorial/using-multiple-themes-together.md index 3ac2f4352..68a8c4cc2 100644 --- a/docs/tutorial/using-multiple-themes-together.md +++ b/docs/tutorial/using-multiple-themes-together.md @@ -2,4 +2,420 @@ title: 同時に複数のテーマを使用する --- +<<<<<<< HEAD _このチュートリアルは近日公開予定です。それまでは、 [ドキュメントで複数のテーマを使用する](/docs/themes/using-multiple-gatsby-themes)を参照してください。_ +======= +## What this tutorial covers + +This tutorial covers how to compose multiple themes into a final site using [gatsby-theme-blog](/packages/gatsby-theme-blog/), [gatsby-theme-notes](/packages/gatsby-theme-notes/) and [gatsby-mdx-embed](/packages/@pauliescanlon/gatsby-mdx-embed/) as examples. It will also cover the concept of component shadowing with [Theme-UI](/docs/theme-ui/) for styling. + +## Prerequisites + +This tutorial assumes the following: + +- That you have an understanding of [Gatsby fundamentals](/tutorial/#gatsby-fundamentals) +- An existing knowledge of [Gatsby Themes](/docs/themes/what-are-gatsby-themes/) + +## Example repository + +You can view a [full working example of this tutorial](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-themes) on GitHub. Some longer code snippets have been edited for length and the full code is available for reference in the example repository. + +## Create a new site + +Using the hello world starter create a new site and navigate to that directory. + +```shell +gatsby new multiple-themes https://github.com/gatsbyjs/gatsby-starter-hello-world +cd multiple-themes +``` + +## Install and compose the themes + +This step composes [gatsby-theme-blog](/packages/gatsby-theme-blog/) and [gatsby-theme-notes](/packages/gatsby-theme-notes/). + +1. Install the themes: + +```shell +npm install gatsby-theme-blog gatsby-theme-notes +``` + +2. Edit `gatsby-config.js` to add the themes to the plugin array and to update the site metadata: + +```javascript:title=gatsby-config.js +module.exports = { + siteMetadata: { + title: `Your Site Title`, + description: `A description for your blazing fast site, using multiple themes!`, + author: `Your name`, + social: [ + { + name: `Twitter`, + url: `https://twitter.com/gatsbyjs`, + }, + { + name: `GitHub`, + url: `https://github.com/gatsbyjs`, + }, + ], + }, + plugins: [ + { + resolve: `gatsby-theme-blog`, + options: { + basePath: `/blog`, + }, + }, + { + resolve: `gatsby-theme-notes`, + options: { + basePath: `/notes`, + }, + }, + ], +} +``` + +3. Run the site: + +```shell +gatsby develop +``` + +4. Checkout `localhost:8000` to see what is currently there. + +## Add content + +Behind the scenes, the two themes created content folders in the root directory of the site. In this step, you will add some content to these folders. + +### Add a post + +Create a new file in `/content/posts`, like this one: + +```mdx:title=content/posts/hello-posts.md +--- +title: My first blog post +date: 2020-02-15 +--- + +Multiple themes are great! +``` + +### Add a note + +Create a new file in `/content/notes`, like this one: + +```mdx:title=content/note/hello-notes.md +--- +title: My first note +date: 2020-02-20 +--- + +Multiple themes are awesome! +``` + +Restart your development server with `gatsby develop`. Now if you visit `http://localhost:8000/blog/hello-posts/` and `http://localhost:8000/notes/hello-notes` you should see your new content. + +## Add an avatar image + +Put an avatar image into the `content/assets/` directory, this is used by `gatsby-theme-blog` for the bio component. The file name can be `avatar.png` or `avatar.jpg`. + +## Put the blog posts on the homepage + +1. Delete the existing `src/pages/index.js` file. + +2. Change the theme options for the blog theme in `gatsby-config.js`: + +```javascript:title=gatsby-config.js +{ + resolve: `gatsby-theme-blog`, + options: { + // basePath defaults to `/` so this could also be included without options as just `gatsby-theme-blog`, + basePath: `/`, + }, + }, +``` + +3. Restart your development server with `gatsby develop` to test your new homepage. + +## Shadow components + +Use [theme shadowing](/docs/themes/shadowing/) to customize components the theme provides for you. + +### Shadow `bio-content.js` + +The first component to update is `bio-content.js` which provides the content used in the `gatsby-theme-blog` `bio` component. + +> 💡 Don't forget to stop and restart your development server when adding a shadowed component for the first time. + +In order to shadow the file you need to place it in the same location it exists within the theme. In this case, that means `src/gatsby-theme-blog/components/bio-content.js`. So you'll create a file structure that looks look like this: + +```text +└── src + ├── gatsby-theme-blog + │ ├── components + │ │ ├── bio-content.js // highlight-line +``` + +Feel free to make the text of your bio anything you like, but the component will look something like this: + +```jsx:title=src/gatsby-theme-blog/components/bio-content.js +import React, { Fragment } from "react" +import { Styled } from "theme-ui" + +export default () => ( + + Words by Your Name. +
+ Change me. Your awesome bio, about how great you are! + +) +``` + +### Shadow Theme-UI + +`gatsby-theme-blog` and `gatsby-theme-notes` both use [Theme-UI](/docs/theme-ui/) design tokens to manage their styling: colors, font sizes, spacing, etc. You can use component shadowing to gain control over these design tokens in the final site. + +As with your bio, you need to match the file structure of the theme. In this case, that's `src/gatsby-plugin-theme-ui/index.js` and the resulting structure will look like this: + +```text +└── src + ├── gatsby-plugin-theme-ui + │ ├── index.js //highlight-line +``` + +Feel free to use whatever colors you like, but here is an example of what you could do. + +```javascript:title=src/gatsby-plugin-theme-ui/index.js +import merge from "deepmerge" +import defaultTheme from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/index" + +export default merge(defaultTheme, { + colors: { + background: "ghostwhite", + text: "black", + primary: "mediumvioletred", + modes: { + dark: { + background: "indigo", + text: "ghostwhite", + primary: "gold", + }, + }, + }, +}) +``` + +> Note that this example uses `deepmerge`. This allows you to use the Theme-UI configuration for any settings you don't override in this file. + +## Add another theme + +Themes can be big, like `gatsby-theme-blog`, but they can also be a small discrete set of components or functions. A great example of this is [gatsby-mdx-embed](https://gatsby-mdx-embed.netlify.com/) which adds the ability to embed social media content and videos directly into your MDX files. + +1. Install the theme: + +```shell +npm install @pauliescanlon/gatsby-mdx-embed +``` + +2. Update the `gatsby-config.js` file and add `gatsby-mdx-embed` as a plugin: + +```javascript:title=gatsby-config.js +module.exports = { + siteMetadata: { + // ...siteMetadata is unchanged. + }, + plugins: [ + `@pauliescanlon/gatsby-mdx-embed`, // highlight-line + { + resolve: `gatsby-theme-blog`, + options: { + basePath: `/`, + }, + }, + { + resolve: `gatsby-theme-notes`, + options: { + basePath: `/notes`, + }, + }, + ], +} +``` + +3. Test it out by adding a Youtube video to one of your blog posts: + +```mdx:title=content/posts/video-post.md +--- +title: Jason and Jackson Talk Themes +date: 2020-02-21 +--- + +Here is a video about composing and styling themes with J&J! + + +``` + +## Add a navigation menu + +Use component shadowing to add a navigation menu. You can read more about [creating dynamic navigation menus](/docs/creating-dynamic-navigation/) in the docs. + +1. Add a `menuLinks` array to `gatsby-config.js`: + +```javascript:title=gatsby-config.js +module.exports = { + siteMetadata: { + title: `Your Site Title`, + description: `A description for your blazing fast site, using multiple themes!`, + author: `Your name`, + // highlight-start + menuLinks: [ + { + name: `Blog`, + url: `/`, + }, + { + name: `Notes`, + url: `/notes`, + }, + ], + // highlight-end + social: [ + // ...social array is unchanged. + ], + }, + plugins: [ + // ...plugins array is unchanged. + ], +} +``` + +2. Create the navigation component: + +```jsx:title=src/components/navigation.js +import React from "react" +import { Link, useStaticQuery, graphql } from "gatsby" +import { Styled, css } from "theme-ui" + +export default () => { + const data = useStaticQuery( + graphql` + query SiteMetaData { + site { + siteMetadata { + menuLinks { + name + url + } + } + } + } + ` + ) + const navLinks = data.site.siteMetadata.menuLinks + return ( + + ) +} +``` + +3. When that is done the next step is to shadow `header.js` from `gatsby-theme-blog`. You can copy and paste code from the original component as a starting point for your new shadowed component. + +Your file structure should look like this: + +`src/gatsby-theme-blog/components/header.js` + +```text +└── src + ├── gatsby-theme-blog + │ ├── components + │ │ ├── header.js // highlight-line +``` + +4. Import the navigation menu and add it to the header: + +> 💡 This code snippet is edited for length the [full component can be viewed on GitHub.](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-themes/src/gatsby-theme-blog/components/header.js) + +```jsx:title=src/gatsby-theme-blog/components/header.js +import React from "react" +import { css } from "theme-ui" +import Navigation from "../../components/navigation" // highlight-line + +export default () => { + return ( +
+
+ // highlight-line +
+
+ ) +} +``` + +5. Run `gatsby develop` and test the new navigation component. + +## Wrapping up + +This tutorial has introduced you to the idea of composing multiple themes together in a single Gatsby site. Gatsby Themes are an innovative rethink of the traditional website template and understanding their potential gives you a powerful new set of tools as a developer. To keep diving deeper, check out the [Gatsby Theme docs](/docs/themes/) and some of the other resources listed below. + +## What's next? + +- [Building a theme](/tutorial/building-a-theme/) + +## Other resources + +- [Using Multiple Themes Example Repo](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-themes) +- [Gatsby Themes Reference Guide](/docs/themes/) +- [Egghead.io Course: Gatsby Theme Authoring (free)](https://egghead.io/courses/gatsby-theme-authoring) +- [IBM and Gatsby Themes: Driving Impact Through Design](https://www.youtube.com/watch?v=I2nh2juOKxM) +- [Setting up yarn workspaces for Gatsby theme development](/blog/2019-05-22-setting-up-yarn-workspaces-for-theme-development/#reach-skip-nav) +- [What is component shadowing?](/blog/2019-04-29-component-shadowing/) +- [Customizing styles in Gatsby Themes with Theme-UI](/blog/2019-07-03-customizing-styles-in-gatsby-themes-with-theme-ui/) +- [Composing and styling Gatsby Themes (with Brent Jackson) — Learn With Jason](https://www.youtube.com/watch?v=6Z4p-qjnKCQ) +- [Build a Personal Site Using Gatsby Themes (with Will Johnson) — Learn With Jason](https://www.youtube.com/watch?v=vf2Dy_xKUno) +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 diff --git a/docs/tutorial/wordpress-image-tutorial.md b/docs/tutorial/wordpress-image-tutorial.md index 4ee1d2a45..c95984aa2 100644 --- a/docs/tutorial/wordpress-image-tutorial.md +++ b/docs/tutorial/wordpress-image-tutorial.md @@ -53,10 +53,17 @@ module.exports = { baseUrl: `dev-gatbsyjswp.pantheonsite.io`, // 使用するプロトコル。http もしくは https が使用可能です。 protocol: `http`, +<<<<<<< HEAD // サイトが wordpress.com でホストされているかを示します。 // false の場合、サイトは自ホストであると想定されます。 // true の場合、プラグインは JSON REST API V2 を使用して wordpress.com から取得します。 // もし、あなたのサイトが wordpress.org でホストされている場合、false を選択してください。 +======= + // Indicates whether the site is hosted on wordpress.com. + // If false, then the assumption is made that the site is self hosted. + // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2. + // If your site is hosted on wordpress.com, then set this to true. +>>>>>>> 8ff6bb09c23261662f47e79a041a92855d517097 hostingWPCOM: false, // useACF が true の場合、ソースプラグインは WordPress ACF プラグインのコンテンツをインポートしようとします。 // この機能は、wordpress.com でホストされているサイトではテストされていません。