docs: add support links and repo badges to docs pages

Author: jsmith3rd

docs/.vitepress/theme/custom.css

@@ -53,6 +53,15 @@ abbr {
   border-radius: 8px;
 }
 
+/* Repo badges (shields.io and GitHub Actions) sit in a row. VitePress makes every
+   img a block, which would stack them one per line. */
+.vp-doc img[src^='https://img.shields.io/'],
+.vp-doc img[src$='/badge.svg'] {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 3px;
+}
+
 /* ---- Noir identity -------------------------------------------------------
    Hard edges, strong contrast and one grey, to match the logo. */
 
@@ -252,3 +261,66 @@ abbr {
     transform: none;
   }
 }
+
+/* ---- Support links (home page) -------------------------------------------
+   Two equal-weight outlined buttons, so neither service is pushed over the other.
+   44px tall to meet touch-target guidance; they fill to solid on hover and focus. */
+.bn-support {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 20px 0;
+}
+
+.vp-doc a.bn-support-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 0 20px;
+  border: 1px solid var(--bn-line-strong);
+  border-radius: var(--bn-radius);
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.vp-doc a.bn-support-link:hover,
+.vp-doc a.bn-support-link:focus-visible {
+  background-color: var(--vp-c-brand-1);
+  color: var(--vp-c-bg);
+}
+
+.bn-support-ext {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.bn-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 480px) {
+  .vp-doc a.bn-support-link {
+    flex: 1 1 100%;
+    justify-content: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vp-doc a.bn-support-link {
+    transition: none;
+  }
+}

docs/apps/callrx.md

@@ -6,6 +6,8 @@ title: callrx
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fcallrx-181717?logo=github)](https://github.com/binarynoir/callrx) [![Latest release](https://img.shields.io/github/v/release/binarynoir/callrx)](https://github.com/binarynoir/callrx/releases/latest) [![CI](https://github.com/binarynoir/callrx/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/callrx/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/callrx)](https://github.com/binarynoir/callrx/blob/main/LICENSE)
+
 callrx looks up US amateur radio callsigns from your terminal. It pulls the license record from the FCC Universal Licensing System and prints it with color, clickable links and a clean table layout.
 
 ## Install

docs/apps/noircon.md

@@ -6,6 +6,8 @@ title: NoirCon
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fnoircon-181717?logo=github)](https://github.com/binarynoir/noircon) [![Latest release](https://img.shields.io/github/v/release/binarynoir/noircon)](https://github.com/binarynoir/noircon/releases/latest) [![CI](https://github.com/binarynoir/noircon/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/noircon/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/noircon)](https://github.com/binarynoir/noircon/blob/main/LICENSE)
+
 NoirCon checks whether websites, servers and network services are reachable, and notifies you when one stops responding and again when it comes back. Notifications can go to your desktop (macOS, Linux and Windows) or to your phone through Pushover.
 
 ## What it can check

docs/apps/noirwatch.md

@@ -6,6 +6,8 @@ title: NoirWatch
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fnoirwatch-181717?logo=github)](https://github.com/binarynoir/noirwatch) [![Latest release](https://img.shields.io/github/v/release/binarynoir/noirwatch)](https://github.com/binarynoir/noirwatch/releases/latest) [![CI](https://github.com/binarynoir/noirwatch/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/noirwatch/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/noirwatch)](https://github.com/binarynoir/noirwatch/blob/main/LICENSE)
+
 NoirWatch watches web pages and notifies you when one changes. Notifications can go to your desktop (macOS, Linux and Windows) or to your phone through Pushover.
 
 ## Features

docs/index.md

@@ -100,7 +100,7 @@ features:
 - **Want a tool for your terminal?** Pick one on the [apps page](/apps/). Each installs with one Homebrew command.
 - **Building a site like this one?** Read [how this site works](/guide/how-this-site-works) and copy what is useful.
 
-## Install the whole toolkit
+## Install the whole VitePress toolkit
 
 ```sh
 npm install --save-dev \
@@ -116,3 +116,20 @@ npm install --save-dev \
 ```
 
 Every plugin is optional and independent. Take one, or take them all. Each plugin's page shows how to register it, and the VitePress plugins need Node 22 or newer.
+
+## Support the work
+
+Every plugin and app here is free and MIT-licensed. There are no paid tiers and nothing held back. If one of them saved you time, a contribution helps keep them maintained, documented and moving along the [roadmap](/apps/roadmap).
+
+<div class="bn-support">
+  <a class="bn-support-link" href="https://buymeacoffee.com/binarynoir" target="_blank" rel="noopener">Buy Me a Coffee<span class="bn-support-ext" aria-hidden="true">↗</span><span class="bn-sr-only"> (opens in a new tab)</span></a>
+  <a class="bn-support-link" href="https://ko-fi.com/binarynoir" target="_blank" rel="noopener">Ko-fi<span class="bn-support-ext" aria-hidden="true">↗</span><span class="bn-sr-only"> (opens in a new tab)</span></a>
+</div>
+
+Both open on the service's own site, which handles the payment, so this site never sees your details. Contributing is optional, and everything stays free either way.
+
+Not in a position to give? These help too:
+
+- Star the repos you use on [GitHub](https://github.com/binarynoir).
+- Report a bug or suggest a feature in a repo's issues.
+- Tell a teammate or friend about a tool that would help them.

docs/plugins/auto-navbar.md

@@ -6,6 +6,8 @@ title: Auto Navbar
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fvitepress--auto--navbar-181717?logo=github)](https://github.com/binarynoir/vitepress-auto-navbar) [![npm version](https://img.shields.io/npm/v/@binarynoir/vitepress-auto-navbar)](https://www.npmjs.com/package/@binarynoir/vitepress-auto-navbar) [![CI](https://github.com/binarynoir/vitepress-auto-navbar/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/vitepress-auto-navbar/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/vitepress-auto-navbar)](https://github.com/binarynoir/vitepress-auto-navbar/blob/main/LICENSE)
+
 `@binarynoir/vitepress-auto-navbar` is the companion to [Auto Sidebar](/plugins/auto-sidebar). It builds `themeConfig.nav` from the same folder scan, with the same ordering and exclusion syntax, in `.nav` files.
 
 ## See it live

docs/plugins/auto-sidebar.md

@@ -6,6 +6,8 @@ title: Auto Sidebar
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fvitepress--auto--sidebar-181717?logo=github)](https://github.com/binarynoir/vitepress-auto-sidebar) [![npm version](https://img.shields.io/npm/v/@binarynoir/vitepress-auto-sidebar)](https://www.npmjs.com/package/@binarynoir/vitepress-auto-sidebar) [![CI](https://github.com/binarynoir/vitepress-auto-sidebar/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/vitepress-auto-sidebar/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/vitepress-auto-sidebar)](https://github.com/binarynoir/vitepress-auto-sidebar/blob/main/LICENSE)
+
 `@binarynoir/vitepress-auto-sidebar` builds your sidebar by scanning your docs folder, so you stop hand-maintaining `themeConfig.sidebar`. Add a Markdown file and it appears in the sidebar, titled from its heading.
 
 ## See it live

docs/plugins/downloads.md

@@ -6,6 +6,8 @@ title: Downloads
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fvitepress--downloads-181717?logo=github)](https://github.com/binarynoir/vitepress-downloads) [![npm version](https://img.shields.io/npm/v/@binarynoir/vitepress-downloads)](https://www.npmjs.com/package/@binarynoir/vitepress-downloads) [![CI](https://github.com/binarynoir/vitepress-downloads/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/vitepress-downloads/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/vitepress-downloads)](https://github.com/binarynoir/vitepress-downloads/blob/main/LICENSE)
+
 `@binarynoir/vitepress-downloads` turns a folder named `downloads` into downloadable files, linked with a plain relative path. VitePress is built for pages, so a `.sql`, `.zip` or `.xlsx` normally has to be copied into `public/` and linked by an absolute URL. With this plugin the file stays next to the page that uses it.
 
 ```txt

docs/plugins/glossary/index.md

@@ -6,6 +6,8 @@ title: Glossary Tooltips
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fmarkdown--it--glossary-181717?logo=github)](https://github.com/binarynoir/markdown-it-glossary) [![npm version](https://img.shields.io/npm/v/markdown-it-glossary)](https://www.npmjs.com/package/markdown-it-glossary) [![CI](https://github.com/binarynoir/markdown-it-glossary/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/markdown-it-glossary/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/markdown-it-glossary)](https://github.com/binarynoir/markdown-it-glossary/blob/main/LICENSE)
+
 `markdown-it-glossary` lets you define a term once, in a plain Markdown file, and wraps every plain-text mention of it across your site in a hover tooltip. No linking each mention by hand, no repeating the definition on every page.
 
 ## See it live

docs/plugins/html-escape/index.md

@@ -6,6 +6,8 @@ title: HTML Escape
 
 [[readingTime]]
 
+[![GitHub repo](https://img.shields.io/badge/GitHub-binarynoir%2Fvitepress--html--escape-181717?logo=github)](https://github.com/binarynoir/vitepress-html-escape) [![npm version](https://img.shields.io/npm/v/@binarynoir/vitepress-html-escape)](https://www.npmjs.com/package/@binarynoir/vitepress-html-escape) [![CI](https://github.com/binarynoir/vitepress-html-escape/actions/workflows/ci.yml/badge.svg)](https://github.com/binarynoir/vitepress-html-escape/actions/workflows/ci.yml) [![License](https://img.shields.io/github/license/binarynoir/vitepress-html-escape)](https://github.com/binarynoir/vitepress-html-escape/blob/main/LICENSE)
+
 `@binarynoir/vitepress-html-escape` keeps stray angle brackets and `{{ }}` in Markdown from breaking your build. VitePress compiles every page as a Vue template, so a sentence like "returns Array<string>" normally stops the build with `Element is missing end tag`. With this plugin it shows up as text. Real HTML and Vue components work exactly as before.
 
 It is built for docs sites with many contributors, where you can't count on everyone to remember the backticks. This site runs it on every page, and every example below is live: each one shows the Markdown as written, then the same Markdown rendered by this site.