add copy-icon top-left badges code blocks

.pre-commit-config.yaml

@@ -29,6 +29,11 @@ repos:
     hooks:
     -   id: mypy
         exclude: ^install-local.py$
+-   repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v7.0.0-alpha.3
+    hooks:
+    -   id: eslint
+        args: [--fix]
 -   repo: local
     hooks:
     -   id: scss-lint

assets/copyable.js

@@ -0,0 +1,27 @@
+(function () {
+    function copyTextToClipboard(text) {
+        var textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-1';
+        textArea.style.top = '-1';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+    }
+    var codeBlockElements = document.getElementsByClassName('copyable');
+    for (var i = 0; i < codeBlockElements.length; i++) {
+        var block = codeBlockElements[i];
+        var copyIcon = new Image(16, 16);
+        copyIcon.setAttribute('src', './assets/copy-icon.svg');
+        copyIcon.setAttribute('alt', 'copy');
+        copyIcon.setAttribute('title', 'copy to clipboard');
+        block.insertBefore(copyIcon, block.children[0]);
+        copyIcon.addEventListener('click', function(block) {
+            var text = block.getElementsByTagName('pre')[0].innerText;
+            copyTextToClipboard(text);
+        }.bind(null, block));
+    }
+})();

base.mako

@@ -68,5 +68,6 @@
             ga('create', 'UA-104682927-1', 'auto');
             ga('send', 'pageview');
         </script>
+        <script src="assets/copyable.js"></script>
     </body>
 </html>

index.mako

@@ -1501,27 +1501,27 @@ you use pre-commit!
 
 - Markdown:
 
-  ```md
+  ```md#copyable
   [![pre-commit](https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white)](https://github.com/pre-commit/pre-commit)
   ```
 
 - HTML:
 
-  ```html
+  ```html#copyable
   <a href="https://github.com/pre-commit/pre-commit"><img src="https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white" alt="pre-commit" style="max-width:100%;"></a>
   ```
 
 - reStructuredText:
 
-  ```rst
+  ```rst#copyable
   .. image:: https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white
      :target: https://github.com/pre-commit/pre-commit
      :alt: pre-commit
   ```
 
 - AsciiDoc:
 
-  ```
+  ```#copyable
   image:https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white[pre-commit, link=https://github.com/pre-commit/pre-commit]
   ```
 

package.json

@@ -3,5 +3,28 @@
     "license": "MIT",
     "dependencies": {
         "bootstrap-sass": "3.4.1"
+    },
+    "eslintConfig": {
+        "extends": "eslint:recommended",
+        "rules": {
+            "indent": [
+                "error",
+                4
+            ],
+            "quotes": [
+                "error",
+                "single"
+            ],
+            "semi": [
+                "error",
+                "always"
+            ]
+        },
+        "parserOptions": {
+            "ecmaVersion": 6
+        },
+        "env": {
+            "browser": true
+        }
     }
 }

scss/main.scss

@@ -202,6 +202,8 @@ h1,
     .s2 { color: #8ae234; }
 }
 
+.copyable img { cursor: pointer; }
+
 @media (max-width: $screen-md-max) {
     .table-bordered td:first-child {
         background: #f5f5f5;

template_lib.py

@@ -3,6 +3,7 @@
 import shlex
 import subprocess
 import sys
+from typing import Optional
 
 import markdown_code_blocks
 import markupsafe
@@ -99,13 +100,22 @@ def header(self, text: str, level: int, raw: str) -> str:
             f'</h{level}> '
         )
 
-    def block_code(self, code: str, lang: str) -> str:
+    def block_code(self, code: str, lang: Optional[str]) -> str:
+        copyable = False
+        if lang is not None:
+            copyable_s = '#copyable'
+            copyable = lang.endswith(copyable_s)
+            lang, _, _ = lang.partition(copyable_s)
         if lang == 'table':
-            return _render_table(code)
+            ret = _render_table(code)
         elif lang == 'cmd':
-            return _render_cmd(code)
+            ret = _render_cmd(code)
         else:
-            return super().block_code(code, lang)
+            ret = super().block_code(code, lang)
+        if copyable:
+            return f'<div class="copyable">{ret}</div>'
+        else:
+            return ret
 
 
 def md(s: str) -> str: