copy editing, add list of hosting provider plugins

content/posts/2020-05-22-gatsby-redirect-from/index.md

@@ -1,6 +1,7 @@
 ---
 type: post
 date: 2020-05-22T14:08:00.367Z
+updated: 2020-05-23T11:35:12+02:00
 
 title: Redirect plugin for Markdown Pages in Gatsby
 image: gatsby-redirect-from-teaser.png
@@ -18,9 +19,9 @@ Plugin for [Gatsby](https://www.gatsbyjs.org) to create redirects based on a lis
 
 ## Features
 
-By adding a `redirect_from` list of URLs to your YAML frontmatter, this plugin creates client-side redirects for all of them at build time, with Gatsby's [createRedirect](https://www.gatsbyjs.org/docs/actions/#createRedirect) used under the hood.
+By adding a `redirect_from` list of URLs to your Markdown file's YAML frontmatter, this plugin creates client-side redirects for all of them at build time, with Gatsby's [createRedirect](https://www.gatsbyjs.org/docs/actions/#createRedirect) used under the hood.
 
-By combining this plugin with [gatsby-plugin-meta-redirect](https://github.com/getchalk/gatsby-plugin-meta-redirect) you get simple [server-side redirects](#server-side-redirects) out of your `redirect_from` lists.
+By combining this plugin with [gatsby-plugin-meta-redirect](https://github.com/getchalk/gatsby-plugin-meta-redirect) you get simple server-side redirects from your `redirect_from` lists out of the box. You can also combine it with any other plugin picking up Gatsby `createRedirect` calls to get proper SEO-friendly [server-side redirects](#server-side-redirects) for your hosting provider.
 
 ## Usage
 
@@ -52,32 +53,44 @@ redirect_from:
   - /goodie-updated-aperture-file-types-v11/
   - /aperture-file-types-v12-released/
   - /2008/04/aperture-file-types/
-  # note: forward slashes are required
+  # note: traling slashes are required
 ---
 
 ```
 
 ## Default Query
 
-Plugin assumes the default setup from [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog), with Markdown files processed by [gatsby-transformer-remark](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark), and adding a field `slug` for each markdown node. Resulting in the availability of a `allMarkdownRemark` query. Head over to gatsby-starter-blog's [gatsby-node.js](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/gatsby-node.js#L57) file to see how this is done.
+Plugin assumes the default setup from [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog), with Markdown files processed by [gatsby-transformer-remark](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark), and adding a field `slug` for each markdown node. Resulting in the availability of a `allMarkdownRemark` query.
+
+Head over to `gatsby-starter-blog`'s [`gatsby-node.js`](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/gatsby-node.js#L57) file to see how this is done, or follow the [Adding Markdown Pages](https://www.gatsbyjs.org/docs/adding-markdown-pages/) tutorial.
 
 Optionally, you can pass a different query to this [plugin's configuration](#options).
 
 ## Server-Side Redirects
 
-Gatsby's `createRedirect` only creates client-side redirects, so further integration is needed to get server redirects. Which is highly dependent on your hosting, if you want to have the proper HTML status codes like `301`, Apache needs `.htaccess` rules for that, nginx needs `rewrite` rules, S3 needs `RoutingRules`, Vercel needs entries in a `vercel.json`, and so on.
+Gatsby's `createRedirect` only creates client-side redirects, so further integration is needed to get SEO-friendly server-side redirects or make your redirects work when users have JavaScript disabled. Which is highly dependent on your hosting provider: if you want to have the proper HTML status codes like `301`, Apache needs `.htaccess` rules for that, Nginx needs `rewrite` rules, S3 needs `RoutingRules`, Vercel needs entries in a `vercel.json`, Netlify needs a `_redirects` file, and so on.
 
-One simple way, as suggested by default in installation, is to use [gatsby-plugin-meta-redirect](https://github.com/getchalk/gatsby-plugin-meta-redirect) to generate static HTML files with a `<meta http-equiv="refresh" />` tag for every `createRedirect` call. So it works out of the box with this plugin without further adjustments.
+One simple way, as suggested by default in installation, is to use [gatsby-plugin-meta-redirect](https://github.com/getchalk/gatsby-plugin-meta-redirect) to generate static HTML files with a `<meta http-equiv="refresh" />` tag for every `createRedirect` call in their `<head>`. So it works out of the box with this plugin without further adjustments.
 
 This way is the most compatible way of handling redirects, working with pretty much every hosting provider. Only catch: it's only for usability, no SEO-friendly `301` redirect is set anywhere.
 
+For some hosting providers additional plugins are available which will pick up the redirects created by this plugin and create server-side redirects for you. Be sure to add any of those plugins after `gatsby-redirect-from` in your `gatsby-config.js`:
+
+| Provider | Plugin                                                                                                |
+| -------- | ----------------------------------------------------------------------------------------------------- |
+| Netlify  | [gatbsy-plugin-netlify](https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/)                     |
+| Vercel   | [gatsby-plugin-zeit-now](https://github.com/universse/gatsby-plugin-zeit-now)                         |
+| AWS S3   | [gatsby-plugin-s3](https://www.gatsbyjs.org/packages/gatsby-plugin-s3)                                |
+| Nginx    | [gatsby-plugin-nginx-redirect](https://github.com/gimoteco/gatsby-plugin-nginx-redirect)              |
+| Apache   | [gatsby-plugin-htaccess-redirects](https://github.com/GatsbyCentral/gatsby-plugin-htaccess-redirects) |
+
 ## Options
 
-Plugin does not require to be configured but some additional customization options are available:
+Plugin does not require to be configured but additional customization options are available:
 
 | Option  | Default             | Description                                                                                      |
-| ------ | ------------------- | ------------------------------------------------------------------------------------------------ |
+| ------- | ------------------- | ------------------------------------------------------------------------------------------------ |
-| query  | `allMarkdownRemark` | Modify the query being used to get the frontmatter data. E.g. if you use MDX, set `allMdx` here. |
+| `query` | `allMarkdownRemark` | Modify the query being used to get the frontmatter data. E.g. if you use MDX, set `allMdx` here. |
 
 Add options to the plugins's configuration object in `gatsby-config.js` like so:
 

src/styles/_code.scss

@@ -10,14 +10,14 @@ samp {
 
 code,
 kbd {
-  padding: 0.2rem 0.3rem;
+  padding: 0.1rem 0.3rem;
 }
 
 code,
 samp {
   white-space: normal;
   color: inherit;
-  background-color: $brand-grey-dimmed;
+  background-color: rgba($code-bg, 0.05);
   border-radius: $border-radius;
 
   :global(.dark) & {

src/styles/global.scss

@@ -364,12 +364,13 @@ table {
   border-spacing: 0;
   border-collapse: collapse;
   display: block;
+  width: 100%;
+  overflow: auto;
   margin-bottom: $spacer;
-  border-top: 1px solid $brand-grey-dimmed;
-  border-bottom: 1px solid $brand-grey-dimmed;
 
   th {
-    border-bottom: 1px solid $brand-grey-dimmed;
+    text-align: left;
+    border-top: 1px solid $brand-grey-dimmed;
   }
 
   th,
@@ -377,11 +378,13 @@ table {
     padding: $spacer / 2;
     word-wrap: normal;
     word-break: normal;
+    overflow-wrap: normal;
+    border-bottom: 1px solid $brand-grey-dimmed;
   }
 
   :global(.dark) & {
-    &,
+    th,
-    th {
+    td {
       border-color: $brand-grey;
     }
   }