diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index ca1c0bf502ac1..0000000000000 --- a/.flowconfig +++ /dev/null @@ -1,15 +0,0 @@ -[version] -0.109.0 - -[ignore] -.*/test/.* -.*/node_modules/documentation/.* -.*/node_modules/emotion/.* -.*/node_modules/fbjs/.* -.*/node_modules/jss/.* -.*/node_modules/preact/.* -.*/node_modules/react-side-effect/.* -.*/node_modules/styled-components/.* -.*/node_modules/typography/.* -.*/www/.* -.*/examples/.* diff --git a/.github/ISSUE_TEMPLATE/new_translation.md b/.github/ISSUE_TEMPLATE/new_translation.md index 91a713d21a9c0..9d1fd4bd444ff 100644 --- a/.github/ISSUE_TEMPLATE/new_translation.md +++ b/.github/ISSUE_TEMPLATE/new_translation.md @@ -9,11 +9,6 @@ about: Suggest a new language translation of the repo. - *Name*: Language name in *English* - *Code*: [ISO-693 Code]() or [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) of the language - *Maintainers*: list of GitHub usernames of proposed maintainers (at least 2 required) - - Each maintainer listed should respond to the issue with: - - - your experience level in open source - - your level of experience in the target language and localization --> ```yaml @@ -23,3 +18,11 @@ maintainers: - tesseralis - marcysutton ``` + +**Maintainers** + +If you would like to be a maintainer, please respond to this issue with: + +- your experience level in open source +- your level of experience in the target language and localization +- how much time you can commit to being a maintainer diff --git a/.github/actions/gatsby-site-showcase-validator/index.js b/.github/actions/gatsby-site-showcase-validator/index.js index df8f003bb8b9d..de469e87d425a 100644 --- a/.github/actions/gatsby-site-showcase-validator/index.js +++ b/.github/actions/gatsby-site-showcase-validator/index.js @@ -4,37 +4,47 @@ const yaml = require("js-yaml") const cheerio = require("cheerio") const chalk = require("chalk") +async function fetchAsSiteValidator(url) { + return fetch(url, { + headers: { + "User-Agent": + "gatsby-site-showcase-validator/1.0 (+https://github.com/gatsbyjs/gatsby/tree/master/.github/actions/gatsby-site-showcase-validator)", + }, + }) +} + async function run() { // Grab down sites.yml - let url = + const url = "https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/sites.yml" let yamlStr try { - yamlStr = await fetch(url).then(resp => resp.text()) + yamlStr = await fetchAsSiteValidator(url).then(resp => resp.text()) } catch (err) { console.log(`[Err]: ${err.message}`) process.exit(1) } // Parse YAML - let parsedYaml = yaml.safeLoad(yamlStr, "utf8") + const parsedYaml = yaml.safeLoad(yamlStr, "utf8") let sitesVisited = 0 let nonGatsbySiteCount = 0 + let inaccessibleRepoCount = 0 let erroredOut = 0 - let totalSitesCount = parsedYaml.length + const totalSitesCount = parsedYaml.length // Loop over each site for (let site of parsedYaml) { - let siteUrl = site.main_url - + const siteUrl = site.main_url + const sourceUrl = site.source_url let siteHtml // Fetch site try { - siteHtml = await fetch(siteUrl).then(resp => resp.text()) + siteHtml = await fetchAsSiteValidator(siteUrl).then(resp => resp.text()) } catch (err) { console.log( `${chalk.red(`[Err]`)}: ${site.title} (${siteUrl}) ran into an error: ${ @@ -47,34 +57,49 @@ async function run() { } // Pass html into a parser - let $ = cheerio.load(siteHtml) + const $ = cheerio.load(siteHtml) // Most Gatsby sites have an id of "___gatsby" - let gatsbyContainer = $("#___gatsby") + const gatsbyContainer = $("#___gatsby") - if (gatsbyContainer.length !== 0) { - // The site is a gatsby site don't do anything - sitesVisited++ - } else { - // The site is not a gatsby site, print out some info + // The site is not a gatsby site, print out some info + if (!gatsbyContainer.length) { console.log( `${chalk.yellow(`[Notice]`)}: ${ site.title } (${siteUrl}) is not a Gatsby site` ) - sitesVisited++ nonGatsbySiteCount++ } + + // Check if provided repository is public + if (sourceUrl) { + const status = await fetchAsSiteValidator(sourceUrl).then( + ({ status }) => status + ) + + if (status !== 200) { + console.log( + `${chalk.yellow(`[Notice]`)}: ${ + site.title + } (${siteUrl}) provided a 'source_url', but it's repository is inaccessible (${sourceUrl})` + ) + inaccessibleRepoCount++ + } + } + + sitesVisited++ } console.log( chalk.green( - `We visited ${sitesVisited}/${totalSitesCount} sites. Out of them, ${nonGatsbySiteCount} sites were not a Gatsby site and ${erroredOut} errored out when visiting it.` + `We visited ${sitesVisited}/${totalSitesCount} sites. Out of them, ${nonGatsbySiteCount} sites were not a Gatsby site, ${inaccessibleRepoCount} provided inaccessible repositories, and ${erroredOut} errored out when visiting it.` ) ) - // If there are any non Gatsby sites, fail (non-zero exit code) - process.exit(nonGatsbySiteCount > 0 ? 1 : 0) + // If there are any non Gatsby sites or their `source_url` is inaccessible, fail (non-zero exit code) + const exitCode = nonGatsbySiteCount > 0 || inaccessibleRepoCount > 0 ? 1 : 0 + process.exit(exitCode) } run() diff --git a/README.md b/README.md index 928251e6a9ef8..561e72113cb76 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@

- ⚛️ 📄 :rocket: + ⚛️ 📄 🚀

Fast in every way that matters diff --git a/appveyor.yml b/appveyor.yml deleted file mode 100644 index ad2ce06afa424..0000000000000 --- a/appveyor.yml +++ /dev/null @@ -1,75 +0,0 @@ -platform: - - x64 - -#TODO, I think we need to create the folder first in the init in case it doesn't exist -#cache: -#- '%AppData%/npm-cache' -#- "%LOCALAPPDATA%/Yarn" -#- C:\Users\appveyor\AppData\Roaming\npm\node_modules\windows-build-tools - -skip_branch_with_pr: true - -skip_commits: - files: - - docs/** - - www/** - - "**/*.md" - -environment: - nodejs_version: "8" - - matrix: - - example: gatsbygram - buildon: commit - - - example: using-javascript-transforms - buildon: tag - - - example: using-remark - buildon: tag - - - example: using-contentful - buildon: tag - - - example: using-wordpress - buildon: tag - - - example: using-mongodb - buildon: tag - - - example: using-typescript - buildon: tag - - - example: no-plugins - buildon: tag - -# Install scripts. (runs after repo cloning) -install: - - echo This example is built on %buildon% and the commit tag is %APPVEYOR_REPO_TAG% and the tag is %APPVEYOR_REPO_TAG_NAME% - # we kill the build for most examples unless it is a release or a forced build - # if you append --build-all to your commit message (not PR) then it will still build all the examples - - ps: | - if (($env:buildon -eq "tag") -and ($env:APPVEYOR_REPO_COMMIT_MESSAGE -ne "Publish") -and ($env:APPVEYOR_REPO_COMMIT_MESSAGE -notlike "* --build-all") -and ($env:APPVEYOR_FORCED_BUILD -ne "True")) - { - Exit-AppVeyorBuild - } - - ps: Install-Product node $env:nodejs_version $env:platform - - refreshenv - - echo we are running on %PLATFORM% - - node --version - - yarn global add gatsby-dev-cli@canary - - yarn run bootstrap - - node --version - - yarn test - -build_script: - - cd examples/%example% - - yarn install - - gatsby-dev --set-path-to-repo ../.. - - gatsby-dev --scan-once - - yarn run build - -artifacts: - - path: examples/$(example) - -deploy: off diff --git a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md index 3402029dd9c94..404b9201c14c9 100644 --- a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md +++ b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md @@ -27,7 +27,7 @@ generated content. Gatsby [recently released][gatsby-release] a v1.0.0 with a bunch of new features, including (but not limited to) the ability to create content queries with GraphQL, integration with various CMSs--including WordPress, Contentful, -Drupal, etc., and route based code splitting to keep the end-user experience as +Drupal, etc., and route based code splitting to keep the end user experience as snappy as possible. In this post, we'll take a deep dive into Gatsby and some of these new features by creating a static blog. Let's get on it! diff --git a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md index f4e8b051c5466..e3076aba6057a 100644 --- a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md +++ b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md @@ -338,6 +338,6 @@ paradigms like Serverless, I predict it could be very far. But whatever that limit is, I am quite sure that this is a step in the right direction towards making the web a safer, faster and more enjoyable experience -for both developers and end-users. +for both developers and end users.

via GIPHY

diff --git a/docs/blog/2018-1-18-strapi-and-gatsby/index.md b/docs/blog/2018-1-18-strapi-and-gatsby/index.md index 173c8f585617a..7d19fac928ba5 100644 --- a/docs/blog/2018-1-18-strapi-and-gatsby/index.md +++ b/docs/blog/2018-1-18-strapi-and-gatsby/index.md @@ -10,11 +10,11 @@ tags: ["blogs", "cms", "headless-cms", "getting-started"] ![Showing the idea of using Gatsby with Strapi ](gatsby-strapi.png) -A static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any back-end programming or database. Publishing a static website is easy: the files are uploaded on a simple Web server or storage provider. The two main advantages of static websites are security and speed: there is no database so it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster. +A static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any backend programming or database. Publishing a static website is easy: the files are uploaded on a simple Web server or storage provider. The two main advantages of static websites are security and speed: there is no database so it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster. To make their creation easier, numerous open-source static websites generators are available: [Jekyll](https://jekyllrb.com/), [Hugo](https://gohugo.io/), [Hexo](https://hexo.io/), etc. Most of the time, the content is managed through static (ideally Markdown) files or a Content API. Then, the generator requests the content, injects it in templates defined by the developer and generates a bunch of HTML files. -Progressive Web Apps (PWA) are web applications, highly based on JavaScript, and are [reliable, fast and engaging](https://developers.google.com/web/progressive-web-apps/). Since they make web browsing much faster and offer a better user experience, PWA have become the default way to build Web interfaces. Thus, many amazing front-end frameworks appeared over the last couple years: Angular, React and more recently, Vue. +Progressive Web Apps (PWA) are web applications, highly based on JavaScript, and are [reliable, fast and engaging](https://developers.google.com/web/progressive-web-apps/). Since they make web browsing much faster and offer a better user experience, PWA have become the default way to build Web interfaces. Thus, many amazing frontend frameworks appeared over the last couple years: Angular, React and more recently, Vue. > Gatsby: when static websites meet Progressive Web Apps @@ -32,7 +32,7 @@ Created by [Kyle Mathews](https://twitter.com/kylemathews), the project was offi ## What is Strapi? -[Strapi](https://strapi.io) is an _open source **Headless CMS Front-End Developers Love**_. It's more than a [Node.js Framework and more than a Headless CMS](https://strapi.io/overview), it saves weeks of API development time, and allows easy long-term content management through a beautiful administration panel _anyone can use_. +[Strapi](https://strapi.io) is an _open source **Headless CMS Frontend Developers Love**_. It's more than a [Node.js Framework and more than a Headless CMS](https://strapi.io/overview), it saves weeks of API development time, and allows easy long-term content management through a beautiful administration panel _anyone can use_. ![The Strapi Logo](logo-strapi.png) diff --git a/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md b/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md index b3d476ac85458..38c477240aba3 100644 --- a/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md +++ b/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md @@ -15,7 +15,7 @@ This process of creative destruction tends to begin within the infrastructure se ## Where Have We Come From? -During the late-1980s the industry converged around the client-server model. While there were challengers, eventually Windows (it took until version 3.1!) emerged as the dominant end-user client environment. The applications in this era were relatively small, specific to a single operating system, and typically built for hundreds or thousands of users. In designing these applications, the choice was really whether you put the business logic directly into the client application or pushed it down into the database. Unix systems became the dominant server platforms largely based upon database performance requirements. +During the late-1980s the industry converged around the client-server model. While there were challengers, eventually Windows (it took until version 3.1!) emerged as the dominant end user client environment. The applications in this era were relatively small, specific to a single operating system, and typically built for hundreds or thousands of users. In designing these applications, the choice was really whether you put the business logic directly into the client application or pushed it down into the database. Unix systems became the dominant server platforms largely based upon database performance requirements. The availability of the internet, and the birth of the browser — thank you, Marc Andreessen — greatly simplified cross-platform client development. However, these new applications now had to support several orders of magnitude more users. Consequently, several new tiers were added to the architecture: the web server and the application server. The web server and associated proxies and load balancers provided a stateless layer to handle the presentation layer. The application server became the obvious place for the business logic and to manage the interaction with the (typically relational) database server. diff --git a/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md b/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md index b25d235346e29..64f9a62d7bb63 100644 --- a/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md +++ b/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md @@ -53,7 +53,7 @@ Change is being spurred by the confluence of three revolutions in how we create These technological changes have made modern web technology both _essential_ for creating fresh, novel, and engaging digital experiences, and _more accessible_ for the enterprise. -Each change primarily affects a different stakeholder --- marketing, development/IT, and the end-user, respectively. +Each change primarily affects a different stakeholder --- marketing, development/IT, and the end user, respectively. The key challenge is that without a content mesh, integrating these systems together is a lot of work. Forrester titled one of their [report sections](https://www.tangomodem.com/wp-content/uploads/2017/09/the-rise-of-the-headless-cms.pdf): "Warning: Headless Content Management Is For Do-It-Yourself Shops." But _with_ a content mesh, all of these systems can be brought together in a unified, low-cost, low-defect whole. diff --git a/docs/blog/2018-11-07-gatsby-for-apps/index.md b/docs/blog/2018-11-07-gatsby-for-apps/index.md index f6e919b3c3e8b..dec3b9554e79e 100644 --- a/docs/blog/2018-11-07-gatsby-for-apps/index.md +++ b/docs/blog/2018-11-07-gatsby-for-apps/index.md @@ -178,7 +178,7 @@ Next: let's compare and contrast the end user experience of fetching authenticat ### The App Shell -In merely adding the [`gatsby-plugin-offline`][gatsby-plugin-offline] plugin, we enable a fully-featured, progressive web application that works offline and creates an app shell by registering a service worker. An app shell is essentially separate components of your application (e.g. header, footer, sidebar, etc.) that are instantly available from a service worker while dynamic content is fetched in the background. This creates a great end-user experience, as the application is able to visually populate instantly as data loads into place in the background. +In merely adding the [`gatsby-plugin-offline`][gatsby-plugin-offline] plugin, we enable a fully-featured, progressive web application that works offline and creates an app shell by registering a service worker. An app shell is essentially separate components of your application (e.g. header, footer, sidebar, etc.) that are instantly available from a service worker while dynamic content is fetched in the background. This creates a great end user experience, as the application is able to visually populate instantly as data loads into place in the background. If we consider this approach, the technique looks like the following: @@ -213,7 +213,7 @@ Additionally, Gatsby Mail shows some specific web application functionality, suc - GraphQL at build time and _run time_ utilizing a remote GraphQL API and [apollo-boost][apollo-boost], and - loading an app shell with `gatsby-plugin-offline` (check out the "Fast 3G" example below!) -and even a light/dark theme, because why not! You can see all of these concepts unify to form this great end-user experience in the below example with a simulated fast 3G connection. The app shell (header, footer, etc.) loads into place _instantly_ as the dynamic content is fetched (from the remote GraphQL API!) in the background. +and even a light/dark theme, because why not! You can see all of these concepts unify to form this great end user experience in the below example with a simulated fast 3G connection. The app shell (header, footer, etc.) loads into place _instantly_ as the dynamic content is fetched (from the remote GraphQL API!) in the background. ![App Shell with Gatsby Mail](./images/gatsby-mail-app-shell.gif) diff --git a/docs/blog/2018-12-17-ibm-case-study/index.md b/docs/blog/2018-12-17-ibm-case-study/index.md index 56eba617186aa..2438d9a8db996 100644 --- a/docs/blog/2018-12-17-ibm-case-study/index.md +++ b/docs/blog/2018-12-17-ibm-case-study/index.md @@ -25,7 +25,7 @@ The main goals for the new site were simple: ## Easy onboarding with Gatsby -Alison Joseph, Front-End Developer at IBM, took over this project from a coworker who had already done great work choosing the framework for the website rebuild. Taking on a new project mid-stream can be daunting but Alison found the Gatsby documentation was top notch and better than any other open source docs she’s seen. +Alison Joseph, Frontend Developer at IBM, took over this project from a coworker who had already done great work choosing the framework for the website rebuild. Taking on a new project mid-stream can be daunting but Alison found the Gatsby documentation was top notch and better than any other open source docs she’s seen. Alison was the only developer able to focus full-time on the Gatsby project and it took about six months before the new site launched in October 2018. She’s quick to point out if they had gone the custom, in-house route, the project would have easily taken twice as long and required more than one developer. diff --git a/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md b/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md index 7beec9ebfd01b..778c960ee25ec 100644 --- a/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md +++ b/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md @@ -20,7 +20,7 @@ In this post, I want to explain how Gatsby led me into learning React and how yo ## The beginnings -When I first discovered Gatsby two years ago, React was already quite popular. I decided to learn it to get more into modern front-end development and to step up my game. Before that I did **static** HTML/CSS/JS websites with the help of SCSS and Gulp. I never used a server-side scripting language (e.g. PHP) or a scripting engine (e.g. Nunjucks). So this was a big step, wasn't it? +When I first discovered Gatsby two years ago, React was already quite popular. I decided to learn it to get more into modern frontend development and to step up my game. Before that I did **static** HTML/CSS/JS websites with the help of SCSS and Gulp. I never used a server-side scripting language (e.g. PHP) or a scripting engine (e.g. Nunjucks). So this was a big step, wasn't it? Gatsby offers you a playground to learn React. diff --git a/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md b/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md index 9c9e651c8bbed..2d00679221eb8 100644 --- a/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md +++ b/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md @@ -9,7 +9,7 @@ tags: ["react", "graphql", "content-mesh"] I have to admit I have never really been a fan of JavaScript. I know, shame on me! When I was finishing my studies, I was all about .NET as it was easy to understand, debugging capabilities came with Visual Studio out-of-the-box, and the inheritance and objects model was simple. I looked at JavaScript with thoughts like "what kind of language would allow you to create objects freely, clone them, add functions to only specific instances or allow anyone to see the source code?" -It was during the first years of my development time that I needed to use something on the front-end to enrich user experience on a client's project. That something was the first version of Angular and believe it or not; I loved it. Angular made it so easy to build a UI communicating with .NET backend. At some point, I think I even owned a mug with NG on it. +It was during the first years of my development time that I needed to use something on the frontend to enrich user experience on a client's project. That something was the first version of Angular and believe it or not; I loved it. Angular made it so easy to build a UI communicating with .NET backend. At some point, I think I even owned a mug with NG on it. A few years ago I heard about static sites for the first time from a friend of mine who was very enthusiastic about them, especially their performance. I thought it was a nice idea, but very fresh at the time and with only a small community around it. It was earlier this year when I met some awesome guys from the [Gatsby community in Berlin](http://bit.ly/2ClmzcT) that changed everything for me. @@ -19,9 +19,9 @@ The great presentation by Callum MacDonald explained basic Gatsby features and p ## Why static site? -One of the websites in our company stack is [Kentico Advantage](http://bit.ly/2T0ynXJ). It is a content-oriented website where we provide our customers with our own methodology on how to build amazing and successful websites with traditional CMS. The website was originally also built on top of a traditional CMS until we switched to MVC during this year. We did that to be able to use a [headless CMS](/docs/headless-cms/) as content storage and drop all the pieces that required maintenance like the database server. The business logic was in the MVC layer and we hosted the front-end on Microsoft Azure. +One of the websites in our company stack is [Kentico Advantage](http://bit.ly/2T0ynXJ). It is a content-oriented website where we provide our customers with our own methodology on how to build amazing and successful websites with traditional CMS. The website was originally also built on top of a traditional CMS until we switched to MVC during this year. We did that to be able to use a [headless CMS](/docs/headless-cms/) as content storage and drop all the pieces that required maintenance like the database server. The business logic was in the MVC layer and we hosted the frontend on Microsoft Azure. -So why did I decide to make Kentico Advantage a static site? A key aspect was performance. We wanted to enable our clients to access the site while being on-site with their customers, using mobile devices and a slow internet connection. I personally wanted the source code to be as little as possible, in a language that everyone would understand. I won't be the only developer on the project for eternity and we tend to have more front-end developers in-house these days. And obviously I did not want to spend months on it. With Gatsby we were fine on all those counts. I was not familiar with React all that much before, but having the site content-oriented and well structured, the implementation was a piece of cake. Saving money on server costs was a nice side-effect, but more on that later. +So why did I decide to make Kentico Advantage a static site? A key aspect was performance. We wanted to enable our clients to access the site while being on-site with their customers, using mobile devices and a slow internet connection. I personally wanted the source code to be as little as possible, in a language that everyone would understand. I won't be the only developer on the project for eternity and we tend to have more frontend developers in-house these days. And obviously I did not want to spend months on it. With Gatsby we were fine on all those counts. I was not familiar with React all that much before, but having the site content-oriented and well structured, the implementation was a piece of cake. Saving money on server costs was a nice side-effect, but more on that later. ## Why Content-as-a-Service? diff --git a/docs/blog/2019-01-09-gatsby-days-talks-are-here.md b/docs/blog/2019-01-09-gatsby-days-talks-are-here.md index 9740e670e836d..baeaf93f11b8d 100644 --- a/docs/blog/2019-01-09-gatsby-days-talks-are-here.md +++ b/docs/blog/2019-01-09-gatsby-days-talks-are-here.md @@ -26,4 +26,4 @@ Get caught up on all the latest presentations from Gatsby Days in Mountain View, [How Gatsby Does High-Impact, Low-Effort UX Research (and You Can Too!)](https://www.gatsbyjs.com/gatsby-days-UXresearch-shannon/) by **Shannon Soper**, UX Specialist and Head of Learning, Gatsby -[Move Fast, Don't Break Things: Trends in Modern Web Development with Mediacurrent](https://www.gatsbyjs.com/gatsby-days-mediacurrent-ben/) by **Ben Robertson**, Front-End Developer, Mediacurrent +[Move Fast, Don't Break Things: Trends in Modern Web Development with Mediacurrent](https://www.gatsbyjs.com/gatsby-days-mediacurrent-ben/) by **Ben Robertson**, Frontend Developer, Mediacurrent diff --git a/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md b/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md index 5f6d1c0691bba..b86ad87985478 100644 --- a/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md +++ b/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md @@ -8,23 +8,23 @@ image: "./images/ghost-headless-feature-image.png" showImageInArticle: true --- -There has been a lot of progress around static site generators, front end frameworks and API-centric infrastructure in recent years. At [Ghost](https://ghost.org/), we’ve been building open source technology for modern publishing for over 5 years and as a developer-centric team, the momentum around static sites didn’t go unnoticed. +There has been a lot of progress around static site generators, frontend frameworks and API-centric infrastructure in recent years. At [Ghost](https://ghost.org/), we’ve been building open source technology for modern publishing for over 5 years and as a developer-centric team, the momentum around static sites didn’t go unnoticed. -Wildly fast websites which have no back end and can be deployed just about anywhere felt very much like the future. So I’m thrilled to share that with the recent updates to the Ghost API, it’s now possible to use Ghost as a completely decoupled headless CMS and bring your own front-end written in Gatsby.js! +Wildly fast websites which have no back end and can be deployed just about anywhere felt very much like the future. So I’m thrilled to share that with the recent updates to the Ghost API, it’s now possible to use Ghost as a completely decoupled headless CMS and bring your own frontend written in Gatsby.js! ## API driven publishing -Ghost has always been architected into 3 distinct areas: A core Node.js API, an Ember.js Admin client, and a speedy Handlebars.js front-end theme layer. Until now those 3 areas have been fairly tightly coupled, so it hasn't been possible to use them separately. +Ghost has always been architected into 3 distinct areas: A core Node.js API, an Ember.js Admin client, and a speedy Handlebars.js frontend theme layer. Until now those 3 areas have been fairly tightly coupled, so it hasn't been possible to use them separately. ![](./images/ghost-core-1.png) -Our latest updates allow you to completely replace the default Handlebars theme layer in favor of a front-end framework, so you can use Gatsby to build your site statically from the Ghost API. +Our latest updates allow you to completely replace the default Handlebars theme layer in favor of a frontend framework, so you can use Gatsby to build your site statically from the Ghost API. ## Why use a headless CMS? Many developers use static site generators alongside locally stored Markdown files, using a code editor to create content and a GIT workflow to publish. While this works great and is suitable for some sites, it quickly becomes unmanageable for publishers that need to scale, or teams that are not solely developers. -This is where a [headless CMS](/docs/headless-cms/) comes in, which provides an admin client for authoring and content management, while still bringing all of the benefits of having a static front-end. Developers can use their preferred stack, and writers have an editor, content scheduling, SEO and much more at their fingertips. +This is where a [headless CMS](/docs/headless-cms/) comes in, which provides an admin client for authoring and content management, while still bringing all of the benefits of having a static frontend. Developers can use their preferred stack, and writers have an editor, content scheduling, SEO and much more at their fingertips. When you look at the bigger picture of the [content mesh](/blog/2018-10-04-journey-to-the-content-mesh/), it really starts to feel like an inevitable future for building publishing websites. @@ -46,6 +46,6 @@ We’ve also introduced an official [Netlify integration](https://docs.ghost.org ## Publishing on the JAMstack -I’m really excited to see what people build with these new technologies. The concept of having just one front-end and many APIs all connected together and served as a single site or application with Gatsby opens up so much opportunity in the publishing space. +I’m really excited to see what people build with these new technologies. The concept of having just one frontend and many APIs all connected together and served as a single site or application with Gatsby opens up so much opportunity in the publishing space. If you want to give it a try with Ghost, sign up for a free trial account at [Ghost.org](https://ghost.org/pricing/) and use our official Gatsby plugin + starter to put it through it’s paces! diff --git a/docs/blog/2019-01-24-swag-store/index.md b/docs/blog/2019-01-24-swag-store/index.md index bf670c2211366..a39ba03201107 100644 --- a/docs/blog/2019-01-24-swag-store/index.md +++ b/docs/blog/2019-01-24-swag-store/index.md @@ -235,9 +235,9 @@ The top section lists each tool that we’re using to manage and automated the s - Each **hexagon** is a question that the framework needs to ask to decide how to move forward -In this process, just like any site, we have a front-end that people see, and a backend that people don’t. +In this process, just like any site, we have a frontend that people see, and a backend that people don’t. -In this case, the front-end was the process that people went through to order and get their swag. +In this case, the frontend was the process that people went through to order and get their swag. And the backend was the systems design, tools, and automation triggers that handled all the requests and process. diff --git a/docs/blog/2019-01-30-flamingo-case-study/index.md b/docs/blog/2019-01-30-flamingo-case-study/index.md index 4c3390338af21..b73f48ac6cb39 100644 --- a/docs/blog/2019-01-30-flamingo-case-study/index.md +++ b/docs/blog/2019-01-30-flamingo-case-study/index.md @@ -38,7 +38,7 @@ The manual process required to make the Harry’s website perform was what they Since Gatsby simply serves html files that are hosted on the edge (CDN: Content Delivery Network), this dramatically improves SEO. The developers can focus on other things because Gatsby just takes care of the performance. The team was excited about the image support from Gatsby that is “out-of-the-box.” They didn’t have to write code in-house, which was game changing for a team looking to lead in mobile-optimized shopping. -The Flamingo team also wanted to shake things up with content and image design by providing the fastest, most seamless shopping experience. Gatsby’s image handling helps reduce raw image sizes and speed up page load times, and serves the right resolution image depending on different screen sizes. This gave the front-end developers the ability to go beyond JS to focus on edge hosting and optimization. With a site driven by modern development tools, Gatsby’s out-of-the-box image support is the cherry on top for Flamingo. “We don’t have to write the code ourselves!” said Johnny. +The Flamingo team also wanted to shake things up with content and image design by providing the fastest, most seamless shopping experience. Gatsby’s image handling helps reduce raw image sizes and speed up page load times, and serves the right resolution image depending on different screen sizes. This gave the frontend developers the ability to go beyond JS to focus on edge hosting and optimization. With a site driven by modern development tools, Gatsby’s out-of-the-box image support is the cherry on top for Flamingo. “We don’t have to write the code ourselves!” said Johnny. The duo also praised the ease of getting up to speed on Gatsby, which gave them the ability to hire new developers and get them going in only a day. If there was familiarity with React, onboarding was successful and reduced the management of dependencies and servers. @@ -74,6 +74,6 @@ Reflecting on it post-launch, the team says that Gatsby allowed them to focus on The team has gotten excited about learning – excited about hosting at the edge and optimizing for performance, because Gatsby makes it easy. -Front-end engineers are going beyond JS and tools and focusing on edge hosting, the modern web technology stack and optimizing for speed. The team is using this as a blueprint for how they’ll build websites in the future. +Frontend engineers are going beyond JS and tools and focusing on edge hosting, the modern web technology stack and optimizing for speed. The team is using this as a blueprint for how they’ll build websites in the future. Gatsby delivered a performance-optimized website for Flamingo, hosted on the edge. It made it easy to onboard new developers and create engaging experiences. It improved the website visitor’s experience with speed and design and it inspired the Flamingo team in a new age of ecommerce design. diff --git a/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md b/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md index f8f9eeffa6c40..831a03b991093 100644 --- a/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md +++ b/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md @@ -65,7 +65,7 @@ We'll look at each of these in the context of our homepage redesign. As mentioned above, our most significant challenge transitioning the codebase from 18F to ONRR was operating system compatibility. We were asking a lot of our IT group, who had to vet our tech stack to ensure it met security requirements. It was a time consuming process that, even when we were granted administrative privileges, still left us with dependency errors and a parallel data-update workflow using separate machines. -Gatsby combines multiple front-end tools into one, and the packages are managed with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/), so the scope of our IT requests is limited to widely used package managers. From what we can tell so far, running Gatsby is nearly identical regardless of the operating system you're using. As we'll describe in the next section, we were able to build a data-update workflow that we could support using our government-issued computers. +Gatsby combines multiple frontend tools into one, and the packages are managed with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/), so the scope of our IT requests is limited to widely used package managers. From what we can tell so far, running Gatsby is nearly identical regardless of the operating system you're using. As we'll describe in the next section, we were able to build a data-update workflow that we could support using our government-issued computers. ### GraphQL diff --git a/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md b/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md index 5d0af63b17b57..5f857b98f2d18 100644 --- a/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md +++ b/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md @@ -12,7 +12,7 @@ At the last Gatsby Days conference a couple months ago, I gave a talk about how When you’re a developer, choosing the best tool for the job is essential in doing great work but then you may have to convince another stakeholder about your choice. Or if you work with clients, letting them know why you chose a certain tech stack is important because it may impact the final product. -So how do you explain all the technical nuance to an audience that doesn’t work in front-end website development every day? +So how do you explain all the technical nuance to an audience that doesn’t work in frontend website development every day? I’ve worked at tech companies large and small over the past decade and one thing I’ve learned over the years is that highly skilled technical people can have a hard time explaining deep technical concepts to a not-as-technical audience. This makes sense because since there is so much to know about certain topics, it’s difficult to know where to start and how to simplify the concepts and still be accurate. To help, I’ve put together some thoughts on how to position Gatsby to your clients and team members. diff --git a/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md b/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md index 8b8f489134484..ff736cbc5aee5 100644 --- a/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md +++ b/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md @@ -26,7 +26,7 @@ In terms of what this means to you as a marketer – it's essentially a modern w ![What is JAMstack](./images/whatisjamstack.jpeg) -Put simply, a JAMstack website has an unlimited ecosystem of all of the tools and services you need in the background, but the actual site itself on the front-end is just HTML. +Put simply, a JAMstack website has an unlimited ecosystem of all of the tools and services you need in the background, but the actual site itself on the frontend is just HTML. Building your marketing site on the JAMstack is an efficient and reliable way to combine all of your content and channels and serve it up as a lightning-fast website that your visitors will love. If you need to add ecommerce, paywalls, a podcast or some other content to your site in the future, your team won't have to figure out how to get everything to play ball with your CMS or build a new site from scratch. Instead they'll be able to connect new APIs or services to your existing site. @@ -64,7 +64,7 @@ Site performance and site speed is an increasingly important ranking factor. Not Using plugins to assist the speed at which you can launch marketing campaigns makes sense. But if the end result is hindered by poor performance and reduced page engagement – does it still make sense? -Ditching the concept of the plugin and opting for a JAMstack site which is "just HTML" doesn't actually mean you have to give up functionality, or suddenly need to know how to code like a front-end developer to manage a site and its content. You can still achieve the same results with an ecosystem of tools and services that are tailored specifically for you. Yes it takes some development up-front (let's be real, so does any website) - but the payoff is huge! +Ditching the concept of the plugin and opting for a JAMstack site which is "just HTML" doesn't actually mean you have to give up functionality, or suddenly need to know how to code like a frontend developer to manage a site and its content. You can still achieve the same results with an ecosystem of tools and services that are tailored specifically for you. Yes it takes some development up-front (let's be real, so does any website) - but the payoff is huge! ## Example: Ghost Docs site performance @@ -103,14 +103,14 @@ As always, there is still work to do to ensure the site ranks well for the most **Here's the stack we're using:** - [Ghost](https://ghost.org/) delivering content via the API -- A front-end built in React with [Gatsby](https://gatsbyjs.org/) (our static site generator of choice) +- A frontend built in React with [Gatsby](https://gatsbyjs.org/) (our static site generator of choice) - Deployed with [Netlifly](https://netlify.com/) (really nifty content delivery network) - [Algolia](https://algolia.com/) powering the search functionality - [Zapier](https://zapier.com/) to automate community feedback into Slack for content improvements We have also built and contributed an [advanced sitemap plugin](/packages/gatsby-plugin-advanced-sitemap/?=sitemap) which automatically builds a sitemap for any Gatsby project. -Much of the SEO functionality is being pulled directly from Ghost via the API (which has all of the structured data, custom meta data, canonicals etc built-in). This means I can manage most of the content and meta data directly in the Ghost admin client. When I save new changes they're pushed into the static front-end via Netlify – it's a fantastic workflow! +Much of the SEO functionality is being pulled directly from Ghost via the API (which has all of the structured data, custom meta data, canonicals etc built-in). This means I can manage most of the content and meta data directly in the Ghost admin client. When I save new changes they're pushed into the static frontend via Netlify – it's a fantastic workflow! ![Netlify](./images/netlify.png) diff --git a/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md b/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md index 33f6c58ce7daf..e53f9e2fd6f5b 100644 --- a/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md +++ b/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md @@ -107,7 +107,7 @@ To begin describing why build-time SSR is so appealing, let's first take a look - Creating a bucket/location to host static content (like S3, Google Cloud Storage, etc.) - Setting up a [Domain Name System (DNS)](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name) to make your content reachable via a pretty URL, e.g. gatsbyjs.org - Routing the CDN layer in front of your static content -- Set up a Continuous Integration (CI) environment so we can build and deploy code to production with minimal impact to end-users +- Set up a Continuous Integration (CI) environment so we can build and deploy code to production with minimal impact to end users ... and, that's it! We're done as far as setup goes! We can use _whatever_ stack you prefer here. Netlify? [You bet.](https://www.gatsbyjs.org/docs/deploying-to-netlify) More a fan of AWS? [Of course.](https://www.gatsbyjs.org/docs/deploying-to-aws-amplify/) Heroku? [Yup.](https://www.gatsbyjs.org/docs/deploying-to-heroku/) You get the idea. Gatsby can be deployed anywhere easily and cheaply. @@ -325,7 +325,7 @@ _Want to dive deeper? Much of this is encapsulated in our internal [Webpack conf ## Modern APIs in Gatsby -Gatsby uses modern browser APIs to both maximize performance and user experience--which oftentimes go hand in hand!--only loading assets when they are necessary and likely to be requested. Specifically, the following APIs are crucial to the end-user experience in Gatsby: +Gatsby uses modern browser APIs to both maximize performance and user experience--which oftentimes go hand in hand!--only loading assets when they are necessary and likely to be requested. Specifically, the following APIs are crucial to the end user experience in Gatsby: 1. `IntersectionObserver` - an API to conditionally perform some action when an element enters the viewport/view 1. `link rel="prefetch"` - an API to prefetch resources in the background when the browser is idle diff --git a/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md b/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md index 63fd42690f89e..67ce40b5f94c3 100644 --- a/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md +++ b/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md @@ -31,7 +31,7 @@ Four of our team will be behind the table at various times during DrupalCon, inc On Thursday, during the DrupalCon closing plenary, **[Marcy Sutton](https://twitter.com/marcysutton)**, our Head of Learning, will deliver one of the keynotes to close out DrupalCon with a discussion of how to design and build software that fosters inclusion. [“JavaScript and Civil Rights”](https://events.drupal.org/seattle2019/sessions/javascript-and-civil-rights) will take place in Hall 4E from 4:15-5:30pm on Thursday. -“As designers and developers of software, we act as gatekeepers in people’s lives more than we realize,” states the keynote abstract. “Now more than ever, it is our duty to create digital experiences that honor our users’ rights to inclusion–no matter where they live, or how they access the Web. This applies to both authors and contributors, as well as end-users and consumers; we must do more to protect everyone’s rights to access, safety, security, and privacy.” +“As designers and developers of software, we act as gatekeepers in people’s lives more than we realize,” states the keynote abstract. “Now more than ever, it is our duty to create digital experiences that honor our users’ rights to inclusion–no matter where they live, or how they access the Web. This applies to both authors and contributors, as well as end users and consumers; we must do more to protect everyone’s rights to access, safety, security, and privacy.” ### Meet Gatsby CEO Kyle Mathews at Decoupled Summit diff --git a/docs/blog/2019-04-19-gatsby-why-we-write/index.md b/docs/blog/2019-04-19-gatsby-why-we-write/index.md index be666013baa6d..92e7c1811256e 100644 --- a/docs/blog/2019-04-19-gatsby-why-we-write/index.md +++ b/docs/blog/2019-04-19-gatsby-why-we-write/index.md @@ -96,7 +96,7 @@ In the docs, things are structured hierarchically, so usually content is mostly But outside the docs, that's far from the case. We have blog posts, [using-\* example sites / guides](https://github.com/gatsbyjs/gatsby/tree/master/examples), [starters](/starters/), conference talks, podcast appearances, tweets, and whatever Gatsby community members dream up and publish! -**It's a constant challenge to organize these in ways that are useful and obvious for the end-user**. We're always attacking this in five or ten different ways -- discoverability via search, cross-linking, hierarchy, navbars and breadcrumbs, turning conference talks into blog posts and blog posts into docs. +**It's a constant challenge to organize these in ways that are useful and obvious for the end user**. We're always attacking this in five or ten different ways -- discoverability via search, cross-linking, hierarchy, navbars and breadcrumbs, turning conference talks into blog posts and blog posts into docs. Our goal is to make it easy for the user to gather relevant context, know where to look when they get stuck, and feel confident that they can make it if they keep on reading, learning, and trying. diff --git a/docs/blog/2019-04-29-component-shadowing/index.md b/docs/blog/2019-04-29-component-shadowing/index.md index fe8dad6d64e5e..46aa2afb37dfb 100644 --- a/docs/blog/2019-04-29-component-shadowing/index.md +++ b/docs/blog/2019-04-29-component-shadowing/index.md @@ -142,5 +142,5 @@ Gatsby Themes and is currently being used in production. ## Further reading -- [Component Shadowing Documentation](/docs/themes/api-reference/#component-shadowing) +- [Component Shadowing Documentation](/docs/themes/shadowing/) - [Latent Component Shadowing](https://johno.com/latent-component-shadowing) diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md index 8fdd9e7caaec1..42f353b4de227 100644 --- a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md +++ b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md @@ -56,7 +56,7 @@ Now that you have your project created, let's take a look inside. You will see a - **README.md**: Markdown file with instructions for use - **gatsby-browser.js**: Gatsby Browser API stuff goes here. Global style calls go here too - **gatsby-config.js**: Configuration for your project including meta data and plugins -- **gatsby-node.js**: Where you tell gatsby to build pages from a template using provided data +- **gatsby-node.js**: Where you tell Gatsby to build pages from a template using provided data - **gatsby-ssr.js**: Gatsby Server Side Rendering APIs go here - **package.json**: File which holds custom scripts, dependency information, etc diff --git a/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md b/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md index 419a71bc947a5..75db3bd10736a 100644 --- a/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md +++ b/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md @@ -54,7 +54,7 @@ With Gatsby, we can generate several hundred pages for all of the industries tha By providing data in the form of a JSON object, we can parse and iterate over each industry in which to generate a new page. Whether this JSON data comes from a file, or a CMS via an API call, or our own database, Gatsby provides the flexibility to build in any way we need. -This has dramatically decreased developer time and rocketed the speed of page creation. We went from building several pages a week using front-end developers, to building out dozens of pages a day with professional content creators. +This has dramatically decreased developer time and rocketed the speed of page creation. We went from building several pages a week using frontend developers, to building out dozens of pages a day with professional content creators. Below is an example of one of our live industry pages (in this case Heating/Air Conditioning). Each industry page follows the same template, and content authors can build out new industries, complete with whatever copy, icons, images, and animations they need to allow each to stand out as its own work of art. diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md index 2c70ccbbf0399..0af199997e3ab 100644 --- a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md +++ b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md @@ -296,7 +296,7 @@ One of the first things I notice about the blog pictured above is the header. It ### In the gatsby-config.js file -In the gatsby-config.js file, you can see a piece at the top called `siteMetaData` with a title, description, and author. This is where some basic information is kept about the project for the SEO component, but also for the site name. +In the gatsby-config.js file, you can see a piece at the top called `siteMetadata` with a title, description, and author. This is where some basic information is kept about the project for the SEO component, but also for the site name. ```javascript // gatsby-config.js diff --git a/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md b/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md index d1f813a9b9421..44529387f9493 100644 --- a/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md +++ b/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md @@ -47,7 +47,7 @@ For enterprise users, hiring more affordable developers with a flexible, more mo ## Performance: Optimization at every page interaction -Enterprises today expect fast performance at every stage of page interaction: first load, moving between pages, and dynamic updates and transitions that occur after page load. Traditional CMSs like Adobe, Drupal, Sitecore, and WordPress have long struggled with performance bottlenecks at each step of this process, whether it is due to an oversized server bootstrap, overly stale cache, a lack of prefetching across linked pages, or an unwieldy Ajax or JavaScript API for front-end interactions. As new users continue to acquire smartphones at a high rate in low-bandwidth network areas, these concerns become even more paramount. +Enterprises today expect fast performance at every stage of page interaction: first load, moving between pages, and dynamic updates and transitions that occur after page load. Traditional CMSs like Adobe, Drupal, Sitecore, and WordPress have long struggled with performance bottlenecks at each step of this process, whether it is due to an oversized server bootstrap, overly stale cache, a lack of prefetching across linked pages, or an unwieldy Ajax or JavaScript API for frontend interactions. As new users continue to acquire smartphones at a high rate in low-bandwidth network areas, these concerns become even more paramount. Gatsby solves all of these problems thanks to its focus on rendering server-side markup first and foremost before handing off all asynchronous rendering to a React application initialized client-side. With its prefetching, Gatsby users can rest assured that any link click will lead to an instantaneous render rather than a roundtrip back to the server. Moreover, because React controls all state after the page has loaded, the management of interactive functionality becomes a much simpler consideration. Our very own [Dustin Schau](https://dustinschau.com/) recently penned a deep dive into [what makes Gatsby’s performance so incredible](https://www.gatsbyjs.org/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/). @@ -79,7 +79,7 @@ Fortunately, Gatsby is currently hard at work on supporting incremental builds f At Gatsby, we’ve heard many questions about whether Gatsby is truly ready for the enterprise. The short answer is yes or very soon, depending on your requirements. After all, Gatsby currently lacks many of the features that end-to-end CMSs routinely tout such as contextual editing and layout manipulation. At the moment it also doesn’t have some of the features needed to support compliance in the evolving digital landscape such as HIPAA, FEDRamp, and others, but they are on our radar. -Nonetheless, Gatsby makes up what it lacks at the moment in the administrative experience with benefits in other ways that make it a uniquely compelling choice for enterprises seeking an ambitious developer-first solution paired with sensible defaults for performance and security. If you are seeking a decoupled CMS solution that includes a fast-off-the-shelf front end and security benefits that stand up to any traditional CMS currently in vogue, Gatsby should be at the top of your list of considerations. +Nonetheless, Gatsby makes up what it lacks at the moment in the administrative experience with benefits in other ways that make it a uniquely compelling choice for enterprises seeking an ambitious developer-first solution paired with sensible defaults for performance and security. If you are seeking a decoupled CMS solution that includes a fast-off-the-shelf frontend and security benefits that stand up to any traditional CMS currently in vogue, Gatsby should be at the top of your list of considerations. We’re just getting started! In addition to our ongoing beta for [Gatsby Preview](https://gatsbyjs.com/preview), soon to be opened up to the general public in open beta ([join the waitlist](https://gatsbyjs.com/preview) today!), we’re hard at work on features we know will be relevant not only to Gatsby’s early adopters but also enterprise users who require fast deployment times in addition to live high-fidelity preview and quicker turnarounds in content production workflows. diff --git a/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md b/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md index d356f60d31a65..21c4b0ff2eb1c 100644 --- a/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md +++ b/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md @@ -7,7 +7,7 @@ tags: - gatsby-inc --- -"You belong here" is a core tenet of both Gatsby, the open source project, and Gatsby, the enterprise. Involving the developer community in this adventure to the front end far horizon has been our prime directive ever since launch. In the past four years we have worked alongside a constellation of 1,900+ contributors helping to build Gatsbyjs and created a robust library of useful plugins. All along, Gatsby’s competitive advantage has been the strength of its community and ecosystem: we came this far this fast thanks to users who rolled up their sleeves and pitched in. +"You belong here" is a core tenet of both Gatsby, the open source project, and Gatsby, the enterprise. Involving the developer community in this adventure to the frontend far horizon has been our prime directive ever since launch. In the past four years we have worked alongside a constellation of 1,900+ contributors helping to build Gatsbyjs and created a robust library of useful plugins. All along, Gatsby’s competitive advantage has been the strength of its community and ecosystem: we came this far this fast thanks to users who rolled up their sleeves and pitched in. Gatsby Days is one of our ways to say thank you. ([Another is tasty swag for contributors)](https://www.gatsbyjs.org/contributing/contributor-swag/). This series of single-day conferences aims to connect the Gatsby community with Gatsby’s creators, core team and most of all each other. Our first event was held in San Francisco this past December, and our second Gatsby Days gathering just took place in New York on May 6th. diff --git a/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md b/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md index de434e83b1cf3..4f7596797988b 100644 --- a/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md +++ b/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md @@ -26,7 +26,7 @@ So Brian kept trying, and not finding, a better way to develop projects and mana ## Swiping Right for Gatsby -There was only one potential hurdle to true romance: convincing the Delicious Simplicity team. They were mainly front end developers used to working with HTML/CSS, maybe a little jQuery. Stepping across the divide into the backend to confront the complexities of a headless CMS was not in their comfort zone. But Brian was confident he could get them there. +There was only one potential hurdle to true romance: convincing the Delicious Simplicity team. They were mainly frontend developers used to working with HTML/CSS, maybe a little jQuery. Stepping across the divide into the backend to confront the complexities of a headless CMS was not in their comfort zone. But Brian was confident he could get them there. “Once I got hands on with Gatsby, I was shocked how quickly I managed to pick things up. The syntax was just so intuitive, which made it easy to digest,” he says. There were definitely some growing pains -- the team had little experience with React or Node, and some of the devs found the new component-based way of thinking overwhelming to grasp at first. But they eventually fell in love with Gatsby and now don’t want to work in anything else. diff --git a/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md b/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md index a62a238bd1247..a28735c4d1fa5 100644 --- a/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md +++ b/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md @@ -21,13 +21,13 @@ In November, I began a conversation with a mid-sized retail and digital commerce - First, the content editorial experience for staff was so poor that multiple team members had actually quit because of it (saying as much in their exit interview). - Second, development velocity was painfully slow because of the complex implementation. -Once I talked about the value of a microservices approach, the unbeatable fast speed of a React powered front end, preview, and the partial builds feature on the roadmap Gatsby (and was honest about the trade offs), the client enthusiastically wanted to know more, and they are likely proceeding with a Gatsby stack for their replatform. +Once I talked about the value of a microservices approach, the unbeatable fast speed of a React powered frontend, preview, and the partial builds feature on the roadmap Gatsby (and was honest about the trade offs), the client enthusiastically wanted to know more, and they are likely proceeding with a Gatsby stack for their replatform. Here are three smart points of entry to get the conversation focused on use cases. (To learn more about explaining the technicalities of Gatsby, check out Linda’s extensive article on [how to break down Gatsby in a way that will resonate](/blog/2019-03-07-sell-gatsby-to-clients/). ## #1 Developers are the bottleneck -One of the primary drawbacks of a monolithic CMS like WordPress or Drupal is that the front-end theming layer is tightly coupled with the backend data layer. That means that a developer working only in the theme layer must still be comfortable with PHP, a backend programming language. In a headless approach, using JavaScript at the render layer, a themer only needs to know HTML, CSS, and JavaScript, the languages already in their toolkit. +One of the primary drawbacks of a monolithic CMS like WordPress or Drupal is that the frontend theming layer is tightly coupled with the backend data layer. That means that a developer working only in the theme layer must still be comfortable with PHP, a backend programming language. In a headless approach, using JavaScript at the render layer, a themer only needs to know HTML, CSS, and JavaScript, the languages already in their toolkit. If the client is suffering from slow developer velocity, this benefit will resonate and provide value to their organization. @@ -45,7 +45,7 @@ Mobile websites that take [more than 3 seconds to load have a 53% bounce rate](h There is fast (which every site should be) and then there is Gatsby-fast. -Every site needs to be performant. There isn’t a site out there where slow response times won’t negatively impact user engagement, conversion, and often, the bottom line. But remember, there is fast (which every site should be) and then there is Gatsby-fast. Companies that migrate to Gatsby will find their site is [between three and 10 times faster](https://www.gatsbyjs.com/guides/why-are-gatsby-sites-fast/). Indeed, the speed of a Gatsby-powered front end resembles more of the instantaneous feel of native mobile apps. +Every site needs to be performant. There isn’t a site out there where slow response times won’t negatively impact user engagement, conversion, and often, the bottom line. But remember, there is fast (which every site should be) and then there is Gatsby-fast. Companies that migrate to Gatsby will find their site is [between three and 10 times faster](https://www.gatsbyjs.com/guides/why-are-gatsby-sites-fast/). Indeed, the speed of a Gatsby-powered frontend resembles more of the instantaneous feel of native mobile apps. --- diff --git a/docs/blog/2019-06-25-profitable-agency-wordpress/index.md b/docs/blog/2019-06-25-profitable-agency-wordpress/index.md index 6ff1730a504a0..44d2d78af4251 100644 --- a/docs/blog/2019-06-25-profitable-agency-wordpress/index.md +++ b/docs/blog/2019-06-25-profitable-agency-wordpress/index.md @@ -85,7 +85,7 @@ Gatsby is different. Consider this example: If your client needs ecommerce features on their site, Gatsby can pull in the product data and shopping cart functionality from two different services, if you so choose. Those two services are not produced by the same server, or writing to the same database. So a problem with one may not affect the other. -In theory, break-fix for Gatsby should be easier to diagnose and solve. An issue with the build has nothing to do with a problem with the front-end, and vice versa. Gatsby's lower technical maintenance may be the difference between you taking on 5 client sites or 15. +In theory, break-fix for Gatsby should be easier to diagnose and solve. An issue with the build has nothing to do with a problem with the frontend, and vice versa. Gatsby's lower technical maintenance may be the difference between you taking on 5 client sites or 15. Personally I keep forgetting about the static sites under my care because there's literally nothing to work on for them month-to-month. diff --git a/docs/blog/2019-06-28-component-driven-drupal-development/index.md b/docs/blog/2019-06-28-component-driven-drupal-development/index.md index 4a2f702cd6a1c..05b96b3c5b9e4 100644 --- a/docs/blog/2019-06-28-component-driven-drupal-development/index.md +++ b/docs/blog/2019-06-28-component-driven-drupal-development/index.md @@ -9,7 +9,7 @@ tags: - agencies --- -In our recent webinar, [Gatsby for Agencies and Teams: Better, Faster, Smarter](https://www.gatsbyjs.com/gatsby-for-agencies/), Ben Robertson talked with us about adopting Gatsby at Mediacurrent and how it transformed their development process. Ben is a front-end developer at Mediacurrent where he has established front-end development best practices and led Drupal development projects. +In our recent webinar, [Gatsby for Agencies and Teams: Better, Faster, Smarter](https://www.gatsbyjs.com/gatsby-for-agencies/), Ben Robertson talked with us about adopting Gatsby at Mediacurrent and how it transformed their development process. Ben is a frontend developer at Mediacurrent where he has established frontend development best practices and led Drupal development projects. ## About Mediacurrent @@ -21,9 +21,9 @@ One of the things that excited Ben about working at Mediacurrent was their compo “I thought this was an awesome workflow. It gave us a single source of truth - for each component. The same template was used by both front-end and back-end + for each component. The same template was used by both frontend and backend developers. We could reuse that same component anywhere it was needed, and it - let the front-enders focus more on front-end specific concerns like semantics + let the frontenders focus more on frontend specific concerns like semantics and richer interactivity and accessibility.” @@ -31,11 +31,11 @@ Or at least, that’s what the component-driven workflows were supposed to do… ## Trouble in the Integration Layer -Unfortunately, things were not so simple. In addition to the component templates themselves, the front-end team had to code the logic for integrating the component templates with the Drupal CMS data. Placing the logic in the template files made them overly complex and difficult to read, but placing the integration logic on the Drupal side meant writing PHP, which was outside the front-end team’s comfort zone. The front-end team also didn’t necessarily think about or understand all the particulars of how the CMS data is fed into the component templates when they were building them, which meant additional time had to be spent reconciling the templates with the data. +Unfortunately, things were not so simple. In addition to the component templates themselves, the frontend team had to code the logic for integrating the component templates with the Drupal CMS data. Placing the logic in the template files made them overly complex and difficult to read, but placing the integration logic on the Drupal side meant writing PHP, which was outside the frontend team’s comfort zone. The frontend team also didn’t necessarily think about or understand all the particulars of how the CMS data is fed into the component templates when they were building them, which meant additional time had to be spent reconciling the templates with the data. -Finally, they were running into performance issues. The typical complex Drupal site is always going to have a variety of performance issues that could originate in the server, hosting environment, instances of bad PHP, issues with file compilation or bundling, and many other spots. Troubleshooting these issues would then require advanced knowledge of Drupal that could only be found among the back-end team. +Finally, they were running into performance issues. The typical complex Drupal site is always going to have a variety of performance issues that could originate in the server, hosting environment, instances of bad PHP, issues with file compilation or bundling, and many other spots. Troubleshooting these issues would then require advanced knowledge of Drupal that could only be found among the backend team. -Despite their best efforts, their component-driven process was being undermined by the quirks and inefficiencies of having to stand up sites within the Drupal CMS. The front-end and back-end teams were frustrated with the amount of effort they had to put into making the integration work, it was pulling their focus away from the front-end and back-end work they were actually there to do, and it was costing the company money. +Despite their best efforts, their component-driven process was being undermined by the quirks and inefficiencies of having to stand up sites within the Drupal CMS. The frontend and backend teams were frustrated with the amount of effort they had to put into making the integration work, it was pulling their focus away from the frontend and backend work they were actually there to do, and it was costing the company money. ## Effortless Integration and Performance with Gatsby @@ -49,24 +49,24 @@ Performance also became a low-effort task, thanks to Gatsby. Because Gatsby site “It's incredible. Like incredibly fast and incredibly easy to set up.“ -The front-end and back-end teams experienced new levels of productivity. They no longer had to waste time passing integration problems back and forth or troubleshooting esoteric CMS issues. With Gatsby, the front-end team could focus on the front end and the back-end team could focus on the back end, and any new issues that appeared could be pretty clearly identified as belonging to one or the other. +The frontend and backend teams experienced new levels of productivity. They no longer had to waste time passing integration problems back and forth or troubleshooting esoteric CMS issues. With Gatsby, the frontend team could focus on the frontend and the backend team could focus on the back end, and any new issues that appeared could be pretty clearly identified as belonging to one or the other. - “With the Gatsby site, if something is running slow on the front-end, you know - that it's a front-end problem because, for the most part, everything is + “With the Gatsby site, if something is running slow on the frontend, you know + that it's a frontend problem because, for the most part, everything is rendered in real-time. You can't get away with saying, ‘Oh, the user shouldn't have uploaded that large of an image,’ or, ‘Drupal didn't concatenate my JavaScript in the right order.’ But on the flip side, if something is not - available in the API, you know for a fact it's a back-end issue. **The - separation lets back-enders do what they like and excel at it, and it lets - front-enders do what they like and excel at it.**” + available in the API, you know for a fact it's a backend issue. **The + separation lets backenders do what they like and excel at it, and it lets + frontenders do what they like and excel at it.**” ## Looking Ahead: New Opportunities for the Team, New Opportunities for the Agency -The clarity that Gatsby has brought to front-end and back-end responsibilities has empowered the front-end team to develop more advanced front-end skills. Gatsby offers a great new way for team members to start working with React, and, because it solves a lot of back-end integration issues, they’re seeing that more projects can be accomplished entirely by front-end developers. +The clarity that Gatsby has brought to frontend and backend responsibilities has empowered the frontend team to develop more advanced frontend skills. Gatsby offers a great new way for team members to start working with React, and, because it solves a lot of backend integration issues, they’re seeing that more projects can be accomplished entirely by frontend developers. -As Ben and the Mediacurrent wrap up their first successful Gatsby project, they’re already leveraging it in other ways. They recently integrated Gatsby into a new Drupal install profile called [RAIN](https://www.mediacurrent.com/?utm_source=gatsbyjs_cbd&utm_medium=blog&utm_campaign=partners2019&utm_content=rain), and they’re excited to see how much more efficient their processes are in current client projects. Their new level of efficiency makes it more practical and profitable for the agency to take on smaller, front-end focused projects; and every Gatsby build opens them up to more React projects in the future. +As Ben and the Mediacurrent wrap up their first successful Gatsby project, they’re already leveraging it in other ways. They recently integrated Gatsby into a new Drupal install profile called [RAIN](https://www.mediacurrent.com/?utm_source=gatsbyjs_cbd&utm_medium=blog&utm_campaign=partners2019&utm_content=rain), and they’re excited to see how much more efficient their processes are in current client projects. Their new level of efficiency makes it more practical and profitable for the agency to take on smaller, frontend focused projects; and every Gatsby build opens them up to more React projects in the future. Everyone is looking forward to new growth and bright future with Gatsby. diff --git a/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md b/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md index 9202c38203ea4..1440d92d4f781 100644 --- a/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md +++ b/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md @@ -28,9 +28,9 @@ Sandy Springs came to [Mediacurrent](https://www.mediacurrent.com/?utm_source=ga ## Mediacurrent’s Solution -A decoupled approach, where front end templating is separate from the content management system and database was required to achieve a unified system. Proven as a powerful decoupled CMS, Drupal replaced the city’s existing WordPress site. +A decoupled approach, where frontend templating is separate from the content management system and database was required to achieve a unified system. Proven as a powerful decoupled CMS, Drupal replaced the city’s existing WordPress site. -On the back end, a [Drupal 8](https://www.drupal.org/8) foundation manages content. On the front end, Gatsby presents content. With this approach, the Sandy Springs team can “create once, publish everywhere,” with a more efficient process for sharing information with the local community. +On the back end, a [Drupal 8](https://www.drupal.org/8) foundation manages content. On the frontend, Gatsby presents content. With this approach, the Sandy Springs team can “create once, publish everywhere,” with a more efficient process for sharing information with the local community. ![Drupal-powered large scale digital signage in a cafe](./images/CitySprings2.jpg "City Spring's large scale digital signage") @@ -45,7 +45,7 @@ In this [video presentation](https://www.youtube.com/watch?time_continue=3&v=Qio - **Stable**: With full control over the markup, the site build is fast. - **Scalable**: Gatsby makes it easier for the client to add additional sites in the future. -- **Speedy**: Gatsby bakes in a lot of performance optimization for the front end, ultimately delivering a faster site. +- **Speedy**: Gatsby bakes in a lot of performance optimization for the frontend, ultimately delivering a faster site. - **Hosting**: The Drupal site is never used by a non-editorial user, so fewer hosting resources are needed. ![Drupal-powered digital display kiosk promotes a theatre event](./images/CitySprings3.jpg "City Spring's digital signage kiosk") diff --git a/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md b/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md index 5bfd8bc4eb940..26976c770fe65 100644 --- a/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md +++ b/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md @@ -54,7 +54,7 @@ By user testing a few variations of known routing techniques, we gained some val ## Working with Fable -We worked with [Fable Tech Labs](https://makeitfable.com) to conduct this research and found it to be a very productive process. I connected with Fable’s lead front end developer Perry Trinier at the CSUN accessibility conference in early 2019. Fable’s generous offer to pair with us on this initiative has been wonderful, and we’re grateful for the opportunity to see this through. +We worked with [Fable Tech Labs](https://makeitfable.com) to conduct this research and found it to be a very productive process. I connected with Fable’s lead frontend developer Perry Trinier at the CSUN accessibility conference in early 2019. Fable’s generous offer to pair with us on this initiative has been wonderful, and we’re grateful for the opportunity to see this through. The experience of testing with people with disabilities and the results that followed felt very important, and something product teams should seek out regularly. We’d highly recommend this process for anyone working on digital experiences; particularly if you can test prototypes to adapt to the findings early and often in design & development. User testing for accessibility can provide game-changing detail that you’ll be eternally grateful to have uncovered. Addressing accessibility issues sooner than later is both a [smart business investment](https://www.w3.org/WAI/business-case/) and can make your project more [inclusive](https://www.microsoft.com/design/inclusive/) from the start! diff --git a/docs/blog/2019-08-07-gazette-august/index.md b/docs/blog/2019-08-07-gazette-august/index.md index 38b4b8e648ad1..ccd0a302c73b5 100644 --- a/docs/blog/2019-08-07-gazette-august/index.md +++ b/docs/blog/2019-08-07-gazette-august/index.md @@ -23,7 +23,7 @@ The past few weeks has been all about what we're calling the Snow Leopard releas First, an aside. -[Snow Leopard](https://en.wikipedia.org/wiki/Mac_OS_X_Snow_Leopard) was the seventh major release of macOS. Unlike those of previous versions, the goals of Snow Leopard were improved performance, greater efficiency and the reduction of its overall memory footprint. Addition of new end-user features was not a primary consideration: its name signified its goal to be a refinement of the previous OS X version, Leopard. +[Snow Leopard](https://en.wikipedia.org/wiki/Mac_OS_X_Snow_Leopard) was the seventh major release of macOS. Unlike those of previous versions, the goals of Snow Leopard were improved performance, greater efficiency and the reduction of its overall memory footprint. Addition of new end user features was not a primary consideration: its name signified its goal to be a refinement of the previous OS X version, Leopard. Similarly, earlier last month, we felt like we needed to take some time to slow down and clean up Gatsby after some of the big features that we've shipped recently: notably ([themes](https://www.gatsbyjs.org/blog/2019-07-03-announcing-stable-release-gatsby-themes/) and [per page manifest](https://www.gatsbyjs.org/blog/2019-06-12-performance-improvements-for-large-sites/)). Our goal was to take a step back, move a bit more slowly, and improve the overall code base, add tests, and overall ensure our house is in good order for more improvements in the future. diff --git a/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md b/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md index 1f4e2802c09f6..dd3709c1c2fc7 100644 --- a/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md +++ b/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md @@ -22,7 +22,7 @@ The flexibility of Kentico Cloud means there are many ways to achieve the same g ## Identify your language -Our first step is to determine how we are going to identify cultures or languages from the front end of the site. As Kentico Cloud is purely a content hub, there’s not the same set of localization web parts and widgets that you might get from a product like Kentico EMS. We need an alternative to pick up that culture code. +Our first step is to determine how we are going to identify cultures or languages from the frontend of the site. As Kentico Cloud is purely a content hub, there’s not the same set of localization web parts and widgets that you might get from a product like Kentico EMS. We need an alternative to pick up that culture code. There are a few options here. You could be using a simple language switcher control on your site or application. Or, it might be as simple as deriving it from the URL e.g. _www.mysite.com/en-gb/about-us_ or _www.mysite.com/about-us?lang=en-gb_. diff --git a/docs/blog/2019-08-27-roll-your-own-comment-system/index.md b/docs/blog/2019-08-27-roll-your-own-comment-system/index.md index 603637d5af13f..c58b5244690c7 100644 --- a/docs/blog/2019-08-27-roll-your-own-comment-system/index.md +++ b/docs/blog/2019-08-27-roll-your-own-comment-system/index.md @@ -47,7 +47,7 @@ The comments API consists of three parts: - [API Server](#api) - [Front End](#front-end) -The front end is written for React, but if you know how to make a form and an API call, it can be easily adjusted to whatever static system you're using. +The frontend is written for React, but if you know how to make a form and an API call, it can be easily adjusted to whatever static system you're using. ## Database @@ -241,7 +241,7 @@ app.delete("/comments/:id", deleteComment) ## Front End -Again, for the front end I'm using React as an example, but the concept is the same for any template system. In whatever your post template file is, use JavaScript to make a `fetch` or `axios` call to your comment API, and save the data in state somewhere. Once I retrieve the JSON response from the API server, which will be an array of comment objects, I can pass it to wherever I'm displaying the comments. +Again, for the frontend I'm using React as an example, but the concept is the same for any template system. In whatever your post template file is, use JavaScript to make a `fetch` or `axios` call to your comment API, and save the data in state somewhere. Once I retrieve the JSON response from the API server, which will be an array of comment objects, I can pass it to wherever I'm displaying the comments. > Sorry, I'm not using hooks yet. It's okay, deep breath. We'll get through this. diff --git a/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md b/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md index 0971e08cde637..370a78a56a795 100644 --- a/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md +++ b/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md @@ -13,11 +13,11 @@ canonicalLink: https://www.thirdandgrove.com/building-new-site-with-drupal-and-g This rebrand/replatform is a big leap forward for our brand, marking a milestone in who we want to be as a company. In this article, I’m going to focus on the tech behind the screen that makes it all happen. -## Why use a modern front end? +## Why use a modern frontend? -We’re a Drupal agency through and through. But since we saw the promise of front end tech like React, we’ve better equipped our team with people who can build modern digital experiences for our clients (including people like me!) Building our own site with a modern front end is foremost a way for us to eat our own dog food (good news is that we’re still really enjoying eating it). +We’re a Drupal agency through and through. But since we saw the promise of frontend tech like React, we’ve better equipped our team with people who can build modern digital experiences for our clients (including people like me!) Building our own site with a modern frontend is foremost a way for us to eat our own dog food (good news is that we’re still really enjoying eating it). -There are several reasons to modernize from an aging front end but these stick out to us. +There are several reasons to modernize from an aging frontend but these stick out to us. 1. **User Experience.** It’s possible to create an amazing user experience with dated technology (we’ve done it many a time). BUT it’s easier, cheaper, and faster to do with a modern set of solutions. 2. **Developer Velocity.** Leveraging Gatsby has improved the code quality and tooling. So development, while faster, can produce code that is more testable, has less duplication and is of higher quality. It also reduces the overhead for developers to know HTML, CSS, JavaScript, and PHP. This last part wasn’t of huge importance to us but for this can make a world of difference to our clients that don’t have as wide a skillset on their team. @@ -56,6 +56,6 @@ In our new site, we have content coming from multiple sources. Each source might ## More like TAGV5.1 -The beauty of building React projects is that they are highly flexible. This flexibility allows us to construct this front end in a way that it can grow with us. So instead of having to rebuild everything when we want a new look, we can change some of our wrapper components out, or add a new data source if we start a swag store. This gives us a layer of abstraction that is useful in the real world. Our data/content is separate from our views, and our views are abstracted from their structure. This is powerful for many reasons, foremost being that, instead of building a single entity that is our site, we are building modular pieces that when combined become an awesome thing, like a Megazord, or Captain Planet. This mentality of modular code isn't new and isn't unique to React. However, the JavaScript ecosystem and React in particular have taken this approach to heart. Gatsby takes it a step further with their plugin model. For example, adding a sitemap is as easy as adding a plugin. Once the plugin is installed it’s just another task added into the Gatsby build process using information that is already available. +The beauty of building React projects is that they are highly flexible. This flexibility allows us to construct this frontend in a way that it can grow with us. So instead of having to rebuild everything when we want a new look, we can change some of our wrapper components out, or add a new data source if we start a swag store. This gives us a layer of abstraction that is useful in the real world. Our data/content is separate from our views, and our views are abstracted from their structure. This is powerful for many reasons, foremost being that, instead of building a single entity that is our site, we are building modular pieces that when combined become an awesome thing, like a Megazord, or Captain Planet. This mentality of modular code isn't new and isn't unique to React. However, the JavaScript ecosystem and React in particular have taken this approach to heart. Gatsby takes it a step further with their plugin model. For example, adding a sitemap is as easy as adding a plugin. Once the plugin is installed it’s just another task added into the Gatsby build process using information that is already available. With this modular approach, we can add, refactor, and redesign at will. The TAG website is now a living breathing internet creature more than ever before. Now on to TAGV5.2. diff --git a/docs/blog/2019-10-15-free-headless-cms/index.md b/docs/blog/2019-10-15-free-headless-cms/index.md index 7d23e23e2714e..4d8fae9b7cb03 100644 --- a/docs/blog/2019-10-15-free-headless-cms/index.md +++ b/docs/blog/2019-10-15-free-headless-cms/index.md @@ -18,7 +18,7 @@ How do you know which headless CMS is right for your site? In this post, we’ll 2. This headless CMS has to be robust enough to grow with the site over time. -3. This headless CMS has to work with with front-end frameworks like Gatsby. +3. This headless CMS has to work with with frontend frameworks like Gatsby. The difficulty with these must-haves is that there are no _truly free_ options. There are open source projects that provide code for free, but you have to host it somewhere. Then, there are hosted headless CMS’s with generous free tiers. But most of them have prohibitive pricing once your project grows. @@ -42,13 +42,13 @@ Every writer or marketer who works on the Internet is familiar with WordPress, s Cheap hosting is easy to find - providers like Bluehost and Amazon Lightsail offer WordPress hosting for about \$4 dollars a month. Other popular hosts like GoDaddy can get you going for less than \$10 dollars a month. -If your website needed all-in-one WordPress, then these cheap, shared hosting packages wouldn’t be enough to handle a website that expects any sort of traffic. However, you’re just using headless WordPress, and all that you ask from the software is to organize your content, and send it to a front-end framework like Gatsby. +If your website needed all-in-one WordPress, then these cheap, shared hosting packages wouldn’t be enough to handle a website that expects any sort of traffic. However, you’re just using headless WordPress, and all that you ask from the software is to organize your content, and send it to a frontend framework like Gatsby. So, as long as the host is reputable, and the service is secure, you can buy the most cost-friendly hosting available. See Gatsby’s guide on getting started with [over a dozen headless CMS’s](https://www.gatsbyjs.org/docs/headless-cms/) ## Option #2. Netlify CMS -Netlify created a free headless CMS modeled after open source projects like WordPress and Drupal, so JAMstack sites would have options beyond SaaS CMS’s. [Netlify CMS](https://www.netlifycms.org/) cleverly uses cloud git services like GitHub and Gitlab as the backend for your content, and claims to work with almost any static site generator, including Gatsby. +Netlify created a free headless CMS modeled after open source projects like WordPress and Drupal, so JAMstack sites would have options beyond SaaS CMS’s. [Netlify CMS](https://www.netlifycms.org/) cleverly uses cloud git services like GitHub and GitLab as the backend for your content, and claims to work with almost any static site generator, including Gatsby. ### How “free” is it? diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml index 4da58d5a428b2..38fa682b660e7 100644 --- a/docs/blog/author.yaml +++ b/docs/blog/author.yaml @@ -126,7 +126,7 @@ avatar: avatars/dan-kass.jpg twitter: "@JustFixNYC" - id: Gatsby Central - bio: The community for gatsby developers + bio: The community for Gatsby developers avatar: avatars/gatsby-central.jpg twitter: "@GatsbyCentral" - id: Ray Gesualdo diff --git a/docs/contributing/blog-and-website-contributions.md b/docs/contributing/blog-and-website-contributions.md index acf00c3bdc507..da7633888c94e 100644 --- a/docs/contributing/blog-and-website-contributions.md +++ b/docs/contributing/blog-and-website-contributions.md @@ -12,7 +12,7 @@ Here are some things to keep in mind when deciding where to contribute to Gatsby ## Contributing to the blog -Note: Before adding a blog post, ensure you have approval from a member of the Gatsby team. You can do this by [opening an issue](https://github.com/gatsbyjs/gatsby/issues/new/choose) or contacting [@gatsbyjs on Twitter](https://twitter.com/gatsbyjs). +Note: Before adding a blog post, ensure you have approval from a member of the Gatsby team. You should [open an issue](https://github.com/gatsbyjs/gatsby/issues/new/choose) or contact [@gatsbyjs on Twitter](https://twitter.com/gatsbyjs) before opening a PR with your blog post. Check out past blog posts for examples of posted content. To add a new blog post to the gatsbyjs.org blog: diff --git a/docs/contributing/gatsby-docs-translation-guide.md b/docs/contributing/gatsby-docs-translation-guide.md index ef3b52df3ac1d..ed4818f6b72e3 100644 --- a/docs/contributing/gatsby-docs-translation-guide.md +++ b/docs/contributing/gatsby-docs-translation-guide.md @@ -20,7 +20,7 @@ The Gatsby learning team is in charge of determining priorities for which docs s ### Use English as the source -The [gatsbyjs.org](https://gatsbyjs.org) website is written first in English and should be considered the source material for all translations (as opposed to starting from another translation). When a repository is created, it will provide a copy of the docs to be translated which you can then update through [pull requests](/contributing/how-to-open-a-pull-request/) against them in the relevant language. A bot will +The [gatsbyjs.org](https://gatsbyjs.org) website is written first in English and should be considered the source material for all translations (as opposed to starting from another translation). When a repository is created, it will provide a copy of the docs to be translated which you can then update through [pull requests](/contributing/how-to-open-a-pull-request/) against them in the relevant language. Changes to the meaning of a text or code example should be done in the main [English repo](https://github.com/gatsbyjs/gatsby/), and then translated afterwards to keep the content aligned across languages. @@ -28,8 +28,15 @@ Changes to the meaning of a text or code example should be done in the main [Eng The first step for starting a new translation is to check what exists. So far, there are repositories for the following languages: -- [Spanish](https://github.com/gatsbyjs/gatsby-es) +- [Brazilian Portuguese](https://github.com/gatsbyjs/gatsby-pt-BR) +- [German](https://github.com/gatsbyjs/gatsby-de) +- [Indonesian](https://github.com/gatsbyjs/gatsby-id) +- [Italian](https://github.com/gatsbyjs/gatsby-it) +- [Korean](https://github.com/gatsbyjs/gatsby-ko) +- [Polish](https://github.com/gatsbyjs/gatsby-pl) - [Russian](https://github.com/gatsbyjs/gatsby-ru) +- [Spanish](https://github.com/gatsbyjs/gatsby-es) +- [Turkish](https://github.com/gatsbyjs/gatsby-tr) You can find the list of all translation requests here: https://github.com/gatsbyjs/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue+%22New+Translation+Request%22+ diff --git a/docs/contributing/how-to-open-a-pull-request.md b/docs/contributing/how-to-open-a-pull-request.md index ef5a5b75e23e5..8d3ff764954d3 100644 --- a/docs/contributing/how-to-open-a-pull-request.md +++ b/docs/contributing/how-to-open-a-pull-request.md @@ -14,7 +14,7 @@ Gatsby uses the PR process to review and test changes before they’re added to When someone wants to contribute to Gatsby, they open a request to _pull_ their code into the repo. Depending on the type of change, PRs are categorized into: -- [Documentation](#documentation) +- [Documentation](#documentation-prs) - [Code](#code-changes) - [Starters or Site Showcase](#starters-or-site-showcase) - [Blog posts](#blog-posts) @@ -91,6 +91,25 @@ There are specific pages about contributing to various parts of the Gatsby ecosy 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 and website contributions](/contributing/blog-and-website-contributions/), including how to propose an idea and setting up the blog to run locally. +## Follow up with reviews and suggestions + +After a PR is sent to the Gatsby GitHub repo, the Gatsby core team and the community may suggest modifications to the changes that your PR introduces. + +The Gatsby core and learning teams review and approve every PR that the community sends to make sure that it meets the contribution guidelines of the repo, and to find opportunities for improvement to your PR changes. + +These suggestions may also be called "request changes" by the GitHub UI. When a change request is added to your PR, this and the rest of the change requests will appear on the GitHub page for your PR. From this page you can use the suggestions UI to: + +- Review the suggested changes using the "View changes" button. +- [Commit](https://help.github.com/en/articles/incorporating-feedback-in-your-pull-request#applying-suggested-changes) the suggestions. +- [Discuss suggestions](https://help.github.com/en/articles/about-conversations-on-github) to ask questions about the suggested changes. +- [Add suggestions to a batch](https://help.github.com/en/articles/incorporating-feedback-in-your-pull-request#applying-suggested-changes) so they can be pushed in a single commit. + +For suggestions that may not be resolved using the GitHub UI, remember that you can keep adding related commits to your PR before it is merged and those commits will also be a part of such PR. + +After all your questions have been resolved and the requested changes have been committed, you can [mark the conversation as solved](https://help.github.com/en/articles/commenting-on-a-pull-request#resolving-conversations). + +This process helps both the Gatsby team and the community to contribute with improvements for your changes before they are merged into the Gatsby GitHub repo. + ## Update your fork with the latest Gatsby changes The Gatsby GitHub repo is very active, so it's likely you'll need to update your fork with the latest changes to be able to merge in your code. This requires adding Gatsby as an [upstream remote](https://help.github.com/en/articles/configuring-a-remote-for-a-fork): diff --git a/docs/contributing/index.mdx b/docs/contributing/index.mdx new file mode 100644 index 0000000000000..52c22eddac87e --- /dev/null +++ b/docs/contributing/index.mdx @@ -0,0 +1,18 @@ +--- +title: Contributing to Gatsby.js +disableTableOfContents: true +--- + +import EmailCaptureForm from "../../www/src/components/email-capture-form" + +Thanks for being interested in contributing! We're so glad you want to help! + +Below you'll find guides on the Gatsby.js community, code of conduct, and how to get started contributing: + +- [Community](/contributing/community/): Learn why you should contribute to Gatsby.js, the most effective ways to do so, and all about the benefits (did we mention the free swag?) +- [Code of Conduct](/contributing/code-of-conduct/): Read about what we expect from everyone participating in Gatsby.js to make it the most friendly and welcoming community +- [Gatsby Style Guide ](/contributing/gatsby-style-guide/): The art of contributing to Gatsby, a.k.a. the detailed requirements that will make it more likely your contribution is accepted with minimal changes +- [How to Contribute ](/contributing/how-to-contribute/): How to get the most out of your Gatsby.js contributing experience, including GitHub management tips, setup instructions for docs and code contributions, and more +- [RFC process](/contributing/rfc-process): Learn how the Gatsby.js team manages bigger changes, by way of a “Request-for-comment” process on GitHub + + diff --git a/docs/creators/creators.yml b/docs/creators/creators.yml index 595195f0cfeb2..be08e52fb852a 100644 --- a/docs/creators/creators.yml +++ b/docs/creators/creators.yml @@ -447,3 +447,13 @@ for_hire: true hiring: true portfolio: true +- name: Bare Advertising & Communications + type: agency + image: images/bare-advertising-communications.png + description: >- + We’re an agile group of full-time, fast-moving, hard-working, idea-generating, results-getting, on-timing, on-budgeting, espresso-fuelled content writers, designers, developers, media mavens, strategists, and producers. + location: Canada + website: "https://bare.ca/" + for_hire: true + hiring: false + portfolio: true diff --git a/docs/creators/images/bare-advertising-communications.png b/docs/creators/images/bare-advertising-communications.png new file mode 100644 index 0000000000000..7d0253e6650c7 Binary files /dev/null and b/docs/creators/images/bare-advertising-communications.png differ diff --git a/docs/docs/add-a-manifest-file.md b/docs/docs/add-a-manifest-file.md index ae48ba6f0ce07..13c6786cafe55 100644 --- a/docs/docs/add-a-manifest-file.md +++ b/docs/docs/add-a-manifest-file.md @@ -16,7 +16,7 @@ Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest [Gatsby's manifest plugin](/packages/gatsby-plugin-manifest/) configures Gatsby to create a `manifest.webmanifest` file on every site build. -### Using `gatsby-plugin-manifest` +## Using `gatsby-plugin-manifest` 1. Install the plugin: diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md index c195aa7c0dc42..70384ee3b35aa 100644 --- a/docs/docs/add-custom-webpack-config.md +++ b/docs/docs/add-custom-webpack-config.md @@ -108,7 +108,7 @@ exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => { // Recreate it with custom exclude filter { - // Called without any arguments, `loaders.js` will return an + // Called without any arguments, `loaders.js()` will return an // object like: // { // options: undefined, diff --git a/docs/docs/add-offline-support-with-a-service-worker.md b/docs/docs/add-offline-support-with-a-service-worker.md index 6182dd920e696..9e21da2fe15e3 100644 --- a/docs/docs/add-offline-support-with-a-service-worker.md +++ b/docs/docs/add-offline-support-with-a-service-worker.md @@ -7,19 +7,19 @@ If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may 1. You can [add a manifest file](/docs/add-a-manifest-file/). Ensure that the manifest plugin is listed _before_ the offline plugin so that the offline plugin can cache the created `manifest.webmanifest`. 2. You can also add offline support, since another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). [Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline--and makes it more resistant to bad network conditions--by creating a service worker for your site. -### What is a service worker? +## What is a service worker? A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. They increase your site availability in spotty connections, and are essential to making a nice user experience. It supports features like push notifications and background synchronization. -### Using service workers in Gatsby with `gatsby-plugin-offline` +## Using service workers in Gatsby with `gatsby-plugin-offline` Gatsby provides an awesome plugin interface to create and load a service worker into your site: [gatsby-plugin-offline](https://www.npmjs.com/package/gatsby-plugin-offline). We recommend using this plugin together with the [manifest plugin](https://www.npmjs.com/package/gatsby-plugin-manifest). (Don’t forget to list the offline plugin after the manifest plugin so that the manifest file can be included in the service worker). -### Installing `gatsby-plugin-offline` +## Installing `gatsby-plugin-offline` `npm install --save gatsby-plugin-offline` @@ -43,7 +43,7 @@ That's all you need to add offline support to your Gatsby site. Note: Service worker registers only in production builds (`gatsby build`). -### Displaying a message when a service worker updates +## Displaying a message when a service worker updates To display a custom message once your service worker finds an update, you can use the [`onServiceWorkerUpdateReady`](/docs/browser-apis/#onServiceWorkerUpdateReady) browser API in your `gatsby-browser.js` file. The following code will display a confirm prompt asking the user whether they would like to refresh the page when an update is found: @@ -60,7 +60,7 @@ export const onServiceWorkerUpdateReady = () => { } ``` -### Using a custom service worker in Gatsby +## Using a custom service worker in Gatsby You can add a custom service worker if your use case requires something that `gatsby-plugin-offline` doesn't support. @@ -74,7 +74,7 @@ export const registerServiceWorker = () => true That's all! Gatsby will register your custom service worker. -### Removing the service worker +## Removing the service worker If you would like to fully remove the service worker from your site, you can use the plugin `gatsby-plugin-remove-serviceworker` in place of `gatsby-plugin-offline`. See [the README for `gatsby-plugin-offline`](/packages/gatsby-plugin-offline/#remove) for instructions how to do this. diff --git a/docs/docs/add-page-metadata.md b/docs/docs/add-page-metadata.md index e2028997bd56f..1a243d1a02c1d 100644 --- a/docs/docs/add-page-metadata.md +++ b/docs/docs/add-page-metadata.md @@ -10,7 +10,7 @@ Adding metadata to pages (such as a title or description) is key in helping sear Gatsby's [react helmet plugin](/packages/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds. -### Using `React Helmet` and `gatsby-plugin-react-helmet` +## Using `React Helmet` and `gatsby-plugin-react-helmet` 1. Install both packages: diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index ddd855671a78f..9b5ff761f917e 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -4,7 +4,7 @@ title: Adding a List of Markdown Blog Posts Once you have added Markdown pages to your site, you are just one step away from being able to list your posts on a dedicated index page. -### Creating posts +## Creating posts As described [here](/docs/adding-markdown-pages), you will have to create your posts in Markdown files which will look like this: @@ -18,7 +18,7 @@ title: "My first blog post" Has anyone heard about GatsbyJS yet? ``` -### Creating the page +## Creating the page The first step will be to create the page which will display your posts, in `src/pages/`. You can for example use `index.js`. @@ -41,7 +41,7 @@ const IndexPage = ({ export default IndexPage ``` -### Creating the GraphQL query +## Creating the GraphQL query Second, you need to provide the data to your component with a GraphQL query. Add it, so that `index.js` looks like this: @@ -83,7 +83,7 @@ export const pageQuery = graphql` ` ``` -### Creating the `PostLink` component +## Creating the `PostLink` component The only thing left to do is to add the `PostLink` component. Create a new file `post-link.js` in `src/components/` and add the following: diff --git a/docs/docs/adding-an-rss-feed.md b/docs/docs/adding-an-rss-feed.md index 053d9f500902e..e3f2a078d751f 100644 --- a/docs/docs/adding-an-rss-feed.md +++ b/docs/docs/adding-an-rss-feed.md @@ -132,7 +132,7 @@ The `output` field in your feed object allows you to customize the filename for By default, feed is referenced in every page. You can customize this behavior by providing an extra field `match` of type `string`. This string will be used to build a `RegExp`, and this regular expression will be used to test the `pathname` of current page. Only pages that satisfied the regular expression will have feed reference included. -To see your feed in action, run `gatsby build && gatsby serve` and you can then inspect the content and URLs in your RSS file at `http://localhost:9000/rss.xml`. +To see your feed in action, run `gatsby build && gatsby serve` and you can then inspect the content and URLs in your RSS file at . > NOTE: if your blog has custom permalinks, such as links with or without dates in them, you may need to [customize `gatsby-node.js`](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/gatsby-node.js#L57) to output the correct URLs in your RSS feed. [Get in touch with us](/contributing/how-to-contribute/) if you need any help! diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 98ad25de3f8d5..71cb81c588962 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -17,11 +17,11 @@ Here are the steps Gatsby follows for making this happen. Use the plugin [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/#gatsby-source-filesystem) to read files. -#### Install +### Install `npm install --save gatsby-source-filesystem` -#### Add plugin +### Add plugin **NOTE:** There are two ways to add a plugin in `gatsby-config.js`. Either you can pass a string with the plugin name or in case you want to include options, pass an object. @@ -41,15 +41,15 @@ plugins: [ Completing the above step means that you've "sourced" the Markdown files from the filesystem. You can now "transform" the Markdown to HTML and the YAML frontmatter to JSON. -### Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark` +## Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark` You'll use the plugin [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as `frontmatter` and the content part as HTML. -#### Install +### Install transformer plugin `npm install --save gatsby-transformer-remark` -#### Add plugin +### Configure plugin Add this to `gatsby-config.js` after the previously added `gatsby-source-filesystem`. @@ -66,12 +66,12 @@ plugins: [ ] ``` -### Add a Markdown file +## Add a Markdown file Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`. Now create a Markdown file inside it with the name `post-1.md`. -#### Frontmatter for metadata in markdown files +### Frontmatter for metadata in Markdown files When you create a Markdown file, you can include a set of key value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called frontmatter and is denoted by the triple dashes at the start and end of the block. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide the key value pairs as data in your React components. @@ -85,7 +85,7 @@ title: "My first blog post" What is important in this step is the key pair `path`. The value that is assigned to the key `path` is used in order to navigate to your post. -### Create a page template for the Markdown files +## Create a page template for the Markdown files Create a folder in the `/src` directory of your Gatsby application called `templates`. Now create a `blogTemplate.js` inside it with the following content: diff --git a/docs/docs/adding-page-transitions-with-plugin-transition-link.md b/docs/docs/adding-page-transitions-with-plugin-transition-link.md index cf980a6486a69..bc8bd69b54d3f 100644 --- a/docs/docs/adding-page-transitions-with-plugin-transition-link.md +++ b/docs/docs/adding-page-transitions-with-plugin-transition-link.md @@ -71,7 +71,7 @@ You have two main methods of creating page transitions: Additionally, you can specify a number of props and options on the `TransitionLink` component, like `length`, `delay`, and more. For more options and details, see [the documentation of TransitionLink](https://transitionlink.tylerbarnes.ca/docs/transitionlink/). For further examples of usage, visit the [plugin's GitHub repository.](https://github.com/TylerBarnes/gatsby-plugin-transition-link) -#### Using the trigger function +### Using the trigger function You can specify a `trigger` function that will handle the animation. This is useful for _imperative_ animation libraries like [animejs](https://animejs.com/) or [GSAP](https://greensock.com/gsap) that specify animations with function calls. @@ -95,7 +95,7 @@ You can specify a `trigger` function that will handle the animation. This is use ``` -#### Using passed props +### Using passed props The exiting and entering pages/templates involved in the transition will receive props indicating the current transition status, as well as the `exit` or `enter` props defined on the `TransitionLink`. diff --git a/docs/docs/adding-pagination.md b/docs/docs/adding-pagination.md index fdfb1584910a8..aeebff85b4281 100644 --- a/docs/docs/adding-pagination.md +++ b/docs/docs/adding-pagination.md @@ -11,7 +11,7 @@ Each page will [query GraphQL](/docs/querying-with-graphql/) for those specific The information needed to query for those specific items (i.e. values for [`limit`](/docs/graphql-reference/#limit) and [`skip`](/docs/graphql-reference/#skip)) will come from the [`context`](/docs/graphql-reference/#query-variables) that is added when [creating pages](/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs) in `gatsby-node`. -### Example +## Example ```js:title=src/templates/blog-list-template.js import React from "react" @@ -126,7 +126,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => { The code above will create an amount of pages that is based on the total number of posts. Each page will list `postsPerPage`(6) posts, until there are less than `postsPerPage`(6) posts left. The path for the first page is `/blog`, following pages will have a path of the form: `/blog/2`, `/blog/3`, etc. -### Other resources +## Other resources - Follow this [step-by-step tutorial](https://nickymeuleman.netlify.com/blog/gatsby-pagination/) to add links to the previous/next page and the traditional page-navigation at the bottom of the page diff --git a/docs/docs/adding-search-with-algolia.md b/docs/docs/adding-search-with-algolia.md index 43d3096b16984..e5e2dd71b7e9d 100644 --- a/docs/docs/adding-search-with-algolia.md +++ b/docs/docs/adding-search-with-algolia.md @@ -341,7 +341,7 @@ Passing this `indices` array as a prop allows you to reuse the same `Search` com Note that you fed `algoliasearch` with the same app ID you specified in our `.env` file and used in `src/utils/algolia.js` as well as with your search-only API key to generate a search client which connects to your backend. _Don't paste in your Algolia admin API key here!_ `algoliasearch` only needs to _read_ your indices. Pasting your admin key here would allow others to obtain it once your site is deployed. They could then start messing with your indexed data on Algolia. -## `input.js` +### `input.js` ```js:title=src/components/search/input.js import React from "react" @@ -367,7 +367,7 @@ The `Input` component is where the user enters the search string. It is quite sh Now look at the styled components `SearchIcon`, `Form`, `Input` as well as the ones imported in `index.js`. -## `styles.js` +### `styles.js` ```js:title=src/components/search/styles.js import React from "react" @@ -507,7 +507,7 @@ Styles will of course be different from one site to the next so these components Now you're almost done, two small steps remain. First you need to put together a hit component for every type of result you want to display. In this example, these are blog posts and pages. And second, you need to call your `Search` component somewhere on your site. Here are the hit components. -## `hitComps.js` +### `hitComps.js` ```js:title=src/components/search/hitComps.js import React, { Fragment } from "react" diff --git a/docs/docs/adding-search-with-js-search.md b/docs/docs/adding-search-with-js-search.md index 72b2b6c6714d4..61ffa7671b8e4 100644 --- a/docs/docs/adding-search-with-js-search.md +++ b/docs/docs/adding-search-with-js-search.md @@ -253,7 +253,7 @@ Breaking down the code into smaller parts: In order to get it working in your site, you would only need to import the newly created component to a page. As you can see [in the example site](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search/src/pages/index.js). -Run `gatsby develop` and if all went well, open your browser of choice and enter the url `http://localhost:8000` - you'll have a fully functional search at your disposal. +Run `gatsby develop` and if all went well, open your browser of choice and enter the url - you'll have a fully functional search at your disposal. ## JS-Search with a big dataset @@ -571,7 +571,7 @@ Once again to get it to work on your site you would only need to copy over [the And both the [template](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search/src/templates/ClientSearchTemplate.js) and the [search component](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search/src/components/ClientSearch.js). -Issuing `gatsby develop` again, and if all went without any issues one more time, open your browser of choice and enter the url `http://localhost:8000/search`, you'll have a fully functional search at your disposal coupled with Gatsby API. +Issuing `gatsby develop` again, and if all went without any issues one more time, open your browser of choice and enter the url , you'll have a fully functional search at your disposal coupled with Gatsby API. Hopefully this rather extensive guide has shed some insights on how to implement client search using js-search. diff --git a/docs/docs/api-files-gatsby-config.md b/docs/docs/api-files-gatsby-config.md index 81c3d325d8c1e..699550e5f96cb 100644 --- a/docs/docs/api-files-gatsby-config.md +++ b/docs/docs/api-files-gatsby-config.md @@ -100,7 +100,7 @@ module.exports = { } ``` -### Mixed plugins +#### Mixed plugins You can add plugins with and without options in the same array. Your site's config file could look like this: diff --git a/docs/docs/api-specification.md b/docs/docs/api-specification.md index d79f258d5f59b..8e560c300db55 100644 --- a/docs/docs/api-specification.md +++ b/docs/docs/api-specification.md @@ -55,9 +55,9 @@ in some of its data fields. See [the full list of (official only for now — adding support for community plugins later) plugins](/docs/plugins/). -# API +## API -## Concepts +### Concepts - _Page_ — a site page with a pathname, a template component, and optional GraphQL query. @@ -78,7 +78,7 @@ See _More definitions and terms are defined in the [Glossary](/docs/glossary/)_ -## Operators +### Operators - _Create_ — make a new thing - _Get_ — get an existing thing @@ -86,7 +86,7 @@ _More definitions and terms are defined in the [Glossary](/docs/glossary/)_ - _Replace_ — replace an existing thing - _Set_ — merge into an existing thing -## Extension APIs +### Extension APIs Gatsby has multiple processes. The most prominent is the "bootstrap" process. It has several subprocesses. One tricky part to their design is that they run both diff --git a/docs/docs/audit-with-lighthouse.md b/docs/docs/audit-with-lighthouse.md index 5862650860839..d10122a2d43b6 100644 --- a/docs/docs/audit-with-lighthouse.md +++ b/docs/docs/audit-with-lighthouse.md @@ -10,7 +10,7 @@ Lighthouse is included in Chrome DevTools. Running its audit -- and then address If you haven't yet, you need to create a production build of your Gatsby site. The Gatsby development server is optimized for making development fast, but the site that it generates, while closely resembling a production version of the site, isn't as optimized. -### Create a production build +## Create a production build 1. Stop the development server (if it's still running) and run: @@ -28,7 +28,7 @@ gatsby serve Once this starts, you can now view your site at `localhost:9000`. -### Run a Lighthouse audit +## Run a Lighthouse audit Now run your first Lighthouse test. diff --git a/docs/docs/awesome-gatsby-resources.md b/docs/docs/awesome-gatsby-resources.md index a2a91b33d7ffc..209d47ad6004f 100644 --- a/docs/docs/awesome-gatsby-resources.md +++ b/docs/docs/awesome-gatsby-resources.md @@ -20,6 +20,7 @@ See the [library of official and community plugins](/plugins/) - [Develop & Build GatsbyJS static sites within Docker](https://github.com/aripalo/gatsby-docker/) - Is Gatsby? - Browser extension for [Chrome](https://chrome.google.com/webstore/detail/is-gatsby/jgaejkhmgkpagdmapahohjennkhbpgfj) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/is-gatsby/) to check if a site / page is using Gatsby. +- [Gatsby Docs Kit](https://github.com/brainhubeu/gatsby-docs-kit): A set of tools, extending Gatsby to generate gorgeous documentation static website. ## Podcasts @@ -84,6 +85,7 @@ See the [library of official and community plugins](/plugins/) - [Gatsby - Full Tutorial for Beginners](https://www.youtube.com/watch?v=mHFAM0CXviE) - [Building a Video Blog with Gatsby and Markdown (MDX)](https://scotch.io/tutorials/building-a-video-blog-with-gatsby-and-markdown-mdx) - [Deploying Your First Gatsby Site to Netlify](https://scotch.io/tutorials/deploying-your-first-gatsby-site-to-netlify) +- [Add a chat widget to your Gatsby blog](https://pusher.com/tutorials/chat-gatsby/) ### German diff --git a/docs/docs/babel.md b/docs/docs/babel.md index 6829dece1f6f7..218507c184fed 100644 --- a/docs/docs/babel.md +++ b/docs/docs/babel.md @@ -10,8 +10,8 @@ support for writing modern JavaScript — while still supporting older browsers. Gatsby supports by default the last two versions of major browsers, IE 9+, as well as any browser that still has 1%+ browser share. -This means we automatically compile your JavaScript to ensure it works on older browsers. -We also automatically add polyfills as needed — no more shipping code which mysteriously +This means that your JavaScript is automatically compiled to ensure it works on older browsers. +Polyfills are also automatically added — no more shipping code which mysteriously breaks on older browsers! If you only target newer browsers, see the [Browser diff --git a/docs/docs/building-an-ecommerce-site-with-shopify.md b/docs/docs/building-an-ecommerce-site-with-shopify.md index 2611b6c5afb92..f55cbbac51a91 100644 --- a/docs/docs/building-an-ecommerce-site-with-shopify.md +++ b/docs/docs/building-an-ecommerce-site-with-shopify.md @@ -44,7 +44,7 @@ plugins: [ ## Querying Shopify data and listing products -Open the Gatsby GraphiQL interface by visiting `http://localhost:8000/___graphql`. With at least one example product added into Shopify you should see several new types of nodes in the Explorer tab, like `allShopifyProduct`. To query all products in your store sorted by title, try running the query: +Open the Gatsby GraphiQL interface by visiting . With at least one example product added into Shopify you should see several new types of nodes in the Explorer tab, like `allShopifyProduct`. To query all products in your store sorted by title, try running the query: ```graphql { diff --git a/docs/docs/building-with-components.md b/docs/docs/building-with-components.md index 4e7e5edfc6377..59f4a93f58e76 100644 --- a/docs/docs/building-with-components.md +++ b/docs/docs/building-with-components.md @@ -157,7 +157,7 @@ function HTML(props) { {props.headComponents} - + {css} diff --git a/docs/docs/bulma.md b/docs/docs/bulma.md index 1e607afbbae24..ddd69bf7eb36b 100644 --- a/docs/docs/bulma.md +++ b/docs/docs/bulma.md @@ -6,7 +6,7 @@ title: Bulma This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start), then come back. -### Installation +## Installation For starters, lets install all the required packages we're going to need. @@ -18,7 +18,7 @@ Then add the `gatsby-plugin-sass` in to `gatsby-config.js`. plugins: [`gatsby-plugin-sass`], ``` -### File for styles +## File for styles Now is the time to create a scss-file that holds your simple style customisation and the import statement for bulma. @@ -33,7 +33,7 @@ $title-color: #ff0000; @import "~bulma/bulma.sass"; ``` -### Using Bulma +## Using Bulma The last step is to import the style and use it. @@ -66,6 +66,6 @@ export default IndexPage And that's all there is to it! Now you can use Bulma as you normally would. -### Resources +## Resources - [Bulma documentation on how to use sass](https://bulma.io/documentation/customize/with-node-sass/) diff --git a/docs/docs/caching.md b/docs/docs/caching.md index 36cb81ff35dc2..6e49e14b3e7c5 100644 --- a/docs/docs/caching.md +++ b/docs/docs/caching.md @@ -51,4 +51,7 @@ When deploying with Now, follow the instructions in the [Now documentation](http --- -1 It's important that you use the combination of `max-age=0` and `must-revalidate` instead of using `no-cache`. This allows the CDN to store copies of the files on the servers closest to your users and only download a new version from the origin server in the event that the files have changed. Using `no-cache`, on the other hand, decreases performance because it forces the CDN to download a new copy of the file from the origin server on every request. +1 You can use 'no-cache' instead of 'max-age=0, must-revalidate'. Despite what the name might imply, 'no-cache' permits a cache to serve cached content as long as it validates the cache freshness first. [2][3] In either case, clients have to make a round trip to the origin server on each request. However, if you are correctly utilizing ETags or Last-Modified validation you will avoid downloading assets when the cached copy is still valid (e.g. the file hasn't changed on the origin server since it was cached). + +[2]: https://tools.ietf.org/html/rfc7234#section-5.2.2.1 +[3]: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#no-cache_and_no-store diff --git a/docs/docs/centralizing-your-sites-navigation.md b/docs/docs/centralizing-your-sites-navigation.md index 4b3066d4d4937..32fda697bdd57 100644 --- a/docs/docs/centralizing-your-sites-navigation.md +++ b/docs/docs/centralizing-your-sites-navigation.md @@ -44,7 +44,7 @@ module.exports = { GraphQL can be used to query for information contained in the `siteMetadata` object located in your project's `gatsby-config.js`. In order to test this out, you can start the `default-starter-project` in development mode by running `npm run develop`. -Navigate to `http://localhost:8000/___graphql` in your browser to view the GraphiQL editor, which enables you to test GraphQL queries on the underlying APIs. Using the documentation explorer you can view the current GraphQL schema for your project, which is an invaluable resource during development. +Navigate to in your browser to view the GraphiQL editor, which enables you to test GraphQL queries on the underlying APIs. Using the documentation explorer you can view the current GraphQL schema for your project, which is an invaluable resource during development. Examining the available types in GraphQL you will notice that you can query `site`. This GraphQL type further returns the `siteMetadata` which needs to be accessed to create the dynamic navigation. At this point, it is useful if you know a little GraphQL in order to extract the menu links. If you are unfamiliar with GraphQL, there is some excellent documentation available at GraphQL's official website found [here](https://graphql.org/learn/) that you can use to brush up on your skills! The query below will return the menu links. @@ -189,7 +189,7 @@ const Layout = ({ children }) => ( ### Using the header component to display the navigation -Locate the `header.js` file inside `src/components` and remove everything so only the functional component definition is left (everything else is just boilerplate code given to us when generating our project): +Locate the `header.js` file inside `src/components` and remove everything so only the functional component definition is left (everything else is just boilerplate code given to you when generating your project): ```js:title=src/components/header.js import React from "react" @@ -265,7 +265,7 @@ Header.defaultProps = { export default Header ``` -Starting the development server by running `npm run develop` and navigating to `http://localhost:8000` you should now see some dynamically generated menu links on your page. +Starting the development server by running `npm run develop` and navigating to you should now see some dynamically generated menu links on your page. If you have made it this far, good job! You can now add new site links to your website dynamically by adding entries to the `gatsby-config.js` file. diff --git a/docs/docs/creating-a-sitemap.md b/docs/docs/creating-a-sitemap.md index 6758052bcc9fa..87607b4523ba4 100644 --- a/docs/docs/creating-a-sitemap.md +++ b/docs/docs/creating-a-sitemap.md @@ -17,7 +17,7 @@ Install the package by running the following command: ### How to configure -Once installation is complete, we can now add this plugin to our `gatsby-config.js`, like so: +Once installation is complete, you can now add this plugin to your `gatsby-config.js`, like so: ```javascript:title=gatsby-config.js module.exports = { diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 90c5547f2d1fa..cd99bb9ee3872 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -12,7 +12,7 @@ CSS-in-JS bridges the gap between CSS and JavaScript: 3. **Dynamic**: style your site dynamically based on component state by integrating JavaScript variables. 4. **Bonuses**: many CSS-in-JS libraries generate unique class names which can help with caching, automatic vendor prefixes, timely loading of critical CSS, and implementing many other features, depending on the library you choose. -CSS-in-JS, while not required in Gatsby, is very popular among JavaScript developers for the reasons listed above. For more context, read Max Stoiber's (creator of CSS-in-JS library [styled-components](/docs/styled-components/)) article [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/). However, you should also consider whether CSS-in-JS is necessary, as not relying on it can encourage more inclusive front-end skill-sets. It is also more difficult to port styles from JSX to and from CSS. +CSS-in-JS, while not required in Gatsby, is very popular among JavaScript developers for the reasons listed above. For more context, read Max Stoiber's (creator of CSS-in-JS library [styled-components](/docs/styled-components/)) article [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/). However, you should also consider whether CSS-in-JS is necessary, as not relying on it can encourage more inclusive frontend skill-sets. It is also more difficult to port styles from JSX to and from CSS. _Note that this functionality is not a part of React or Gatsby, and requires using any of the many [third-party CSS-in-JS libraries](https://github.com/MicheleBertoli/css-in-js#css-in-js)._ diff --git a/docs/docs/custom-html.md b/docs/docs/custom-html.md index d60e47b751bd8..086b6ca43b03d 100644 --- a/docs/docs/custom-html.md +++ b/docs/docs/custom-html.md @@ -17,23 +17,23 @@ And then make modifications as needed. If you need to insert custom html into the `` or `