FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add copy code button (#963)

Browse source 
* Add copy code button

* External package not needed

* Improve alignement

* Update button style + add feedback on click

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Update dependencies

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
Bernat Borràs Civil 2024-09-20 03:29:38 +02:00 • committed by GitHub
parent 9da3e3420b
commit 0d4d8a8e3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 582 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/scripts/features/copyCode/copyCode.js Normal file
View file

@ -0,0 +1,22 @@
addCopyButtons(navigator.clipboard)
function addCopyButtons(clipboard) {
document.querySelectorAll('pre > code').forEach(function (codeBlock) {
const button = document.createElement('button')
button.title = "Copy"
button.className = 'copy-code-button btn btn-sm'
button.innerHTML = "<i class='fa-regular fa-copy'></i>"
button.addEventListener('click', function () {
clipboard.writeText(codeBlock.innerText)
})
const pre = codeBlock.parentNode
if (pre.parentNode.classList.contains('highlight')) {
const highlight = pre.parentNode
highlight.parentNode.insertBefore(button, highlight)
} else {
pre.parentNode.insertBefore(button, pre)
}
})
}

1
assets/scripts/features/copyCode/index.js Normal file
View file

@ -0,0 +1 @@
import './copyCode'

4
assets/scripts/features/index.js
View file

@ -29,3 +29,7 @@ if (process.env.FEATURE_MATH === '1') {
if (process.env.FEATURE_EMBEDPDF === '1') {
import('./embedpdf')
}
if (process.env.FEATURE_COPYCODEBUTTON === '1') {
import('./copyCode')
}

45
assets/styles/components/buttons.scss
View file

@ -102,6 +102,40 @@
}
}
.copy-code-button {
float: right;
margin-top: 0.5em;
margin-left: -2.6em;
margin-right: 3em;
background-color: get-light-color('text-color') !important;
color: get-light-color('inverse-text-color') !important;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 0.2rem;
border: none;
&:hover,
&:focus {
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
}
&:focus {
&::before {
content: 'Copied!';
position: absolute;
padding: 0.3em;
border-radius: 0.2em;
margin-left: -5em;
margin-top: -0.2em;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
}
}
}
html[data-theme='dark'] {
.btn-dark {
background-color: get-dark-color('accent-color') !important;
@ -169,4 +203,15 @@ html[data-theme='dark'] {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
.copy-code-button {
background-color: get-dark-color('bg-primary') !important;
color: get-dark-color('muted-text-color') !important;
&:hover,
&:focus,
&::before {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
}