Add the "Badges" page in docs

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
 - Upgrade to HiDPI screenshots in the documentation
 - Add support for the $JSON placeholder in webhook payloads
 - Add ping endpoints for "log" events
+- Add the "Badges" page in docs
 
 ### Bug Fixes
 - Fix the display of ignored pings with non-zero exit status

templates/docs/badges.html

@@ -0,0 +1,36 @@
+<h1>Status Badges</h1>
+<p>SITE_NAME provides status badges that you can embed them in your READMEs, internal
+dashboards or public status pages. Each SITE_NAME badge reports the combined status of
+checks tagged with a particular tag. There is also a catch-all badge which reflects
+the status of all checks in a project.</p>
+<p><img alt="The &quot;Badges&quot; page" src="IMG_URL/badges.png" /></p>
+<p>The badges have public, but hard-to-guess URLs. Badges do not expose any information
+other than the badge label, and the aggregate status of their corresponding checks.
+It is not possible to reverse-engineer ping URLs from badge URLs.</p>
+<h2>Badge States</h2>
+<p>Each badge can be in one of the following three states:</p>
+<ul>
+<li><strong>up</strong> (green) – all matching checks are up.</li>
+<li><strong>late</strong> (orange) – at least one check is running late (but has not exceeded its grace time yet).</li>
+<li><strong>down</strong> (red) – at least one check is currently down.</li>
+</ul>
+<p>By default, SITE_NAME displays badge URLs that report only the
+<strong>up</strong> and <strong>down</strong> states (and treat <strong>late</strong> as <strong>up</strong>). Using the "Badge states"
+button, you can switch to alternate URLs that report all three states.</p>
+<h2>Badge Formats</h2>
+<p>SITE_NAME offers badges in three different formats:</p>
+<ul>
+<li>SVG: returns an SVG document that you can use directly in an <code>&lt;img&gt;</code> element, or
+  in a Markdown document.</li>
+<li>JSON: returns the badge label and the current status as a JSON document. Use this
+  if you want to render the badge yourself. This can also serve as an integration
+  point with a hosted status page: instruct your status page provider to monitor the
+  badge URL, and look for the keyword "up" in the returned data.</li>
+<li>Shields.io: returns the badge label and the current status as a
+  Shields.io-compatible JSON document. See <a href="https://shields.io/endpoint">Shields.io documentation</a>
+  on how to use it. The main benefit of using Shields.io to generate the badges is
+  the extra visual styles and customization options that Shields.io supports.</li>
+</ul>
+<h2>Badge for a Single Check</h2>
+<p>If you need a status badge for a specific check, assign the check an
+unique tag. Then use that tag's badge.</p>

templates/docs/badges.md

@@ -0,0 +1,45 @@
+# Status Badges
+
+SITE_NAME provides status badges that you can embed them in your READMEs, internal
+dashboards or public status pages. Each SITE_NAME badge reports the combined status of
+checks tagged with a particular tag. There is also a catch-all badge which reflects
+the status of all checks in a project.
+
+![The "Badges" page](IMG_URL/badges.png)
+
+The badges have public, but hard-to-guess URLs. Badges do not expose any information
+other than the badge label, and the aggregate status of their corresponding checks.
+It is not possible to reverse-engineer ping URLs from badge URLs.
+
+## Badge States
+
+Each badge can be in one of the following three states:
+
+* **up** (green) – all matching checks are up.
+* **late** (orange) – at least one check is running late (but has not exceeded its grace time yet).
+* **down** (red) – at least one check is currently down.
+
+By default, SITE_NAME displays badge URLs that report only the
+**up** and **down** states (and treat **late** as **up**). Using the "Badge states"
+button, you can switch to alternate URLs that report all three states.
+
+## Badge Formats
+
+SITE_NAME offers badges in three different formats:
+
+* SVG: returns an SVG document that you can use directly in an `<img>` element, or
+  in a Markdown document.
+* JSON: returns the badge label and the current status as a JSON document. Use this
+  if you want to render the badge yourself. This can also serve as an integration
+  point with a hosted status page: instruct your status page provider to monitor the
+  badge URL, and look for the keyword "up" in the returned data.
+* Shields.io: returns the badge label and the current status as a
+  Shields.io-compatible JSON document. See [Shields.io documentation](https://shields.io/endpoint)
+  on how to use it. The main benefit of using Shields.io to generate the badges is
+  the extra visual styles and customization options that Shields.io supports.
+
+## Badge for a Single Check
+
+If you need a status badge for a specific check, assign the check an
+unique tag. Then use that tag's badge.
+

templates/front/base_docs.html

@@ -14,6 +14,7 @@
         {% include "front/docs_nav_item.html" with slug="configuring_checks" title="Configuring checks" %}
         {% include "front/docs_nav_item.html" with slug="configuring_notifications" title="Configuring notifications" %}
         {% include "front/docs_nav_item.html" with slug="projects_teams" title="Projects and teams" %}
+        {% include "front/docs_nav_item.html" with slug="badges" title="Badges" %}
 
         <li class="nav-header">API</li>
         {% include "front/docs_nav_item.html" with slug="http_api" title="Pinging API" %}