Lucas WintherandClaude Opus 5.5
2fbf3a6980
About, Listen & lyrics (real player, synced lyrics, Watch), Paths (strip when the timeline is hidden, motif rows, nine-place chart), Fan works. Co-Authored-By: Claude Opus 5.5 <[email protected]>
31 lines
1.8 KiB
TypeScript
31 lines
1.8 KiB
TypeScript
// About: track, saga, story time, the Odyssey reference (with "Read the passage" when the content folder is
|
|
// mounted), the facts, and the parts and singers. Watch and the listen entry live in Listen & lyrics.
|
|
import { sagaOf, songs, type AlbumSong } from "../../data/album";
|
|
import { roman } from "../content";
|
|
import { esc } from "./util";
|
|
|
|
export function aboutView(song: AlbumSong, mounted: boolean): HTMLElement {
|
|
const el = document.createElement("div");
|
|
el.className = "about";
|
|
const saga = sagaOf(song);
|
|
const o = song.odyssey;
|
|
const homer = !o ? "No counterpart in Homer"
|
|
: mounted
|
|
? `<span class="odref">Book ${roman(o.book)}</span><button type="button" class="readbtn" data-act="read">Read the passage <span aria-hidden="true">→</span></button>`
|
|
: `<span class="odref">Book ${roman(o.book)}</span> · <a href="${esc(o.url)}" target="_blank" rel="noopener noreferrer">Butcher & Lang on Gutenberg</a>`;
|
|
const parts = song.parts.length
|
|
? song.parts.map((p) => `<li><span class="parts__name">${esc(p.name)}</span><span class="parts__who">${p.singers.map(esc).join(", ")}</span></li>`).join("")
|
|
: song.singers.map((s) => `<li><span class="parts__name">${esc(s)}</span></li>`).join("");
|
|
el.innerHTML = `
|
|
<dl class="facts">
|
|
<div><dt>Track</dt><dd>${song.track} of ${songs.length} · ${song.sagaTrack} in the saga</dd></div>
|
|
<div><dt>Saga</dt><dd>${esc(saga.name)} <span class="facts__soft">(${saga.year})</span></dd></div>
|
|
<div><dt>Story time</dt><dd>${esc(song.storyTime.label)}</dd></div>
|
|
<div><dt>The Odyssey</dt><dd>${homer}</dd></div>
|
|
</dl>
|
|
${song.facts.map((f) => `<p class="about__fact">${esc(f)}</p>`).join("")}
|
|
<h3 class="sec">${song.parts.length ? "Parts and singers" : "Singers"}</h3>
|
|
<ol class="parts">${parts}</ol>`;
|
|
return el;
|
|
}
|