Adds 'copy to clipboard' function to example code snippets

hc/front/management/commands/pygmentize.py

@@ -27,10 +27,12 @@ class Command(BaseCommand):
             return
 
         # Invocation examples
-        _process("bash", lexers.BashLexer())
+        _process("bash_curl", lexers.BashLexer())
+        _process("bash_wget", lexers.BashLexer())
         _process("browser", lexers.JavascriptLexer())
         _process("crontab", lexers.BashLexer())
-        _process("python", lexers.PythonLexer())
+        _process("python_urllib2", lexers.PythonLexer())
+        _process("python_requests", lexers.PythonLexer())
         _process("php", lexers.PhpLexer())
         _process("powershell", lexers.shell.PowerShellLexer())
         _process("node", lexers.JavascriptLexer())
@@ -38,7 +40,8 @@ class Command(BaseCommand):
         # API examples
         _process("list_checks_request", lexers.BashLexer())
         _process("list_checks_response", lexers.JsonLexer())
-        _process("create_check_request", lexers.BashLexer())
+        _process("create_check_request_a", lexers.BashLexer())
+        _process("create_check_request_b", lexers.BashLexer())
         _process("create_check_response", lexers.JsonLexer())
         _process("pause_check_request", lexers.BashLexer())
         _process("pause_check_response", lexers.JsonLexer())

static/css/docs.css

@@ -59,3 +59,7 @@ a.section:hover  {
     background-color: #f2f9f6;
     border-radius: 4px;
 }
+
+.snippet pre {
+  border: 1px solid #cccccc;
+}

static/css/my_checks.css

@@ -71,3 +71,12 @@
  #show-usage-modal .tab-content {
      margin-top: 15px;
  }
+
+ .tab-pane {
+    border: none;
+    padding: 0;
+ }
+
+ .snippet {
+   margin-bottom: 15px;
+ }

static/css/snippet-copy.css

@@ -0,0 +1,44 @@
+.snippet {
+  position: relative;
+  margin-bottom: 3px;
+}
+
+.snippet:last-child {
+  margin-bottom: 0;
+}
+
+.snippet pre {
+  border: none;
+  background: #F6F6F6 !important;
+  margin: 0;
+}
+
+.snippet:hover .copy-snippet-link {
+    opacity: 1
+}
+
+button.copy-snippet-link {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-top: -1px;
+    margin-right: -1px;
+    z-index: 10;
+    display: block;
+    padding: 5px 8px !important;
+    font-size: 12px;
+    cursor: pointer;
+    border-radius: 0 0 0 4px;
+    opacity: 0;
+    background: none!important;
+    border: none;
+    outline: none;
+    font-family: "Open Sans", Arial, sans-serif;
+    color: #0091ea;
+    cursor :pointer;
+    transition: opacity 0.1s linear;
+}
+
+button.copy-snippet-link:hover {
+    text-decoration: underline;
+}

static/css/welcome.css

@@ -87,3 +87,14 @@
     width: 22px;
     height: 22px;
 }
+
+.tab-pane {
+  border-left: 1px solid #DDD;
+  border-right: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  padding: 3px;
+}
+
+.tab-pane.tab-pane-email {
+  border: none;
+}

static/js/snippet-copy.js

@@ -0,0 +1,26 @@
+$(function() {
+
+    var reBlankLines = new RegExp("^\\s*[\\r\\n]", "gm");
+    var reTrailingWhitespace = new RegExp("\\s+$");
+
+    var clipboard = new Clipboard("button.copy-snippet-link", {
+        text: function (trigger) {
+            var snippetElement = $(trigger).next(".highlight").children().clone();
+            /* remove pygmentize comment elements */
+            snippetElement.find(".c, .cm, .cp, .c1, .cs").remove();
+            /* remove blank lines and trailing whitespace */
+            return snippetElement.text().replace(reBlankLines, '').replace(reTrailingWhitespace, '');
+        }
+    });
+
+    clipboard.on("success", function(e) {
+        e.trigger.textContent = "copied!";
+        e.clearSelection();
+    });
+
+    $("button.copy-snippet-link").mouseout(function(e) {
+        setTimeout(function() {
+            e.target.textContent = "copy";
+        }, 300);
+    })
+});

templates/base.html

@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="{% static 'css/icomoon.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/snippet-copy.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/docs.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/welcome.css' %}" type="text/css">

templates/front/docs.html

@@ -1,5 +1,5 @@
 {% extends "front/base_docs.html" %}
-{% load staticfiles hc_extras %}
+{% load compress staticfiles hc_extras %}
 
 {% block title %}Documentation - {% site_name %}{% endblock %}
 
@@ -44,7 +44,10 @@ and your command runs. If it completes successfully (exit code 0),
 curl or wget runs a HTTP GET call to the ping URL.
 </p>
 
-{% include "front/snippets/crontab.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/crontab.html" %}
+</div>
 
 <p>With this simple modification, you monitor several failure
 scenarios:</p>
@@ -110,20 +113,41 @@ thing: they fire off a HTTP GET method.</p>
     Ubuntu, for example, does not have curl installed out of the box.
 </p>
 
-{% include "front/snippets/bash.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/bash_curl.html" %}
+</div>
+
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/bash_wget.html" %}
+</div>
 
 <a name="python"></a>
 <h3>Python</h3>
-{% include "front/snippets/python.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/python_urllib2.html" %}
+</div>
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/python_requests.html" %}
+</div>
 
 <a name="node"></a>
 <h3>Node</h3>
-{% include "front/snippets/node.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/node.html" %}
+</div>
 
 
 <a name="php"></a>
 <h3>PHP</h3>
-{% include "front/snippets/php.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/php.html" %}
+</div>
 
 <a name="browser"></a>
 <h3>Browser</h3>
@@ -132,7 +156,10 @@ thing: they fire off a HTTP GET method.</p>
     CORS header in its ping responses, so cross-domain AJAX requests
     should work.
 </p>
-{% include "front/snippets/browser.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/browser.html" %}
+</div>
 
 <a name="powershell"></a>
 <h3>PowerShell</h3>
@@ -146,15 +173,21 @@ When scheduled to run with Task Scheduler, it will essentially
 just send regular "I'm alive" messages. You can of course extend it to
 do more things.</p>
 
-{% include "front/snippets/powershell.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/powershell.html" %}
+</div>
 
 <p>Save the above to e.g. <code>C:\Scripts\healthchecks.ps1</code>. Then use
 the following command in a Scheduled Task to run the script:
 </p>
 
-<pre>
+<div class="snippet">
-powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
+    <button class="copy-snippet-link hidden-sm">copy</button>
-</pre>
+    <div class="highlight">
+        <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
+    </div>
+</div>
 
 <a name="email"></a>
 <h3>Email</h3>
@@ -247,3 +280,11 @@ powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
 </table>
 
 {% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/front/docs_api.html

@@ -1,5 +1,5 @@
 {% extends "front/base_docs.html" %}
-{% load staticfiles hc_extras %}
+{% load compress staticfiles hc_extras %}
 
 {% block title %}REST API - {% site_name %}{% endblock %}
 
@@ -64,7 +64,10 @@ The response may contain a JSON document with additional data.
     a JSON document with all checks in user's account.
 </p>
 <h3 class="api-section">Example Request</h3>
-{% include "front/snippets/list_checks_request.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/list_checks_request.html" %}
+</div>
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/list_checks_response.html" %}
@@ -167,7 +170,17 @@ The response may contain a JSON document with additional data.
 </table>
 
 <h3 class="api-section">Example Request</h3>
-{% include "front/snippets/create_check_request.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/create_check_request_a.html" %}
+</div>
+<br>
+<p>Or, alternatively:</p>
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/create_check_request_b.html" %}
+</div>
+
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/create_check_response.html" %}
@@ -194,10 +207,22 @@ The response may contain a JSON document with additional data.
 </p>
 
 <h3 class="api-section">Example Request</h3>
-{% include "front/snippets/pause_check_request.html" %}
+
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/pause_check_request.html" %}
+</div>
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/pause_check_response.html" %}
 
 
 {% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/front/my_checks.html

@@ -235,25 +235,54 @@
                 <div class="tab-content">
                     {% with ping_url="<span class='ex'></span>" %}
                     <div role="tabpanel" class="tab-pane active" id="crontab">
-                        {% include "front/snippets/crontab.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/crontab.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="bash">
-                        {% include "front/snippets/bash.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/bash_curl.html" %}
+                        </div>
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/bash_wget.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="python">
-                        {% include "front/snippets/python.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/python_urllib2.html" %}
+                        </div>
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/python_requests.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="node">
-                        {% include "front/snippets/node.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/node.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="php">
-                        {% include "front/snippets/php.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/php.html" %}
+                        </div>
                     </div>
                     <div class="tab-pane" id="browser">
-                        {% include "front/snippets/browser.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/browser.html" %}
+                        </div>
                     </div>
                     <div class="tab-pane" id="powershell">
-                        {% include "front/snippets/powershell.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/powershell.html" %}
+                        </div>
                     </div>
                     <div class="tab-pane" id="email">
                             As an alternative to HTTP/HTTPS requests,
@@ -286,6 +315,7 @@
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/snippets/bash_curl.html

@@ -1,7 +1,4 @@
 <div class="highlight"><pre><span></span><span class="c1"># using curl:</span>
 <span class="c1"># (make sure it is installed on your system!)</span>
 curl --retry <span class="m">3</span> {{ ping_url }}
-
-<span class="c1"># using wget:</span>
-wget {{ ping_url }} -O /dev/null
 </pre></div>

templates/front/snippets/bash_curl.txt

@@ -1,6 +1,3 @@
 # using curl:
 # (make sure it is installed on your system!)
 curl --retry 3 PING_URL
-
-# using wget:
-wget PING_URL -O /dev/null

templates/front/snippets/bash_wget.html

@@ -0,0 +1,3 @@
+<div class="highlight"><pre><span></span><span class="c1"># using wget:</span>
+wget {{ ping_url }} -O /dev/null
+</pre></div>

templates/front/snippets/bash_wget.txt

@@ -0,0 +1,2 @@
+# using wget:
+wget PING_URL -O /dev/null

templates/front/snippets/create_check_request.txt

@@ -1,7 +0,0 @@
-curl SITE_ROOT/api/v1/checks/ \
-    --header "X-Api-Key: your-api-key" \
-    --data '{"name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'
-
-# Or, alternatively:
-curl SITE_ROOT/api/v1/checks/ \
-    --data '{"api_key": "your-api-key", "name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'

templates/front/snippets/create_check_request_a.html

@@ -1,8 +1,4 @@
 <div class="highlight"><pre><span></span>curl {{ SITE_ROOT }}/api/v1/checks/ <span class="se">\</span>
     --header <span class="s2">&quot;X-Api-Key: your-api-key&quot;</span> <span class="se">\</span>
     --data <span class="s1">&#39;{&quot;name&quot;: &quot;Backups&quot;, &quot;tags&quot;: &quot;prod www&quot;, &quot;timeout&quot;: 3600, &quot;grace&quot;: 60}&#39;</span>
-
-<span class="c1"># Or, alternatively:</span>
-curl {{ SITE_ROOT }}/api/v1/checks/ <span class="se">\</span>
-    --data <span class="s1">&#39;{&quot;api_key&quot;: &quot;your-api-key&quot;, &quot;name&quot;: &quot;Backups&quot;, &quot;tags&quot;: &quot;prod www&quot;, &quot;timeout&quot;: 3600, &quot;grace&quot;: 60}&#39;</span>
 </pre></div>

templates/front/snippets/create_check_request_a.txt

@@ -0,0 +1,3 @@
+curl SITE_ROOT/api/v1/checks/ \
+    --header "X-Api-Key: your-api-key" \
+    --data '{"name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'

templates/front/snippets/create_check_request_b.html

@@ -0,0 +1,3 @@
+<div class="highlight"><pre><span></span>curl {{ SITE_ROOT }}/api/v1/checks/ <span class="se">\</span>
+    --data <span class="s1">&#39;{&quot;api_key&quot;: &quot;your-api-key&quot;, &quot;name&quot;: &quot;Backups&quot;, &quot;tags&quot;: &quot;prod www&quot;, &quot;timeout&quot;: 3600, &quot;grace&quot;: 60}&#39;</span>
+</pre></div>

templates/front/snippets/create_check_request_b.txt

@@ -0,0 +1,2 @@
+curl SITE_ROOT/api/v1/checks/ \
+    --data '{"api_key": "your-api-key", "name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'

templates/front/snippets/python.html

@@ -1,8 +0,0 @@
-<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="c1"># using urllib2:</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">urllib2</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="n">urllib2</span><span class="o">.</span><span class="n">urlopen</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
-
-<span class="o">&gt;&gt;&gt;</span> <span class="c1"># using requests:</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">requests</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
-</pre></div>

templates/front/snippets/python.txt

@@ -1,7 +0,0 @@
->>> # using urllib2:
->>> import urllib2
->>> urllib2.urlopen("PING_URL")
-
->>> # using requests:
->>> import requests
->>> requests.get("PING_URL")

templates/front/snippets/python_requests.html

@@ -0,0 +1,4 @@
+<div class="highlight"><pre><span></span><span class="c1"># using requests:</span>
+<span class="kn">import</span> <span class="nn">requests</span>
+<span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
+</pre></div>

templates/front/snippets/python_requests.txt

@@ -0,0 +1,3 @@
+# using requests:
+import requests
+requests.get("PING_URL")

templates/front/snippets/python_urllib2.html

@@ -0,0 +1,4 @@
+<div class="highlight"><pre><span></span><span class="c1"># using urllib2:</span>
+<span class="kn">import</span> <span class="nn">urllib2</span>
+<span class="n">urllib2</span><span class="o">.</span><span class="n">urlopen</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
+</pre></div>

templates/front/snippets/python_urllib2.txt

@@ -0,0 +1,3 @@
+# using urllib2:
+import urllib2
+urllib2.urlopen("PING_URL")

templates/front/welcome.html

@@ -59,27 +59,56 @@
             </ul>
             <div class="tab-content">
                 <div role="tabpanel" class="tab-pane active" id="crontab">
-                    {% include "front/snippets/crontab.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/crontab.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="bash">
-                    {% include "front/snippets/bash.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/bash_curl.html" %}
+                    </div>
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/bash_wget.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="python">
-                    {% include "front/snippets/python.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/python_urllib2.html" %}
+                    </div>
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/python_requests.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="node">
-                    {% include "front/snippets/node.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/node.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="php">
-                    {% include "front/snippets/php.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/php.html" %}
+                    </div>
                 </div>
                 <div class="tab-pane" id="browser">
-                    {% include "front/snippets/browser.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/browser.html" %}
+                    </div>
                 </div>
                 <div class="tab-pane" id="powershell">
-                    {% include "front/snippets/powershell.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/powershell.html" %}
+                    </div>
                 </div>
-                <div class="tab-pane" id="email">
+                <div class="tab-pane tab-pane-email" id="email">
                     <div class="instructions">
                         As an alternative to HTTP/HTTPS requests,
                         you can "ping" this check by sending an
@@ -333,7 +362,8 @@
 {% compress js %}
 <script src="{% static 'js/collapse-native.js' %}"></script>
 <script src="{% static 'js/tab-native.js' %}"></script>
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}
 {% endblock %}
-
-