add gatsby-remark-embed-carbon package (#537)

package.json

@@ -10,7 +10,7 @@
     "export": "next export",
     "test": "npm run cy:run --",
     "deploy": "now",
-    "prettier": "prettier --config .prettierrc --write {.,components,api,lib,pages}/*.js {components,api,lib,pages}/**/*.js",
+    "prettier": "prettier --config .prettierrc --write {.,components,api,lib,pages}/*.js {components,api,lib,pages,packages}/**/*.js",
     "lint": "eslint components/*.js lib/*.js pages/*.js api/handlers/*.js api/*.js",
     "contrib:add": "all-contributors add",
     "contrib:build": "all-contributors generate",

packages/gatsby-remark-embed-carbon/README.md

@@ -0,0 +1,58 @@
+# gatsby-remark-embed-carbon
+> Embed Carbon screenshots in your markdown files
+
+## Getting started
+
+1. Install plugin to your site:
+
+```bash
+yarn add gatsby-remark-embed-carbon
+```
+
+2. Add `gatsby-remark-embed-carbon` to your `gatsby-transformer-remark` plugins in `gatsby-config.js`:
+
+```js
+plugins: [
+  {
+    resolve: 'gatsby-transformer-remark',
+    options: {
+      plugins: ['gatsby-remark-embed-carbon']
+    }
+  }
+];
+```
+
+## Configuration
+
+```js
+plugins: [
+  {
+    resolve: 'gatsby-transformer-remark',
+    options: {
+      plugins: [
+        {
+          resolve: 'gatsby-remark-embed-carbon',
+          options: {
+            width: '100%', // default is '1024px'
+            height: '600px' // default is '473px'
+          }
+        }
+      ]
+    }
+  }
+]
+```
+
+## Example
+Add a carbon screenshot directly in your markdown file:
+
+```md
+# Blog Post
+
+This link will get replaced with a Carbon iframe:
+
+https://carbon.now.sh/?bg=red
+```
+
+## Thanks
+This project was completely inspired by (copied from) @garetmckinley's [`gatsby-remark-embed-spotify`](gatsby-remark-embed-spotify) :star:

packages/gatsby-remark-embed-carbon/index.js

@@ -0,0 +1,22 @@
+const visit = require('unist-util-visit')
+
+module.exports = ({ markdownAST }, { width = '1024px', height = '473px' } = {}) => {
+  visit(markdownAST, 'text', node => {
+    const { value } = node
+    const match = /https:\/\/carbon\.now\.sh\/{0,1}(.*)/.exec(value)
+    if (match) {
+      const url = match[1]
+      node.type = 'html'
+      node.value = `<iframe
+  src="https://carbon.now.sh/embed${url}"
+  width="${width}"
+  height="${height}"
+  frameborder="0"
+  style="transform:scale(0.7); border: 0; overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>`
+    }
+  })
+
+  return markdownAST
+}

packages/gatsby-remark-embed-carbon/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "gatsby-remark-embed-carbon",
+  "version": "0.0.1",
+  "description": "Gatsby Remark Plugin for Embedding Carbon screenshots",
+  "main": "index.js",
+  "license": "MIT",
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "remark",
+    "carbon"
+  ],
+  "dependencies": {
+    "unist-util-visit": "^1.1.3"
+  },
+  "scripts": {}
+}

packages/gatsby-remark-embed-carbon/yarn.lock

@@ -0,0 +1,22 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+unist-util-is@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db"
+  integrity sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==
+
+unist-util-visit-parents@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz#63fffc8929027bee04bfef7d2cce474f71cb6217"
+  integrity sha512-6B0UTiMfdWql4cQ03gDTCSns+64Zkfo2OCbK31Ov0uMizEz+CJeAp0cgZVb5Fhmcd7Bct2iRNywejT0orpbqUA==
+  dependencies:
+    unist-util-is "^2.1.2"
+
+unist-util-visit@^1.1.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.0.tgz#1cb763647186dc26f5e1df5db6bd1e48b3cc2fb1"
+  integrity sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==
+  dependencies:
+    unist-util-visit-parents "^2.0.0"