teal.fm
Your music, beautifully tracked. All yours. (coming soon)
teal.fm
teal-fm
atproto
Serve local css, and template the head. Also kinda reword the now playing post text to use the stamp emoji (revert if you want)
+21
-30
+21
-30
apps/aqua/src/index.ts
+21
-30
apps/aqua/src/index.ts
···
1
1
import { serve } from "@hono/node-server";
2
+
import { serveStatic } from '@hono/node-server/serve-static'
2
3
import { Hono } from "hono";
3
4
import { db } from "@teal/db/connect";
4
5
import { getAuthRouter } from "./auth/router";
···
10
11
import { getSessionAgent } from "./lib/auth";
11
12
import { RichText } from "@atproto/api";
12
13
import { sanitizeUrl } from "@braintree/sanitize-url";
14
+
15
+
const HEAD = `<head>
16
+
<link rel="stylesheet" href="/latex.css">
17
+
</head>`
13
18
14
19
const logger = pino({ name: "server start" });
15
20
···
28
33
29
34
// Serve logged in content
30
35
if (tealSession) {
31
-
const agent = await getSessionAgent(c);
32
-
33
-
const post = await agent?.getPost({
34
-
repo: "teal.fm",
35
-
rkey: "3lb2c74v73c2a",
36
-
});
37
36
// const followers = await agent?.getFollowers();
38
37
return c.html(
39
38
`
40
-
<head>
41
-
<link rel="stylesheet" href="https://latex.vercel.app/style.css">
42
-
</head>
39
+
${HEAD}
43
40
<div id="root">
44
41
<div id="header" style="display: flex; flex-direction: column; gap: 0.5rem; width: 100%;">
45
42
<div>
···
51
48
<a href="/">home</a>
52
49
<a href="/stamp">stamp</a>
53
50
</div>
54
-
<a href="/logout" style="color: red;">logout</a>
51
+
<a href="/logout" style="background-color: #cc0000; color: white; border: none; padding: 0rem 0.5rem; border-radius: 0.5rem;">logout</a>
55
52
</div>
56
53
</div>
57
54
<div class="container">
58
-
<h2>${post?.value.text}</h2>
55
+
59
56
</div>
60
57
</div>`,
61
58
);
···
64
61
// Serve non-logged in content
65
62
return c.html(
66
63
`
67
-
<head>
68
-
<link rel="stylesheet" href="https://latex.vercel.app/style.css">
69
-
</head>
64
+
${HEAD}
70
65
<div id="root">
71
66
<div id="header">
72
67
<h1>teal.fm</h1>
···
76
71
<a href="/">home</a>
77
72
<a href="/stamp">stamp</a>
78
73
</div>
79
-
<div/>
74
+
<button style="background-color: #acf; color: white; border: none; padding: 0rem 0.5rem; border-radius: 0.5rem;"><a href="/login">Login</a></button>
80
75
</div>
81
76
</div>
82
77
<div class="container">
83
-
<button><a href="/login">Login</a></button>
84
78
<div class="signup-cta">
85
79
Don't have an account on the Atmosphere?
86
80
<a href="https://bsky.app">Sign up for Bluesky</a> to create one now!
···
95
89
96
90
return c.html(
97
91
`
98
-
<head>
99
-
<link rel="stylesheet" href="https://latex.vercel.app/style.css">
100
-
</head>
92
+
${HEAD}
101
93
<div id="root">
102
94
<div id="header">
103
95
<h1>teal.fm</h1>
···
167
159
}
168
160
return c.html(
169
161
`
170
-
<head>
171
-
<link rel="stylesheet" href="https://latex.vercel.app/style.css">
172
-
</head>
162
+
${HEAD}
173
163
<div id="root">
174
164
<div id="header">
175
165
<h1>teal.fm</h1>
···
185
175
</div>
186
176
</div>
187
177
<div class="container">
188
-
<p>want to share what you're listening to in the meantime??</p>
178
+
<p>🛠️ while we're building our music tracker, share what you're listening to here!<br/>
179
+
<a href="https://emojipedia.org/white-flower">💮</a> we'll create a post on Bluesky for you to share with the world!<br/></p>
189
180
<form action="/stamp" method="post" class="login-form" style="display: flex; flex-direction: column; gap: 0.5rem;">
190
181
<input
191
182
type="text"
···
229
220
230
221
if (agent) {
231
222
const rt = new RichText({
232
-
text: `now playing:
233
-
artist: ${artist}
234
-
track: ${track}
223
+
text: `💮 now playing:
224
+
artist: ${artist}
225
+
track: ${track}
235
226
236
-
powered by @teal.fm`,
227
+
powered by @teal.fm`,
237
228
});
238
229
await rt.detectFacets(agent);
239
230
···
258
249
259
250
return c.html(
260
251
`
261
-
<head>
262
-
<link rel="stylesheet" href="https://latex.vercel.app/style.css">
263
-
</head>
252
+
${HEAD}
264
253
<div id="root">
265
254
<div id="header">
266
255
<h1>teal.fm</h1>
···
285
274
}
286
275
return c.html(`<h1>doesn't look like you're logged in... try <a href="/login">logging in?</a></h1>`);
287
276
});
277
+
278
+
app.use('/*', serveStatic({ root: '/src/public' }));
288
279
289
280
const run = async () => {
290
281
logger.info("Running in " + navigator.userAgent);