Commit d71ccaa6 authored by Henk Verlinde's avatar Henk Verlinde
Browse files

feat: auto copy button code

parent b902cb70

assets/js/clipboard.js

+16 −1
Original line number Diff line number Diff line 
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

+4 −0
Original line number Diff line number Diff line
@@ -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

+56 −21
Original line number Diff line number Diff line
@@ -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-clipboard {

.btn-copy {

  transition: opacity 0.3s ease-in-out;

  opacity: 0;

  position: absolute;

    top: 1rem;

  right: 0.25rem;

  top: 0.25rem;

  z-index: 10;

    display: block;

    padding: 0.25rem 0.5rem;

  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-copy:hover {

  color: $color-btn-text;

  background-color: lighten($color-btn-bg, 5%);

  border-color: lighten($color-btn-border, 15%);

}



.copy-status::after {

.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;

  }

}



.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

+2 −0
Original line number Diff line number Diff line
@@ -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

+0 −20
Original line number Diff line number Diff line
@@ -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

```