From 3b342b7e039e9bf16d26d41e9b156f88adc4131c Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinkle@fastmail.com>
Date: Fri, 11 Oct 2024 02:26:52 +0100
Subject: [PATCH] Docs: Add "Badge" page

Closes https://github.com/qunitjs/qunit/issues/1750.
---
 docs/_data/sitenav.yml |  2 ++
 docs/badge.md          | 20 ++++++++++++++++++++
 docs/brand.md          |  4 ++++
 docs/testedwith.svg    |  1 +
 4 files changed, 27 insertions(+)
 create mode 100644 docs/badge.md
 create mode 100644 docs/testedwith.svg

diff --git a/docs/_data/sitenav.yml b/docs/_data/sitenav.yml
index 380e99f9d..b3479fda7 100644
--- a/docs/_data/sitenav.yml
+++ b/docs/_data/sitenav.yml
@@ -24,5 +24,7 @@
       href: /browser/#browser-support
     - name: About QUnit
       href: /about/
+    - name: Badge
+      href: /badge/
     - name: Brand Guidelines
       href: /brand/
diff --git a/docs/badge.md b/docs/badge.md
new file mode 100644
index 000000000..186f032a2
--- /dev/null
+++ b/docs/badge.md
@@ -0,0 +1,20 @@
+---
+layout: page
+title: Tested with QUnit Badge
+---
+
+<p class="lead">Use the following markup to embed a "Tested with QUnit" badge in your documentation.</p>
+
+[![Tested with QUnit](./testedwith.svg)](/)
+
+Copy the Markdown snippet, and e.g. paste above the title your README.
+
+```md
+[![Tested with QUnit](https://qunitjs.com/testedwith.svg)](https://qunitjs.com/)
+```
+
+HTML version:
+
+```html
+<a href="https://qunitjs.com/"><img src="https://qunitjs.com/testedwith.svg" alt="Tested with QUnit"></a>
+```
diff --git a/docs/brand.md b/docs/brand.md
index f0ff41625..0884359d7 100644
--- a/docs/brand.md
+++ b/docs/brand.md
@@ -83,3 +83,7 @@ You can browse the [2013 version of the website](https://web.archive.org/web/201
 In 2018, Trent Willis [designed](https://github.com/qunitjs/qunitjs.com/issues/151#issuecomment-655154878) a new homepage for QUnit. In 2020, Timo Tijhof [launched](https://github.com/qunitjs/qunit/issues/1458#issuecomment-661576550) the redesign with a matching redesign of the API documentation. The QUnit site framework is published as [jekyll-theme-amethyst](https://github.com/qunitjs/jekyll-theme-amethyst).
 
 ![](/img/2020-website-qunit.png)
+
+## Tested with QUnit Badge
+
+Refer to [Badge](./badge.md) for markup to embed in your README.
diff --git a/docs/testedwith.svg b/docs/testedwith.svg
new file mode 100644
index 000000000..b077c176e
--- /dev/null
+++ b/docs/testedwith.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="20" role="img" aria-label="tested with: qunit"><title>tested with: qunit</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="badge"><rect width="110" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#badge)"><rect width="71" height="20" fill="#555"/><rect x="71" width="39" height="20" fill="#9c3493"/><rect width="110" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="610">tested with</text><text x="365" y="140" transform="scale(.1)" fill="#fff" textLength="610">tested with</text><text aria-hidden="true" x="895" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="290">qunit</text><text x="895" y="140" transform="scale(.1)" fill="#fff" textLength="290">qunit</text></g></svg>