Code buttons by @nlarew, tweaked by me.

Author: i80and

.gitignore

@@ -26,3 +26,5 @@ src/build/
 /world-builder/source
 /world-builder/build
 /world-builder/.ninja*
+
+.vscode

sphinxext/fixed_only.py

@@ -1,10 +1,7 @@
-import logging
 from docutils import nodes
 from docutils.parsers.rst import Directive, directives
 from sphinx.util.nodes import nested_parse_with_titles
 
-logger = logging.getLogger('fasthtml')
-
 
 class Cond(Directive):
     """

sphinxext/mongodb.py

@@ -18,6 +18,7 @@
 from docutils.parsers.rst import directives
 
 import sphinx
+import sphinx.directives.code
 from sphinx.domains import Domain, ObjType
 from sphinx.locale import l_, _
 from sphinx.directives import ObjectDescription
@@ -29,14 +30,17 @@
 
 from mongodb_conf import conf
 
+
 def make_index_entry(*args):
     """Sphinx 1.4 makes a breaking change in index format, so return a valid
        index entry whichever version we're running."""
     return args + (None,) if sphinx.version_info >= (1, 4) else args
 
+
 def basename(path):
     return os.path.splitext(os.path.basename(path))[0]
 
+
 class MongoDBObject(ObjectDescription):
     """
     Description of a MongoDB object.
@@ -157,7 +161,6 @@ def add_target_and_index(self, name_obj, sig, signode):
         else:
             objects[fullname] = self.env.docname, self.objtype
 
-
         indextext = self.get_index_text(objectname, name_obj)
         if indextext:
             self.indexnode['entries'].append(
@@ -210,9 +213,11 @@ def run(self):
               names=('rtype',)),
     ]
 
+
 class MongoDBMethod(MongoDBObject):
     has_arguments = True
 
+
 class MongoDBXRefRole(XRefRole):
     def process_link(self, env, refnode, has_explicit_title, title, target):
         # basically what sphinx.domains.python.PyXRefRole does
@@ -230,10 +235,11 @@ def process_link(self, env, refnode, has_explicit_title, title, target):
             refnode['refspecific'] = True
         return title, target
 
+
 def render_domain_data(mongodb_directives):
-    directives = { }
-    roles = { }
-    object_types = { }
+    directives = {}
+    roles = {}
+    object_types = {}
 
     for directive in mongodb_directives:
         reftype = directive['name']
@@ -248,6 +254,7 @@ def render_domain_data(mongodb_directives):
 
     return directives, roles, object_types
 
+
 class MongoDBDomain(Domain):
     """MongoDB Documentation domain."""
     name = 'mongodb'
@@ -257,7 +264,7 @@ class MongoDBDomain(Domain):
     directives, roles, object_types = render_domain_data(conf['directives'])
 
     initial_data = {
-        'objects': {}, # fullname -> docname, objtype
+        'objects': {},  # fullname -> docname, objtype
     }
 
     def find_obj(self, env, obj, name, typ, searchorder=0):
@@ -336,11 +343,136 @@ def run(self):
         return result
 
 
+class code_button_row(nodes.Element):
+    pass
+
+
+def visit_code_button_row(self, node):
+    start_tag = self.starttag(node, 'div', CLASS='button-row')
+    self.body.append(start_tag)
+
+
+def depart_code_button_row(self, node):
+    self.body.append('</div>\n')
+
+
+class code_button(nodes.Element):
+    pass
+
+
+def visit_code_button(self, node):
+    href = node.get('href', False)
+    css_class = ' '.join(['code-button'] + node.get('classes', []))
+
+    if href:
+        start_tag = self.starttag(node, 'a', CLASS=css_class, role='button', href=href, target='_blank')
+    else:
+        start_tag = self.starttag(node, 'a', CLASS=css_class, role='button')
+
+    self.body.append(start_tag)
+
+
+def depart_code_button(self, node):
+    self.body.append(node['text'][0] + '</a>\n')
+
+
+class code_container(nodes.Element):
+    pass
+
+
+def visit_code_container(self, node):
+    start_tag = self.starttag(node, 'div', CLASS='button-code-block')
+    self.body.append(start_tag)
+
+
+def depart_code_container(self, node):
+    self.body.append('</div>\n')
+
+
+def create_button(button_type, link, classes=[]):
+    """Create a button inside of a code block with the given label and link."""
+    button = code_button('')
+    button['text'] = [button_type]
+    button['classes'] = classes
+
+    if link:
+        button['href'] = [link]
+
+    return button
+
+
+def add_buttons(parent_class):
+    """
+    Add copy, show in stitch, and github buttons to code block.
+    """
+    class InnerClass(parent_class):
+        option_spec = parent_class.option_spec.copy()
+        option_spec.update({
+            'button-github': directives.uri,
+            'button-stitch': directives.uri,
+            'copyable': lambda argument: directives.choice(argument,
+                                                           ('true', 'false', None)),
+        })
+
+        def run(self):
+            codeblock = parent_class.run(self)
+
+            # Only provide buttons if we are generating html
+            config = self.state.document.settings.env.config
+            if not config._raw_config['tags'].eval_condition('html'):
+                return codeblock
+
+            options = self.options
+            container = code_container('')
+            br = code_button_row('')
+
+            if options.get('copyable', 'true') != 'false':
+                codeblock[0]['classes'] += ['copyable-code-block']
+                br += create_button('copy', False, classes=['code-button--copy'])
+
+            if options.get('button-github'):
+                br += create_button(
+                    'github',
+                    options['button-github'],
+                    classes=['code-button--github']
+                )
+
+            if options.get('button-stitch'):
+                br += create_button(
+                    'stitch',
+                    options['button-stitch'],
+                    classes=['code-button--stitch']
+                )
+
+            container += br
+            container += codeblock
+            return [container]
+
+    return InnerClass
+
+
+CodeBlock = add_buttons(sphinx.directives.code.CodeBlock)
+LiteralInclude = add_buttons(sphinx.directives.code.LiteralInclude)
+
+
 def setup(app):
     app.add_domain(MongoDBDomain)
     directives.register_directive('figure', ExtendedFigure)
 
+    app.add_node(code_button_row, html=(
+        visit_code_button_row, depart_code_button_row
+    ))
+    app.add_node(code_button, html=(
+        visit_code_button, depart_code_button
+    ))
+    app.add_node(code_container, html=(
+        visit_code_container, depart_code_container
+    ))
+    directives.register_directive('code-block', CodeBlock)
+    directives.register_directive('sourcecode', CodeBlock)
+    directives.register_directive('literalinclude', LiteralInclude)
+
     # Do NOT turn on parallel reads until we know what's causing massive
     # (2+ GB per worker) memory bloat and thrashing.
-    return { 'parallel_read_safe': False,
-             'parallel_write_safe': True }
+    return {'parallel_read_safe': False,
+            'parallel_write_safe': True}

themes/mongodb/src/Makefile

@@ -6,9 +6,9 @@ CSS_INPUTS=css/bootstrap-custom.css \
            css/feedback.css \
            css/header.css \
            css/mws.css \
-           css/copy-button.css \
            css/tabs.css \
-           css/lightbox.css
+           css/lightbox.css \
+           css/code-buttons.css
 CSS_FILES=$(CSS_INPUTS) css/basic.css
 
 CSS_ERRORS=errors,empty-rules,duplicate-properties,selector-max-approaching

themes/mongodb/src/css/code-buttons.css

@@ -0,0 +1,53 @@
+.button-row {
+  /* background-color: #494747; */
+  background-image: url(https://media.mongodb.org/code-block-bg.png);
+  display: flex;
+  flex-direction: row-reverse;
+  border-left: 5px solid rgb(73, 71, 71);
+}
+
+.code-button {
+  color: #ffffff;
+  flex-grow: 0;
+  min-width: 75px;
+  background: #7a7b7b;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+
+  height: 24px;
+  line-height: 16px;
+  margin: 0px 1px;
+  padding: 4px 8px;
+  border-radius: 0px;
+
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.code-button:first-of-type {
+  margin-right: 4px;
+  margin-right: 0px;
+}
+
+.code-button:hover, .code-button:focus {
+  background: #9d9e9e;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.code-button:active {
+  background: #7a7b7b;
+}
+
+.button-code-block pre {
+  margin: 0 auto;
+  padding-top: 2px;
+  padding-bottom: 24px;
+}
+
+@media print {
+    .button-row {
+        display: none;
+    }
+}

themes/mongodb/src/css/copy-button.css

@@ -550,12 +550,17 @@ div.highlight pre {
     }
 }
 
-table.docutils td div.highlight pre {
+table.docutils div.highlight pre {
     background: none;
     border: none;
     padding: 0;
 }
 
+table.docutils .button-row {
+    border: none;
+    background: none;
+}
+
 h2 + div.section,
 h3 + div.section,
 h4 + div.section {

themes/mongodb/src/css/mongodb-docs.css

@@ -1,27 +1,22 @@
 export function setup() {
-    const copyableBlocks = document.getElementsByClassName('copyable-code');
+    const copyableBlocks = document.getElementsByClassName('copyable-code-block');
     for (const copyBlock of copyableBlocks) {
         const highlightElement = copyBlock.getElementsByClassName('highlight')[0];
         if (!highlightElement) {
             return;
         }
 
-        const text = highlightElement.innerText.trim();
-        const copyButtonContainer = document.createElement('div');
-        const copyButton = document.createElement('button');
-        const copyIcon = document.createElement('span');
-        copyButtonContainer.className = 'copy-button-container';
-        copyIcon.className = 'fa fa-clipboard';
-        copyButton.className = 'copy-button';
-        copyButton.appendChild(copyIcon);
-        copyButton.appendChild(document.createTextNode('Copy'));
-        copyButtonContainer.appendChild(copyButton);
-        highlightElement.insertBefore(copyButtonContainer, highlightElement.children[0]);
+        const buttonRow = copyBlock.previousElementSibling;
+        const copyButton = buttonRow.getElementsByClassName('code-button--copy')[0];
+        if (!copyButton) {
+            return;
+        }
+
         copyButton.addEventListener('click', () => {
             const tempElement = document.createElement('textarea');
             tempElement.style.position = 'fixed';
             document.body.appendChild(tempElement);
-            tempElement.value = text;
+            tempElement.value = highlightElement.innerText.trim();
             tempElement.select();
 
             try {
@@ -30,7 +25,6 @@ export function setup() {
                     throw new Error('Failed to copy');
                 }
             } catch (err) {
-                console.error('Failed to copy');
                 console.error(err);
             }