diff --git a/themes/maik-blog/assets/js/main.js b/themes/maik-blog/assets/js/main.js index bfe635e..a105db3 100644 --- a/themes/maik-blog/assets/js/main.js +++ b/themes/maik-blog/assets/js/main.js @@ -50,4 +50,26 @@ window.addEventListener("load", () => { }); } } + + // Code copy button + for (let codeblock of document.querySelectorAll(".highlight pre")) { + if (codeblock.querySelector(".lnt")) continue; // skip line numbers + + let button = document.createElement("button"); + button.classList.add("codeblock-copy"); + codeblock.appendChild(button); + + button.addEventListener("click", (e) => { + e.preventDefault(); + + navigator.clipboard.writeText(codeblock.innerText); + + document + .querySelectorAll(".current-code") + .forEach((elem) => elem.classList.remove("current-code")); + + button.classList.add("current-code"); + }); + console.log(codeblock); + } }); diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss index a03aaff..e295c92 100644 --- a/themes/maik-blog/assets/scss/_main.scss +++ b/themes/maik-blog/assets/scss/_main.scss @@ -528,10 +528,13 @@ table { position: relative; text-decoration: none; - --background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E"); + --link-image: url('data:image/svg+xml;utf8,'); + --check-image: url('data:image/svg+xml;utf8,'); + + --background-image: var(--link-image); &.current-heading { - --background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22green%22%20stroke-width=%224%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-check%22%3E%3Cpolyline%20points=%2220%206%209%2017%204%2012%22%3E%3C/polyline%3E%3C/svg%3E"); + --background-image: var(--check-image); } &:hover { @@ -571,6 +574,8 @@ table { } .highlight { + position: relative; + &:has(table) { margin: 0.95em 0; border-radius: 8px; @@ -644,4 +649,46 @@ table { } } } + + .codeblock-copy { + @mixin code-copy-background($color) { + $color: "rgb(" + red($color) + "," + green($color) + "," + + blue($color) + ")"; + + background-image: url('data:image/svg+xml;utf8, '); + } + + position: absolute; + top: 10px; + right: 10px; + display: block; + width: 26px; + height: 26px; + border: none; + padding: 0; + margin: 0; + border-radius: 6px; + background: none; + background-color: inherit; + + @include code-copy-background(#adadad); + + background-repeat: no-repeat; + background-position: center; + background-size: auto 65%; + + &.current-code { + --selected-code-image: url('data:image/svg+xml;utf8,'); + + background-image: var(--selected-code-image); + + &:hover { + background-image: var(--selected-code-image); + } + } + + &:hover { + @include code-copy-background(#ffffff); + } + } }