vielle.dev
this repo has no description
1---
2import Base from "../Base.astro";
3---
4
5<Base title="D&D Utils" zoomable>
6 <script>
7 import "actor-typeahead";
8 import { getAuth } from "../lib/auth";
9
10 const [_, __, did] = await getAuth();
11 const login = document.getElementById("login");
12 const signup = document.getElementById("signup");
13
14 if (!login || !signup) throw "no #login or #signup";
15 if (did) {
16 login.outerHTML = `<a id="login" href="/atproto/logout">Log out</a>`;
17 } else {
18 login.outerHTML = `<a id="login" href="/atproto/login">Log in</a>`;
19 signup.style.display = "";
20 }
21
22 const astralUser = document.getElementById(
23 "astral-user",
24 ) as HTMLFormElement;
25 astralUser.addEventListener("submit", (ev) => {
26 if (!astralUser.checkValidity()) return;
27 ev.preventDefault();
28 // must exist due to valid state
29 const handle = astralUser.querySelector("input")?.value;
30 window.location.assign(`/astral/${handle}`);
31 });
32 </script>
33
34 <style>
35 form {
36 display: grid;
37 gap: 5px;
38 grid-template: auto auto / minmax(20ch, 50ch) min-content;
39 }
40
41 label {
42 grid-column: span 2;
43 }
44
45 actor-typeahead {
46 --color-background: #2b2b2b;
47 --color-border: #ffffff22;
48 --color-shadow: #ffffff;
49 --color-hover: #ffffff11;
50 }
51
52 input:not([type="submit"]) {
53 box-sizing: border-box;
54 width: 100%;
55 }
56 </style>
57
58 <h1>D&D Utils</h1>
59 <p style="height: 1lh">
60 <a id="login" href="#" style="display: none;">Log in</a>
61 <a id="signup" href="/atproto/sign-up" style="display: none;">Sign up</a>
62 </p>
63 <p>Pages:</p>
64 <ul>
65 <li><a href="/astral">Astral Powers</a></li>
66 <li>
67 <form id="astral-user">
68 <label for="username"> View Astral Powers for </label>
69 <actor-typeahead>
70 <input required autocomplete="off" id="username" />
71 </actor-typeahead>
72 <input type="submit" value="Search" />
73 </form>
74 </li>
75 <!-- <li><a href="/chip">Chip</a></li> -->
76 </ul>
77</Base>