From a3b332fcc68d29e26245923e8e596e0e83c8a094 Mon Sep 17 00:00:00 2001
From: aenuros <37673253+aenuros@users.noreply.github.com>
Date: Wed, 17 Oct 2018 10:46:13 -0400
Subject: [PATCH 1/4] Update guides-custom-pages.md
Guide on how to add "Copy" to clipboard buttons on code blocks in Docusaurus.
---
docs/guides-custom-pages.md | 111 ++++++++++++++++++++++++++++++++++++
1 file changed, 111 insertions(+)
diff --git a/docs/guides-custom-pages.md b/docs/guides-custom-pages.md
index 1265ccb4f962..677d006e1d49 100644
--- a/docs/guides-custom-pages.md
+++ b/docs/guides-custom-pages.md
@@ -67,3 +67,114 @@ class Footer extends React.Component {
module.exports = Footer;
```
+## Custom Copy to Clipboard Button
+
+Under `static/js`, create a file called `code-block-buttons.js` with the following:
+
+```js
+// Turn off ESLint for this file because it's sent down to users as-is.
+/* eslint-disable */
+window.addEventListener('load', function() {
+ function button(label, ariaLabel, icon, className) {
+ const btn = document.createElement('button');
+ btn.classList.add('btnIcon', className);
+ btn.setAttribute('type', 'button');
+ btn.setAttribute('aria-label', ariaLabel);
+ btn.innerHTML =
+ '' +
+ icon +
+ '' +
+ label +
+ '' +
+ '
';
+ return btn;
+ }
+
+ function addButtons(codeBlockSelector, btn) {
+ document.querySelectorAll(codeBlockSelector).forEach(function(code) {
+ code.parentNode.appendChild(btn.cloneNode(true));
+ });
+ }
+
+ const copyIcon =
+ '';
+
+ addButtons(
+ '.hljs',
+ button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'),
+ );
+
+ const clipboard = new ClipboardJS('.btnClipboard', {
+ target: function(trigger) {
+ return trigger.parentNode.querySelector('code');
+ },
+ });
+
+ clipboard.on('success', function(event) {
+ event.clearSelection();
+ const textEl = event.trigger.querySelector('.btnIcon__label');
+ textEl.textContent = 'Copied';
+ setTimeout(function() {
+ textEl.textContent = 'Copy';
+ }, 2000);
+ });
+});
+```
+
+Under `static/css`, create a file called `code-block-buttons.css` and add the following:
+
+
+```css
+/* "Copy" code block button */
+pre {
+ position: relative;
+}
+
+pre .btnIcon {
+ position: absolute;
+ top: 4px;
+ z-index: 2;
+ cursor: pointer;
+ border: 1px solid transparent;
+ padding: 0;
+ color: #fff;
+ background-color: transparent;
+ height: 30px;
+ transition: all .25s ease-out;
+}
+
+pre .btnIcon:hover {
+ text-decoration: none;
+}
+
+.btnIcon__body {
+ align-items: center;
+ display: flex;
+}
+
+.btnIcon svg {
+ fill: currentColor;
+ margin-right: .4em;
+}
+
+.btnIcon__label {
+ font-size: 11px;
+}
+
+.btnClipboard {
+ right: 10px;
+}
+```
+
+Add the following to `siteConfig.js`:
+
+```js
+scripts: [
+ 'https://buttons.github.io/buttons.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
+ '/js/code-blocks-buttons.js',
+],
+stylesheets: ['/css/code-blocks-buttons.css']
+```
+
+Your copy to clipboard buttons should now appear at the upper right of every fenced code block.
From 13c2cd1cda088071a19b7ac847e7ba69d6c28f95 Mon Sep 17 00:00:00 2001
From: aenuros <37673253+aenuros@users.noreply.github.com>
Date: Tue, 23 Oct 2018 11:56:03 -0400
Subject: [PATCH 2/4] Update guides-custom-pages.md
Changed wall of text to be a link to a gist describing the code you need to add to add copy clipboard
---
docs/guides-custom-pages.md | 110 +-----------------------------------
1 file changed, 1 insertion(+), 109 deletions(-)
diff --git a/docs/guides-custom-pages.md b/docs/guides-custom-pages.md
index 677d006e1d49..236b96b06579 100644
--- a/docs/guides-custom-pages.md
+++ b/docs/guides-custom-pages.md
@@ -69,112 +69,4 @@ module.exports = Footer;
```
## Custom Copy to Clipboard Button
-Under `static/js`, create a file called `code-block-buttons.js` with the following:
-
-```js
-// Turn off ESLint for this file because it's sent down to users as-is.
-/* eslint-disable */
-window.addEventListener('load', function() {
- function button(label, ariaLabel, icon, className) {
- const btn = document.createElement('button');
- btn.classList.add('btnIcon', className);
- btn.setAttribute('type', 'button');
- btn.setAttribute('aria-label', ariaLabel);
- btn.innerHTML =
- '' +
- icon +
- '' +
- label +
- '' +
- '
';
- return btn;
- }
-
- function addButtons(codeBlockSelector, btn) {
- document.querySelectorAll(codeBlockSelector).forEach(function(code) {
- code.parentNode.appendChild(btn.cloneNode(true));
- });
- }
-
- const copyIcon =
- '';
-
- addButtons(
- '.hljs',
- button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'),
- );
-
- const clipboard = new ClipboardJS('.btnClipboard', {
- target: function(trigger) {
- return trigger.parentNode.querySelector('code');
- },
- });
-
- clipboard.on('success', function(event) {
- event.clearSelection();
- const textEl = event.trigger.querySelector('.btnIcon__label');
- textEl.textContent = 'Copied';
- setTimeout(function() {
- textEl.textContent = 'Copy';
- }, 2000);
- });
-});
-```
-
-Under `static/css`, create a file called `code-block-buttons.css` and add the following:
-
-
-```css
-/* "Copy" code block button */
-pre {
- position: relative;
-}
-
-pre .btnIcon {
- position: absolute;
- top: 4px;
- z-index: 2;
- cursor: pointer;
- border: 1px solid transparent;
- padding: 0;
- color: #fff;
- background-color: transparent;
- height: 30px;
- transition: all .25s ease-out;
-}
-
-pre .btnIcon:hover {
- text-decoration: none;
-}
-
-.btnIcon__body {
- align-items: center;
- display: flex;
-}
-
-.btnIcon svg {
- fill: currentColor;
- margin-right: .4em;
-}
-
-.btnIcon__label {
- font-size: 11px;
-}
-
-.btnClipboard {
- right: 10px;
-}
-```
-
-Add the following to `siteConfig.js`:
-
-```js
-scripts: [
- 'https://buttons.github.io/buttons.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
- '/js/code-blocks-buttons.js',
-],
-stylesheets: ['/css/code-blocks-buttons.css']
-```
-
-Your copy to clipboard buttons should now appear at the upper right of every fenced code block.
+Docusaurus allows for adding buttons to copy code from fenced code blocks. Please follow the instructions [here](https://gist.github.com/aenuros/c0014f9b42d41af572f3a8c961de7319) to add "copy" buttons to your code blocks.
From b994f4e081ee60c585427114acb7daa012abcd0b Mon Sep 17 00:00:00 2001
From: Yangshun Tay
Date: Wed, 24 Oct 2018 01:50:41 -0400
Subject: [PATCH 3/4] Add to markdown instead
---
docs/api-doc-markdown.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/docs/api-doc-markdown.md b/docs/api-doc-markdown.md
index a1a10e91b741..8281d0a004e7 100644
--- a/docs/api-doc-markdown.md
+++ b/docs/api-doc-markdown.md
@@ -206,3 +206,7 @@ class Example extends React.Component {
}
}
```
+
+### Adding Copy Code Buttons
+
+Docusaurus allows for adding buttons to copy code within fenced code blocks. Please follow the instructions [here](https://gist.github.com/yangshun/55db997ed0f8f4e6527571fc3bee4675) to add "Copy" buttons to your code blocks.
From 3f93a49a457b939f0c381b83a161ac9c7743333b Mon Sep 17 00:00:00 2001
From: Yangshun Tay
Date: Wed, 24 Oct 2018 01:51:10 -0400
Subject: [PATCH 4/4] Update guides-custom-pages.md
---
docs/guides-custom-pages.md | 3 ---
1 file changed, 3 deletions(-)
diff --git a/docs/guides-custom-pages.md b/docs/guides-custom-pages.md
index 236b96b06579..1265ccb4f962 100644
--- a/docs/guides-custom-pages.md
+++ b/docs/guides-custom-pages.md
@@ -67,6 +67,3 @@ class Footer extends React.Component {
module.exports = Footer;
```
-## Custom Copy to Clipboard Button
-
-Docusaurus allows for adding buttons to copy code from fenced code blocks. Please follow the instructions [here](https://gist.github.com/aenuros/c0014f9b42d41af572f3a8c961de7319) to add "copy" buttons to your code blocks.