Apps can say they work with Gearslip, and each recommended app gets its own page

An app adds one meta-data line to its manifest and Gearslip marks it Works with Gearslip in the
Recommended apps list. Tapping an app opens its page, with an Open or Get button. A README badge
for app developers is in docs/badge, documented in BUILDING_APPS.md.

docs/BUILDING_APPS.md

@@ -469,6 +469,44 @@ home-screen pane comes later. Anything that needs its own rendering belongs in a
 
 ---
 
+## Works with Gearslip
+
+Once your app runs well on Gearslip, say so in two places: your manifest and your README.
+
+### In your manifest
+
+Add these lines to `<application>`:
+
+```xml
+<meta-data
+    android:name="app.seb3thehacker.gearslip.works_with"
+    android:value="true" />
+<meta-data
+    android:name="app.seb3thehacker.gearslip.about"
+    android:resource="@string/gearslip_about" />
+```
+
+Gearslip then marks your app "Works with Gearslip" in its Recommended apps list and on your app's
+page in Gearslip. An installed app with the flag gets its own place at the top of the list.
+
+The second entry is optional. It gives your page one sentence on what your app does in the car,
+such as "Spots trackers and cameras nearby." Write it in place with `android:value` if you have no
+string resource for it.
+
+The flag is a label. Gearslip finds and runs your app the same way with or without it.
+
+### In your README
+
+Add the badge:
+
+```markdown
+[![Works with Gearslip](https://raw.githubusercontent.com/twinksoftware/gearslip/main/docs/badge/works-with-gearslip.svg)](https://github.com/twinksoftware/gearslip)
+```
+
+It matches the flat badges most READMEs already show.
+
+---
+
 ## Further reading
 
 - [README.md](../README.md) - what Gearslip is.

docs/badge/works-with-gearslip.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="147" height="20" role="img" aria-label="Works with Gearslip">
+  <title>Works with Gearslip</title>
+  <clipPath id="r"><rect width="147" height="20" rx="3" fill="#fff"/></clipPath>
+  <g clip-path="url(#r)">
+    <rect width="88" height="20" fill="#555"/>
+    <rect x="88" width="59" height="20" fill="#8C1F1F"/>
+  </g>
+  <g transform="translate(5 3.5) scale(0.228) translate(-29.5 -25.5)" fill="#fff">
+    <path fill-rule="evenodd" d="M54 36.18 58.64 30.7 67.2 34.24 66.6 41.4 71.82 54 77.3 58.64 73.76 67.2 66.6 66.6 67.2 73.76 58.64 77.3 54 71.82 49.36 77.3 40.8 73.76 41.4 66.6 34.24 67.2 30.7 58.64 36.18 54 30.7 49.36 34.24 40.8 41.4 41.4 40.8 34.24 49.36 30.7ZM54 46.08A7.92 7.92 0 1 1 53.99 46.08Z"/>
+    <path d="M78.61 40.7 85.31 43.29 84.74 52.55 77.78 54.31Z"/>
+  </g>
+  <g fill="#fff" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11" text-rendering="geometricPrecision">
+    <text x="22" y="14" textLength="60">works with</text>
+    <text x="94" y="14" textLength="47">Gearslip</text>
+  </g>
+</svg>