feat: auto copy button code

Author: h-enk

assets/js/clipboard.js

@@ -1,8 +1,23 @@
 import Clipboard from 'clipboard';
 
-var clipboard = new Clipboard('.btn-clipboard');
+var pre = document.getElementsByTagName('pre');
+
+for (var i = 0; i < pre.length; ++ i)
+{
+  var element = pre[i];
+  element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+}
+
+var clipboard = new Clipboard('.btn-copy', {
+
+  target: function(trigger) {
+    return trigger.nextElementSibling;
+  },
+
+});
 
 clipboard.on('success', function(e) {
+
     /*
     console.info('Action:', e.action);
     console.info('Text:', e.text);

assets/scss/common/_variables.scss

@@ -24,6 +24,10 @@ $pink-500: #d32e9d;
 
 $primary: $purple;
 
+$color-btn-bg: $pink-500;
+$color-btn-border: darken($pink-500, 5%);
+$color-btn-text: $white;
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.

assets/scss/components/_buttons.scss

@@ -50,44 +50,79 @@ body.dark .toggle-dark {
   display: none;
 }
 
-.btn-clipboard {
-  display: none;
+pre {
+  position: relative;
 }
 
-@include media-breakpoint-up(md) {
-  .doks-clipboard {
-    position: relative;
-    float: right;
+@include media-breakpoint-down(md) {
+  .btn-copy {
+    display: none;
   }
+}
+
+.btn-copy {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+  z-index: 10;
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-sm;
+  padding: 0.25rem 0.5rem;
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: $color-btn-border;
+}
 
-  .btn-clipboard {
-    position: absolute;
-    top: 1rem;
-    right: 0.25rem;
-    z-index: 10;
-    display: block;
-    padding: 0.25rem 0.5rem;
-    font-size: $font-size-sm;
+.btn-copy:hover {
+  color: $color-btn-text;
+  background-color: lighten($color-btn-bg, 5%);
+  border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:focus {
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: lighten($color-btn-border, 15%);
+  box-shadow: none;
+}
+
+.btn-copy:active,
+.btn-copy.active {
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:active:focus,
+.btn-copy.active:focus {
+  box-shadow: none;
+}
+
+@include media-breakpoint-up(md) {
+  pre:hover .btn-copy {
+    opacity: 1;
   }
 }
 
-.copy-status::after {
+.btn-copy::after {
   content: "Copy";
   display: block;
-  color: $body-color;
+  color: $color-btn-text;
 }
 
-.copy-status:hover::after {
+.btn-copy:hover::after {
   content: "Copy";
   display: block;
-  color: $pink-500;
+  color: $color-btn-text;
 }
 
-.copy-status:focus::after,
-.copy-status:active::after {
+.btn-copy:focus::after,
+.btn-copy:active::after {
   content: "Copied";
   display: block;
-  color: $pink-500;
+  color: $color-btn-text;
 }
 
 .collapsible-sidebar {

config/postcss.config.js

@@ -18,7 +18,9 @@ module.exports = {
         'tr',
         'th',
         'td',
+        'h5',
         ...whitelister([
+          './assets/scss/components/_buttons.scss',
           './assets/scss/components/_code.scss',
           './assets/scss/components/_syntax.scss',
           './assets/scss/components/_search.scss',

content/docs/prologue/commands.md

@@ -19,8 +19,6 @@ toc: true
 
 Create new content for your site:
 
-{{< btn-copy text="npm run create" >}}
-
 ```bash
 npm run create [path] [flags]
 ```
@@ -31,8 +29,6 @@ See also the Hugo docs: [hugo new](https://gohugo.io/commands/hugo_new/).
 
 Check scripts, styles, and markdown for errors:
 
-{{< btn-copy text="npm run lint" >}}
-
 ```bash
 npm run lint
 ```
@@ -41,8 +37,6 @@ npm run lint
 
 Check scripts for errors:
 
-{{< btn-copy text="npm run lint:scripts" >}}
-
 ```bash
 npm run lint:scripts [-- --fix]
 ```
@@ -51,8 +45,6 @@ npm run lint:scripts [-- --fix]
 
 Check styles for errors:
 
-{{< btn-copy text="npm run lint:styles" >}}
-
 ```bash
 npm run lint:styles [-- --fix]
 ```
@@ -61,8 +53,6 @@ npm run lint:styles [-- --fix]
 
 Check markdown for errors:
 
-{{< btn-copy text="npm run lint:markdown" >}}
-
 ```bash
 npm run lint:markdown [-- --fix]
 ```
@@ -71,8 +61,6 @@ npm run lint:markdown [-- --fix]
 
 Delete temporary directories:
 
-{{< btn-copy text="npm run clean" >}}
-
 ```bash
 npm run clean
 ```
@@ -81,8 +69,6 @@ npm run clean
 
 Start local development server:
 
-{{< btn-copy text="npm run start" >}}
-
 ```bash
 npm run start
 ```
@@ -91,8 +77,6 @@ npm run start
 
 Build production website:
 
-{{< btn-copy text="npm run build" >}}
-
 ```bash
 npm run build
 ```
@@ -101,8 +85,6 @@ npm run build
 
 Build Lambda functions:
 
-{{< btn-copy text="npm run build:functions" >}}
-
 ```bash
 npm run build:functions
 ```
@@ -111,8 +93,6 @@ npm run build:functions
 
 Build production website including draft and future content:
 
-{{< btn-copy text="npm run build:preview" >}}
-
 ```bash
 npm run build:preview
 ```

content/docs/prologue/quick-start.md

@@ -34,40 +34,30 @@ Not quite sure? Use the Doks child theme.
 
 #### Doks child theme
 
-{{< btn-copy text="git clone https://github.com/h-enk/doks-child-theme.git my-doks-site" >}}
-
 ```bash
 git clone https://github.com/h-enk/doks-child-theme.git my-doks-site
 ```
 
 #### Doks starter theme
 
-{{< btn-copy text="git clone https://github.com/h-enk/doks.git my-doks-site" >}}
-
 ```bash
 git clone https://github.com/h-enk/doks.git my-doks-site
 ```
 
 ### Change directories
 
-{{< btn-copy text="cd my-doks-site" >}}
-
 ```bash
 cd my-doks-site
 ```
 
 ### Install dependencies
 
-{{< btn-copy text="npm install" >}}
-
 ```bash
 npm install
 ```
 
 ### Start development server
 
-{{< btn-copy text="npm run start" >}}
-
 ```bash
 npm run start
 ```