521 lines
16 KiB
JavaScript
521 lines
16 KiB
JavaScript
import truncateHtml from "truncate-html";
|
|
import { convert } from "html-to-text";
|
|
import { parseCountryField } from "./countries.js";
|
|
import { formatDate, md } from "./formatters.js";
|
|
import { ICON_MAP } from "./icons.js";
|
|
|
|
const warningBanner = `<div class="banner warning"><p>${ICON_MAP["alertTriangle"]}There are probably spoilers after this banner — this is a warning about them.</p></div>`;
|
|
|
|
const generateAssociatedMediaHTML = (data, isGenre = false) => {
|
|
const sections = [
|
|
{
|
|
key: "artists",
|
|
icon: "headphones",
|
|
category: "music",
|
|
title: "Related Artist(s)",
|
|
},
|
|
{
|
|
key: "related_artists",
|
|
icon: "headphones",
|
|
category: "music",
|
|
title: "Related Artist(s)",
|
|
},
|
|
{
|
|
key: "genres",
|
|
icon: "headphones",
|
|
category: "music",
|
|
title: "Related Genre(s)",
|
|
},
|
|
{
|
|
key: "movies",
|
|
icon: "film",
|
|
category: "movies",
|
|
title: "Related Movie(s)",
|
|
},
|
|
{
|
|
key: "related_movies",
|
|
icon: "film",
|
|
category: "movies",
|
|
title: "Related Movie(s)",
|
|
},
|
|
{
|
|
key: "shows",
|
|
icon: "deviceTvOld",
|
|
category: "tv",
|
|
title: "Related Show(s)",
|
|
},
|
|
{
|
|
key: "related_shows",
|
|
icon: "deviceTvOld",
|
|
category: "tv",
|
|
title: "Related Show(s)",
|
|
},
|
|
{
|
|
key: "posts",
|
|
icon: "article",
|
|
category: "article",
|
|
title: "Related Post(s)",
|
|
},
|
|
{
|
|
key: "books",
|
|
icon: "books",
|
|
category: "books",
|
|
title: "Related Book(s)",
|
|
},
|
|
{
|
|
key: "related_books",
|
|
icon: "books",
|
|
category: "books",
|
|
title: "Related Book(s)",
|
|
},
|
|
];
|
|
|
|
return sections
|
|
.filter(({ key }) => !(isGenre && key === "artists"))
|
|
.map(({ key, category, icon, title }) => {
|
|
const items = data[key];
|
|
if (!items || items.length === 0) return "";
|
|
|
|
return `
|
|
<div class="associated-media">
|
|
<p class="${category}">${ICON_MAP[icon]} ${title}</p>
|
|
<ul>
|
|
${items
|
|
.map((item) => {
|
|
const name = item.name || item.title;
|
|
const url = item.url;
|
|
const year = item.year ? ` (${item.year})` : "";
|
|
const author = item.author ? ` by ${item.author}` : "";
|
|
const totalPlays = item.total_plays
|
|
? ` <strong class="highlight-text">${item.total_plays} ${
|
|
item.total_plays === 1 ? "play" : "plays"
|
|
}</strong>`
|
|
: "";
|
|
|
|
let listItemContent = name;
|
|
|
|
if (key === "artists" || key === "related_artists") {
|
|
return `<li><a href="${url}">${name}</a>${totalPlays}</li>`;
|
|
} else if (
|
|
key === "movies" ||
|
|
key === "related_movies" ||
|
|
key === "shows" ||
|
|
key === "related_shows"
|
|
) {
|
|
listItemContent = `${name}${year}`;
|
|
} else if (key === "books" || key === "related_books") {
|
|
listItemContent = `${name}${author}`;
|
|
}
|
|
|
|
return `<li><a href="${url}">${listItemContent}</a></li>`;
|
|
})
|
|
.join("")}
|
|
</ul>
|
|
</div>`;
|
|
})
|
|
.join("");
|
|
};
|
|
|
|
const generateMediaLinks = (data, type, count = 10) => {
|
|
if (!data || !type) return "";
|
|
|
|
const dataSlice = data.slice(0, count);
|
|
if (dataSlice.length === 0) return null;
|
|
|
|
const buildLink = (item) => {
|
|
switch (type) {
|
|
case "genre":
|
|
return `<a href="${item["genre_url"]}">${item["genre_name"]}</a>`;
|
|
case "artist":
|
|
return `<a href="${item["url"]}">${item["name"]}</a>`;
|
|
case "book":
|
|
return `<a href="${item["url"]}">${item["title"]}</a>`;
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
if (dataSlice.length === 1) return buildLink(dataSlice[0]);
|
|
|
|
const links = dataSlice.map(buildLink);
|
|
const allButLast = links.slice(0, -1).join(", ");
|
|
const last = links[links.length - 1];
|
|
|
|
return `${allButLast} and ${last}`;
|
|
};
|
|
|
|
export const generateArtistHTML = (artist, globals) => {
|
|
const playLabel = artist?.["total_plays"] === 1 ? "play" : "plays";
|
|
const concertsList = artist["concerts"]?.length
|
|
? `<hr />
|
|
<p id="concerts" class="concerts">
|
|
${ICON_MAP["deviceSpeaker"]}
|
|
I've seen this artist live!
|
|
</p>
|
|
<ul>${artist["concerts"].map(generateConcertModal).join("")}</ul>`
|
|
: "";
|
|
const albumsTable = artist["albums"]?.length
|
|
? `<table>
|
|
<tr><th>Album</th><th>Plays</th><th>Year</th></tr>
|
|
${artist["albums"]
|
|
.map(
|
|
(album) => `
|
|
<tr>
|
|
<td>${album["name"]}</td>
|
|
<td>${album["total_plays"] || 0}</td>
|
|
<td>${album["release_year"]}</td>
|
|
</tr>`
|
|
)
|
|
.join("")}
|
|
</table>
|
|
<p><em>These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.</em></p>
|
|
`
|
|
: "";
|
|
|
|
return `
|
|
<a class="icon-link" href="/music">${ICON_MAP.arrowLeft} Back to music</a>
|
|
<article class="artist-focus">
|
|
<div class="artist-display">
|
|
<img
|
|
srcset="
|
|
${globals["cdn_url"]}${artist["image"]}?class=w200&type=webp 200w,
|
|
${globals["cdn_url"]}${artist["image"]}?class=w600&type=webp 400w,
|
|
${globals["cdn_url"]}${artist["image"]}?class=w800&type=webp 800w
|
|
"
|
|
sizes="(max-width: 450px) 200px,
|
|
(max-width: 850px) 400px,
|
|
800px"
|
|
src="${globals["cdn_url"]}${artist["image"]}?class=w200&type=webp"
|
|
alt="${artist["name"]} / ${artist["country"]}"
|
|
loading="eager"
|
|
decoding="async"
|
|
width="200"
|
|
height="200"
|
|
/>
|
|
<div class="artist-meta">
|
|
<p class="title"><strong>${artist["name"]}</strong></p>
|
|
<p class="sub-meta country">${ICON_MAP["mapPin"]} ${parseCountryField(
|
|
artist["country"]
|
|
)}</p>
|
|
${
|
|
artist["favorite"]
|
|
? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite artists!</p>`
|
|
: ""
|
|
}
|
|
${
|
|
artist["tattoo"]
|
|
? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this artist!</p>`
|
|
: ""
|
|
}
|
|
${
|
|
artist["total_plays"]
|
|
? `<p class="sub-meta"><strong class="highlight-text">${artist["total_plays"]} ${playLabel}</strong></p>`
|
|
: ""
|
|
}
|
|
<p class="sub-meta">${
|
|
artist["genre"]
|
|
? `<a href="${artist["genre"]["url"]}">${artist["genre"]["name"]}</a>`
|
|
: ""
|
|
}</p>
|
|
</div>
|
|
</div>
|
|
${generateAssociatedMediaHTML(artist)}
|
|
${
|
|
artist["description"]
|
|
? `
|
|
<h2>Overview</h2>
|
|
<div data-toggle-content class="text-toggle-hidden">${md.render(
|
|
artist["description"]
|
|
)}</div>
|
|
<button data-toggle-button>Show more</button>`
|
|
: ""
|
|
}
|
|
${concertsList}
|
|
${albumsTable}
|
|
</article>
|
|
`;
|
|
};
|
|
|
|
export const generateBookHTML = (book, globals) => {
|
|
const alt = `${book["title"]}${
|
|
book["author"] ? ` by ${book["author"]}` : ""
|
|
}`;
|
|
const percentage = book["progress"] ? `${book["progress"]}%` : "";
|
|
const status =
|
|
book["status"] === "finished"
|
|
? `Finished on <strong class="highlight-text">${formatDate(
|
|
book["date_finished"]
|
|
)}</strong>`
|
|
: percentage
|
|
? `<div class="progress-bar-wrapper" title="${percentage}">
|
|
<div style="width:${percentage}" class="progress-bar"></div>
|
|
</div>`
|
|
: "";
|
|
|
|
return `
|
|
<a class="icon-link" href="/books">${
|
|
ICON_MAP["arrowLeft"]
|
|
} Back to books</a>
|
|
<article class="book-focus">
|
|
<div class="book-display">
|
|
<img
|
|
srcset="
|
|
${globals["cdn_url"]}${
|
|
book["image"]
|
|
}?class=verticalsm&type=webp 200w,
|
|
${globals["cdn_url"]}${
|
|
book["image"]
|
|
}?class=verticalmd&type=webp 400w,
|
|
${globals["cdn_url"]}${
|
|
book["image"]
|
|
}?class=verticalbase&type=webp 800w
|
|
"
|
|
sizes="(max-width: 450px) 203px, (max-width: 850px) 406px, 812px"
|
|
src="${globals["cdn_url"]}${book["image"]}?class=verticalsm&type=webp"
|
|
alt="${alt}"
|
|
loading="lazy"
|
|
decoding="async"
|
|
width="200"
|
|
height="307"
|
|
/>
|
|
<div class="book-meta">
|
|
<p class="title"><strong>${book["title"]}</strong></p>
|
|
${book["rating"] ? `<p>${book["rating"]}</p>` : ""}
|
|
${
|
|
book["author"] ? `<p class="sub-meta">By ${book["author"]}</p>` : ""
|
|
}
|
|
${
|
|
book["favorite"]
|
|
? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite books!</p>`
|
|
: ""
|
|
}
|
|
${
|
|
book["tattoo"]
|
|
? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</p>`
|
|
: ""
|
|
}
|
|
${status ? `<p class="sub-meta">${status}</p>` : ""}
|
|
</div>
|
|
</div>
|
|
${
|
|
book["review"]
|
|
? `${warningBanner}<h2>My thoughts</h2><p>${book["review"]}</p>`
|
|
: ""
|
|
}
|
|
${generateAssociatedMediaHTML(book)}
|
|
<h2>Overview</h2>
|
|
<p>${md.render(book["description"])}</p>
|
|
</article>
|
|
`;
|
|
};
|
|
|
|
export const generateGenreHTML = (genre) => {
|
|
const artistCount = genre["artists"]?.length || 0;
|
|
const connectingWords = artistCount > 1 ? "artists are" : "artist is";
|
|
const mediaLinks = generateMediaLinks(genre["artists"], "artist", 5);
|
|
|
|
return `
|
|
<a class="icon-link" href="/music">${
|
|
ICON_MAP["arrowLeft"]
|
|
} Back to music</a>
|
|
<h2>${genre["name"]}</h2>
|
|
<article class="genre-focus">
|
|
${
|
|
mediaLinks
|
|
? `
|
|
<p>My top <strong class="highlight-text">${genre["name"]}</strong> ${connectingWords} ${mediaLinks}. I've listened to <strong class="highlight-text">${genre["total_plays"]}</strong> tracks from this genre.</p>
|
|
<hr />`
|
|
: ""
|
|
}
|
|
${generateAssociatedMediaHTML(genre, true)}
|
|
${
|
|
genre["description"]
|
|
? `
|
|
<h3>Overview</h3>
|
|
<div data-toggle-content class="text-toggle-hidden">
|
|
${md.render(genre["description"])}
|
|
<p><a href="${
|
|
genre["wiki_link"]
|
|
}">Continue reading at Wikipedia.</a></p>
|
|
<p><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a>.</em></p>
|
|
</div>
|
|
<button data-toggle-button>Show more</button>`
|
|
: ""
|
|
}
|
|
</article>
|
|
`;
|
|
};
|
|
|
|
export const generateMetadata = (data, type, globals) => {
|
|
let title = globals["site_name"];
|
|
let description = data["description"] || globals["site_description"];
|
|
const canonicalUrl = data["url"]
|
|
? `${globals["url"]}${data["url"]}`
|
|
: globals["url"];
|
|
const ogImage = `${globals["cdn_url"]}${(data["backdrop"] ? data["backdrop"] : data["image"]) || globals["avatar"]}?class=w800`;
|
|
|
|
description = convert(
|
|
truncateHtml(md.render(description), 100, {
|
|
byWords: true,
|
|
ellipsis: "...",
|
|
}),
|
|
{
|
|
wordwrap: false,
|
|
selectors: [
|
|
{ selector: "a", options: { ignoreHref: true } },
|
|
{ selector: "h1", options: { uppercase: false } },
|
|
{ selector: "h2", options: { uppercase: false } },
|
|
{ selector: "h3", options: { uppercase: false } },
|
|
{ selector: "*", format: "block" },
|
|
],
|
|
}
|
|
)
|
|
.replace(/\s+/g, " ")
|
|
.trim();
|
|
|
|
switch (type) {
|
|
case "artist":
|
|
title = `Artists / ${data["name"]} / ${globals["site_name"]}`;
|
|
break;
|
|
case "genre":
|
|
title = `Genre / ${data["name"]} / ${globals["site_name"]}`;
|
|
break;
|
|
case "book":
|
|
title = `Books / ${data["title"]} by ${data["author"]} / ${globals["site_name"]}`;
|
|
break;
|
|
case "movie":
|
|
title = `Movies / ${data["title"]} (${data["year"]}) / ${globals["site_name"]}`;
|
|
break;
|
|
case "show":
|
|
title = `Shows / ${data["title"]} / ${globals["site_name"]}`;
|
|
break;
|
|
default:
|
|
title = `${data["title"] || globals["site_name"]}`;
|
|
}
|
|
|
|
return {
|
|
title,
|
|
description,
|
|
"og:title": title,
|
|
"og:description": description,
|
|
"og:image": ogImage,
|
|
"og:url": canonicalUrl,
|
|
canonical: canonicalUrl,
|
|
};
|
|
};
|
|
|
|
export const generateWatchingHTML = (media, globals, type) => {
|
|
const isShow = type === "show";
|
|
const label = isShow ? "show" : "movie";
|
|
const lastWatched =
|
|
media["last_watched"] || (isShow && media["episode"]?.["last_watched_at"]);
|
|
|
|
return `
|
|
<a class="icon-link" href="/watching">${
|
|
ICON_MAP.arrowLeft
|
|
} Back to watching</a>
|
|
<article class="watching focus">
|
|
<img
|
|
srcset="
|
|
${globals["cdn_url"]}${
|
|
media["backdrop"]
|
|
}?class=bannersm&type=webp 256w,
|
|
${globals["cdn_url"]}${
|
|
media["backdrop"]
|
|
}?class=bannermd&type=webp 512w,
|
|
${globals["cdn_url"]}${
|
|
media["backdrop"]
|
|
}?class=bannerbase&type=webp 1024w
|
|
"
|
|
sizes="(max-width: 450px) 256px,
|
|
(max-width: 850px) 512px,
|
|
1024px"
|
|
src="${globals["cdn_url"]}${media["backdrop"]}?class=bannersm&type=webp"
|
|
alt="${media["title"]} / ${media["year"]}"
|
|
class="image-banner"
|
|
loading="eager"
|
|
decoding="async"
|
|
width="256"
|
|
height="180"
|
|
/>
|
|
<div class="meta">
|
|
<p class="title"><strong>${media["title"]}</strong> (${
|
|
media["year"]
|
|
})</p>
|
|
${media["rating"] ? `<p>${media["rating"]}</p>` : ""}
|
|
${
|
|
media["favorite"]
|
|
? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite ${label}s!</p>`
|
|
: ""
|
|
}
|
|
${
|
|
media["tattoo"]
|
|
? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!</p>`
|
|
: ""
|
|
}
|
|
${
|
|
media["collected"]
|
|
? `<p class="sub-meta collected">${ICON_MAP["circleCheck"]} This ${label} is in my collection!</p>`
|
|
: ""
|
|
}
|
|
${
|
|
lastWatched
|
|
? `<p class="sub-meta">Last watched on <strong class="highlight-text">${formatDate(
|
|
lastWatched
|
|
)}</strong>.</p>`
|
|
: ""
|
|
}
|
|
</div>
|
|
${
|
|
media["review"]
|
|
? `${warningBanner}<h2>My thoughts</h2><p>${md.render(
|
|
media["review"]
|
|
)}</p>`
|
|
: ""
|
|
}
|
|
${generateAssociatedMediaHTML(media)}
|
|
${
|
|
media["description"]
|
|
? `<h2>Overview</h2><p>${md.render(media["description"])}</p>`
|
|
: ""
|
|
}
|
|
</article>
|
|
`;
|
|
};
|
|
|
|
export const generateConcertModal = (concert) => {
|
|
const venue = concert["venue_name"]
|
|
? concert["venue_latitude"] && concert["venue_longitude"]
|
|
? `<a href="https://www.openstreetmap.org/?mlat=${concert["venue_latitude"]}&mlon=${concert["venue_longitude"]}#map=18/${concert["venue_latitude"]}/${concert["venue_longitude"]}">${concert["venue_name_short"]}</a>`
|
|
: concert["venue_name_short"]
|
|
: "";
|
|
|
|
const notesModal = concert["notes"]
|
|
? `<input class="modal-input" id="${
|
|
concert["id"]
|
|
}" type="checkbox" tabindex="0" />
|
|
<label class="modal-toggle" for="${concert["id"]}">${
|
|
ICON_MAP["infoCircle"]
|
|
}</label>
|
|
<div class="modal-wrapper">
|
|
<div class="modal-body">
|
|
<label class="modal-close" for="${concert["id"]}">${
|
|
ICON_MAP["circleX"]
|
|
}</label>
|
|
<div>
|
|
<h3>Notes</h3>
|
|
${md.render(concert["notes"])}
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
: "";
|
|
|
|
return `
|
|
<li>
|
|
<strong class="highlight-text">${formatDate(
|
|
concert["date"]
|
|
)}</strong> at ${venue}
|
|
${notesModal}
|
|
</li>
|
|
`;
|
|
};
|