From c59f179d0b4d6e75524453e99d55c409b5674798 Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Tue, 23 Nov 2021 22:18:26 +0100 Subject: [PATCH] feat: add button to copy code blocks (#115) --- .../content/posts/advanced/includes.md | 7 ++-- .../content/posts/features/code-blocks.md | 8 ++-- layouts/partials/foot.html | 2 + layouts/partials/site-footer.html | 2 +- layouts/partials/site-header.html | 2 +- layouts/shortcodes/include.html | 2 +- src/iconfont/uEA21-check.svg | 1 + src/iconfont/uEA22-copy.svg | 1 + src/icons/check.svg | 5 +++ src/icons/copy.svg | 5 +++ src/js/clipboard-loader.js | 18 +++++++++ src/js/copycode.js | 34 ++++++++++++++++ src/sass/_base.scss | 40 +++++++++++++++++++ src/sass/_utils.scss | 2 +- 14 files changed, 118 insertions(+), 11 deletions(-) create mode 100644 src/iconfont/uEA21-check.svg create mode 100644 src/iconfont/uEA22-copy.svg create mode 100644 src/icons/check.svg create mode 100644 src/icons/copy.svg create mode 100644 src/js/copycode.js diff --git a/exampleSite/content/posts/advanced/includes.md b/exampleSite/content/posts/advanced/includes.md index 161e9a2..d2c05fd 100644 --- a/exampleSite/content/posts/advanced/includes.md +++ b/exampleSite/content/posts/advanced/includes.md @@ -54,6 +54,8 @@ This method can be used to include source code files and keep them automatically {{}} ``` +**Code Include:** + {{< include file="config.yaml" language="yaml" options="linenos=table,hl_lines=5-6,linenostart=100">}} @@ -77,9 +79,8 @@ HTML content will be filtered by the `safeHTML` filter and added to the rendered In some situations, it can be helpful to include Markdown files that also contain shortcodes. While the [default method](#markdown-file-default) works fine to render plain Markdown, shortcodes are not parsed. The only way to get this to work is to use Hugo pages. There are several ways to structure these include pages, so whatever you do, keep in mind that Hugo needs to be able to render and serve these files as regular pages! How it works: 1. First you need to create a directory **within** your content directory. For this example site `_includes` is used. -2. To prevent the theme from embedding the page in the navigation, create a file `_includes/_index.md` and add `GeekdocHidden: true` to the front matter. -3. Place your Markdown files within the `_includes` folder e.g. `/_includes/include-page.md`. Make sure to name it `*.md`. -4. Include the page using `{{}}`. +2. Place your Markdown files within the `_includes` folder e.g. `/_includes/include-page.md`. Make sure to name it `*.md`. +3. Include the page using `{{}}`. Resulting structure should look like this: diff --git a/exampleSite/content/posts/features/code-blocks.md b/exampleSite/content/posts/features/code-blocks.md index 1212958..b49b9ec 100644 --- a/exampleSite/content/posts/features/code-blocks.md +++ b/exampleSite/content/posts/features/code-blocks.md @@ -16,7 +16,7 @@ There are several ways to add code blocks. Most of them work out of the box, onl To display an inline shortcode use single quotes: -```plain +```Plain `some code` ``` @@ -26,7 +26,7 @@ To display an inline shortcode use single quotes: Code blocks can be uses without language specification: -````markdown +````Markdown ```Plain some code ``` @@ -40,7 +40,7 @@ some code ... or if you need language specific syntax highlighting: -````markdown +````Markdown ```Shell # some code echo "Hello world" @@ -80,7 +80,7 @@ pygmentsCodeFences: true You can use it like every other shortcode: -```markdown +```Markdown {{}} # some code echo "Hello World" diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html index 2f0f95f..1663cb8 100644 --- a/layouts/partials/foot.html +++ b/layouts/partials/foot.html @@ -2,3 +2,5 @@ {{ end }} + + diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html index e2898af..41bd1c7 100644 --- a/layouts/partials/site-footer.html +++ b/layouts/partials/site-footer.html @@ -43,7 +43,7 @@ {{ end }} - {{ if (default true .Site.Params.GeekdocBackToTop) }} + {{ if (default true .Site.Params.GeekblogBackToTop) }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 9755045..73ee22b 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -5,7 +5,7 @@ - {{ .Site.Title }} + {{ .Site.Title }} {{ with .Site.Params.subtitle }} {{ . }} diff --git a/layouts/shortcodes/include.html b/layouts/shortcodes/include.html index 2eda972..68dba50 100644 --- a/layouts/shortcodes/include.html +++ b/layouts/shortcodes/include.html @@ -4,7 +4,7 @@ {{ $language := .Get "language" }} {{ $options :=.Get "options" }} -
+
{{- if (.Get "language") -}} {{- highlight ($file | readFile) $language (default "linenos=table" $options) -}} {{- else if eq $type "html" -}} diff --git a/src/iconfont/uEA21-check.svg b/src/iconfont/uEA21-check.svg new file mode 100644 index 0000000..454d937 --- /dev/null +++ b/src/iconfont/uEA21-check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/iconfont/uEA22-copy.svg b/src/iconfont/uEA22-copy.svg new file mode 100644 index 0000000..5436151 --- /dev/null +++ b/src/iconfont/uEA22-copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/check.svg b/src/icons/check.svg new file mode 100644 index 0000000..6240dc3 --- /dev/null +++ b/src/icons/check.svg @@ -0,0 +1,5 @@ + + +check + + diff --git a/src/icons/copy.svg b/src/icons/copy.svg new file mode 100644 index 0000000..e54473d --- /dev/null +++ b/src/icons/copy.svg @@ -0,0 +1,5 @@ + + +copy + + diff --git a/src/js/clipboard-loader.js b/src/js/clipboard-loader.js index 9fa843b..061c7be 100644 --- a/src/js/clipboard-loader.js +++ b/src/js/clipboard-loader.js @@ -1,3 +1,21 @@ document.addEventListener("DOMContentLoaded", function (event) { var clipboard = new ClipboardJS(".clip"); + + clipboard.on("success", function (e) { + const trigger = e.trigger; + + if (trigger.hasAttribute("data-copy-feedback")) { + trigger.classList.add("gblog-post__codecopy--success"); + trigger.querySelector(".icon.copy").classList.add("hidden"); + trigger.querySelector(".icon.check").classList.remove("hidden"); + + setTimeout(function () { + trigger.classList.remove("gblog-post__codecopy--success"); + trigger.querySelector(".icon.copy").classList.remove("hidden"); + trigger.querySelector(".icon.check").classList.add("hidden"); + }, 3000); + } + + e.clearSelection(); + }); }); diff --git a/src/js/copycode.js b/src/js/copycode.js new file mode 100644 index 0000000..674020f --- /dev/null +++ b/src/js/copycode.js @@ -0,0 +1,34 @@ +function createCopyButton(highlightDiv) { + const button = document.createElement("span"); + + if (highlightDiv.querySelector(".lntable")) { + selector = ".lntable .lntd:last-child pre > code"; + } else { + selector = "pre > code"; + } + + const codeToCopy = highlightDiv.querySelector(selector).innerText.trim(); + + button.classList.add( + "flex", + "align-center", + "justify-center", + "clip", + "gblog-post__codecopy" + ); + button.type = "button"; + button.innerHTML = + '' + + ''; + button.setAttribute("data-clipboard-text", codeToCopy); + button.setAttribute("data-copy-feedback", "Copied!"); + button.setAttribute("role", "button"); + button.setAttribute("aria-label", "Copy"); + + highlightDiv.classList.add("gblog-post__codecontainer"); + highlightDiv.insertBefore(button, highlightDiv.firstChild); +} + +document + .querySelectorAll(".highlight") + .forEach((highlightDiv) => createCopyButton(highlightDiv)); diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 0994da3..a92a1ee 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -441,6 +441,46 @@ img { font-size: 1.2em; } } + + &__codecontainer { + position: relative; + + &:hover > .gblog-post__codecopy { + visibility: visible; + } + } + + &__codecopy { + visibility: hidden; + position: absolute; + top: 0.5rem; + right: 0.5rem; + + border: $border-2 solid var(--code-copy-border-color); + border-radius: $border-radius; + background: var(--code-background); + width: 2.2rem; + height: 2.2rem; + + .icon { + top: 0; + width: $font-size-20; + height: $font-size-20; + color: var(--code-copy-font-color); + } + + &:hover { + cursor: pointer; + } + + &--success { + border-color: var(--code-copy-success-color); + + .icon { + color: var(--code-copy-success-color); + } + } + } } .gblog-footer { diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss index a383412..4949516 100644 --- a/src/sass/_utils.scss +++ b/src/sass/_utils.scss @@ -66,7 +66,7 @@ } .hidden { - display: none; + display: none !important; } .svg-sprite {