Use smaller icons for the "Copy" button in code snippets.

Author: ayosec

lib/ffdocs/view/javascript/clipboard.js

@@ -18,12 +18,12 @@ document.addEventListener("DOMContentLoaded", () => {
     let button = document.createElement("BUTTON");
 
     button.classList.add("copy");
-    button.append(document.createTextNode("Copy"));
+    button.append(document.createTextNode("📋"));
 
     button.addEventListener("click", () => {
       navigator.clipboard.writeText(elem.dataset.source).then(
-        () => { notifyClipboardResult(button, "Copied!"); },
-        () => { notifyClipboardResult(button, "Failed"); }
+        () => { notifyClipboardResult(button, "✓"); },
+        () => { notifyClipboardResult(button, "✗"); }
       );
     });
 

lib/ffdocs/view/styles/_items.scss

@@ -49,6 +49,8 @@ main.item section {
     padding: 1ch;
 
     button.copy {
+      cursor: pointer;
+
       border: 1px solid var(--item-btncopy-fg);
       color: var(--item-btncopy-fg);
       background: var(--item-btncopy-bg);
@@ -57,11 +59,17 @@ main.item section {
       position: static;
       font-size: smaller;
 
+      width: 3ch;
+      height: 3ch;
+      border-radius: 50%;
+
+      justify-content: center;
+      align-items: center;
+
       &.result {
         border-color: var(--item-btncopy-bg);
         color: var(--item-btncopy-bg);
         background: var(--item-btncopy-fg);
-        font-size: unset;
         pointer-events: none;
       }
 
@@ -72,7 +80,7 @@ main.item section {
 
     &:hover {
       button.copy {
-        display: unset;
+        display: inline-flex;
       }
     }
   }

lib/ffdocs/view/website.rb

@@ -135,6 +135,8 @@ def render(executor)
       @releases.freeze
       jobs = []
 
+      ::FFDocs.log.info "Rendering to #@output"
+
       jobs << Concurrent::Promise.execute(executor: executor) do
         ::FFDocs::View::VersionMatrixRenderer.new(self).render
         true