From 4e260421f0a2a5cbc0a3d38fe66a8ed385c51c90 Mon Sep 17 00:00:00 2001 From: Chitharanjan Das Date: Sat, 1 Oct 2016 10:27:48 +0530 Subject: [PATCH] Adds 'copy to clipboard' function to example code snippets --- hc/front/management/commands/pygmentize.py | 9 ++- static/css/docs.css | 6 +- static/css/my_checks.css | 9 +++ static/css/snippet-copy.css | 44 +++++++++++++ static/css/welcome.css | 13 +++- static/js/snippet-copy.js | 26 ++++++++ templates/base.html | 1 + templates/front/docs.html | 63 +++++++++++++++---- templates/front/docs_api.html | 33 ++++++++-- templates/front/my_checks.html | 44 ++++++++++--- .../snippets/{bash.html => bash_curl.html} | 3 - .../snippets/{bash.txt => bash_curl.txt} | 3 - templates/front/snippets/bash_wget.html | 3 + templates/front/snippets/bash_wget.txt | 2 + .../front/snippets/create_check_request.txt | 7 --- ...quest.html => create_check_request_a.html} | 4 -- .../front/snippets/create_check_request_a.txt | 3 + .../snippets/create_check_request_b.html | 3 + .../front/snippets/create_check_request_b.txt | 2 + templates/front/snippets/python.html | 8 --- templates/front/snippets/python.txt | 7 --- templates/front/snippets/python_requests.html | 4 ++ templates/front/snippets/python_requests.txt | 3 + templates/front/snippets/python_urllib2.html | 4 ++ templates/front/snippets/python_urllib2.txt | 3 + templates/front/welcome.html | 50 ++++++++++++--- 26 files changed, 288 insertions(+), 69 deletions(-) create mode 100644 static/css/snippet-copy.css create mode 100644 static/js/snippet-copy.js rename templates/front/snippets/{bash.html => bash_curl.html} (74%) rename templates/front/snippets/{bash.txt => bash_curl.txt} (67%) create mode 100644 templates/front/snippets/bash_wget.html create mode 100644 templates/front/snippets/bash_wget.txt delete mode 100644 templates/front/snippets/create_check_request.txt rename templates/front/snippets/{create_check_request.html => create_check_request_a.html} (54%) create mode 100644 templates/front/snippets/create_check_request_a.txt create mode 100644 templates/front/snippets/create_check_request_b.html create mode 100644 templates/front/snippets/create_check_request_b.txt delete mode 100644 templates/front/snippets/python.html delete mode 100644 templates/front/snippets/python.txt create mode 100644 templates/front/snippets/python_requests.html create mode 100644 templates/front/snippets/python_requests.txt create mode 100644 templates/front/snippets/python_urllib2.html create mode 100644 templates/front/snippets/python_urllib2.txt diff --git a/hc/front/management/commands/pygmentize.py b/hc/front/management/commands/pygmentize.py index 29835a45..0972692e 100644 --- a/hc/front/management/commands/pygmentize.py +++ b/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()) diff --git a/static/css/docs.css b/static/css/docs.css index 4455b211..c50fc5dd 100644 --- a/static/css/docs.css +++ b/static/css/docs.css @@ -58,4 +58,8 @@ a.section:hover { color: #427d5e; background-color: #f2f9f6; border-radius: 4px; -} \ No newline at end of file +} + +.snippet pre { + border: 1px solid #cccccc; +} diff --git a/static/css/my_checks.css b/static/css/my_checks.css index 6a1a9254..c9f5924d 100644 --- a/static/css/my_checks.css +++ b/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; + } diff --git a/static/css/snippet-copy.css b/static/css/snippet-copy.css new file mode 100644 index 00000000..2e53acfc --- /dev/null +++ b/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; +} diff --git a/static/css/welcome.css b/static/css/welcome.css index 9aca0590..7834726d 100644 --- a/static/css/welcome.css +++ b/static/css/welcome.css @@ -86,4 +86,15 @@ .welcome-integrations img { width: 22px; height: 22px; -} \ No newline at end of file +} + +.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; +} diff --git a/static/js/snippet-copy.js b/static/js/snippet-copy.js new file mode 100644 index 00000000..cc8225c2 --- /dev/null +++ b/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); + }) +}); diff --git a/templates/base.html b/templates/base.html index 1d53c866..5f150e34 100644 --- a/templates/base.html +++ b/templates/base.html @@ -17,6 +17,7 @@ + diff --git a/templates/front/docs.html b/templates/front/docs.html index 676864ed..7380450a 100644 --- a/templates/front/docs.html +++ b/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.

-{% include "front/snippets/crontab.html" %} +
+ + {% include "front/snippets/crontab.html" %} +

With this simple modification, you monitor several failure scenarios:

@@ -110,20 +113,41 @@ thing: they fire off a HTTP GET method.

Ubuntu, for example, does not have curl installed out of the box.

-{% include "front/snippets/bash.html" %} +
+ + {% include "front/snippets/bash_curl.html" %} +
+ +
+ + {% include "front/snippets/bash_wget.html" %} +

Python

-{% include "front/snippets/python.html" %} +
+ + {% include "front/snippets/python_urllib2.html" %} +
+
+ + {% include "front/snippets/python_requests.html" %} +

Node

-{% include "front/snippets/node.html" %} +
+ + {% include "front/snippets/node.html" %} +

PHP

-{% include "front/snippets/php.html" %} +
+ + {% include "front/snippets/php.html" %} +

Browser

@@ -132,7 +156,10 @@ thing: they fire off a HTTP GET method.

CORS header in its ping responses, so cross-domain AJAX requests should work.

-{% include "front/snippets/browser.html" %} +
+ + {% include "front/snippets/browser.html" %} +

PowerShell

@@ -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.

-{% include "front/snippets/powershell.html" %} +
+ + {% include "front/snippets/powershell.html" %} +

Save the above to e.g. C:\Scripts\healthchecks.ps1. Then use the following command in a Scheduled Task to run the script:

-
-powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
-
+
+ +
+ 
powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
+
+

Email

@@ -247,3 +280,11 @@ powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1 {% endblock %} + +{% block scripts %} +{% compress js %} + + + +{% endcompress %} +{% endblock %} diff --git a/templates/front/docs_api.html b/templates/front/docs_api.html index 21998e56..9c61f2e1 100644 --- a/templates/front/docs_api.html +++ b/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.

Example Request

-{% include "front/snippets/list_checks_request.html" %} +
+ + {% include "front/snippets/list_checks_request.html" %} +

Example Response

{% include "front/snippets/list_checks_response.html" %} @@ -167,7 +170,17 @@ The response may contain a JSON document with additional data.

Example Request

-{% include "front/snippets/create_check_request.html" %} +
+ + {% include "front/snippets/create_check_request_a.html" %} +
+
+

Or, alternatively:

+
+ + {% include "front/snippets/create_check_request_b.html" %} +
+

Example Response

{% include "front/snippets/create_check_response.html" %} @@ -194,10 +207,22 @@ The response may contain a JSON document with additional data.

Example Request

-{% include "front/snippets/pause_check_request.html" %} + +
+ + {% include "front/snippets/pause_check_request.html" %} +

Example Response

{% include "front/snippets/pause_check_response.html" %} {% endblock %} + +{% block scripts %} +{% compress js %} + + + +{% endcompress %} +{% endblock %} diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html index 75a86ad8..8da40727 100644 --- a/templates/front/my_checks.html +++ b/templates/front/my_checks.html @@ -235,25 +235,54 @@
{% with ping_url="" %}
- {% include "front/snippets/crontab.html" %} +
+ + {% include "front/snippets/crontab.html" %} +
- {% include "front/snippets/bash.html" %} +
+ + {% include "front/snippets/bash_curl.html" %} +
+
+ + {% include "front/snippets/bash_wget.html" %} +
- {% include "front/snippets/python.html" %} +
+ + {% include "front/snippets/python_urllib2.html" %} +
+
+ + {% include "front/snippets/python_requests.html" %} +
- {% include "front/snippets/node.html" %} +
+ + {% include "front/snippets/node.html" %} +
- {% include "front/snippets/php.html" %} +
+ + {% include "front/snippets/php.html" %} +
- {% include "front/snippets/browser.html" %} +
+ + {% include "front/snippets/browser.html" %} +
- {% include "front/snippets/powershell.html" %} +
+ + {% include "front/snippets/powershell.html" %} +
As an alternative to HTTP/HTTPS requests, @@ -286,6 +315,7 @@ + {% endcompress %} {% endblock %} diff --git a/templates/front/snippets/bash.html b/templates/front/snippets/bash_curl.html similarity index 74% rename from templates/front/snippets/bash.html rename to templates/front/snippets/bash_curl.html index 53022156..1df710c1 100644 --- a/templates/front/snippets/bash.html +++ b/templates/front/snippets/bash_curl.html @@ -1,7 +1,4 @@ 
# using curl:
 # (make sure it is installed on your system!)
 curl --retry 3 {{ ping_url }}
-
-# using wget:
-wget {{ ping_url }} -O /dev/null
diff --git a/templates/front/snippets/bash.txt b/templates/front/snippets/bash_curl.txt similarity index 67% rename from templates/front/snippets/bash.txt rename to templates/front/snippets/bash_curl.txt index 934d7f91..2279949f 100644 --- a/templates/front/snippets/bash.txt +++ b/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 \ No newline at end of file diff --git a/templates/front/snippets/bash_wget.html b/templates/front/snippets/bash_wget.html new file mode 100644 index 00000000..060a5c65 --- /dev/null +++ b/templates/front/snippets/bash_wget.html @@ -0,0 +1,3 @@ +
# using wget:
+wget {{ ping_url }} -O /dev/null
+
diff --git a/templates/front/snippets/bash_wget.txt b/templates/front/snippets/bash_wget.txt new file mode 100644 index 00000000..e309edb3 --- /dev/null +++ b/templates/front/snippets/bash_wget.txt @@ -0,0 +1,2 @@ +# using wget: +wget PING_URL -O /dev/null diff --git a/templates/front/snippets/create_check_request.txt b/templates/front/snippets/create_check_request.txt deleted file mode 100644 index 86d59fd3..00000000 --- a/templates/front/snippets/create_check_request.txt +++ /dev/null @@ -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}' diff --git a/templates/front/snippets/create_check_request.html b/templates/front/snippets/create_check_request_a.html similarity index 54% rename from templates/front/snippets/create_check_request.html rename to templates/front/snippets/create_check_request_a.html index 8e497dfa..e6cc06ff 100644 --- a/templates/front/snippets/create_check_request.html +++ b/templates/front/snippets/create_check_request_a.html @@ -1,8 +1,4 @@ 
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}'
diff --git a/templates/front/snippets/create_check_request_a.txt b/templates/front/snippets/create_check_request_a.txt new file mode 100644 index 00000000..e7e4d5db --- /dev/null +++ b/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}' diff --git a/templates/front/snippets/create_check_request_b.html b/templates/front/snippets/create_check_request_b.html new file mode 100644 index 00000000..a824f47f --- /dev/null +++ b/templates/front/snippets/create_check_request_b.html @@ -0,0 +1,3 @@ +
curl {{ SITE_ROOT }}/api/v1/checks/ \
+    --data '{"api_key": "your-api-key", "name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'
+
diff --git a/templates/front/snippets/create_check_request_b.txt b/templates/front/snippets/create_check_request_b.txt new file mode 100644 index 00000000..40838f18 --- /dev/null +++ b/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}' diff --git a/templates/front/snippets/python.html b/templates/front/snippets/python.html deleted file mode 100644 index f75fd980..00000000 --- a/templates/front/snippets/python.html +++ /dev/null @@ -1,8 +0,0 @@ -
>>> # using urllib2:
->>> import urllib2
->>> urllib2.urlopen("{{ ping_url }}")
-
->>> # using requests:
->>> import requests
->>> requests.get("{{ ping_url }}")
-
diff --git a/templates/front/snippets/python.txt b/templates/front/snippets/python.txt deleted file mode 100644 index b37e2a01..00000000 --- a/templates/front/snippets/python.txt +++ /dev/null @@ -1,7 +0,0 @@ ->>> # using urllib2: ->>> import urllib2 ->>> urllib2.urlopen("PING_URL") - ->>> # using requests: ->>> import requests ->>> requests.get("PING_URL") \ No newline at end of file diff --git a/templates/front/snippets/python_requests.html b/templates/front/snippets/python_requests.html new file mode 100644 index 00000000..a97a4ff2 --- /dev/null +++ b/templates/front/snippets/python_requests.html @@ -0,0 +1,4 @@ +
# using requests:
+import requests
+requests.get("{{ ping_url }}")
+
diff --git a/templates/front/snippets/python_requests.txt b/templates/front/snippets/python_requests.txt new file mode 100644 index 00000000..72a8fb89 --- /dev/null +++ b/templates/front/snippets/python_requests.txt @@ -0,0 +1,3 @@ +# using requests: +import requests +requests.get("PING_URL") diff --git a/templates/front/snippets/python_urllib2.html b/templates/front/snippets/python_urllib2.html new file mode 100644 index 00000000..7fd2b041 --- /dev/null +++ b/templates/front/snippets/python_urllib2.html @@ -0,0 +1,4 @@ +
# using urllib2:
+import urllib2
+urllib2.urlopen("{{ ping_url }}")
+
diff --git a/templates/front/snippets/python_urllib2.txt b/templates/front/snippets/python_urllib2.txt new file mode 100644 index 00000000..44c514c8 --- /dev/null +++ b/templates/front/snippets/python_urllib2.txt @@ -0,0 +1,3 @@ +# using urllib2: +import urllib2 +urllib2.urlopen("PING_URL") diff --git a/templates/front/welcome.html b/templates/front/welcome.html index f1cf0dea..b9d4da42 100644 --- a/templates/front/welcome.html +++ b/templates/front/welcome.html @@ -59,27 +59,56 @@
- {% include "front/snippets/crontab.html" %} +
+ + {% include "front/snippets/crontab.html" %} +
- {% include "front/snippets/bash.html" %} +
+ + {% include "front/snippets/bash_curl.html" %} +
+
+ + {% include "front/snippets/bash_wget.html" %} +
- {% include "front/snippets/python.html" %} +
+ + {% include "front/snippets/python_urllib2.html" %} +
+
+ + {% include "front/snippets/python_requests.html" %} +
- {% include "front/snippets/node.html" %} +
+ + {% include "front/snippets/node.html" %} +
- {% include "front/snippets/php.html" %} +
+ + {% include "front/snippets/php.html" %} +
- {% include "front/snippets/browser.html" %} +
+ + {% include "front/snippets/browser.html" %} +
- {% include "front/snippets/powershell.html" %} +
+ + {% include "front/snippets/powershell.html" %} +
-
+
As an alternative to HTTP/HTTPS requests, you can "ping" this check by sending an @@ -333,7 +362,8 @@ {% compress js %} + + + {% endcompress %} {% endblock %} - -