Add copy code button

Author: federicobucchi

assets/javascripts/application.js

@@ -87,5 +87,24 @@ layout: source
         }
       })
     }
+
+    if (navigator && navigator.clipboard) {
+      const copyCodeButtons = document.querySelectorAll('[class^="language-"] button');
+
+      copyCodeButtons.forEach(function(button) {
+        const codeElement = button.parentElement.querySelector('code');
+        const originalText = button.innerText;
+
+        button.addEventListener('mousedown', async function() {
+          await navigator.clipboard.writeText(codeElement.innerText);
+
+          button.innerText = 'Copied!';
+
+          setTimeout(() => {
+            button.innerText = originalText;
+          }, 1000);
+        });
+      });
+    }
   });
 })();

assets/stylesheets/elements/_grid.scss

@@ -9,7 +9,7 @@
   background-color: var(--color-fill-secondary);
   border: 1px solid var(--color-fill-tertiary);
   border-radius: var(--border-radius);
-  
+
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -77,7 +77,7 @@
 }
 
 // Button typically embedded in a grid-level-1
-a.cta-secondary {
+a.cta-secondary, [class^="language-"] button {
   background-color: var(--color-fill-tertiary);
   border: 1px solid var(--color-fill-quaternary);
   border-radius: var(--border-radius);
@@ -99,7 +99,7 @@ a.cta-secondary {
   &:hover {
     color: var(--color-link);
     background-color: var(--color-fill-quaternary);
-   
+
     text-decoration: none;
 
     @media (prefers-contrast: more) {
@@ -112,3 +112,10 @@ a.cta-secondary {
     content: " ↗";
   }
 }
+
+[class^="language-"] button {
+  cursor: pointer;
+  padding: 0.1rem 0.4rem;
+  margin-left: auto;
+  font-size: 0.8rem;
+}

install/macos/index.md

@@ -13,7 +13,7 @@ title: Install Swift
     To download toolchains from Swift.org, use the Swiftly toolchain installer. Swift.org toolchains include experimental features like Embedded Swift and support for WebAssembly.
   </p>
   <h4>Run this in a terminal:</h4>
-  <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>curl -O https://download.swift.org/swiftly/darwin/swiftly-{{ site.data.builds.swiftly_release.version }}.pkg &amp;&amp; \
+  <div class="language-plaintext highlighter-rouge"><button>Copy code</button><div class="highlight"><pre class="highlight"><code>curl -O https://download.swift.org/swiftly/darwin/swiftly-{{ site.data.builds.swiftly_release.version }}.pkg &amp;&amp; \
 installer -pkg swiftly-{{ site.data.builds.swiftly_release.version }}.pkg -target CurrentUserHomeDirectory &amp;&amp; \
 ~/usr/local/bin/swiftly init --quiet-shell-followup &amp;&amp; \
 . ~/Library/Application\ Support/swiftly/env.sh &amp;&amp; \