feat(www): add copy button to code snippets

www/gatsby-config.js

@@ -122,7 +122,6 @@ module.exports = {
         gatsbyRemarkPlugins: [
           `gatsby-remark-graphviz`,
           `gatsby-remark-embed-video`,
-          `gatsby-remark-code-titles`,
           {
             resolve: `gatsby-remark-images`,
             options: {
@@ -136,8 +135,6 @@ module.exports = {
               wrapperStyle: `margin-bottom: 1.5rem`,
             },
           },
-          `gatsby-remark-autolink-headers`,
-          `gatsby-remark-prismjs`,
           `gatsby-remark-copy-linked-files`,
           `gatsby-remark-smartypants`,
         ],

www/package.json

@@ -74,6 +74,7 @@
     "mitt": "^1.1.3",
     "mousetrap": "^1.6.1",
     "parse-github-url": "^1.0.2",
+    "prism-react-renderer": "^0.1.7",
     "prismjs": "^1.14.0",
     "qs": "^6.5.2",
     "query-string": "^6.1.0",

www/src/components/copy.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+
+import {
+  space,
+  fonts,
+  fontSizes,
+  colors,
+  radii,
+  lineHeights,
+  letterSpacings,
+} from "../utils/presets"
+
+const copyToClipboard = content => {
+  const el = document.createElement(`textarea`)
+  el.value = content
+  el.setAttribute(`readonly`, ``)
+  el.style.position = `absolute`
+  el.style.left = `-9999px`
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand(`copy`)
+  document.body.removeChild(el)
+}
+
+const delay = duration => new Promise(resolve => setTimeout(resolve, duration))
+
+function Copy({ content, duration = 2500, trim = false }) {
+  const [text, setText] = useState(`Copy`)
+
+  return (
+    <button
+      aria-label={
+        text === `Copy`
+          ? `Copy text to clipboard`
+          : `Text has been copied to clipboard`
+      }
+      css={{
+        background: colors.text.header,
+        borderRadius: `0 0 ${radii[2]}px ${radii[2]}px`,
+        color: `#ddd`,
+        fontSize: fontSizes[0],
+        fontFamily: fonts.monospace,
+        letterSpacing: letterSpacings.tracked,
+        lineHeight: lineHeights.solid,
+        padding: `${space[1]} ${space[2]}`,
+        position: `absolute`,
+        right: space[6],
+        textAlign: `right`,
+        textTransform: `uppercase`,
+        top: `0`,
+      }}
+      onClick={async () => {
+        copyToClipboard(trim ? content.trim() : content)
+
+        setText(`Copied`)
+
+        await delay(duration)
+
+        setText(`Copy`)
+      }}
+    >
+      {text}
+    </button>
+  )
+}
+
+Copy.propTypes = {
+  content: PropTypes.string.isRequired,
+  duration: PropTypes.number,
+  trim: PropTypes.bool,
+}
+
+Copy.defaultProps = {
+  duration: 2500,
+}
+
+export default Copy

www/src/components/pre.js

@@ -0,0 +1,51 @@
+import React from "react"
+import Highlight, { defaultProps } from "prism-react-renderer"
+
+import Copy from "./copy"
+import { space } from "../utils/presets"
+
+const getParams = (name = ``) => {
+  const [lang, params = ``] = name.split(`:`)
+  return [lang.split(`language-`).pop()].concat(
+    params.split(`&`).reduce((merged, param) => {
+      const [key, value] = param.split(`=`)
+      merged[key] = value
+      return merged
+    }, {})
+  )
+}
+
+export default ({ children }) => {
+  const [language, { title = `` }] = getParams(children.props.className)
+  const content = children.props.children
+  return (
+    <Highlight
+      {...defaultProps}
+      code={content}
+      language={language}
+      theme={undefined}
+    >
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <div className="gatsby-highlight">
+          <div className="gatsby-highlight-header">
+            {title && (
+              <div className="gatsby-code-title" css={{ paddingTop: space[4] }}>
+                {title}
+              </div>
+            )}
+            <Copy content={content} />
+          </div>
+          <pre className={`language-${language}`}>
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        </div>
+      )}
+    </Highlight>
+  )
+}

www/src/utils/typography.js

@@ -89,13 +89,12 @@ const _options = {
         position: `relative`,
         WebkitOverflowScrolling: `touch`,
       },
-      ".gatsby-highlight pre[class*='language-']": {
+      ".gatsby-highlight pre[class^='language-']": {
         backgroundColor: `transparent`,
         border: 0,
-        padding: `${space[6]} 0`,
         WebkitOverflowScrolling: `touch`,
       },
-      ".gatsby-highlight pre[class*='language-']::before": {
+      ".gatsby-highlight pre[class^='language-']::before": {
         background: `#ddd`,
         borderRadius: `0 0 ${radii[2]}px ${radii[2]}px`,
         color: colors.text.header,
@@ -105,7 +104,7 @@ const _options = {
         lineHeight: lineHeights.solid,
         padding: `${space[1]} ${space[2]}`,
         position: `absolute`,
-        right: space[6],
+        left: space[6],
         textAlign: `right`,
         textTransform: `uppercase`,
         top: `0`,
@@ -261,7 +260,7 @@ const _options = {
         marginTop: space[9],
         marginBottom: 0,
       },
-      ".gatsby-highlight, .gatsby-code-title, .post-body .gatsby-resp-image-link": {
+      ".gatsby-highlight, .post-body .gatsby-resp-image-link": {
         marginLeft: `-${space[6]}`,
         marginRight: `-${space[6]}`,
       },
@@ -271,23 +270,23 @@ const _options = {
       },
       // gatsby-remark-code-titles styles
       // https://www.gatsbyjs.org/packages/gatsby-remark-code-titles/
-      ".gatsby-code-title": {
+      ".gatsby-highlight-header": {
         background: colors.code.bg,
         borderBottom: `1px solid ${colors.code.border}`,
         color: colors.code.text,
         padding: `${space[5]} ${space[6]} ${space[4]}`,
         fontSize: fontSizes[0],
       },
       [mediaQueries.md]: {
-        ".gatsby-highlight, .gatsby-resp-image-link, .gatsby-code-title": {
+        ".gatsby-highlight, .gatsby-resp-image-link, .gatsby-highlight-header": {
           marginLeft: 0,
           marginRight: 0,
           borderRadius: `${radii[2]}px`,
         },
-        ".gatsby-code-title": {
+        ".gatsby-highlight-header": {
           borderRadius: `${radii[2]}px ${radii[2]}px 0 0`,
         },
-        ".gatsby-code-title + .gatsby-highlight": {
+        ".gatsby-highlight-header + .gatsby-highlight": {
           borderRadius: `0 0 ${radii[2]}px ${radii[2]}px`,
         },
       },
@@ -302,7 +301,7 @@ const _options = {
         border: `none`,
       },
       [mediaQueries.lg]: {
-        ".gatsby-highlight, .post-body .gatsby-resp-image-link, .gatsby-code-title": {
+        ".gatsby-highlight, .post-body .gatsby-resp-image-link": {
           marginLeft: `-${space[6]}`,
           marginRight: `-${space[6]}`,
         },

www/wrap-root-element.js

@@ -4,12 +4,14 @@ import GuideList from "./src/components/guide-list.js"
 import HubspotForm from "./src/components/hubspot-form"
 import Pullquote from "./src/components/shared/pullquote"
 import DateChart from "./src/components/chart"
+import Pre from "./src/components/pre"
 
 const components = {
   GuideList,
   HubspotForm,
   DateChart,
   Pullquote,
+  pre: Pre,
 }
 
 export default ({ element }) => (