feat(www): add ability to copy header to clipboard

www/gatsby-config.js

@@ -125,6 +125,7 @@ module.exports = {
               path.parse(node.dir).dir.endsWith(`packages`))
           )
         },
+        remarkPlugins: [require(`remark-slug`)],
         gatsbyRemarkPlugins: [
           `gatsby-remark-graphviz`,
           `gatsby-remark-embed-video`,
@@ -141,7 +142,6 @@ module.exports = {
               wrapperStyle: `margin-bottom: 1.5rem`,
             },
           },
-          `gatsby-remark-autolink-headers`,
           `gatsby-remark-copy-linked-files`,
           `gatsby-remark-smartypants`,
         ],

www/package.json

@@ -89,6 +89,7 @@
     "react-modal": "^3.4.4",
     "react-typography": "^1.0.0-alpha.4",
     "rehype-react": "^3.0.3",
+    "remark-slug": "^5.1.2",
     "remove-markdown": "^0.3.0",
     "slash": "^1.0.0",
     "slugify": "^1.3.0",

www/src/components/heading.js

@@ -0,0 +1,116 @@
+import React, { useState } from "react"
+import styled from "@emotion/styled"
+import MdLink from "react-icons/lib/md/link"
+import MdCheckCircle from "react-icons/lib/md/check-circle"
+
+import copyToClipboard from "../utils/copy-to-clipboard"
+
+import {
+  colors,
+  letterSpacings,
+  fontWeights,
+  fontSizes,
+  space,
+  transition,
+} from "../utils/presets"
+
+const H = styled.h1()
+
+const Copy = props => {
+  const [copied] = useState(false)
+  return (
+    <a
+      css={styles.a}
+      href={`#${props.id}`}
+      onClick={async () => {
+        await copyToClipboard(`${window.location.href}#${props.id}`)
+      }}
+      {...props}
+    >
+      <span
+        css={{
+          display: `inline-block`,
+          marginRight: space[1],
+          color: copied && colors.green[50],
+        }}
+      >
+        {copied ? <MdCheckCircle /> : <MdLink />}
+      </span>
+      {`${copied ? `Copied` : `Copy`} URL`}
+    </a>
+  )
+}
+
+function BaseHeading({ children, level, id, ...rest }) {
+  const Heading = H.withComponent(`h${level}`)
+  return (
+    <Heading
+      css={Object.assign({}, styles.base, styles[level])}
+      id={id}
+      {...rest}
+    >
+      {children}
+      <Copy id={id} />
+    </Heading>
+  )
+}
+
+BaseHeading.defaultProps = {
+  level: 1,
+}
+
+const styles = {
+  a: {
+    display: `flex`,
+    alignItems: `center`,
+    cursor: `pointer`,
+    fontSize: fontSizes[1],
+    fontWeight: fontWeights[0],
+    marginLeft: space[2],
+    transition: `${transition.speed.default} ${transition.curve.default}`,
+    "&&": {
+      color: colors.grey[50],
+    },
+  },
+  base: {
+    alignItems: `center`,
+    display: `flex`,
+    letterSpacing: letterSpacings.tight,
+    userSelect: `none`,
+    a: {
+      opacity: 0,
+    },
+    ":hover a": {
+      opacity: 1,
+    },
+  },
+  1: {
+    fontWeight: fontWeights[2],
+  },
+  2: {
+    marginTop: space[9],
+  },
+  3: {
+    marginTop: space[9],
+  },
+  4: {
+    fontSize: fontSizes[3],
+  },
+  5: {
+    fontSize: fontSizes[3],
+    fontWeight: fontWeights[0],
+  },
+  6: {
+    fontSize: fontSizes[2],
+    fontWeight: fontWeights[0],
+  },
+}
+
+export default BaseHeading
+
+export const H1 = props => <BaseHeading level={1} {...props} />
+export const H2 = props => <BaseHeading level={2} {...props} />
+export const H3 = props => <BaseHeading level={3} {...props} />
+export const H4 = props => <BaseHeading level={4} {...props} />
+export const H5 = props => <BaseHeading level={5} {...props} />
+export const H6 = props => <BaseHeading level={6} {...props} />

www/src/utils/delay.js

@@ -0,0 +1 @@
+export default duration => new Promise(resolve => setTimeout(resolve, duration))

www/wrap-root-element.js

@@ -6,11 +6,21 @@ import Pullquote from "./src/components/shared/pullquote"
 import DateChart from "./src/components/chart"
 import CodeBlock from "./src/components/code-block"
 
+import { H1, H2, H3, H4, H5, H6 } from "./src/components/heading"
+
 const components = {
   GuideList,
   HubspotForm,
   DateChart,
   Pullquote,
+
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+
   pre: CodeBlock,
 }