Adding a CopyButton feature by yufi16 · Pull Request #537 · flatcar/flatcar-website

yufi16 · 2026-03-05T18:30:15Z

What this PR does / why we need it:

Introducing a Copy button feature to quickly copy code snippets, reducing friction and saving time.

Which issue(s) this PR fixes:

#2022 -> flatcar/Flatcar#2022

Does this PR introduce a user-facing change?

Enhancing code blocks with distinct background, improving readability and visual clarity.

Special Notes for your Reviewer:

Incorporated changes per review and suggestions.

tormath1

Thanks for the PR, while I'm not a front-end developer, I'll delegate this PR review to @ervcz :)

tormath1 · 2026-03-09T16:39:29Z

Let's avoid adding the .idea folder. We can .idea to the main .gitignore file.

Thanks for sharing @tormath1
With a couple more changes, will stash them before opening the PR for review.

John15321 · 2026-03-11T11:10:40Z

Linking it for visibility 😊 flatcar/Flatcar#2022

sayanchowdhury · 2026-03-12T13:45:51Z

Thanks a lot for the PR!

The implementation needs to change a bit, currently the copy button is rendered outside of the codeblock - which does not look good in UI terms.

It would be better to use a font-awesome icon and place it within.

Other thing is we use pygments, but you can switch over to use Hugo's highlight which give much more better themes for the code block.

John15321 · 2026-03-18T12:33:14Z

Could you please remove the .idea folder from Git?

John15321 · 2026-03-18T12:45:05Z

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant/#:~:text=List%20the%20status%20of%20the%20running%20machines%3A

yufi16 · 2026-03-18T14:54:03Z

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant/#:~:text=List%20the%20status%20of%20the%20running%20machines%3A

Thanks for investigating, looking into this!

sayanchowdhury · 2026-03-19T12:25:29Z

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant#:~:text=List the status of the running machines%3A

I see that the innerText that you are using is returning a \n in the end - you could switch to textContent and check. For this example textContent returns me without the trailing newline.

or better just use trim() or trimEnd() to stay on the safer side.

sayanchowdhury · 2026-04-01T11:36:18Z

This would require to pull #548

@ervcz this PR would also require your review when you have spare cycles

ervcz · 2026-04-23T11:52:13Z

Hello @yufi16, @sayanchowdhury! Sorry for the late response.

Please use the existing SCSS variables. E.g. $flatcar-blue for #08a2af, $gray-100 for #f8f9fa, etc. These are exact matches already defined in _custom.scss and Bootstraps variables.

Can you please check if "Fira Code" is properly loading? That is a custom font that is not installed on most of devices.

ervcz · 2026-04-28T12:34:03Z

    height: 2px;
    position: absolute;
-    top: 0%;
+    top:  0;


Can you please use measurement units? It may still be correct without them, but it is a good practice to indicate them.

ervcz · 2026-04-28T12:34:10Z

+    top:  0;
    left: 0;
-    width: 100%;
+    width: 100;


ervcz · 2026-04-28T12:34:42Z

+    }
+
+    &.copied {
+      background: $flatcar-blue; /* cyan-blue feedback */


The comment can be removed.

ervcz · 2026-04-28T12:36:20Z

+      border-radius: 6px;
+      display: block;
+      overflow-x: auto;
+      font-family: "Fira Code", monospace;


I just noticed we already load a monospace font family. Could we use $font-family-monospace instead (- that should include it)? Perhaps the difference doesn't make worth loading a new font family.

what we have already is called overpass mono

ervcz · 2026-04-28T12:46:50Z

    <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'"/>
-
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">


If overpass mono is similar enough to fira code, I would suggest to drop fira code

yufi16 · 2026-04-28T13:25:51Z

Sure thing, On it!

yufi16 · 2026-06-01T16:46:39Z

This is still a Work in progress, and I will update it shortly.

Signed-off-by: yussaffi <yufi.alam@outlook.com>

yufi16 · 2026-06-10T01:17:58Z

This seems to be ready for review, @sayanchowdhury @ervcz Please feel free to have a look!

sayanchowdhury · 2026-06-10T08:18:12Z

-      closeMenu(this);
-    });
-  })
+    document.querySelectorAll(className).forEach(function(item) {


Can you please remove the identation here?

sayanchowdhury · 2026-06-10T08:22:37Z

-  function (item) {
-    if (getCookie("cookieconsent_status") !== "allow") {
-      item.classList.remove("d-none");
+    function (item) {


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

sayanchowdhury · 2026-06-10T08:50:54Z

-  }
-);
+);
+document.addEventListener("DOMContentLoaded", () => {


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

sayanchowdhury · 2026-06-10T09:00:14Z

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


This change strip the required indentation.

sayanchowdhury · 2026-06-10T09:01:56Z

+      overflow-x: auto;
+      font-family: "overpass mono", monospace;
+
+      &.copied {


I don't see this code being used.

sayanchowdhury · 2026-06-10T09:03:21Z

-    width: 100%;
+    top:  0px;
+    left: 0px;
+    width: 100;


This issue is still there.

sayanchowdhury · 2026-06-10T09:05:26Z

    <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'"/>
-


These lines make it easier to skim through

sayanchowdhury · 2026-06-10T09:10:02Z

Please also update the commit messsage.

yufi16 · 2026-06-10T11:54:09Z

Please also update the commit messsage.

Sure thing, will iterate as per the feedback asap!

yufi16 · 2026-06-18T10:42:22Z

WIP!

Copilot

Pull request overview

This PR introduces a “Copy” button for code snippets to make copying fenced code blocks faster, alongside some related styling updates to improve code-block readability.

Changes:

Add client-side “copy to clipboard” buttons to rendered code blocks.
Add SCSS styling for copy buttons and code block backgrounds.
Remove the legacy static/js/common.js and apply minor formatting tweaks in templates/styles.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
themes/flatcar/layouts/partials/head.html	Minor edit in the head partial; file content impacts overall document structure.
themes/flatcar/layouts/_default/baseof.html	Formatting/indentation changes to the base layout wrapper.
themes/flatcar/assets/scss/_styles.scss	CSS adjustments plus new styles for code blocks and the copy button UI.
themes/flatcar/assets/js/common.js	Adds DOM logic to inject and handle copy-to-clipboard buttons for code snippets.
static/js/common.js	Removes the previously committed static version of the common JS.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    top:  0px;
+    left: 0px;
+    width: 100;


+document.addEventListener("DOMContentLoaded", () => {
+  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);
+      });
+    });
+  });
+});


    <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'"/>
-
    <!-- Search meta tags -->
    {{ if .Params.noindex }}
        <meta name="robots" content="noindex, follow" />


John15321 · 2026-06-23T15:17:57Z

WIP!

If you know that a PR is Work In Progress please set it as "Draft"

tormath1 reviewed Mar 9, 2026

View reviewed changes

John15321 mentioned this pull request Mar 11, 2026

[RFE] Add a "Copy" button to code examples and a distinct background for code examples flatcar/Flatcar#2022

Open

yufi16 force-pushed the styling-work branch from 56c4ba6 to 7067e95 Compare March 12, 2026 02:00

sayanchowdhury reviewed Mar 12, 2026

View reviewed changes

Comment thread themes/flatcar/static/js/copy.js Outdated

yufi16 force-pushed the styling-work branch 6 times, most recently from 6ba5054 to 63efd51 Compare March 18, 2026 09:21

yufi16 changed the title ~~adding a copy button | scss styling~~ Adding a Copy button | Scss styling Mar 18, 2026

yufi16 changed the title ~~Adding a Copy button | Scss styling~~ Adding a Copy button | Scss Styling Mar 18, 2026

yufi16 changed the title ~~Adding a Copy button | Scss Styling~~ Adding a Copy button | scss styling Mar 18, 2026

yufi16 changed the title ~~Adding a Copy button | scss styling~~ Adding a Copy button | Scss styling Mar 18, 2026

yufi16 marked this pull request as ready for review March 18, 2026 12:25

yufi16 requested a review from a team as a code owner March 18, 2026 12:25

yufi16 force-pushed the styling-work branch 5 times, most recently from 75b28f1 to 9d34850 Compare March 19, 2026 03:49

yufi16 closed this Mar 19, 2026

yufi16 reopened this Mar 19, 2026

yufi16 changed the title ~~Adding a Copy button | Scss styling~~ Adding a CopyButton feature Mar 19, 2026

yufi16 force-pushed the styling-work branch 4 times, most recently from d1ed56f to 5daf7f0 Compare March 31, 2026 08:25

yufi16 force-pushed the styling-work branch from 385b5a6 to c8c031b Compare April 27, 2026 16:12

ervcz requested changes Apr 28, 2026

View reviewed changes

yufi16 force-pushed the styling-work branch 3 times, most recently from b09ff59 to 237c01a Compare May 16, 2026 17:07

yufi16 force-pushed the styling-work branch 2 times, most recently from d9f6989 to 6a903ae Compare May 26, 2026 22:38

yufi16 closed this May 27, 2026

yufi16 force-pushed the styling-work branch from 6a903ae to b03bc33 Compare May 27, 2026 08:05

consolidating-changes-against-the-reviews

f127a38

Signed-off-by: yussaffi <yufi.alam@outlook.com>

yufi16 reopened this Jun 10, 2026

sayanchowdhury reviewed Jun 10, 2026

View reviewed changes

Merge branch 'flatcar:main' into styling-work

935c100

Copilot AI review requested due to automatic review settings June 23, 2026 14:50

Copilot started reviewing on behalf of yufi16 June 23, 2026 14:51 View session

Copilot AI reviewed Jun 23, 2026

View reviewed changes

yufi16 marked this pull request as draft June 23, 2026 19:54

Uh oh!

Conversation

yufi16 commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#2022 -> flatcar/Flatcar#2022

Special Notes for your Reviewer:

Uh oh!

tormath1 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

John15321 commented Mar 11, 2026

Uh oh!

sayanchowdhury commented Mar 12, 2026

Uh oh!

Uh oh!

John15321 commented Mar 18, 2026

Uh oh!

John15321 commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yufi16 commented Mar 18, 2026

Uh oh!

sayanchowdhury commented Mar 19, 2026

Uh oh!

sayanchowdhury commented Apr 1, 2026

Uh oh!

ervcz commented Apr 23, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yufi16 commented Apr 28, 2026

Uh oh!

yufi16 commented Jun 1, 2026

Uh oh!

yufi16 commented Jun 10, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sayanchowdhury commented Jun 10, 2026

Uh oh!

yufi16 commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yufi16 commented Jun 18, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

John15321 commented Jun 23, 2026

Uh oh!

Reviewers

Assignees

yufi16 commented Mar 5, 2026 •

edited

Loading

John15321 commented Mar 18, 2026 •

edited

Loading

yufi16 commented Jun 10, 2026 •

edited

Loading