Something went wrong. Try again.
Browser extension: detect and subscribe to standard.site publications on ATProto
Something went wrong. Try again.
substandard welcome.html
8.1 kB · 187 lines
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>substandard</title> <link rel="stylesheet" href="/src/welcome/welcome.css" /> </head> <body> <header class="hero"> <div class="hero-mark"> <img class="hero-icon" src="/icons/icon128.png" alt="" width="96" height="96" /> <!-- Filled from brand/wordmark.svg in welcome.ts, so the theme can retake its baked-in ink the way the site's hero does. --> <div id="wordmark" class="hero-wordmark" role="img" aria-label="substandard"></div> </div> <h1>thanks for installing me!</h1> <p class="hero-sub"> You're one step closer to seeing more publishers on atproto. </p> </header>
<main> <section> <h2>remember to pin the extension!</h2> <p> Chrome only shows badges from pinned extensions - you won't get any notifications unless you do this! </p> <ol class="steps"> <li> Click the puzzle piece at the right of the Chrome toolbar. </li> <li> Click the pin beside substandard, so the icon stays out where you can see it. </li> </ol>
<!-- A drawing of the Chrome toolbar and its extensions menu, not a capture: browser UI is native and does not render into a page screenshot (same reason scripts/capture-status-docs.mjs draws its badge tiles). Inline so it follows the theme, and so the row's icon is the extension's own — the dev channel's inverted tile shows up here too. --> <figure class="pin-figure"> <svg class="pin-art" viewBox="0 0 640 360" role="img" aria-label="The Chrome toolbar with the puzzle-piece extensions button circled, and below it the extensions menu with the pin beside substandard circled." > <!-- browser window --> <rect class="w-page" x="12" y="36" width="616" height="312" rx="12" /> <path class="w-bar" d="M12 48a12 12 0 0 1 12-12h592a12 12 0 0 1 12 12v40H12z" /> <path class="w-rule" d="M12 88h616" />
<!-- back, forward, reload --> <path class="w-glyph" d="M46 62H34m5-5-5 5 5 5" /> <path class="w-glyph" d="M66 62h12m-5-5 5 5-5 5" /> <path class="w-glyph" d="M110 62a6 6 0 1 1-1.8-4.3" /> <path class="w-glyph" d="M108.2 53v4.7h-4.7" />
<!-- address bar --> <rect class="w-omni" x="126" y="50" width="340" height="24" rx="12" /> <rect class="w-chip" x="140" y="59" width="150" height="6" rx="3" />
<!-- the extensions (puzzle piece) button --> <g class="w-ink" transform="translate(484,48) scale(1.2)"> <rect x="5" y="5" width="14" height="14" rx="2.5" fill="currentColor" /> <circle cx="13" cy="4.8" r="3.6" fill="currentColor" /> <circle cx="19" cy="13" r="3.6" fill="currentColor" /> <circle class="w-notch" cx="5" cy="12.5" r="3.4" /> </g>
<circle class="w-chip" cx="548" cy="62" r="11" /> <circle class="w-dot" cx="596" cy="55" r="1.8" /> <circle class="w-dot" cx="596" cy="62" r="1.8" /> <circle class="w-dot" cx="596" cy="69" r="1.8" />
<!-- the page under it, suggested --> <rect class="w-chip-faint" x="44" y="124" width="180" height="12" rx="6" /> <rect class="w-chip-faint" x="44" y="152" width="212" height="8" rx="4" /> <rect class="w-chip-faint" x="44" y="170" width="168" height="8" rx="4" />
<!-- the extensions menu, dropped from the puzzle piece --> <rect class="w-panel-shadow" x="285" y="106" width="260" height="180" rx="12" /> <rect class="w-panel" x="280" y="102" width="260" height="180" rx="12" /> <text class="w-title" x="300" y="128">Extensions</text>
<circle class="w-hi" cx="508" cy="166" r="16" /> <image href="/icons/icon32.png" x="300" y="154" width="24" height="24" /> <text class="w-name" x="334" y="171">substandard</text> <g class="w-pin" transform="translate(496,154)"> <rect x="8.5" y="3" width="7" height="3" rx="1.2" fill="currentColor" /> <path d="M10 6h4l1.2 7H8.8z" fill="currentColor" /> <rect x="6.5" y="13" width="11" height="2.8" rx="1.4" fill="currentColor" /> <path d="M12 15.8v5.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /> </g>
<!-- two more rows, deliberately nobody in particular --> <rect class="w-chip" x="300" y="198" width="24" height="24" rx="6" /> <rect class="w-chip" x="334" y="206" width="104" height="8" rx="4" /> <g class="w-pin-off" transform="translate(496,198)"> <rect x="8.5" y="3" width="7" height="3" rx="1.2" fill="currentColor" /> <path d="M10 6h4l1.2 7H8.8z" fill="currentColor" /> <rect x="6.5" y="13" width="11" height="2.8" rx="1.4" fill="currentColor" /> <path d="M12 15.8v5.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /> </g> <rect class="w-chip" x="300" y="238" width="24" height="24" rx="6" /> <rect class="w-chip" x="334" y="246" width="78" height="8" rx="4" /> <g class="w-pin-off" transform="translate(496,238)"> <rect x="8.5" y="3" width="7" height="3" rx="1.2" fill="currentColor" /> <path d="M10 6h4l1.2 7H8.8z" fill="currentColor" /> <rect x="6.5" y="13" width="11" height="2.8" rx="1.4" fill="currentColor" /> <path d="M12 15.8v5.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /> </g>
<!-- the red pen, marking the two clicks in order --> <path class="pen-dash" d="M498 84c1 9-1 13-2 17" /> <ellipse class="pen" cx="498" cy="62" rx="25" ry="19" transform="rotate(-7 498 62)" /> <circle class="pen-badge" cx="464" cy="26" r="11" /> <text class="pen-num" x="464" y="31">1</text> <ellipse class="pen" cx="508" cy="166" rx="27" ry="21" transform="rotate(8 508 166)" /> <circle class="pen-badge" cx="562" cy="128" r="11" /> <text class="pen-num" x="562" y="133">2</text> </svg> <figcaption>it should look like this!</figcaption> </figure>
<!-- Chrome has no event for pinning, so welcome.ts polls the read and this line changes under the reader's cursor when they do it. --> <p id="pin-state" class="pin-state" role="status" hidden></p> </section>
<section> <h2>what's next?</h2> <p> Visit a site, look for the badge, and hit subscribe! </p> <p>If you want to try it out, try visiting: </p> <ul> <li><a href="https://substandard.blog">substandard.blog</a></li> <li><a href="https://standard.site">standard.site</a></li> <li><a href="https://permadeath.com">permablog</a></li> <li><a href="https://atproto.com/blog">The ATproto Blog</a></li>
</ul> </section> </main>
<footer> <p> <a href="https://substandard.blog">substandard.blog</a> · <a href="https://tangled.org/permadeath.com/substandard">source on Tangled</a> </p> <p id="version" class="version"></p> </footer>
<script type="module" src="/src/welcome/welcome.ts"></script> </body></html>