[docs] Add copy buttons to download snippets

Author: Breakthrough

README.md

@@ -49,6 +49,12 @@ Skip the first 10 seconds of the input video:
 
 More examples can be found throughout [the documentation](https://www.scenedetect.com/docs/latest/cli.html).
 
+**Quick Start (Docker)**:
+
+The same commands work without installing anything using [the official Docker image](https://github.com/Breakthrough/PySceneDetect/pkgs/container/pyscenedetect), which includes all dependencies (`ffmpeg`/`mkvmerge` included). Mount the folder containing your videos and use it for input/output paths:
+
+    docker run --rm -v "$(pwd):/files" ghcr.io/breakthrough/pyscenedetect -i /files/video.mp4 split-video -o /files
+
 **Quick Start (Python API)**:
 
 To get started, there is a high level function in the library that performs content-aware scene detection on a video (try it from a Python prompt):

website/mkdocs.yml

@@ -41,3 +41,6 @@ markdown_extensions: [fenced_code]
 
 extra_css:
   - style.css
+
+extra_javascript:
+  - js/helper.js

website/pages/download.md

@@ -10,9 +10,9 @@ PySceneDetect requires at least Python 3.10 or higher.
 
 <div class="important">
 <h4 class="wy-text-neutral"><span class="fa fa-angle-double-down wy-text-info"></span> Standard install (recommended):</h4>
-<h3 class="wy-text-neutral"><tt>pip install --upgrade scenedetect</tt></h3>
+<pre class="command"><code class="nohighlight">pip install --upgrade scenedetect</code></pre>
 <h4 class="wy-text-neutral"><span class="fa fa-angle-down wy-text-info"></span> Headless install (servers, no GUI libs):</h4>
-<h3 class="wy-text-neutral"><tt>pip install --upgrade scenedetect-headless</tt></h3>
+<pre class="command"><code class="nohighlight">pip install --upgrade scenedetect-headless</code></pre>
 </div>
 
 PySceneDetect is available via `pip` as three packages:

website/pages/js/helper.js

@@ -0,0 +1,28 @@
+// Adds a copy-to-clipboard button to code blocks (the readthedocs theme has no
+// built-in equivalent of mkdocs-material's `content.code.copy` feature).
+document.addEventListener("DOMContentLoaded", function () {
+  var blocks = document.querySelectorAll(".rst-content pre");
+  blocks.forEach(function (pre) {
+    var code = pre.querySelector("code");
+    if (!code) {
+      return;
+    }
+    var button = document.createElement("button");
+    button.className = "copy-btn";
+    button.type = "button";
+    button.title = "Copy to clipboard";
+    button.setAttribute("aria-label", "Copy to clipboard");
+    button.innerHTML = '<span class="fa fa-clipboard"></span>';
+    button.addEventListener("click", function () {
+      navigator.clipboard.writeText(code.innerText.trim()).then(function () {
+        button.innerHTML = '<span class="fa fa-check"></span>';
+        button.classList.add("copied");
+        setTimeout(function () {
+          button.innerHTML = '<span class="fa fa-clipboard"></span>';
+          button.classList.remove("copied");
+        }, 600);
+      });
+    });
+    pre.appendChild(button);
+  });
+});

website/pages/style.css

@@ -41,4 +41,59 @@
 }
 .bm-t1 { background-color: #6da7ec; }  /* F1 >= 80 */
 .bm-t2 { background-color: #9ec5f4; }  /* F1 60-79 */
-.bm-t3 { background-color: #cde2fb; }  /* F1 40-59 */
+.bm-t3 { background-color: #cde2fb; }  /* F1 40-59 */
+
+/* Copy-to-clipboard button injected into code blocks by js/helper.js. */
+.rst-content pre {
+    position: relative;
+}
+.rst-content pre .copy-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    padding: 2px 8px;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    background: transparent;
+    color: #9a9a9a;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.5;
+}
+.rst-content pre:hover .copy-btn,
+.rst-content pre .copy-btn:focus {
+    border-color: #c4c4c4;
+    background: rgba(255, 255, 255, 0.8);
+    color: #404040;
+}
+.rst-content pre .copy-btn.copied,
+.rst-content pre .copy-btn.copied:focus {
+    color: #27ae60;
+}
+
+/* Prominent pip install commands inside the download page "important" divs:
+   full-width like regular code blocks, but white with larger bold text. */
+.rst-content .important h4:has(+ pre.command) {
+    margin-bottom: 6px;
+}
+.rst-content .important pre.command {
+    margin: 0 0 28px 0;
+    padding: 6px 42px 6px 12px;  /* right padding leaves room for the copy button */
+    background: #fff;
+    border: 1px solid #e1e4e5;
+}
+.rst-content .important pre.command code {
+    font-size: 120%;
+    font-weight: 700;
+    color: #404040;
+    background: transparent;
+    border: none;
+    padding: 0;
+}
+.rst-content .important pre.command:last-child {
+    margin-bottom: 4px;  /* tighten space at the bottom of the box */
+}
+.rst-content .important pre.command .copy-btn {
+    top: 50%;
+    transform: translateY(-50%);
+}