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