bug fixes and divided artist listings

plus some tweaks to changelog formatting

2 files changed, 163 insertions, 52 deletions

diff --git a/static/site.css b/static/site.css
index 3d33a5bb..2d47385a 100644
--- a/static/site.css
+++ b/static/site.css
@@ -34,7 +34,7 @@ a:hover {
     text-decoration: underline;
 }
 
-.columns {
+.layout-columns {
     display: flex;
 }
 
@@ -103,16 +103,29 @@ a:hover {
     fill: var(--fg-color);
 }
 
+.content-columns {
+    columns: 2;
+}
+
+.content-columns .column {
+    break-inside: avoid;
+}
+
+.content-columns .column h2 {
+    margin-top: 0;
+    font-size: 1em;
+}
+
 @media (max-width: 780px) {
     #sidebar:not(.no-hide) {
         display: none;
     }
 
-    .columns.vertical-when-thin {
+    .layout-columns.vertical-when-thin {
         flex-direction: column;
     }
 
-    .columns.vertical-when-thin > *:not(:last-child) {
+    .layout-columns.vertical-when-thin > *:not(:last-child) {
         margin-bottom: 10px;
     }
 
@@ -123,6 +136,12 @@ a:hover {
     }
 }
 
+@media (max-width: 600px) {
+    .content-columns {
+        columns: 1;
+    }
+}
+
 #sidebar, #content, #header {
     background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6);
     border: 1px dotted var(--fg-color);
@@ -131,7 +150,7 @@ a:hover {
 
 #sidebar {
     flex: 1 1 20%;
-    min-width: 200px;
+    min-width: 150px;
     max-width: 250px;
     flex-basis: 250px;
     float: left;
diff --git a/upd8.js b/upd8.js
index 9fe75521..3218c472 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1026,7 +1026,7 @@ async function writePage(directoryParts, {
     const layoutHTML = [
         navHTML,
         sidebar.content ? fixWS`
-            <div ${classes('columns', !collapse && 'vertical-when-thin')}>
+            <div ${classes('layout-columns', !collapse && 'vertical-when-thin')}>
                 ${sidebarHTML}
                 ${mainHTML}
             </div>
@@ -1617,7 +1617,7 @@ async function writeArtistPage(artistName) {
                 <a href="${C.TRACK_DIRECTORY}/${track.directory}/" style="${getThemeString(track)}">${track.name}</a>
                 ${track.artists.includes(artistName) && track.artists.length > 1 && `<span class="contributed">(with ${getArtistString(track.artists.filter(a => a !== artistName))})</span>` || `<!-- (here: Co-artist credits) -->`}
                 ${contrib.what && `<span class="contributed">(${getContributionString(contrib) || 'contributed'})</span>` || `<!-- (here: Contribution details) -->`}
-                ${flashes.length && `<br><span class="flashes">(Featured in ${joinNoOxford(flashes.map(getFlashLinkHTML))})</span></br>` || `<!-- (here: Flashes featuring this track) -->`}
+                ${flashes.length && `<br><span class="flashes">(Featured in ${joinNoOxford(flashes.map(flash => getFlashLinkHTML(flash)))})</span></br>` || `<!-- (here: Flashes featuring this track) -->`}
             </li>
         `;
     });
@@ -1690,7 +1690,7 @@ async function writeArtistPage(artistName) {
                                 ${thing.album ? fixWS`
                                     <a href="${C.TRACK_DIRECTORY}/${thing.directory}/" style="${getThemeString(thing)}">${thing.name}</a>
                                 ` : '(album commentary)'}
-                                ${flashes.length && `<br><span class="flashes">(Featured in ${joinNoOxford(flashes.map(getFlashLinkHTML))})</span></br>`}
+                                ${flashes.length && `<br><span class="flashes">(Featured in ${joinNoOxford(flashes.map(flash => getFlashLinkHTML(flash)))})</span></br>`}
                             </li>
                         `
                     }, false)}
@@ -1905,6 +1905,8 @@ async function writeFlashPage(flash) {
 
 function writeListingPages() {
     const allArtists = artistNames.slice().sort();
+    const reversedTracks = allTracks.slice().reverse();
+    const reversedThings = justEverythingMan.slice().reverse();
 
     const getAlbumLI = (album, extraText = '') => fixWS`
         <li>
@@ -1954,11 +1956,61 @@ function writeListingPages() {
                     (${commentary} ${commentary === 1 ? 'entry' : 'entries'})
                 </li>
             `)],
-        [['artists', 'by-contribs'], `Artists - by Contributions`, allArtists
-            .map(name => ({name, contribs: C.getArtistNumContributions(name, {albumData, allTracks, flashData})}))
-            .sort((a, b) => b.contribs - a.contribs)
-            .map(({ name }) => name)
-            .map(getArtistLI)],
+        [['artists', 'by-contribs'], `Artists - by Contributions`, fixWS`
+            <div class="content-columns">
+                <div class="column">
+                    <h2>Track Contributors</h2>
+                    <ul>
+                        ${allArtists
+                            .map(name => ({
+                                name,
+                                contribs: allTracks.filter(({ album, artists, contributors }) =>
+                                    album?.directory !== C.UNRELEASED_TRACKS_DIRECTORY &&
+                                    [
+                                        ...artists,
+                                        ...contributors
+                                    ].some(({ who }) => who === name)).length
+                            }))
+                            .sort((a, b) => b.contribs - a.contribs)
+                            .filter(({ contribs }) => contribs)
+                            .map(({ name, contribs }) => fixWS`
+                                <li>
+                                    <a href="${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(name)}">${name}</a>
+                                    (${contribs} <abbr title="contributions (to track music)">c.</abbr>)
+                                </li>
+                            `)
+                            .join('\n')
+                        }
+                    </ul>
+                </div>
+                <div class="column">
+                    <h2>Art &amp; Flash Contributors</h2>
+                    <ul>
+                        ${allArtists
+                            .map(name => ({
+                                name,
+                                contribs: justEverythingMan.filter(({ album, contributors, coverArtists }) => (
+                                    album?.directory !== C.UNRELEASED_TRACKS_DIRECTORY &&
+                                    [
+                                        ...!album && contributors || [],
+                                        ...coverArtists || []
+                                    ].some(({ who }) => who === name)
+                                )).length
+                            }))
+                            .sort((a, b) => b.contribs - a.contribs)
+                            .filter(({ contribs }) => contribs)
+                            .map(({ name, contribs }) => fixWS`
+                                <li>
+                                    <a href="${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(name)}">${name}</a>
+                                    (${contribs} <abbr title="contributions (to art and flashes)">c.</abbr>)
+                                </li>
+                            `)
+                            .join('\n')
+                        }
+                    </ul>
+                </div>
+            </div>
+        `],
         [['artists', 'by-duration'], `Artists - by Duration`, allArtists
             .map(name => ({name, duration: getTotalDuration(
                 getTracksByArtist(name).filter(track => track.album.directory !== C.UNRELEASED_TRACKS_DIRECTORY))
@@ -1971,23 +2023,57 @@ function writeListingPages() {
                     (~${getDurationString(duration)})
                 </li>
             `)],
-        [['artists', 'by-latest'], `Artists - by Latest Contribution`, C.sortByDate(allArtists
-            .map(name => ({name, things: C.getThingsArtistContributedTo(name, {albumData, allTracks, flashData})}))
-            .map(({ name, things }) => ({name, things: things.filter(thing => !thing.album || thing.album.directory !== C.UNRELEASED_TRACKS_DIRECTORY)}))
-            .filter(({ things }) => things.length)
-            .map(({ name, things }) => ({name, date: new Date(things.reduce((date, thing) => Math.max(date,
-                (thing.coverArtists?.some(({ who }) => who === name)
-                    ? thing.coverArtDate
-                    : thing.date)), 0))}))
-            .sort((a, b) => a.name < b.name ? 1 : a.name > b.name ? -1 : 0)
-        )
-            .reverse()
-            .map(({ name, date }) => fixWS`
-                <li>
-                    <a href="${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(name)}/">${name}</a>
-                    (${getDateString({date})})
-                </li>
-            `)],
+        [['artists', 'by-latest'], `Artists - by Latest Contribution`, fixWS`
+            <div class="content-columns">
+                <div class="column">
+                    <h2>Track Contributors</h2>
+                    <ul>
+                        ${C.sortByDate(allArtists
+                            .map(name => ({
+                                name,
+                                date: reversedTracks.find(({ album, artists, contributors }) => (
+                                    album.directory !== C.UNRELEASED_TRACKS_DIRECTORY &&
+                                    [...artists, ...contributors].some(({ who }) => who === name)
+                                ))?.date
+                            }))
+                            .filter(({ date }) => date)
+                            .sort((a, b) => a.name < b.name ? 1 : a.name > b.name ? -1 : 0)
+                        ).reverse().map(({ name, date }) => fixWS`
+                            <li>
+                                <a href="${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(name)}/">${name}</a>
+                                (${getDateString({date})})
+                            </li>
+                        `).join('\n')}
+                    </ul>
+                </div>
+                <div class="column">
+                    <h2>Art &amp; Flash Contributors</h2>
+                    <ul>
+                        ${C.sortByDate(allArtists
+                            .map(name => {
+                                const thing = reversedThings.find(({ album, coverArtists, contributors }) => (
+                                    album?.directory !== C.UNRELEASED_TRACKS_DIRECTORY &&
+                                    [...coverArtists || [], ...!album && contributors || []].some(({ who }) => who === name)
+                                ));
+                                return thing && {
+                                    name,
+                                    date: (thing.coverArtists?.some(({ who }) => who === name)
+                                        ? thing.coverArtDate
+                                        : thing.date)
+                                };
+                            })
+                            .filter(Boolean)
+                            .sort((a, b) => a.name < b.name ? 1 : a.name > b.name ? -1 : 0)
+                        ).reverse().map(({ name, date }) => fixWS`
+                            <li>
+                                <a href="${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(name)}/">${name}</a>
+                                (${getDateString({date})})
+                            </li>
+                        `).join('\n')}
+                    </ul>
+                </div>
+            </div>
+        `],
         [['tracks', 'by-name'], `Tracks - by Name`, allTracks.slice()
             .sort(sortByName)
             .map(track => fixWS`
@@ -2068,7 +2154,7 @@ function writeListingPages() {
                 <div id="header">
                     ${generateHeaderForListings(listingDescriptors)}
                 </div>
-                <div class="columns">
+                <div class="layout-columns">
                     <div id="sidebar">
                         ${generateSidebarForListings(listingDescriptors)}
                     </div>
@@ -2085,7 +2171,7 @@ function writeListingPages() {
                 <div id="header">
                     ${generateHeaderForListings(listingDescriptors, 'all-commentary')}
                 </div>
-                <div class="columns">
+                <div class="layout-columns">
                     <div id="sidebar">
                         ${generateSidebarForListings(listingDescriptors, 'all-commentary')}
                     </div>
@@ -2138,7 +2224,7 @@ function writeListingPages() {
                 <div id="header">
                     ${generateHeaderForListings(listingDescriptors, 'random')}
                 </div>
-                <div class="columns">
+                <div class="layout-columns">
                     <div id="sidebar">
                         ${generateSidebarForListings(listingDescriptors, 'random')}
                     </div>
@@ -2174,26 +2260,32 @@ function writeListingPages() {
 }
 
 function writeListingPage(directoryParts, title, items, listingDescriptors) {
-    return OLD_writePage([C.LISTING_DIRECTORY, ...directoryParts], title, fixWS`
-        <body>
-            <div id="header">
-                ${generateHeaderForListings(listingDescriptors, directoryParts)}
-            </div>
-            <div class="columns">
-                <div id="sidebar">
-                    ${generateSidebarForListings(listingDescriptors, directoryParts)}
-                </div>
-                <div id="content">
-                    <h1>${title}</h1>
-                    ${typeof items === 'string' ? items : fixWS`
-                        <ul>
-                            ${items.join('\n')}
-                        </ul>
-                    `}
-                </div>
-            </div>
-        </body>
-    `);
+    return writePage([C.LISTING_DIRECTORY, ...directoryParts], {
+        title,
+
+        main: {
+            content: fixWS`
+                <h1>${title}</h1>
+                ${typeof items === 'string' ? items : fixWS`
+                    <ul>
+                        ${items.join('\n')}
+                    </ul>
+                `}
+            `
+        },
+
+        sidebar: {
+            content: generateSidebarForListings(listingDescriptors, directoryParts)
+        },
+
+        nav: {
+            links: [
+                ['./', 'HSMusic'],
+                [`${C.LISTING_DIRECTORY}/`, 'Listings'],
+                [`${C.LISTING_DIRECTORY}/${directoryParts.join('/')}/`, title]
+            ]
+        }
+    });
 }
 
 function generateHeaderForListings(listingDescriptors, currentDirectoryParts) {