Skip to content

Adding a CopyButton feature #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
yufi16 wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Adding a CopyButton feature #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f127a38
consolidating-changes-against-the-reviews
yufi16 Jun 10, 2026
935c100
Merge branch 'flatcar:main' into styling-work
yufi16 Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 0 additions & 89 deletions static/js/common.js
View file
Open in desktop

This file was deleted.

40 changes: 30 additions & 10 deletions themes/flatcar/assets/js/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,11 @@ document.querySelectorAll(".nav-item.dropdown .nav-link").forEach(function(item)

// Close menu on link clicks
[".nav-link", ".dropdown-item"].forEach(className =>
document.querySelectorAll(className).forEach(function(item) {
item.addEventListener("click", function(e) {
closeMenu(this);
});
})
document.querySelectorAll(className).forEach(function(item) {

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please remove the identation here?

item.addEventListener("click", function(e) {
closeMenu(this);
});
})
);


Expand All @@ -81,9 +81,29 @@ function getCookie(cname) {
}

document.querySelectorAll(".contact-cookies-consent-notice").forEach(
function (item) {
if (getCookie("cookieconsent_status") !== "allow") {
item.classList.remove("d-none");
function (item) {

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think here as well there is identation that needs to be dropped. We use 2-spaces for the js files.

if (getCookie("cookieconsent_status") !== "allow") {
item.classList.remove("d-none");
}
}
}
);
);
document.addEventListener("DOMContentLoaded", () => {

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of the dynamically loading the button - it would be better to use the Render Hooks from hugo

document.querySelectorAll("pre code").forEach(block => {
const wrapper = block.parentNode;
wrapper.classList.add("code-block");

const button = document.createElement("button");
button.className = "copy-btn";
button.setAttribute("aria-label", "Copy to clipboard");
button.innerHTML = `
<i class="fa-regular fa-copy"></i>`;
wrapper.appendChild(button);

button.addEventListener("click", () => {
navigator.clipboard.writeText(block.innerText.trim()).then(() => {
button.classList.add("copied");
setTimeout(() => button.classList.remove("copied"), 1200);
});
});
});
});
Comment on lines +90 to +109
86 changes: 70 additions & 16 deletions themes/flatcar/assets/scss/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

h2 {
@include media-breakpoint-down(lg) {
font-size: 1.75rem;
font-size: 1.75rem;
}

@include media-breakpoint-down(md) {
Expand Down Expand Up @@ -62,17 +62,17 @@ h6 {
width: 100%;
height: 2px;
position: absolute;
top: 0%;
left: 0;
width: 100%;
top: 0px;
left: 0px;
width: 100;

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This issue is still there.

Comment on lines +65 to +67
transition: all 0.3s;

&:before,
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 2px;
Expand Down Expand Up @@ -114,7 +114,7 @@ h6 {
}

.dropdown-menu_lg {
padding: $dropdown-padding-y-lg 0;
padding: $dropdown-padding-y-lg 0px;

@include media-breakpoint-down(md) {
padding: 0px 16px;
Expand Down Expand Up @@ -151,7 +151,7 @@ h6 {

@include media-breakpoint-down(md) {
font-size: 1em;
margin-bottom: 0;
margin-bottom: 0px;
}
}

Expand Down Expand Up @@ -217,14 +217,14 @@ h6 {
// Cards

.card-header {
padding: 0;
padding: 0px;
}

.card-body {
padding: $card-spacer-y $card-spacer-x 0;
padding: $card-spacer-y $card-spacer-x 0px;

@include media-breakpoint-down(sm) {
padding: $card-spacer-y-sm $card-spacer-x-sm 0;
padding: $card-spacer-y-sm $card-spacer-x-sm 0px;
}
}

Expand Down Expand Up @@ -274,7 +274,7 @@ h6 {
min-height: 2.5em;
width: 2.5em;
height: 2.5em;
padding: 0;
padding: 0px;
text-align: center;
transition: color 0.3s, background-color 0.3s;
display: flex;
Expand Down Expand Up @@ -304,10 +304,10 @@ h6 {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background: url("/images/arrow-big-white.svg") no-repeat center;
background-size: contain;
Expand Down Expand Up @@ -367,3 +367,57 @@ a:hover {
background-color: $flatcar-blue;
border-color: $flatcar-blue;
}
// Copy button -> styles for code blocks (solves Issue #2022)
div.highlight {
position: relative;
.copy-btn {
position: absolute;
top: 12px;
right: 12px;
width: 33px;
min-width: 16px;
height: 17px;
margin: 4px;
padding: 6px 8px;
font-size: 0.75em;
cursor: pointer;
background: $gray-100;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;

&:hover {
background: $gray-100;
color: $black;
}

&:active {
background: $gray-100;
}

&.copied {
background: $flatcar-blue;
color: white;
border-color: $flatcar-blue;
}
}

pre {
code {
background-color: $gray-100;
border-radius: 6px;
display: block;
overflow-x: auto;
font-family: "overpass mono", monospace;

&.copied {

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see this code being used.

background-color: $green;
transition: background-color 0.3s ease;
}
}
}
}
24 changes: 12 additions & 12 deletions themes/flatcar/layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
<a class="visually-hidden visually-hidden-focusable" href="#content">Skip to content</a>
{{- partial "header.html" . -}}
{{- partial "head.html" . -}}
<body>

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change strip the required indentation.

<a class="visually-hidden visually-hidden-focusable" href="#content">Skip to content</a>
{{- partial "header.html" . -}}

<main class="main" id="content" role="main">
{{ block "main" . }}{{ .Render "common-page" }}{{ end }}
{{ block "unique-content" . }}{{ end }}
{{ block "bottom" . }}{{ end }}
</main>
<main class="main" id="content" role="main">
{{ block "main" . }}{{ .Render "common-page" }}{{ end }}
{{ block "unique-content" . }}{{ end }}
{{ block "bottom" . }}{{ end }}
</main>

{{ partial "footer.html" . }}
</body>
</html>
{{ partial "footer.html" . }}
</body>
</html>
1 change: 0 additions & 1 deletion themes/flatcar/layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400;600;700&family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" media="print" onload="this.media='all'"/>

@sayanchowdhury sayanchowdhury Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These lines make it easier to skim through

<!-- Search meta tags -->
{{ if .Params.noindex }}
<meta name="robots" content="noindex, follow" />
Comment on lines 12 to 16
Expand Down