Skip to content

Commit

Permalink
Merge branch 'master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
KyleAMathews authored Mar 19, 2020
2 parents eed15a8 + 2205811 commit adbd5c7
Show file tree
Hide file tree
Showing 117 changed files with 1,761 additions and 1,126 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ For example, the package `gatsby` has a CHANGELOG.md in [`packages/gatsby/CHANGE

[monorepo]: https://en.wikipedia.org/wiki/Monorepo
[lerna]: https://github.com/lerna/lerna
[babel]: https://github.com/babel/babel/
[babel]: https://github.com/babel/babel/tree/master/packages
[react]: https://github.com/facebook/react/tree/master/packages
2 changes: 1 addition & 1 deletion benchmarks/markdown_id/content/blog/hello-world/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ This is my first post on my new fake blog! How exciting!
I'm sure I'll write a lot more interesting things in the future.

Oh, and here's a great quote from this Wikipedia on
[salted duck eggs](http://en.wikipedia.org/wiki/Salted_duck_egg).
[salted duck eggs](https://en.wikipedia.org/wiki/Salted_duck_egg).

> A salted duck egg is a Chinese preserved food product made by soaking duck
> eggs in brine, or packing each egg in damp, salted charcoal. In Asian
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ Wow! I love blogging so much already.
Did you know that "despite its name, salted duck eggs can also be made from
chicken eggs, though the taste and texture will be somewhat different, and the
egg yolk will be less rich."?
([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg))
([Wikipedia Link](https://en.wikipedia.org/wiki/Salted_duck_egg))

Yeah, I didn't either.
2 changes: 1 addition & 1 deletion benchmarks/markdown_slug/content/blog/hello-world/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ This is my first post on my new fake blog! How exciting!
I'm sure I'll write a lot more interesting things in the future.

Oh, and here's a great quote from this Wikipedia on
[salted duck eggs](http://en.wikipedia.org/wiki/Salted_duck_egg).
[salted duck eggs](https://en.wikipedia.org/wiki/Salted_duck_egg).

> A salted duck egg is a Chinese preserved food product made by soaking duck
> eggs in brine, or packing each egg in damp, salted charcoal. In Asian
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ Wow! I love blogging so much already.
Did you know that "despite its name, salted duck eggs can also be made from
chicken eggs, though the taste and texture will be somewhat different, and the
egg yolk will be less rich."?
([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg))
([Wikipedia Link](https://en.wikipedia.org/wiki/Salted_duck_egg))

Yeah, I didn't either.
43 changes: 43 additions & 0 deletions docs/blog/100days/apps/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: Challenge 12 - Transform Your Gatsby Website into a Web App
date: 2020-03-18
author: "Hashim Warren"
excerpt: "Learn how to add dynamic features to your Gatsby site"
tags: ["learning-to-code", "100-Days-of-Gatsby"]
---

_Gatsby was named the [#1 new technology to learn in 2020](https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html)!_

_To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to [build your first Gatsby Theme](/docs/themes/building-themes/)._

_Learn more about [#100DaysOfGatsby here](/blog/100days)!_

## Challenge 12: Add Gated Content to Your Website

Did you know Gatsby can be used for websites as well as dynamic apps? Dustin Schau presented about this topic at Gatsby Days London:

https://www.youtube.com/watch?v=zeVC-gD3u7M

For example, if your project needs private routes, or sections of the site that only authenticated users can view, Gatsby can enable that with just a plugin, or by creating a few components from scratch. In the following resources we invite you to try both paths, and experiment with powerful third-party authentication services.

### Gatsby for Apps Resources

#### Overview & Examples

First, get familiar with how [Gatsby works for apps](/docs/adding-app-and-website-functionality/).

Then [watch this helpful livestream](/blog/2019-03-21-add-auth0-to-gatsby-livestream/) that covers adding an authentication service called Auth0 to your site.

Lastly, play with live examples of these features by signing in to the [Gatsby Swag Store](https://store.gatsbyjs.org/), and [Gatsby Cloud](https://gatsbyjs.com/cloud)

#### The Plugin Path

To get started quickly, use `gatsby-plugin-create-client-paths` to create private client routes in your Gatsby site. [Learn more](/packages/gatsby-plugin-create-client-paths).

#### The Hand-Rolled Path

[Read this tutorial and handy illustration](/docs/client-only-routes-and-user-authentication/) that walks you through adding private routes and authentication in Gatsby.

### What to Do If You Need Help

If you get stuck during the challenge, you can ask for help from the [Gatsby community](/contributing/community/) and the [ASKGatsbyJS](https://twitter.com/AskGatsbyJS) Twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby).
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Because of the APIs exposed by Gatsby for interfacing with its internals, powerf

The [Node.js APIs](/docs/node-apis/) let plugins extend or modify the heavy lifting performed by the Node.js process when compiling the application. Your gatsby-node.js file can export functions which modify the GraphQL data that is provided to React components when they are rendered. The APIs are also used by plugins to extend the internals of Gatsby e.g. the default webpack config can also be customized here.

Take the example of what happens during the processing of markdown files into pages. The [gatsby-source-filesystem](/packages/gatsby-source-filesystem) plugin scans directories and from files it finds, creates File nodes. These File nodes are then processed by [gatsby-transformer-remark](https://github.com/gatsbyjs/gatsby/tree/a3fea82b4d4b4c644156e841401821933e8d694a/packages/gatsby-transformer-remark) , parsing the markup into HTML with the [Remark](https://remark.js.org/) markdown processor.
Take the example of what happens during the processing of markdown files into pages. The [gatsby-source-filesystem](/packages/gatsby-source-filesystem) plugin scans directories and from files it finds, creates File nodes. These File nodes are then processed by [gatsby-transformer-remark](https://github.com/gatsbyjs/gatsby/tree/a3fea82b4d4b4c644156e841401821933e8d694a/packages/gatsby-transformer-remark), parsing the markup into HTML with the [Remark](https://remark.js.org/) markdown processor.

#### Server-side Rendering APIs

Expand Down
2 changes: 1 addition & 1 deletion docs/blog/2019-03-15-design-code-blog-post/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Design+Code started in 2015 when Meng To began with a digital book on designing

![](./images/cyfa.png)

[Thomas Wang](https://twitter.com/thomaswangio "Twitter"), UI Developer at Design+Code, shared some of the important details of the rebuild, as well as the benefits their Gatsby-fueled site has provided their new offerings.
[Thomas Wang](https://twitter.com/ThomasWang "Twitter"), UI Developer at Design+Code, shared some of the important details of the rebuild, as well as the benefits their Gatsby-fueled site has provided their new offerings.

<Pullquote citation="Thomas Wang">
We needed a new CMS to handle the amount of content we were creating and a
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,6 @@ The code below pulls in the data for blog posts from WordPress and creates a pag

// You can delete this file if you're not using it
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
Expand Down
2 changes: 1 addition & 1 deletion docs/blog/2019-08-02-what-is-jsx-pragma/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ tags:
- theme-ui
---

If you’re looking into using [Theme UI](https://theme-ui.com/) , you’ll come across some (potentially) unfamiliar looking syntax:
If you’re looking into using [Theme UI](https://theme-ui.com/), you’ll come across some (potentially) unfamiliar looking syntax:

```jsx
/** @jsx jsx */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ I noticed there were some more downsides to Amplify:

- Gatsby allows you to have [routes that only exist on the client side](/docs/building-apps-with-gatsby/#client-only-routes--user-authentication).

- Essentially, you declare a starting point — say for example: /users/, and anything past that starting point will get picked up by the client side. Once the client navigates to /users/1, it will dynamically fetch that user from some sort of API. This is great and allows for very hybrid, partially static, partially dynamic applications. However, when people directly navigate to /users/1 , they will get a 404 because it simply does not exist on the serverside, which is kind of an issue.
- Essentially, you declare a starting point — say for example: /users/, and anything past that starting point will get picked up by the client side. Once the client navigates to /users/1, it will dynamically fetch that user from some sort of API. This is great and allows for very hybrid, partially static, partially dynamic applications. However, when people directly navigate to /users/1, they will get a 404 because it simply does not exist on the serverside, which is kind of an issue.

- We already had a CI service ourselves, and weren’t really interested in learning all these Amplify-specific things that we already had working ourselves just fine.

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: Flying Feature Flags with LaunchDarkly’s New Plugin for Gatsby
date: 2020-03-23
author: "Rich Manalang"
excerpt: "Feature flags grant developers exquisite control over how and when new features are revealed to customers. LaunchDarkly’s new plugin for Gatsby makes using them exquisitely easy!"
tags:
- cloud
- plugins
---

A few months ago we decided to migrate our [public-facing documentation site](https://docs.launchdarkly.com) from a managed documentation service to Gatsby. We wanted greater control of the site and a git-based workflow. Additional goals were to scale to a larger set of internal authors and also accept contributions from our community. During the development of this new site, we realized that it might be useful to hide certain sections of the site from certain groups of people; for example, limit access to beta users or a specified group of reviewers.

Here at [LaunchDarkly](https://launchdarkly.com/), we know a thing or two about using feature flags to control and manage the release of features. First, though, you might be wondering, [“What *are* feature flags, anyway?”](https://martinfowler.com/articles/feature-toggles.html). In simple terms, a feature flag is a decision point in your code that can change the behavior of your application. LaunchDarkly is a feature management system. It lets you ship code to production without revealing it to your customers, gradually release that code to an expanding group of customers, and easily roll back to an earlier version if you find a bug.

Our first experiment in using LaunchDarkly with our own new site was to hide navigation items that aren’t quite ready for the world to see—while still allowing a limited set of people to access those hidden pages with the direct URL. When it’s appropriate, we can toggle a flag to show those navigation items to the world instantly.

Sounds simple enough, right? There are a whole host of use cases where you might want to use feature flags on your Gatsby site:
* Gradually roll out new sections or features of your site
* Release a brand redesign across multiple properties and products by toggling a single flag, rather than coordinating manual, time-sensitive deploys
* Target specific users or user segments with the new feature
* [Experiment with an A/B/n test](https://launchdarkly.com/features/experimentation/) to find the best-performing variation of a feature

We did all of the above in on our new Gatsby-based docs site! We had such a positive outcome from combining LaunchDarkly’s feature flag capabilities with Gatsby builds that it occurred to us others might want to do the same thing. So we got to work creating a plugin to make it super simple to use feature flags with Gatsby.

The [LaunchDarkly plugin for Gatsby](https://www.gatsbyjs.org/packages/gatsby-plugin-launchdarkly/) makes it easy to start using feature flags in any Gatsby site. This plugin is powered by the [LaunchDarkly React SDK](https://docs.launchdarkly.com/docs/react-sdk-reference). This SDK uses [server-sent events](https://en.wikipedia.org/wiki/Server-sent_events) to stream feature flag updates to your site in realtime. With it you can control feature availability instantly without your users having to refresh the page.

Here’s a quick demo of this plugin in action:

[![LaunchDarkly feature flag plugin](https://res.cloudinary.com/marcomontalbano/image/upload/v1583779053/video_to_markdown/images/youtube--kCidJJf75CA-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://www.youtube.com/embed/kCidJJf75CA "LaunchDarkly feature flag plugin")

The example in the video shows a simple page from the Gatsby default starter using the LaunchDarkly plugin. Here’s the code:


```import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import { useFlags } from 'gatsby-plugin-launchdarkly'
const IndexPage = () => {
const flags = useFlags()
return (
<Layout>
<SEO title="Home" />
<h1>{ flags.helloWorld ? 'Hello World!' : '' }</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
)
}
export default IndexPage
```

In this example, the `flags` object returned by the `useFlags()` hook is a simple object that contains all of the client-side feature flags available in your LaunchDarkly project. As the values of these flags change, components that rely on them re-render automatically.

Here, we’re looking for a flag called `helloWorld`. This particular `helloWorld` flag is a boolean flag, but you can create flags that are multivariate strings, integers, or even JSON.


![Feature flags dashboard](./images/feature-flags-dashboard.png)

I’ll leave it to your imagination for how you might use this, but the plugin is very flexible, and the sky’s the limit. You can use it to hide and reveal navigation items like we’re doing. You can use it to test out a new visual design.

However you use it, we’d love to hear about it. Tweet to [@launchdarkly](https://twitter.com/launchdarkly) and [@gatsbyjs](https://twitter.com/gatsbyjs) and let us know what you think!

One last thing: [this plugin is open source](https://github.com/launchdarkly-labs/gatsby-plugin-launchdarkly). We’d love your contributions!
3 changes: 2 additions & 1 deletion docs/docs/adding-an-rss-feed.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,8 @@ module.exports = {
}
`,
/* highlight-start */
setup: () => ({
setup: options => ({
...options,
custom_namespaces: {
itunes: 'http://www.itunes.com/dtds/podcast-1.0.dtd',
},
Expand Down
1 change: 1 addition & 0 deletions docs/docs/awesome-gatsby-resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ See the [unofficial list of themes](https://gatsbytemplates.io/)
- [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/)
- [Headless WordPress: Why Gatsby Should Be Next on Your List of Things to Learn](https://deliciousbrains.com/gatsby-headless-wordpress/)
- [Gatsby Tutorials \[video series\] — Michael Uloth](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U)

### German

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/deploying-to-cloudflare-workers.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Deploying to Cloudflare Workers
---

[Cloudflare Workers](https://workers.cloudflare.com/) is a serverless platform for creating entirely new applications or augmenting existing ones without configuring or maintaining infrastructure. With [Workers Sites](https://developers.cloudflare.com/workers/sites/start-from-existing/) you can deploy any static site including your Gatsby projects to a domain on Cloudflare or for free with on your [workers.dev](workers.dev) subdomain.
[Cloudflare Workers](https://workers.cloudflare.com/) is a serverless platform for creating entirely new applications or augmenting existing ones without configuring or maintaining infrastructure. With [Workers Sites](https://developers.cloudflare.com/workers/sites/start-from-existing/) you can deploy any static site including your Gatsby projects to a domain on Cloudflare or for free on your [workers.dev](https://workers.dev) subdomain.

To enable the KV store required to serve the Gatsby files, you'll need the [Workers Unlimited plan](https://developers.cloudflare.com/workers/about/pricing/) for \$5/month.

Expand Down Expand Up @@ -121,4 +121,4 @@ Set up `CF_API_TOKEN` in GitHub secrets with appropriate values from [Quick Star
## Additional resources

- [Quickstart for Workers Sites](https://developers.cloudflare.com/workers/sites/start-from-existing/)
- [Github Action wrangler plugin](https://github.com/cloudflare/wrangler-action)
- [GitHub Action wrangler plugin](https://github.com/cloudflare/wrangler-action)
4 changes: 2 additions & 2 deletions docs/docs/eslint.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ JavaScript, being a dynamic and loosely-typed language, is especially prone to d

Gatsby ships with a built-in [ESLint](https://eslint.org) setup. For _most_ users, our built-in ESlint setup is all you need. If you know however that you'd like to customize your ESlint config e.g. your company has their own custom ESlint setup, this shows how this can be done.

You'll replicate (mostly) the [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.js) so you can then add additional presets, plugins, and rules.
You'll replicate (mostly) the [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts) so you can then add additional presets, plugins, and rules.

```shell

Expand Down Expand Up @@ -38,7 +38,7 @@ module.exports = {
}
```

Note: When there is no ESLint file Gatsby implicitly adds a barebones ESLint loader. This loader pipes ESLint feedback into the terminal window where you are running or building Gatsby and also to the console in your browser developer tools. This gives you consolidated, immediate feedback on newly-saved files. When you include a custom `.eslintrc` file, Gatsby gives you full control over the ESLint configuration. This means that it will override the built-in `eslint-loader` and you need to enable any and all rules yourself. One way to do this is to use the Community plugin [`gatsby-eslint-plugin`](/packages/gatsby-plugin-eslint/). This also means that the default [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.js) will be entirely overwritten. If you would still like to take advantage of those rules, you'll need to copy them to your local file.
Note: When there is no ESLint file Gatsby implicitly adds a barebones ESLint loader. This loader pipes ESLint feedback into the terminal window where you are running or building Gatsby and also to the console in your browser developer tools. This gives you consolidated, immediate feedback on newly-saved files. When you include a custom `.eslintrc` file, Gatsby gives you full control over the ESLint configuration. This means that it will override the built-in `eslint-loader` and you need to enable any and all rules yourself. One way to do this is to use the Community plugin [`gatsby-eslint-plugin`](/packages/gatsby-plugin-eslint/). This also means that the default [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts) will be entirely overwritten. If you would still like to take advantage of those rules, you'll need to copy them to your local file.

### Disabling ESLint

Expand Down
Loading

0 comments on commit adbd5c7

Please sign in to comment.