|
| 1 | +# Verification Badge with Auths |
| 2 | + |
| 3 | +This example demonstrates how to add a "Verified by Auths" badge and verification widget to your project using [Auths](https://github.com/auths-dev/auths). |
| 4 | + |
| 5 | +## Verification Status |
| 6 | + |
| 7 | +[](https://your-org.github.io/example-verify-badge/) |
| 8 | + |
| 9 | +## Quick Start |
| 10 | + |
| 11 | +```bash |
| 12 | +# 1. Fork this repo |
| 13 | +# 2. Enable GitHub Pages (Settings > Pages > Source: GitHub Actions) |
| 14 | +# 3. Push to main — the badge site deploys automatically |
| 15 | +``` |
| 16 | + |
| 17 | +## What's Included |
| 18 | + |
| 19 | +| Path | Purpose | |
| 20 | +|------|---------| |
| 21 | +| `docs/index.html` | Live verification widget demo page (all 3 display modes) | |
| 22 | +| `docs/badge.svg` | Static "Verified by Auths" badge for README embedding | |
| 23 | +| `.github/workflows/verify-commits.yml` | CI commit verification | |
| 24 | +| `.github/workflows/deploy-badge-site.yml` | Deploy verification page to GitHub Pages | |
| 25 | + |
| 26 | +## Embedding the Badge |
| 27 | + |
| 28 | +### Static Badge (works everywhere) |
| 29 | + |
| 30 | +Add this to your README: |
| 31 | + |
| 32 | +```markdown |
| 33 | +[](https://your-org.github.io/your-repo/) |
| 34 | +``` |
| 35 | + |
| 36 | +### Verification Widget (GitHub Pages / custom sites) |
| 37 | + |
| 38 | +Add the `<auths-verify>` web component to your HTML page: |
| 39 | + |
| 40 | +```html |
| 41 | +<script type="module" src="https://unpkg.com/@auths-dev/verify/dist/auths-verify.mjs"></script> |
| 42 | + |
| 43 | +<!-- Badge mode (compact) --> |
| 44 | +<auths-verify repo="your-org/your-repo" forge="github" mode="badge"></auths-verify> |
| 45 | + |
| 46 | +<!-- Detail mode (expanded) --> |
| 47 | +<auths-verify repo="your-org/your-repo" forge="github" mode="detail"></auths-verify> |
| 48 | + |
| 49 | +<!-- Tooltip mode (hover to expand) --> |
| 50 | +<auths-verify repo="your-org/your-repo" forge="github" mode="tooltip"></auths-verify> |
| 51 | +``` |
| 52 | + |
| 53 | +### Important Note |
| 54 | + |
| 55 | +The `<auths-verify>` web component does **NOT** render in GitHub README files. GitHub strips custom HTML elements and `<script>` tags from Markdown. The widget works on: |
| 56 | + |
| 57 | +- GitHub Pages sites |
| 58 | +- Personal/project websites |
| 59 | +- Documentation platforms (Docusaurus, MkDocs, etc.) |
| 60 | +- Any HTML page you control |
| 61 | + |
| 62 | +For GitHub READMEs, use the static SVG badge instead. |
| 63 | + |
| 64 | +## Widget Display Modes |
| 65 | + |
| 66 | +| Mode | Description | |
| 67 | +|------|-------------| |
| 68 | +| `badge` | Compact badge showing verified/unverified status | |
| 69 | +| `detail` | Expanded view with signer info and verification details | |
| 70 | +| `tooltip` | Badge that expands on hover to show details | |
| 71 | + |
| 72 | +## How It Works |
| 73 | + |
| 74 | +1. The `<auths-verify>` widget loads a WASM module that performs cryptographic verification in the browser |
| 75 | +2. It fetches the repository's signing data from `refs/auths/` in the git repo |
| 76 | +3. Verification happens entirely client-side — no backend required |
| 77 | +4. The static SVG badge is a simple image for environments that don't support JavaScript |
| 78 | + |
| 79 | +## Prerequisites |
| 80 | + |
| 81 | +- GitHub Pages enabled on your repository |
| 82 | +- [Auths CLI](https://github.com/auths-dev/auths) for commit signing (`brew install auths-dev/auths-cli/auths`) |
0 commit comments