diff --git a/src/backend/views/pages/blocks/code.twig b/src/backend/views/pages/blocks/code.twig index 663ff49..2402cb5 100644 --- a/src/backend/views/pages/blocks/code.twig +++ b/src/backend/views/pages/blocks/code.twig @@ -1,4 +1,12 @@
-
{{ code|escape }}
+
+
{{ code | escape }}
+
+ {% + include 'components/copy-button.twig' with { + ariaLabel: 'Copy Code to Clipboard', + class: 'block-code__copy-button', + textToCopy: code | escape, + } + %}
- diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss index c3846a1..20a408d 100644 --- a/src/frontend/styles/components/page.pcss +++ b/src/frontend/styles/components/page.pcss @@ -149,8 +149,18 @@ * ================== */ .block-code { - @apply --text-code-block; - @apply --squircle; + position: relative; + + &:hover { + .block-code__copy-button { + opacity: 1; + } + } + + &__wrapper { + @apply --text-code-block; + @apply --squircle; + } &__content { display: inline-block !important; @@ -169,6 +179,13 @@ } } + &__copy-button { + position: absolute; + top: 10px; + right: 10px; + opacity: 0; + } + .hljs-params { color: var(--color-code-params); }