1---
2// The REPL page with the song browser, and the link preview it shows when
3// shared. pages/index.astro renders it for the site; pages/songs/ renders
4// it once per song, with that song's preview and `song` set, so the page
5// opens on that song (client.mjs reads the jev-song meta tag).
6import HeadCommon from '../components/HeadCommon.astro';
7import { Repl } from '../repl/Repl';
8import { loadSongs, songsJson } from './songs.mjs';
9import { siteDescription, siteName, siteUrl } from './site.mjs';
10import { parseReleases } from './releases.mjs';
11import releasesText from '../../../RELEASES.md?raw';
12
13const { song } = Astro.props;
14const songs = await loadSongs();
15const title = song ? `${song.title} - ${siteName}` : siteName;
16const description = song?.description || siteDescription;
17const path = song ? `/songs/${song.id}/` : '/';
18const image = song ? `/og/${song.id}.png` : '/og.png';
19// the release this page is, for the update modal (releases.mjs)
20const release = parseReleases(releasesText)[0]?.version ?? '';
21const imageAlt = song ? `${song.title}: its cover, length and art score` : `${siteName}: song covers beside the title`;
22---
23
24<html lang="en" class="m-0 dark">
25  <head>
26    <HeadCommon />
27    <title>{title}</title>
28    <meta property="og:site_name" content={siteName} />
29    <meta property="og:title" content={song ? song.title : siteName} />
30    <meta property="og:description" content={description} />
31    <meta property="og:type" content={song ? 'music.song' : 'website'} />
32    <meta property="og:url" content={`${siteUrl}${path}`} />
33    <meta property="og:image" content={`${siteUrl}${image}`} />
34    <meta property="og:image:width" content="1200" />
35    <meta property="og:image:height" content="630" />
36    <meta property="og:image:alt" content={imageAlt} />
37    <meta name="twitter:card" content="summary_large_image" />
38    {song && <meta name="jev-song" content={song.id} />}
39    <meta name="jev-release" content={release} />
40  </head>
41  <body class="h-app-height bg-background m-0">
42    <script is:inline type="application/json" id="jev-songs" set:html={songsJson(songs)} />
43    <Repl client:only="react" />
44    <a rel="me" href="https://social.toplap.org/@strudel" target="_blank" class="hidden">mastodon</a>
45  </body>
46</html>