ATProto app badge generator for static web pages
colddark.world/tools/badger/index.html
colddark.world
atproto
web-app
vanilla-js
web-components
oauth
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>cd.w/Badger</title>
7 <style>
8 body {
9 max-width: 50ch;
10 padding-inline: 1em;
11 margin: auto;
12 /* i like ubuntu :) */
13 font-family: Ubuntu, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
14 }
15 h1 {
16 text-align: center;
17 }
18 #inputs {
19 width: 100%;
20 display: flex;
21 flex-direction: row;
22 justify-content: center;
23 gap: 1ch;
24 }
25 #id {
26 width: 50ch;
27 }
28 .baby {
29 font-size: small;
30 font-style: italic;
31 }
32 code {
33 user-select: all;
34 }
35 .sc {
36 font-variant: small-caps;
37 }
38 #out {
39 display: block;
40 overflow-wrap: anywhere;
41 }
42 .line {
43 display: block;
44 overflow-x: scroll;
45 white-space: nowrap;
46 }
47 :root {
48 color-scheme: light dark;
49 }
50 .box {
51 background-color: #eee;
52 border: 0.5ch solid #ccc;
53 border-radius: 1ch;
54 margin: 1ch;
55 padding: 1ch;
56 }
57 #messages {
58 position: absolute;
59 left: 1ch;
60 bottom: 1ch;
61 }
62 @media (prefers-color-scheme: dark) {
63 .box {
64 background-color: #444;
65 border-color: #222;
66 }
67 }
68 .error {
69 border-color: indianred;
70 }
71 </style>
72 <script type="importmap">
73 {
74 "imports": {
75 "@atcute/cbor": "https://esm.sh/@atcute/atproto@3.1",
76 "@atcute/cbor": "https://esm.sh/@atcute/cbor@2.3",
77 "@atcute/cid": "https://esm.sh/@atcute/cid@2.4",
78 "@atcute/client": "https://esm.sh/@atcute/client@4.2",
79 "@atcute/microcosm": "https://esm.sh/@atcute/microcosm@1.0",
80 "@atcute/oauth-browser-client": "https://esm.sh/@atcute/oauth-browser-client@3.0"
81 }
82 }
83 </script>
84 <script>
85 /*
86 @licstart The following is the entire license notice for the
87 JavaScript code in this page.
88
89 Badger - Web application to detect ATProto applications and generate static HTML 'badges' for a user
90 Copyright (C) 2026 Grant Mulholland <badger@colddark.world>
91
92 The JavaScript code in this page is free software: you can
93 redistribute it and/or modify it under the terms of the GNU
94 General Public License (GNU GPL) as published by the Free Software
95 Foundation, either version 3 of the License, or (at your option)
96 any later version. The code is distributed WITHOUT ANY WARRANTY;
97 without even the implied warranty of MERCHANTABILITY or FITNESS
98 FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
99
100 As additional permission under GNU GPL version 3 section 7, you
101 may distribute non-source (e.g., minimized or compacted) forms of
102 that code without the copy of the GNU GPL normally required by
103 section 4, provided you include this license notice and a URL
104 through which recipients can access the Corresponding Source.
105
106
107 @licend The above is the entire license notice
108 for the JavaScript code in this page.
109 */
110 </script>
111</head>
112<body>
113 <h1 id="title">Badger</h1>
114 <noscript><p class="error box">This application requires JavaScript to run.</p></noscript>
115 <div id="main" hidden="1">
116 <p>
117 Provide your ATProto handle/DID, and you'll get static HTML you can copy-paste for a neat set of clickable badges for services detected.
118 The resulting container will have the class <code>badger-outer</code>, and the text being <code>badger-label</code>.
119 <br />(I personally don't recommend hiding the text.)
120 </p>
121 <form id="inputs">
122 <input type="text" id="id" placeholder="example.com // did:plc:example // did:web:example.com" />
123 <input type="submit" id="go" value="Go!" />
124 </form>
125 <div id="result" class="box" hidden>
126 <div id="initial-result" hidden>
127 All set, just copy the code below into your own page!
128 <br />
129 <details>
130 <summary>Badge Code (click code to select all)</summary>
131 <code id="out">(This is a placeholder... You shouldn't be able to see this!)</code>
132 </details>
133 <br />
134 Alternatively, you can publish them to your PDS:
135 <button id="publish">Publish Web Tile (experimental)</button>
136 <hr />
137 <span class="sc">preview</span>
138 <div id="preview"></div>
139 </div>
140 <div id="tile-result" hidden>
141 Your Web Tile's been published!
142 <br />
143 Record URI: <code class="line" id="tile-uri"></code>
144 <a id="tile-link"><button>View Tile</button></a>
145 </div>
146 </div>
147 <p class="baby">
148 Copyright (C) 2026 Grant Mulholland <<a href="mailto:badger@colddark.world">badger@colddark.world</a>> <br />
149 Licensed under GNU <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPL v3</a> - <a href="https://tangled.org/colddark.world/badger/tree/trunk">Source Code @ Tangled</a>
150 </p>
151 </div>
152 <script src="badger.js" type="module"></script>
153</body>
154</html>