Add copy button to code blocks (#16052)

* Add deps * Setup copy events * Updoot * Tweak styling * Do a lil' proof-of-concept * Updoot @github-docs/render-content * Use SCSS variables for custom styles * Adjust docs * Ignore clipboard in check-deps * Add copy annotation to quickstart workflow sample Co-authored-by: Cynthia Rich <[email protected]>
github · Oct 16, 2020 · efed031 · king40or · Mar 14, 2021 · efed031
1 parent b92caff
commit efed031
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 31 deletions.
diff --git a/content/actions/guides/building-and-testing-nodejs.md b/content/actions/guides/building-and-testing-nodejs.md
@@ -33,7 +33,7 @@ We recommend that you have a basic understanding of Node.js, YAML, workflow conf
 To get started quickly, add the template to the `.github/workflows` directory of your repository.
 
 {% raw %}
-```yaml
+```yaml{:copy}
 name: Node.js CI
 
 on: [push]

diff --git a/content/actions/quickstart.md b/content/actions/quickstart.md
@@ -21,7 +21,7 @@ You only need an existing {% data variables.product.prodname_dotcom %} repositor
 1. From your repository on {% data variables.product.prodname_dotcom %}, create a new file in the `.github/workflows` directory named `superlinter.yml`. For more information, see "[Creating new files](/github/managing-files-in-a-repository/creating-new-files)."
 2. Copy the following YAML contents into the `superlinter.yml` file. **Note:** If your default branch is not `main`, update the value of `DEFAULT_BRANCH` to match your repository's default branch name.
     {% raw %}
-    ```yaml
+    ```yaml{:copy}
     name: Super-Linter
 
     # Run this workflow every time a new commit pushed to your repository

diff --git a/contributing/content-markup-reference.md b/contributing/content-markup-reference.md
@@ -40,14 +40,22 @@ To render syntax highlighting in command line instructions, we use triple backti
 
 ### Usage  
 
-\`\`\`shell  
-git init <em>YOUR_REPO</em>  
-\`\`\`
+    ```shell  
+    git init <em>YOUR_REPO</em>  
+    ```
 
 This syntax highlighting renders light text on a dark background, and should be reserved for command line instructions.
 
 Within the command-line syntax, you can also use the `<em>` helper tag to indicate content that varies for each user, such as a user or repository name.
 
+**Copy-able code blocks**
+
+You can also add a header that includes the name of the language and a button to copy the contents of the code block:
+
+    ```js{:copy}
+    const copyMe = true
+    ```
+
 ## Octicons
 
 Octicons are icons used across GitHub’s interface. We reference Octicons when documenting the user interface. Find the name of the Octicon on the [Octicons site](https://primer.style/octicons). For accessibility purposes, use [the `aria-label` option](https://primer.style/octicons/packages/javascript#aria-label) to describe the Octicon.

diff --git a/javascripts/copy-code.js b/javascripts/copy-code.js
@@ -0,0 +1,15 @@
+import Clipboard from 'clipboard'
+
+export default () => {
+  const clipboard = new Clipboard('button.js-btn-copy')
+
+  clipboard.on('success', evt => {
+    const btn = evt.trigger
+    const beforeTooltip = btn.getAttribute('aria-label')
+    btn.setAttribute('aria-label', 'Copied!')
+
+    setTimeout(() => {
+      btn.setAttribute('aria-label', beforeTooltip)
+    }, 2000)
+  })
+}
diff --git a/javascripts/index.js b/javascripts/index.js
@@ -13,6 +13,7 @@ import print from './print'
 import localization from './localization'
 import helpfulness from './helpfulness'
 import experiment from './experiment'
+import copyCode from './copy-code'
 import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
 
@@ -31,5 +32,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   await fillCsrf() // this must complete before any POST calls
   helpfulness()
   experiment()
+  copyCode()
   initializeEvents()
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@babel/runtime": "^7.11.2",
     "@github-docs/data-directory": "^1.2.0",
     "@github-docs/frontmatter": "^1.3.1",
-    "@github-docs/render-content": "^5.0.0",
+    "@github-docs/render-content": "^5.1.0",
     "@github/rest-api-operations": "^3.1.3",
     "@octokit/rest": "^16.38.1",
     "@primer/css": "^15.1.0",
@@ -26,6 +26,7 @@
     "browser-date-formatter": "^3.0.3",
     "change-case": "^3.1.0",
     "cheerio": "^1.0.0-rc.3",
+    "clipboard": "^2.0.6",
     "compression": "^1.7.4",
     "connect-slashes": "^1.4.0",
     "cookie-parser": "^1.4.5",