Add a copy function for the SHA256 checksum

Author: sy-records

include/version.inc

@@ -139,8 +139,15 @@ function show_source_releases()
                   <?php download_link($rel['filename'], $rel['filename']); ?>
                   <span class="releasedate"><?php echo date('d M Y', strtotime($rel['date'])); ?></span>
                   <?php
-                    if (isset($rel['md5']))    echo '<span class="md5sum">', $rel['md5'], '</span>';
-                    if (isset($rel['sha256'])) echo '<span class="sha256">', $rel['sha256'], '</span>';
+                    if (isset($rel['md5'])) {
+                        echo '<span class="md5sum">', $rel['md5'], '</span>';
+                    }
+                    if (isset($rel['sha256'])) {
+                        echo '<span class="sha256-row">';
+                        echo '<span class="sha256">', $rel['sha256'], '</span>';
+                        echo '<button type="button" class="sha256-copy" data-copy-text="', $rel['sha256'], '" aria-label="Copy sha256 checksum">Copy</button>';
+                        echo '</span>';
+                    }
                    ?>
                   <?php if (isset($rel['note']) && $rel['note']): ?>
                     <p>
@@ -161,5 +168,20 @@ function show_source_releases()
           </div>
         <?php endforeach; ?>
     <?php endforeach; /* major releases loop end */ ?>
+    <script>
+      document.addEventListener('click', function (event) {
+        var button = event.target.closest('.sha256-copy');
+        if (!button || !navigator.clipboard) {
+            return console.error('Clipboard API not available');
+        }
+
+        navigator.clipboard.writeText(button.dataset.copyText).then(function () {
+          button.textContent = 'Copied';
+          setTimeout(function () {
+            button.textContent = 'Copy';
+          }, 3000);
+        });
+      });
+    </script>
 <?php
 }

styles/theme-base.css

@@ -797,6 +797,32 @@ fieldset {
     content: "sha256: ";
     font-family: var(--font-family-sans-serif);
 }
+.content-box .sha256-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.content-box .sha256-row .sha256 {
+    min-width: 0;
+}
+.content-box .sha256-copy {
+    border: 1px solid var(--dark-blue-color);
+    border-radius: 30px;
+    background-color: var(--dark-blue-color);
+    color: #fff;
+    padding: 0.2rem 0.65rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    cursor: pointer;
+    min-width: 4.25rem;
+    text-align: center;
+    white-space: nowrap;
+}
+.content-box .sha256-copy:hover,
+.content-box .sha256-copy:focus {
+    border-color: var(--dark-magenta-color);
+    background-color: var(--dark-magenta-color);
+}
 .content-box .releasedate {
     float: right;
     font-size: 0.9rem;