import { createClient } from '@supabase/supabase-js' import { parseHTML } from 'linkedom' import markdownIt from 'markdown-it' import truncateHtml from 'truncate-html' import { convert } from 'html-to-text' const md = markdownIt({ html: true, linkify: true }) const ICON_MAP = { alertTriangle: ``, arrowLeft: ``, article: ``, books: ``, circleCheck: ``, circleX: ``, deviceSpeaker: ``, deviceTvOld: ``, film: ``, headphones: ``, heart: ``, infoCircle: ``, link: ``, mapPin: ``, needle: ``, movie: ``, } const regionNames = new Intl.DisplayNames(['en'], { type: 'region' }) const getCountryName = (countryCode) => regionNames.of(countryCode.trim()) || countryCode.trim() const parseCountryField = (countryField) => { if (!countryField) return null const delimiters = [',', '/', '&', 'and'] let countries = [countryField] delimiters.forEach(delimiter => countries = countries.flatMap(country => country.split(delimiter))) return countries.map(getCountryName).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 `${item['genre_name']}` case 'artist': return `${item['name']}` case 'book': return `${item['title']}` 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}` } async function fetchDataByUrl(supabase, table, url) { const { data, error } = await supabase.from(table).select('*').eq('url', url).single() if (error) { console.error(`Error fetching from ${table}:`, error) return null } return data } const formatDate = (date) => new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) async function fetchGlobals(supabase) { const { data, error } = await supabase.from('optimized_globals').select('*').single() if (error) { console.error('Error fetching globals:', error) return {} } return data } function 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.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 } } function updateDynamicContent(html, metadata, mediaHtml) { const { document } = parseHTML(html) const titleTag = document.querySelector('title[data-dynamic="title"]') if (titleTag) titleTag.textContent = metadata['title'] const dynamicMetaSelectors = [ { selector: 'meta[data-dynamic="description"]', attribute: 'content', value: metadata.description }, { selector: 'meta[data-dynamic="og:title"]', attribute: 'content', value: metadata['og:title'] }, { selector: 'meta[data-dynamic="og:description"]', attribute: 'content', value: metadata['og:description'] }, { selector: 'meta[data-dynamic="og:image"]', attribute: 'content', value: metadata['og:image'] }, { selector: 'meta[data-dynamic="og:url"]', attribute: 'content', value: metadata.canonical }, ] dynamicMetaSelectors.forEach(({ selector, attribute, value }) => { const element = document.querySelector(selector) if (element) element.setAttribute(attribute, value) }) const canonicalLink = document.querySelector('link[rel="canonical"]') if (canonicalLink) canonicalLink.setAttribute('href', metadata.canonical) const pageElement = document.querySelector('[data-dynamic="page"]') if (pageElement) pageElement.innerHTML = mediaHtml return document.toString() } const warningBanner = `` function generateAssociatedMediaHTML(data, isGenre = false) { const sections = [ { key: 'artists', icon: 'headphones', category: 'music', title: 'Related Artist(s)' }, { key: 'books', icon: 'books', category: 'books', title: 'Related Book(s)' }, { key: 'genres', icon: 'headphones', category: 'music', title: 'Related Genre(s)' }, { key: 'related_movies', icon: 'film', category: 'movies', title: 'Related Movie(s)' }, { key: 'posts', icon: 'article', category: 'article', title: 'Related Post(s)' }, { key: 'shows', icon: 'deviceTvOld', category: 'tv', title: 'Related Show(s)' } ] return sections .filter(({ key }) => !(isGenre && key === 'artists')) .map(({ key, category, icon, title }) => data[key] && data[key].length ? `

${ICON_MAP[icon]} ${title}

` : '' ) .join('') } function generateWatchingHTML(media, globals, type) { const isShow = type === 'show' const label = isShow ? 'show' : 'movie' const lastWatched = media.lastWatched || (isShow && media.episode?.last_watched_at) return ` ${ICON_MAP.arrowLeft} Back to watching
${media.title} / ${media.year}

${media.title} (${media.year})

${media.favorite ? `

${ICON_MAP.heart} This is one of my favorite ${label}s!

` : ''} ${media.tattoo ? `

${ICON_MAP.needle} I have a tattoo inspired by this ${label}!

` : ''} ${media.collected ? `

${ICON_MAP.circleCheck} This ${label} is in my collection!

` : ''} ${lastWatched ? `

Last watched on ${formatDate(lastWatched)}

` : ''}
${media.review ? `${warningBanner}

My thoughts

${md.render(media.review)}

` : ''} ${generateAssociatedMediaHTML(media)} ${media.description ? `

Overview

${md.render(media.description)}

` : ''}
` } function generateConcertModal(concert) { const venue = concert.venue_name ? concert.venue_latitude && concert.venue_longitude ? `${concert.venue_name_short}` : concert.venue_name_short : '' const notesModal = concert.notes ? `

Notes

${md.render(concert.notes)}
` : '' return `
  • ${formatDate(concert.date)} at ${venue} ${notesModal}
    • ` } function generateArtistHTML(artist, globals) { const playLabel = artist?.total_plays === 1 ? 'play' : 'plays' const concertsList = artist.concerts?.length ? `

    ${ICON_MAP['deviceSpeaker']} I've seen this artist live!

    ` : '' const albumsTable = artist.albums?.length ? ` ${artist.albums.map(album => ` `).join('')}
    AlbumPlaysYear
    ${album.name} ${album.total_plays || 0} ${album.release_year}

    These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.

    ` : '' return ` ${ICON_MAP.arrowLeft} Back to music
    ${artist.name} / ${artist.country}

    ${artist.name}

    ${ICON_MAP['mapPin']} ${parseCountryField(artist.country)}

    ${artist.favorite ? `

    ${ICON_MAP['heart']} This is one of my favorite artists!

    ` : ''} ${artist.tattoo ? `

    ${ICON_MAP['needle']} I have a tattoo inspired by this artist!

    ` : ''} ${artist.total_plays ? `

    ${artist.total_plays} ${playLabel}

    ` : ''}

    ${artist.genre ? `${artist.genre.name}` : ''}

    ${artist.description ? `

    Overview

    ${md.render(artist.description)}
    ` : '' } ${concertsList} ${albumsTable}
    ` } function 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 ${formatDate(book['date_finished'])}` : percentage ? `
    ` : '' return ` ${ICON_MAP['arrowLeft']} Back to books
    ${alt}

    ${book.title}

    ${book.rating ? `

    ${book.rating}

    ` : ''} ${book.author ? `

    By ${book.author}

    ` : ''} ${book.favorite ? `

    ${ICON_MAP.heart} This is one of my favorite books!

    ` : ''} ${book.tattoo ? `

    ${ICON_MAP.needle} I have a tattoo inspired by this book!

    ` : ''} ${status ? `

    ${status}

    ` : ''}
    ${book.review ? `${warningBanner}

    My thoughts

    ${book.review}

    ` : ''} ${generateAssociatedMediaHTML(book)}

    Overview

    ${md.render(book.description)}

    ` } function generateGenreHTML(genre) { const artistCount = genre.artists?.length || 0 const connectingWords = artistCount > 1 ? 'artists are' : 'artist is' const mediaLinks = generateMediaLinks(genre.artists, 'artist', 5) return ` ${ICON_MAP.arrowLeft} Back to music

    ${genre.name}

    ${mediaLinks ? `

    My top ${genre.name} ${connectingWords} ${mediaLinks}. I've listened to ${genre.total_plays} tracks from this genre.

    ` : ''} ${generateAssociatedMediaHTML(genre, true)} ${genre.description ? `

    Overview

    ${md.render(genre.description)}

    Continue reading at Wikipedia.

    Wikipedia content provided under the terms of the Creative Commons BY-SA license.

    ` : ''}
    ` } export default { async fetch(request, env) { const url = new URL(request.url) const path = url.pathname.replace(/\/$/, '') const supabaseUrl = env.SUPABASE_URL const supabaseKey = env.SUPABASE_KEY const supabase = createClient(supabaseUrl, supabaseKey) let data, type if (path === '/books' || path === '/books/') return fetch('https://coryd.dev/books/') if (path.startsWith('/books/years/')) return fetch(`https://coryd.dev${path}`) if (path.startsWith('/watching/movies/')) { data = await fetchDataByUrl(supabase, 'optimized_movies', path) type = 'movie' } else if (path.startsWith('/watching/shows/')) { data = await fetchDataByUrl(supabase, 'optimized_shows', path) type = 'show' } else if (path.startsWith('/music/artists/')) { data = await fetchDataByUrl(supabase, 'optimized_artists', path) type = 'artist' } else if (path.startsWith('/music/genres/')) { data = await fetchDataByUrl(supabase, 'optimized_genres', path) type = 'genre' } else if (path.startsWith('/books/')) { data = await fetchDataByUrl(supabase, 'optimized_books', path) type = 'book' } else { return Response.redirect('https://coryd.dev/404', 302) } if (!data) return Response.redirect('https://coryd.dev/404', 302) const globals = await fetchGlobals(supabase) let mediaHtml switch (type) { case 'artist': mediaHtml = generateArtistHTML(data, globals) break case 'genre': mediaHtml = generateGenreHTML(data, globals) break case 'book': mediaHtml = generateBookHTML(data, globals) break default: mediaHtml = generateWatchingHTML(data, globals, type) break } const templateResponse = await fetch('https://coryd.dev/dynamic.html') const template = await templateResponse.text() const metadata = generateMetadata(data, type, globals) const html = updateDynamicContent(template, metadata, mediaHtml) const headers = new Headers({ 'Content-Type': 'text/html', 'Cache-Control': 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400', }) return new Response(html, { headers }) } }