stancl/tenancy-docs
1
0
Fork 0
mirror of https://github.com/stancl/tenancy-docs.git synced 2025-12-12 02:04:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Copy code snippet button (#183)

Browse source 
* copy button

* empty lines at the end

* copy button position

* copy button position
This commit is contained in:
Abrar Ahmad 2022-07-28 16:30:56 +05:00 • committed by GitHub
parent e9aef34d94
commit d3cba2955d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 268 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

11
source/_assets/css/clipboard.css Normal file
View file

@ -0,0 +1,11 @@
.code-block-wrapper .copyBtn {
@apply absolute right-2 top-5 outline-none text-gray-200 opacity-25;
}
.code-block-wrapper .copyBtn:hover {
@apply text-gray-500 opacity-100;
}
.code-block-wrapper .copyBtn:active {
@apply text-white outline-none opacity-100;
}

4
source/_assets/css/main.css
View file

@ -7,6 +7,6 @@
@import 'base';
@import 'navigation';
@import 'search';
@import 'clipboard';
@tailwind utilities;
@tailwind utilities;

53
source/_assets/js/clipboard.js Normal file
View file

@ -0,0 +1,53 @@
import ClipboardJS from 'clipboard/dist/clipboard';
// These icons must be inline to avoid rendering bugs.
const clipboardIcon = `<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path></svg>`;
const clipboardCopiedIcon = `<svg fill="currentColor" class="fill-current text-white h-5 w-5" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>`;
// Copy to Clipboard.
let codeBlocks = document.querySelectorAll('.markdown pre');
codeBlocks.forEach((element, key) => {
// Add wrapper to code block.
var wrapper = document.createElement('div');
['relative', 'code-block-wrapper'].forEach((value) => {
wrapper.classList.add(value);
});
element.parentNode.insertBefore(wrapper, element);
wrapper.appendChild(element);
// Copy to clipboard button.
let copyToClipboardBtn = document.createElement('button');
copyToClipboardBtn.innerHTML = clipboardIcon;
copyToClipboardBtn.id = `clipButton-${key}`;
['md:block', 'hidden'].forEach((value) => {
copyToClipboardBtn.classList.add(value);
});
copyToClipboardBtn.setAttribute('aria-label', 'Copy to Clipboard');
copyToClipboardBtn.setAttribute('title', 'Copy to Clipboard');
copyToClipboardBtn.classList.add('copyBtn');
wrapper.appendChild(copyToClipboardBtn);
let copyToClipboard = new ClipboardJS(`#${copyToClipboardBtn.id}`);
copyToClipboard.on('success', (element) => {
copyToClipboardBtn.innerHTML = clipboardCopiedIcon;
element.clearSelection();
setTimeout(() => {
copyToClipboardBtn.innerHTML = clipboardIcon;
}, 1500);
});
// Code Element.
let codeElement = element.querySelector('code');
codeElement.id = `clipText-${key}`;
copyToClipboardBtn.dataset.clipboardTarget = `#${codeElement.id}`;
});

1
source/_assets/js/main.js
View file

@ -1,4 +1,5 @@
import hljs from 'highlight.js/lib/highlight';
import './clipboard';
hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));