katproto.girlonthemoon.xyz
vielle.dev
+171
-164
index.html
+171
-164
index.html
···
1
-
<!DOCTYPE html>
1
+
<!doctype html>
2
2
<html lang="en">
3
3
<head>
4
4
<meta charset="UTF-8" />
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
-
7
-
<meta name="title" content="girl on the moon :: atproto" />
8
-
<meta name="description" content="girl on the moon PDS" />
9
-
<meta name="author" content="girlonthemoon.xyz" />
10
-
<meta property="og:title" content="girl on the moon :: atproto" />
11
-
<meta property="og:description" content="girl on the moon PDS" />
12
-
<meta property="og:type" content="website" />
13
-
<meta property="og:url" content="https://katproto.girlonthemoon.xyz" />
14
-
<meta property="og:image" content="https://stash.4-walls.net/pics/pochacco.jpg" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15
6
16
-
<link rel="canonical" href="https://katproto.girlonthemoon.xyz" />
17
-
<link rel="icon" type="image/png" sizes="64x64" href="https://stash.4-walls.net/pics/pochacco_favicon.png" />
7
+
<meta name="title" content="girl on the moon :: atproto" />
8
+
<meta name="description" content="girl on the moon PDS" />
9
+
<meta name="author" content="girlonthemoon.xyz" />
10
+
<meta property="og:title" content="girl on the moon :: atproto" />
11
+
<meta property="og:description" content="girl on the moon PDS" />
12
+
<meta property="og:type" content="website" />
13
+
<meta property="og:url" content="https://katproto.girlonthemoon.xyz" />
14
+
<meta
15
+
property="og:image"
16
+
content="https://stash.4-walls.net/pics/pochacco.jpg"
17
+
/>
18
18
19
-
<script src="https://stash.4-walls.net/katproto_demo/katproto_users.js"></script>
19
+
<link rel="canonical" href="https://katproto.girlonthemoon.xyz" />
20
+
<link
21
+
rel="icon"
22
+
type="image/png"
23
+
sizes="64x64"
24
+
href="https://stash.4-walls.net/pics/pochacco_favicon.png"
25
+
/>
20
26
21
-
<title>katproto</title>
22
-
23
-
<style>
24
-
@import url(https://fonts.bunny.net/css?family=victor-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);
27
+
<script src="https://stash.4-walls.net/katproto_demo/katproto_users.js"></script>
25
28
26
-
:root {
27
-
--font: "Victor Mono", monospace;
28
-
--main-color: #ff69b4;
29
-
}
29
+
<title>katproto</title>
30
30
31
-
body {
32
-
font-family: var(--font) !important;
33
-
counter-reset: Span-count;
34
-
font-size: .9rem;
35
-
}
36
-
37
-
pre {
38
-
font-family: var(--font) !important;
39
-
margin: 0 !important;
40
-
padding: 0 !important;
41
-
}
31
+
<style>
32
+
@import url(https://fonts.bunny.net/css?family=victor-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);
42
33
43
-
.nosc {
44
-
font-family: var(--font) !important;
45
-
font-size: .9rem;
46
-
}
34
+
:root {
35
+
--font: "Victor Mono", monospace;
36
+
--main-color: #ff69b4;
37
+
}
47
38
48
-
div[aria-label] {
49
-
margin: 0 !important;
50
-
padding: 0 !important;
51
-
}
39
+
body {
40
+
font-family: var(--font);
41
+
font-size: 0.9rem;
42
+
margin: 0 0 0 1rem;
43
+
}
52
44
53
-
pre h1 {
54
-
color: var(--main-color);
55
-
margin: 0 0 0 1rem;
56
-
padding: 0 !important;
57
-
font-style: italic;
58
-
}
45
+
pre {
46
+
font-family: var(--font);
47
+
margin: 0;
48
+
padding: 0;
49
+
}
59
50
60
-
h2 {
61
-
color: var(--main-color);
62
-
padding: 0 !important;
63
-
font-style: italic;
64
-
}
51
+
h1 {
52
+
color: var(--main-color);
53
+
margin: 1rem 0 0 0;
54
+
font-style: italic;
55
+
}
65
56
66
-
a {
67
-
text-underline-offset: 4px;
68
-
color: var(--main-color);
69
-
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
70
-
}
57
+
h2 {
58
+
color: var(--main-color);
59
+
font-style: italic;
60
+
}
71
61
72
-
dfn, i {
73
-
color: var(--main-color);
74
-
}
62
+
p {
63
+
max-width: 60ch;
64
+
}
75
65
76
-
a:hover {
77
-
text-decoration: none;
78
-
text-shadow: none;
79
-
}
66
+
a {
67
+
text-underline-offset: 4px;
68
+
color: var(--main-color);
69
+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
70
+
}
80
71
81
-
hr {
82
-
border: 1px dashed var(--main-color);
83
-
width: 40%;
84
-
margin: 1rem 1rem 1rem 0;
85
-
padding: 0;
86
-
}
72
+
dfn,
73
+
i {
74
+
color: var(--main-color);
75
+
}
87
76
88
-
#not-pre {
89
-
margin: 0 0 0 1rem;
90
-
}
77
+
a:hover {
78
+
text-decoration: none;
79
+
text-shadow: none;
80
+
}
91
81
92
-
#list-users {
93
-
font-family: var(--font);
94
-
font-size: .9rem;
95
-
margin: 0 !important;
96
-
padding: 0 !important;
97
-
}
82
+
hr {
83
+
border: 1px dashed var(--main-color);
84
+
max-width: 40ch;
85
+
margin: 1rem 1rem 1rem 0;
86
+
padding: 0;
87
+
}
88
+
</style>
89
+
</head>
90
+
<body>
91
+
<header>
92
+
<div aria-label="ASCII text art of pochacco" role="img">
93
+
<pre>
98
94
99
-
.user-count {
100
-
counter-increment: Span-count;
101
-
display: inline-block;
102
-
margin-bottom: .5rem;
103
-
}
95
+
,8,
96
+
d8b
97
+
888
98
+
__ , 888
99
+
d88888b. -.\,- 888
100
+
`Y8888b."```"-888
101
+
/`" `8\
102
+
| |
103
+
| |
104
+
| |
105
+
__ / O _ O \
106
+
/` '.\ '-' /
107
+
\ .'. .;
108
+
'. .' `"""""""` \
109
+
`\ /.-.|
110
+
`| |` |
111
+
| \___/
112
+
;-.._______..-;
113
+
jgs / | \
114
+
\___,---'---,___/
115
+
</pre
116
+
>
117
+
</div>
118
+
<h1 id="katproto">katproto</h1>
119
+
<p>
120
+
this is an at protocol <dfn>personal data server</dfn> (aka, an atproto
121
+
PDS). more specifically, it's
122
+
<a href="https://girlonthemoon.xyz/">kat</a>'s PDS!
123
+
</p>
124
+
</header>
104
125
105
-
.user-count:before {
106
-
content: counter(Span-count) ". ";
107
-
}
108
-
</style>
109
-
</head>
126
+
<hr />
110
127
111
-
<body>
128
+
<main>
129
+
<section>
130
+
<h2 id="users">users</h2>
131
+
<ol id="list-users">
132
+
<!-- this is _not great_ but im lazy and its still a marked improvement
133
+
looks kinda cool imo, ngl -->
134
+
Loading...
135
+
</ol>
136
+
<noscript>
137
+
<span class="nosc">
138
+
sorry, to see the dynamic list of users, you must have javascript
139
+
enabled!
140
+
</span>
141
+
<style>
142
+
#list-users {
143
+
display: none;
144
+
}
145
+
</style>
146
+
</noscript>
147
+
<script>
148
+
async function printUsers() {
149
+
document.getElementById("list-users").innerHTML =
150
+
await getKatprotoUsers();
151
+
}
152
+
printUsers();
153
+
</script>
154
+
</section>
112
155
113
-
<pre>
114
-
<div aria-label="ASCII text art of pochacco" role="img">
115
-
,8,
116
-
d8b
117
-
888
118
-
__ , 888
119
-
d88888b. -.\,- 888
120
-
`Y8888b."```"-888
121
-
/`" `8\
122
-
| |
123
-
| |
124
-
| |
125
-
__ / O _ O \
126
-
/` '.\ '-' /
127
-
\ .'. .;
128
-
'. .' `"""""""` \
129
-
`\ /.-.|
130
-
`| |` |
131
-
| \___/
132
-
;-.._______..-;
133
-
jgs / | \
134
-
\___,---'---,___/
135
-
</div>
136
-
<h1 id="katproto">katproto</h1>
137
-
this is an at protocol <dfn>personal data server</dfn> (aka, an atproto PDS).
138
-
more specifically, it's <a href="https://girlonthemoon.xyz/">kat</a>'s PDS!
139
-
</pre>
156
+
<hr />
140
157
141
-
<div id="not-pre">
142
-
<hr>
143
-
144
-
<h2 id="users">users</h2>
158
+
<section>
159
+
<h2 id="status">status</h2>
160
+
<p>Current status: <span id="current-status">Loading...</span></p>
161
+
<p>
162
+
off-site status page in case the PDS goes down; in other words, this
163
+
page will remain up even when the PDS is down.
164
+
</p>
165
+
<p>
166
+
<a href="https://uptime.4-walls.net/status/katproto">status page</a>
167
+
</p>
168
+
</section>
145
169
146
-
<div id="list-users">
147
-
</div>
170
+
<hr />
148
171
149
-
<hr>
150
-
151
-
<noscript>
152
-
<span class="nosc">sorry, to see the dynamic list of users, you must have javascript enabled!</span>
153
-
<hr>
154
-
</noscript>
155
-
156
-
<script>
157
-
async function printUsers() {
158
-
document.getElementById("list-users").innerHTML = await getKatprotoUsers();
159
-
}
160
-
printUsers();
161
-
</script>
162
-
163
-
<h2 id="status">status</h2>
164
-
165
-
<p>Current status: <span id="current-status">Loading...</span></p>
166
-
167
-
<p>off-site status page in case the PDS goes down; in other words,<br>
168
-
this page will remain up even when the PDS is down.</p>
169
-
170
-
<p><a href="https://uptime.4-walls.net/status/katproto">status page</a></p>
171
-
172
-
<hr>
173
-
174
-
<h2 id="credits">credits</h2>
175
-
176
-
<p>
177
-
PDS: <a href="https://github.com/bluesky-social/pds">github.com/bluesky-social/pds</a><br>
178
-
dynamic user list: <a href="https://tangled.org/@vielle.dev/server-config/blob/master/landing/landing.ts">most of the code here</a><br>
179
-
</p>
180
-
181
-
<hr>
182
-
183
-
<h2 id="source">source</h2>
184
-
185
-
<p>
186
-
index page: <a href="https://tangled.org/@katproto.girlonthemoon.xyz/katproto_index">tangled.org/@katproto.girlonthemoon.xyz/katproto_index</a>
187
-
</p>
188
-
</div>
189
-
172
+
<section>
173
+
<h2 id="credits">credits</h2>
174
+
<p>
175
+
PDS:
176
+
<a href="https://github.com/bluesky-social/pds"
177
+
>github.com/bluesky-social/pds</a
178
+
><br />
179
+
dynamic user list:
180
+
<a
181
+
href="https://tangled.org/@vielle.dev/server-config/blob/master/landing/landing.ts"
182
+
>most of the code here</a
183
+
><br />
184
+
</p>
185
+
<hr />
186
+
<h2 id="source">source</h2>
187
+
<p>
188
+
index page:
189
+
<a
190
+
href="https://tangled.org/@katproto.girlonthemoon.xyz/katproto_index"
191
+
>tangled.org/@katproto.girlonthemoon.xyz/katproto_index</a
192
+
>
193
+
</p>
194
+
</section>
195
+
</main>
196
+
</body>
190
197
</html>
+2
-3
katproto_users.ts
+2
-3
katproto_users.ts
···
36
36
await Promise.all(
37
37
users.map(
38
38
async (x) =>
39
-
`<span class="user-count"><a href="https://bsky.app/profile/${x.did}">${await x.display}</a></span>`
39
+
`<li><a href="https://bsky.app/profile/${x.did}">${await x.display}</a></li>`
40
40
)
41
41
)
42
42
);
43
43
44
-
const fin = Array.from(users).join("<br>");
45
-
return await fin;
44
+
return users.join("");
46
45
}
47
46
48
47
async function checkStatus() {