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: {
@@ -137,7 +136,6 @@ module.exports = {
             },
           },
           `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/code-block/__tests__/index.js

@@ -0,0 +1,69 @@
+import React from "react"
+import CodeBlock from ".."
+import { fireEvent, render } from "react-testing-library"
+
+beforeEach(() => {
+  document.execCommand = jest.fn()
+})
+
+describe(`basic functionality`, () => {
+  describe(`copy`, () => {
+    it(`renders a copy button`, () => {
+      const { queryByText } = render(
+        <CodeBlock language="jsx">{`var a = 'b'`}</CodeBlock>
+      )
+
+      expect(queryByText(`copy`)).toBeDefined()
+    })
+
+    it(`copies text to clipboard`, () => {
+      const text = `alert('hello world')`
+      const { queryByText } = render(
+        <CodeBlock language="jsx">{text}</CodeBlock>
+      )
+
+      const copyButton = queryByText(`Copy`)
+
+      fireEvent.click(copyButton)
+
+      expect(document.execCommand).toHaveBeenCalledWith(`copy`)
+    })
+  })
+
+  describe(`highlighting`, () => {
+    let instance
+    const hidden = `var a = 'i will be hidden'`
+    const highlighted = `
+    <div>
+      <h1>Oh shit waddup</h1>
+    </div>
+    `.trim()
+    beforeEach(() => {
+      const text = `
+      import React from 'react'
+
+      ${hidden} // hide-line
+
+      export default function HelloWorld() {
+        return (
+          {/* highlight-start */}
+          ${highlighted}
+          {/* highlight-end */}
+        )
+      }
+    `.trim()
+      instance = render(<CodeBlock language="jsx">{text}</CodeBlock>)
+    })
+
+    it(`hides lines appropriately`, () => {
+      expect(instance.queryByText(hidden)).toBeNull()
+    })
+
+    it(`highlights lines appropriately`, () => {
+      const lines = highlighted.split(`\n`)
+      expect(
+        instance.container.querySelectorAll(`.gatsby-highlight-code-line`)
+      ).toHaveLength(lines.length)
+    })
+  })
+})

www/src/components/code-block/__tests__/normalize.js

@@ -0,0 +1,203 @@
+import normalize from "../normalize"
+
+describe(`highlighting`, () => {
+  it(`highlight-start`, () => {
+    expect(
+      normalize(
+        `
+    // highlight-start
+    var a = 'b'
+    var b = 'c'
+    // highlight-end
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([expect.any(String), { 0: true, 1: true }])
+  })
+
+  it(`highlight-start, without end`, () => {
+    expect(
+      normalize(
+        `
+    var a = 'b'
+    // highlight-start
+    var b = 'c'
+    var d = 'e'
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([expect.any(String), { 1: true, 2: true }])
+  })
+
+  it(`highlight-line`, () => {
+    expect(
+      normalize(
+        `
+    var a = 'b' // highlight-line
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([expect.any(String), { 0: true }])
+  })
+
+  it(`highlight-next-line`, () => {
+    expect(
+      normalize(
+        `
+    var a = 'b' // highlight-next-line
+    var b = 'c'
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([expect.any(String), { 1: true }])
+  })
+
+  it(`curly brace format`, () => {
+    expect(
+      normalize(
+        `
+    \`\`\`
+    var a = 'i am highlighted'
+    var b = 'i am not'
+    \`\`\`
+  `.trim(),
+        `jsx{1}`
+      )
+    ).toEqual([expect.any(String), { 0: true }])
+  })
+})
+
+describe(`languages`, () => {
+  it(`handles js`, () => {
+    expect(
+      normalize(
+        `
+    function () {
+      alert('hi') /* highlight-linen */
+    }
+  `.trim(),
+        `html`
+      )
+    ).toEqual([expect.any(String), { 1: true }])
+  })
+
+  it(`handles html`, () => {
+    expect(
+      normalize(
+        `
+    <div>
+      <h1>Oh shit waddup</h1> <!-- highlight-line -->
+    </div>
+  `.trim(),
+        `html`
+      )
+    ).toEqual([expect.any(String), { 1: true }])
+  })
+
+  it(`handles yaml`, () => {
+    expect(
+      normalize(
+        `
+    something: true
+    highlighted: you bedda believe it # highlight-line
+  `.trim(),
+        `html`
+      )
+    ).toEqual([expect.any(String), { 1: true }])
+  })
+
+  it(`handles css`, () => {
+    expect(
+      normalize(
+        `
+    p {
+      color: red; // highlight-line
+    }
+  `.trim(),
+        `css`
+      )
+    ).toEqual([expect.any(String), { 1: true }])
+  })
+
+  it(`handles graphql`, () => {
+    expect(
+      normalize(
+        `
+    query whatever {
+      field # highlight-line
+    }
+  `.trim(),
+        `graphql`
+      )
+    ).toEqual([expect.any(String), { 1: true }])
+  })
+})
+
+describe(`hiding`, () => {
+  it(`hide-line`, () => {
+    expect(
+      normalize(
+        `
+    var a = 'b' // hide-line
+    var b = 'c'
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([`var b = 'c'`, expect.any(Object)])
+  })
+
+  it(`hide-start`, () => {
+    expect(
+      normalize(
+        `
+    // hide-start
+    var a = 'b'
+    var b = 'c'
+    // hide-end
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([``, expect.any(Object)])
+  })
+
+  it(`hide-start without end`, () => {
+    expect(
+      normalize(
+        `
+    var a = 'b'
+    // hide-start
+    var b = 'c'
+    var d = 'e'
+    `.trim(),
+        `jsx`
+      )
+    ).toEqual([`var a = 'b'`, expect.any(Object)])
+  })
+
+  describe(`next-line`, () => {
+    it(`on same line`, () => {
+      expect(
+        normalize(
+          `
+      var a = 'b' // hide-next-line
+      var b = 'c'
+      `.trim(),
+          `jsx`
+        )
+      ).toEqual([`var a = 'b'`, expect.any(Object)])
+    })
+
+    it(`on next line`, () => {
+      expect(
+        normalize(
+          `
+      var a = 'b'
+      // hide-next-line
+      var b = 'c'
+      `.trim(),
+          `jsx`
+        )
+      ).toEqual([`var a = 'b'`, expect.any(Object)])
+    })
+  })
+})

www/src/components/code-block/index.js

@@ -0,0 +1,96 @@
+import React from "react"
+import Highlight, { defaultProps } from "prism-react-renderer"
+
+import Copy from "../copy"
+import normalize from "./normalize"
+import { fontSizes, radii, space } from "../../utils/presets"
+
+const getParams = (name = ``) => {
+  const [lang, params = ``] = name.split(`:`)
+  return [
+    lang
+      .split(`language-`)
+      .pop()
+      .split(`{`)
+      .shift(),
+  ].concat(
+    params.split(`&`).reduce((merged, param) => {
+      const [key, value] = param.split(`=`)
+      merged[key] = value
+      return merged
+    }, {})
+  )
+}
+
+/*
+ * MDX passes the code block as JSX
+ * we un-wind it a bit to get the string content
+ * but keep it extensible so it can be used with just children (string) and className
+ */
+export default ({
+  children,
+  className = children.props ? children.props.className : ``,
+}) => {
+  const [language, { title = `` }] = getParams(className)
+  const [content, highlights] = normalize(
+    children.props && children.props.children
+      ? children.props.children
+      : children,
+    className
+  )
+
+  return (
+    <Highlight
+      {...defaultProps}
+      code={content}
+      language={language}
+      theme={undefined}
+    >
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <div className="gatsby-highlight">
+          {title && (
+            <div className="gatsby-highlight-header">
+              <div
+                className="gatsby-code-title"
+                css={{ fontSize: fontSizes[0] }}
+              >
+                {title}
+              </div>
+            </div>
+          )}
+          <pre className={`language-${language}`}>
+            <Copy
+              fileName={title}
+              css={{
+                position: `absolute`,
+                right: space[1],
+                top: space[1],
+                borderRadius: `${radii[2]}px ${radii[2]}px`,
+              }}
+              content={content}
+            />
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({ line, key: i })
+              const className = [lineProps.className]
+                .concat(highlights[i] && `gatsby-highlight-code-line`)
+                .filter(Boolean)
+                .join(` `)
+              return (
+                <div
+                  key={i}
+                  {...Object.assign({}, lineProps, {
+                    className,
+                  })}
+                >
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              )
+            })}
+          </pre>
+        </div>
+      )}
+    </Highlight>
+  )
+}