audio streaming app
plyr.fm
feat: add alpha badge to header branding (#563)
Add APP_STAGE constant to branding.ts (configurable via VITE_APP_STAGE)
and display it as a superscript badge next to the app name in the header.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
authored by
nate nowack
Claude
and committed by
GitHub
3fb7e953
c7be970b
+14
-2
+3
frontend/src/lib/branding.ts
+3
frontend/src/lib/branding.ts
···
1
1
const DEFAULT_APP_NAME = 'plyr.fm';
2
2
const DEFAULT_TAGLINE = 'music on atproto';
3
+
const DEFAULT_APP_STAGE = 'alpha';
3
4
const DEFAULT_CANONICAL_HOST = 'plyr.fm';
4
5
const DEFAULT_BROADCAST_PREFIX = 'plyr';
5
6
6
7
const APP_NAME = import.meta.env.VITE_APP_NAME ?? DEFAULT_APP_NAME;
7
8
const APP_TAGLINE = import.meta.env.VITE_APP_TAGLINE ?? DEFAULT_TAGLINE;
9
+
const APP_STAGE = import.meta.env.VITE_APP_STAGE ?? DEFAULT_APP_STAGE;
8
10
const APP_CANONICAL_HOST =
9
11
import.meta.env.VITE_APP_CANONICAL_HOST ?? DEFAULT_CANONICAL_HOST;
10
12
const APP_CANONICAL_URL =
···
21
23
export {
22
24
APP_NAME,
23
25
APP_TAGLINE,
26
+
APP_STAGE,
24
27
APP_CANONICAL_HOST,
25
28
APP_CANONICAL_URL,
26
29
APP_BROADCAST_PREFIX
+11
-2
frontend/src/lib/components/Header.svelte
+11
-2
frontend/src/lib/components/Header.svelte
···
7
7
import PlatformStats from './PlatformStats.svelte';
8
8
import SearchTrigger from './SearchTrigger.svelte';
9
9
import { search } from '$lib/search.svelte';
10
-
import { APP_NAME, APP_TAGLINE } from '$lib/branding';
10
+
import { APP_NAME, APP_TAGLINE, APP_STAGE } from '$lib/branding';
11
11
12
12
interface Props {
13
13
user: User | null;
···
79
79
</div>
80
80
81
81
<a href="/" class="brand">
82
-
<h1>{APP_NAME}</h1>
82
+
<h1>{APP_NAME}{#if APP_STAGE}<sup class="stage-badge">{APP_STAGE}</sup>{/if}</h1>
83
83
<p>{APP_TAGLINE}</p>
84
84
</a>
85
85
</div>
···
310
310
margin: 0;
311
311
color: var(--text-primary);
312
312
transition: color 0.2s;
313
+
}
314
+
315
+
.stage-badge {
316
+
font-size: 0.5rem;
317
+
font-weight: 500;
318
+
color: var(--text-tertiary);
319
+
margin-left: 0.25rem;
320
+
vertical-align: super;
321
+
letter-spacing: 0.03em;
313
322
}
314
323
315
324
.brand p {