Merge branch 'cdax-snippet-copy'

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/base.css

@@ -74,4 +74,8 @@ body {
 
 .dialog-body {
     margin: 24px 0;
+}
+
+pre {
+  border: 0;
 }

static/css/docs.css

@@ -55,7 +55,8 @@ a.section:hover  {
 .page-docs code {
     padding: 2px 4px;
     font-size: 90%;
-    color: #427d5e;
-    background-color: #f2f9f6;
+    color: #333;
+    background-color: #f5f5f5;
     border-radius: 4px;
-}
+}
+

static/css/icomoon.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?j2asdo');
-  src:  url('../fonts/icomoon.eot?j2asdo#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?j2asdo') format('truetype'),
-    url('../fonts/icomoon.woff?j2asdo') format('woff'),
-    url('../fonts/icomoon.svg?j2asdo#icomoon') format('svg');
+  src:  url('../fonts/icomoon.eot?cxijqz');
+  src:  url('../fonts/icomoon.eot?cxijqz#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?cxijqz') format('truetype'),
+    url('../fonts/icomoon.woff?cxijqz') format('woff'),
+    url('../fonts/icomoon.svg?cxijqz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-clippy:before {
+  content: "\e900";
+}
 .icon-cancel:before {
   content: "\e5c9";
 }

static/css/my_checks.css

@@ -63,11 +63,20 @@
     font-style: normal;
 }
 
-
 #show-usage-modal  .modal-dialog {
      width: 1100px;
- }
+}
+
+#show-usage-modal .modal-body {
+    padding: 0;
+}
+
+#show-usage-modal pre {
+    margin: 0;
+    padding: 15px;
+}
+
+#show-usage-modal .highlight:nth-child(n+2) {
+    border-top: 1px solid #ddd;
+}
 
- #show-usage-modal .tab-content {
-     margin-top: 15px;
- }

static/css/snippet-copy.css

@@ -0,0 +1,15 @@
+.highlight {
+    position: relative;
+}
+
+.highlight button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    opacity: 0;
+    transition: opacity 0.1s linear;
+}
+
+.highlight:hover button {
+    opacity: 1
+}

static/css/welcome.css

@@ -50,26 +50,6 @@
     margin-bottom: 0;
 }
 
-.page-welcome .highlight pre {
-    background: #FFF;
-    border-top: 0;
-    border-radius: 0;
-    border-color: #dddddd;
-}
-
-#email .instructions {
-    background: #FFF;
-    border: 1px solid #dddddd;
-    border-top: 0;
-    padding: 10px;
-}
-
-#email .email-address {
-    font-size: 18px;
-    padding-top: 10px;
-}
-
-
 #get-started {
     margin-top: 4em;
 }
@@ -86,4 +66,28 @@
 .welcome-integrations img {
     width: 22px;
     height: 22px;
-}
+}
+
+.page-welcome .tab-content {
+    border: 1px solid #ddd;
+    border-top: 0;
+}
+
+.tab-pane p {
+    padding: 15px;
+    margin: 0;
+}
+
+.page-welcome .highlight:nth-child(n+2) {
+    border-top: 1px solid #ddd;
+}
+
+.page-welcome .tab-pane pre {
+    margin-bottom: 0;
+    background: transparent;
+    padding: 15px;
+}
+
+.tab-pane.tab-pane-email {
+  border: none;
+}

static/fonts/icomoon.svg

@@ -19,4 +19,5 @@
 <glyph unicode="&#xe86d;" glyph-name="ok" d="M426 212.667l384 384-60 62-324-324-152 152-60-60zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe872;" glyph-name="delete" d="M810 768.667v-86h-596v86h148l44 42h212l44-42h148zM256 128.667v512h512v-512c0-46-40-86-86-86h-340c-46 0-86 40-86 86z" />
 <glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
+<glyph unicode="&#xe900;" glyph-name="clippy" horiz-adv-x="896" d="M704 64h-640v576h640v-192h64v320c0 35-29 64-64 64h-192c0 71-57 128-128 128s-128-57-128-128h-192c-35 0-64-29-64-64v-704c0-35 29-64 64-64h640c35 0 64 29 64 64v128h-64v-128zM192 768c29 0 29 0 64 0s64 29 64 64 29 64 64 64 64-29 64-64 32-64 64-64 33 0 64 0 64-29 64-64h-512c0 39 28 64 64 64zM128 256h128v64h-128v-64zM576 384v128l-256-192 256-192v128h320v128h-320zM128 128h192v64h-192v-64zM448 576h-320v-64h320v64zM256 448h-128v-64h128v64z" />
 </font></defs></svg>

static/js/snippet-copy.js

@@ -0,0 +1,41 @@
+$(function() {
+    if (/Mac/i.test(navigator.userAgent)) {
+        // No support for Safari :(
+        return;
+    }
+
+    var markup = '<button class="btn btn-default hidden-sm">' +
+                 '<span class="icon-clippy"></span>' +
+                 '</button>';
+
+
+
+    $(".highlight").append(markup);
+
+
+    var reBlankLines = new RegExp("^\\s*[\\r\\n]", "gm");
+    var reTrailingWhitespace = new RegExp("\\s+$");
+
+    var clipboard = new Clipboard(".highlight button", {
+        text: function (trigger) {
+            var snippetElement = $(trigger).parent().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)
+            .tooltip({title: "Copied!", trigger: "hover"})
+            .tooltip("show")
+            .on("hidden.bs.tooltip", function(){
+                $(this).tooltip("destroy");
+            })
+    });
+
+    clipboard.on("error", function(e) {
+        prompt("Press Ctrl+C to select:", e.text)
+    });
+});

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 %}
 
@@ -110,17 +110,18 @@ 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" %}
+{% include "front/snippets/bash_curl.html" %}
+{% include "front/snippets/bash_wget.html" %}
 
 <a name="python"></a>
 <h3>Python</h3>
-{% include "front/snippets/python.html" %}
+{% include "front/snippets/python_urllib2.html" %}
+{% include "front/snippets/python_requests.html" %}
 
 <a name="node"></a>
 <h3>Node</h3>
 {% include "front/snippets/node.html" %}
 
-
 <a name="php"></a>
 <h3>PHP</h3>
 {% include "front/snippets/php.html" %}
@@ -152,9 +153,9 @@ do more things.</p>
 the following command in a Scheduled Task to run the script:
 </p>
 
-<pre>
-powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
-</pre>
+<div class="highlight">
+    <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
+</div>
 
 <a name="email"></a>
 <h3>Email</h3>
@@ -247,3 +248,12 @@ 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/bootstrap.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 %}
 
@@ -167,7 +167,11 @@ 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" %}
+{% include "front/snippets/create_check_request_a.html" %}
+<br>
+<p>Or, alternatively:</p>
+{% include "front/snippets/create_check_request_b.html" %}
+
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/create_check_response.html" %}
@@ -194,6 +198,7 @@ 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" %}
 
 <h3 class="api-section">Example Response</h3>
@@ -201,3 +206,12 @@ The response may contain a JSON document with additional data.
 
 
 {% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.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

@@ -230,18 +230,18 @@
 
             </div>
             <div class="modal-body">
-
-
                 <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>
                     <div role="tabpanel" class="tab-pane" id="bash">
-                        {% include "front/snippets/bash.html" %}
+                        {% include "front/snippets/bash_curl.html" %}
+                        {% include "front/snippets/bash_wget.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="python">
-                        {% include "front/snippets/python.html" %}
+                        {% include "front/snippets/python_urllib2.html" %}
+                        {% include "front/snippets/python_requests.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="node">
                         {% include "front/snippets/node.html" %}
@@ -256,12 +256,11 @@
                         {% include "front/snippets/powershell.html" %}
                     </div>
                     <div class="tab-pane" id="email">
-                            As an alternative to HTTP/HTTPS requests,
-                            you can "ping" this check by sending an
-                            email message to
-                            <div class="email-address">
-                                <code class="em"></code>
-                            </div>
+                        <p>
+                        As an alternative to HTTP/HTTPS requests,
+                        you can "ping" this check by sending an
+                        email message to <code class="em"></code>
+                        </p>
                     </div>
                     {% endwith %}
                 </div>
@@ -286,6 +285,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_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/browser.html

@@ -1,4 +1,5 @@
-<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
+<div class="highlight"><pre><span></span><span class="c1">// the server returns appropriate CORS headers so cross-domain AJAX requests should work:</span>
+<span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
 <span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">&#39;GET&#39;</span><span class="p">,</span> <span class="s1">&#39;{{ ping_url }}&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
 <span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
 </pre></div>

templates/front/snippets/browser.txt

@@ -1,3 +1,4 @@
+// the server returns appropriate CORS headers so cross-domain AJAX requests should work:
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'PING_URL', true);
 xhr.send(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.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

@@ -62,10 +62,12 @@
                     {% include "front/snippets/crontab.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="bash">
-                    {% include "front/snippets/bash.html" %}
+                    {% include "front/snippets/bash_curl.html" %}
+                    {% include "front/snippets/bash_wget.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="python">
-                    {% include "front/snippets/python.html" %}
+                    {% include "front/snippets/python_urllib2.html" %}
+                    {% include "front/snippets/python_requests.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="node">
                     {% include "front/snippets/node.html" %}
@@ -79,15 +81,13 @@
                 <div class="tab-pane" id="powershell">
                     {% include "front/snippets/powershell.html" %}
                 </div>
-                <div class="tab-pane" id="email">
-                    <div class="instructions">
+                <div class="tab-pane tab-pane-email" id="email">
+                    <p>
                         As an alternative to HTTP/HTTPS requests,
                         you can "ping" this check by sending an
                         email message to
-                        <div class="email-address">
-                            <code>{{ check.email }}</code>
-                        </div>
-                    </div>
+                        <a href="mailto:{{ check.email }}">{{ check.email }}</a>
+                    </p>
                 </div>
             </div>
         </div>
@@ -331,9 +331,9 @@
 
 {% block scripts %}
 {% 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/bootstrap.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}
 {% endblock %}
-
-