source ⟩ hypertext ⟩ public ⟩ vinyl ⟩ en.pug

//- meta
	slug: vinyl
	translates: vinyl
	lang: en
	title: My music collection
	pageCreated: "2021-04-14"
	pageUpdated: "2026-03-19"

extends ../../views/layout.pug

append presets
	- hasSidenotes = false
	- linkIcons = false
	- hasComments = true
	-
		const artists = annexe.artists;
		const albums = annexe.albums;

		const formats = {
			lp: ["vinyl", "lp"],
			"12in": ["vinyl", "lp"],
			"10in": ["10in", "lp"],
			cd: ["cd", "cd"],
			"2lp": ["2lp", "lp"],
			"3lp": ["3lp", "lp"],
			"2lp1ep": ["2lp1ep", "lp"]
		};

		const genders = {
			"{m}": 0,
			"{mm}": 1,
			"{mx}": 2,
			"{x}": 3,
			"{xx}": 4,
			"{fx}": 5,
			"{ff}": 6,
			"{f}": 7
		};

		function country(artist) {
			return artist.loc.match(/^(\S+)( .+)?$/)[1];
		}

		const short = new Intl.NumberFormat(grimm.dict[lang].meta.code, {
			notation: "compact",
			maximumSignificantDigits: 3
		});

		function shorten(num) {
			let shortened = short.format(num);
			if (lang == "en") {
				shortened = shortened
					.replace("K", "k")
					.replace("M", "mn")
					.replace("B", "bn");
			}
			return shortened;
		}
		
		function parse(text, topic) {
			if ((text === undefined) || (text === null)) {
				return "";
			}
			if (typeof text === "object") {
				if (lang in text) {
					return parse(text[lang], topic);
				} else {
					return null;
				}
			}

			if (topic == "source") {
				text = text.replace("{online}",`<abbr class="accent" title=${tr("vinyl.source.online")}>🌐︎</abbr>`).replace("{secondHand}",`<abbr class="accent" title=${tr("vinyl.source.secondHand")}>♻︎</abbr>`);
			}

			if (topic == "colour") {
				text = text.replace("{cd}", tr("vinyl.na"))
			}

			return text.replace(/\{(.*?)\}/g, (match, p1) =>
				tr(`vinyl.${topic}.${p1}`)
			);
		}

append cosmetics
	link(href="/vinyl/vinyl.css", rel="stylesheet")
	script(src="/cosmetics/sorttable.js")
	script(src="/vinyl/plotmap.js")

block content
	.table-container
		table.sortable
			thead
				tr
					th Album (+ linked sample track)
					th Released
					th Format
					th Acquired
					th Source
					th Vinyl colour
					th Length
					th Case
					th 45 #[+sc('RPM')]?
					th Hometown
					th Gender
					th Feelies
					th Notes
			tbody
				each a in albums
					-
						const mapInfo = {
							lat: gazetteer[a.artist.loc].lat,
							lon: gazetteer[a.artist.loc].lon,
							sprite: { x: a.sprite[1], y: a.sprite[0] },
							artist: a.artist.name,
							title: a.title
								.replace(/<span class="translit">(.*?)<\/span>/g, "/ $1")
								.replace(/<.*?>/g, ""),
							country: country(a.artist),
							city: tr(`loc.city.${a.artist.loc}`)
						};
					tr(data-info=JSON.stringify(mapInfo) data-artist=a.artist.nameSort)
						td(sorttable_customkey=`${a.artist.nameSort}_${a.released}`)
							div
								figure.album-cover(style=`--y: ${a.sprite[0]}; --x: ${a.sprite[1]};`)
								a(href=a.link title=a.linkTitle)
									small!= a.artist.name
									strong!= a.title
						td(sorttable_customkey=a.released)= grimm.date.ce(lang, a.released, 3, {month: a.released.length > 4 ? "short" : undefined})
						td
							img(src=`/vinyl/y2k_${formats[a.format][0]}.png` class=formats[a.format][1] alt="")
							|  !{parse(`{${a.format}}`, "format")}
						td(sorttable_customkey=a.bought)=grimm.date.ce(lang, a.bought, 3, {month: a.bought.length > 4 ? "short" : undefined})
						td!= parse(a.source, "source")
						td(colour=a.colour)!= parse(`{${a.colour}}`, "colour")
						td(sorttable_customkey=`${a.length[0] * 60 + a.length[1]}`.padStart(5, "0")) #{a.length[0]}′ #{a.length[1]}″
						td!= parse(a.case, "case")
						td= a.rpm == 45 ? "✓" : ""
						td(sorttable_customkey=`${tr(`loc.country.${country(a.artist)}`).replace(/^([Tt]he|[Dd]e|[Hh]et) /, "")}, ${tr(`loc.city.${a.artist.loc}`)}`)
							img(src=`/vinyl/flags/${country(a.artist)}.png` alt=tr(`loc.country.${country(a.artist)}`) title=tr(`loc.country.${country(a.artist)}`))
							|  #{tr(`loc.city.${a.artist.loc}`)}
						td(sorttable_customkey=genders[a.artist.gender])!= parse(a.artist.gender, "gender")
						td!= parse(a.feelies, "feelies")
						td!= parse(a.notes, "notes")
	
	figure.map-container
		#map-canvas