diff --git a/content/posts/2020-05-22-gatsby-redirect-from/gatsby-redirect-from-teaser.png b/content/posts/2020-05-22-gatsby-redirect-from/gatsby-redirect-from-teaser.png new file mode 100644 index 00000000..c81cfc45 Binary files /dev/null and b/content/posts/2020-05-22-gatsby-redirect-from/gatsby-redirect-from-teaser.png differ diff --git a/content/posts/2020-05-22-gatsby-redirect-from/index.md b/content/posts/2020-05-22-gatsby-redirect-from/index.md new file mode 100644 index 00000000..967032a2 --- /dev/null +++ b/content/posts/2020-05-22-gatsby-redirect-from/index.md @@ -0,0 +1,102 @@ +--- +type: post +date: 2020-05-22T14:08:00.367Z + +title: Redirect plugin for Markdown Pages in Gatsby +image: gatsby-redirect-from-teaser.png +changelog: gatsby-redirect-from + +tags: + - goodies + - gatsby + - development + +toc: true +--- + +Plugin for [Gatsby](https://www.gatsbyjs.org) to create redirects based on a list in your Markdown frontmatter, mimicking the behavior of [jekyll-redirect-from](https://github.com/jekyll/jekyll-redirect-from). + +## 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 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. + +## Usage + +First, install the plugin from your project's root: + +```bash +cd yourproject/ +npm i gatsby-redirect-from gatsby-plugin-meta-redirect +``` + +Then add it to your `gatsby-config.js` file under `plugins`: + +```js +plugins: [ + 'gatsby-redirect-from', + 'gatsby-plugin-meta-redirect' // make sure this is always the last one +] +``` + +That's it for the configuration. + +Finally, use the key `redirect_from` followed by a list in your Markdown file's YAML frontmatter: + +```yaml +--- +title: Aperture File Types +redirect_from: + - /new-goodies-aperture-file-types-icons/ + - /goodie-updated-aperture-file-types-v11/ + - /aperture-file-types-v12-released/ + - /2008/04/aperture-file-types/ + # note: forward 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. + +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. + +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 `` tag for every `createRedirect` call. 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. + +## Options + +Plugin does not require to be configured but some 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. | + +Add options to the plugins's configuration object in `gatsby-config.js` like so: + +```js +plugins: [ + { + resolve: 'gatsby-redirect-from', + options: { + query: 'allMdx' + } + }, + 'gatsby-plugin-meta-redirect' // make sure this is always the last one +] +``` + +## Check out & contribute + +Head over to GitHub for more documentation, take a peek into the code, or to report some bugs. + +

+ GitHub +

diff --git a/src/components/atoms/Changelog.module.scss b/src/components/atoms/Changelog.module.scss index 70b94acc..fceaabb1 100644 --- a/src/components/atoms/Changelog.module.scss +++ b/src/components/atoms/Changelog.module.scss @@ -6,7 +6,7 @@ } .content { - padding-top: $spacer * 2; + padding-top: $spacer; padding-left: $spacer / 2; margin-left: $spacer / 2; border-left: 1px solid $brand-grey-dimmed; @@ -60,6 +60,10 @@ ul { font-size: $font-size-small; margin-left: $spacer / 8; + + li { + margin-bottom: $spacer / 8; + } } } @@ -67,7 +71,6 @@ font-size: $font-size-mini; font-family: $font-family-base; font-weight: $font-weight-base; - padding-top: $spacer / 2; padding-bottom: $spacer / 2; &, diff --git a/src/components/atoms/Changelog.tsx b/src/components/atoms/Changelog.tsx index ae664006..3963d9f0 100644 --- a/src/components/atoms/Changelog.tsx +++ b/src/components/atoms/Changelog.tsx @@ -35,7 +35,6 @@ export function PureChangelog({ Changelog
- {changelogHtml}

sourced from{' '} @@ -44,6 +43,7 @@ export function PureChangelog({

+ {changelogHtml}
) diff --git a/src/styles/global.scss b/src/styles/global.scss index 5078c000..05ffad06 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -360,6 +360,33 @@ blockquote { } } +table { + border-spacing: 0; + border-collapse: collapse; + display: block; + 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; + } + + th, + td { + padding: $spacer / 2; + word-wrap: normal; + word-break: normal; + } + + :global(.dark) & { + &, + th { + border-color: $brand-grey; + } + } +} + // Selection /////////////////////////////////////