Malachite is a tool to import your Last.fm and Spotify listening history to the AT Protocol network using the
fm.teal.alpha.feed.play lexicon.
malachite
scrobbles
importer
atproto
music
feat(web): define __WEB_VERSION__ and __CLI_VERSION__ at build time and show in sticky header
+55
-1
+3
web/src/app.d.ts
+3
web/src/app.d.ts
+44
web/src/routes/+layout.svelte
+44
web/src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
2
import './layout.css';
3
3
let { children } = $props();
4
+
5
+
const webVersion: string = __WEB_VERSION__;
6
+
const cliVersion: string = __CLI_VERSION__;
4
7
</script>
5
8
6
9
<svelte:head>
···
19
22
/>
20
23
</svelte:head>
21
24
25
+
<header>
26
+
<span class="wordmark">malachite</span>
27
+
<div class="version-strip">
28
+
<span>web v{webVersion}</span>
29
+
<span class="sep">–</span>
30
+
<span>cli v{cliVersion}</span>
31
+
</div>
32
+
</header>
33
+
22
34
{@render children()}
35
+
36
+
<style>
37
+
header {
38
+
position: sticky;
39
+
top: 0;
40
+
z-index: 10;
41
+
display: flex;
42
+
align-items: center;
43
+
justify-content: space-between;
44
+
padding: 0.6rem 1.5rem;
45
+
background: var(--bg);
46
+
border-bottom: 1px solid var(--border);
47
+
}
48
+
.wordmark {
49
+
font-size: 0.85rem;
50
+
font-weight: 600;
51
+
font-family: 'JetBrains Mono', monospace;
52
+
color: var(--accent);
53
+
letter-spacing: -0.02em;
54
+
}
55
+
.version-strip {
56
+
font-size: 0.7rem;
57
+
font-family: 'JetBrains Mono', monospace;
58
+
color: var(--muted);
59
+
letter-spacing: 0.03em;
60
+
user-select: none;
61
+
}
62
+
.sep {
63
+
margin: 0 0.4rem;
64
+
color: var(--muted);
65
+
}
66
+
</style>
+8
-1
web/vite.config.ts
+8
-1
web/vite.config.ts
···
1
1
import tailwindcss from '@tailwindcss/vite';
2
2
import { sveltekit } from '@sveltejs/kit/vite';
3
3
import { defineConfig } from 'vite';
4
+
import { readFileSync } from 'fs';
5
+
import { resolve } from 'path';
6
+
7
+
const webPkg = JSON.parse(readFileSync(resolve('package.json'), 'utf-8'));
8
+
const cliPkg = JSON.parse(readFileSync(resolve('../package.json'), 'utf-8'));
4
9
5
10
export default defineConfig({
6
11
plugins: [tailwindcss(), sveltekit()],
7
12
// Ensure Buffer / global are polyfilled for @atproto/api in the browser
8
13
define: {
9
-
global: 'globalThis'
14
+
global: 'globalThis',
15
+
__WEB_VERSION__: JSON.stringify(webPkg.version),
16
+
__CLI_VERSION__: JSON.stringify(cliPkg.version)
10
17
},
11
18
optimizeDeps: {
12
19
include: ['@atproto/api', '@atproto/common-web']