hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use code block header if copy button is enabled

Browse Source 
Now copy button doesn't cover the code, because it's not on top of it!
This commit is contained in:
daudix
2024-07-18 01:55:09 +03:00
parent 95751760fd
commit 19e976375c
4 changed files with 105 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/article.html
View File

@ -17,7 +17,7 @@
<time datetime="{{ page.date | date(format=' %+') }}" pubdate>
{{- page.date | date(format=date_format, locale=date_locale) -}}
</time>
{%- if page.authors -%}
{%- if page.authors %}
<span>•</span>
<span>
{{ macros_translate::translate(key="author", default="Author", language_strings=language_strings) }}:

41
templates/partials/copy_button.html
View File

@ -6,25 +6,40 @@
blocks.forEach((block) => {
if (navigator.clipboard) {
// Code block header title
let title = document.createElement("span");
let lang = block.getAttribute("data-lang");
title.innerHTML = lang;
// Copy button icon
let icon = document.createElement("i");
icon.classList.add("icon");
// Copy button label (for screen readers)
let label = document.createElement("span");
label.classList.add("hidden");
label.innerHTML = "{{ macros_translate::translate(key='copy_code', default='Copy code', language_strings=language_strings) }}";
// Copy button
let button = document.createElement("button");
button.appendChild(icon);
button.appendChild(label);
// Code block header
let header = document.createElement("div");
header.classList.add("header");
header.appendChild(button);
header.appendChild(title);
// Container that holds header and the code block itself
let container = document.createElement("div");
container.classList.add("pre-container");
container.appendChild(header);
// Move code block into the container
block.parentNode.insertBefore(container, block);
container.appendChild(block);
let button = document.createElement("button");
let icon = document.createElement("i");
let span = document.createElement("span");
{%- if config.markdown.highlight_themes_css | length < 1 %}
button.classList.add("dark");
{%- endif %}
icon.classList.add("icon");
span.classList.add("hidden");
span.innerHTML = "{{ macros_translate::translate(key='copy_code', default='Copy code', language_strings=language_strings) }}";
button.appendChild(icon);
button.appendChild(span);
container.appendChild(button);
button.addEventListener("click", async () => {
await copyCode(block, button);
});