Merge branch 'preview' into image-overlay

3 files changed, 176 insertions, 45 deletions

diff --git a/src/page/album.js b/src/page/album.js
index 897e5110..24033b1d 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -50,6 +50,8 @@ export function write(album, {wikiData}) {
   };
 
   const hasAdditionalFiles = !empty(album.additionalFiles);
+  const numAdditionalFiles = album.additionalFiles.flatMap((g) => g.files).length;
+
   const albumDuration = getTotalDuration(album.tracks);
 
   const displayTrackSections =
@@ -336,18 +338,22 @@ export function write(album, {wikiData}) {
               ]),
 
             ...html.fragment(
-              hasAdditionalFiles &&
-                generateAdditionalFilesList(album.additionalFiles, {
-                  // TODO: Kinda near the metal here...
-                  getFileSize: (file) =>
-                    getSizeOfAdditionalFile(
-                      urls.from('media.root').to(
-                        'media.albumAdditionalFile',
-                        album.directory,
-                        file)),
-                  linkFile: (file) =>
-                    link.albumAdditionalFile({album, file}),
-                })),
+              hasAdditionalFiles && [
+                html.tag('p',
+                  {id: 'additional-files', class: ['content-heading']},
+                  language.$('releaseInfo.additionalFiles.heading', {
+                    additionalFiles: language.countAdditionalFiles(numAdditionalFiles, {
+                      unit: true,
+                    }),
+                  })),
+
+                generateAlbumAdditionalFilesList(album, album.additionalFiles, {
+                  generateAdditionalFilesList,
+                  getSizeOfAdditionalFile,
+                  link,
+                  urls,
+                }),
+              ]),
 
             ...html.fragment(
               album.commentary && [
@@ -543,7 +549,7 @@ export function generateAlbumSidebar(album, currentTrack, {
           html.tag(
             'summary',
             {style: getLinkThemeString(color)},
-            [
+            html.tag('span', [
               listTag === 'ol' &&
                 language.$('albumSidebar.trackList.group.withRange', {
                   group: groupName,
@@ -555,7 +561,7 @@ export function generateAlbumSidebar(album, currentTrack, {
                 language.$('albumSidebar.trackList.group', {
                   group: groupName,
                 }),
-            ]),
+            ])),
           html.tag(listTag,
             listTag === 'ol' ? {start: startIndex + 1} : {},
             tracks.map(trackToListItem)),
@@ -834,3 +840,26 @@ export function generateAlbumChronologyLinks(album, currentTrack, {
         })),
     ]);
 }
+
+export function generateAlbumAdditionalFilesList(album, additionalFiles, {
+  fileSize = true,
+
+  generateAdditionalFilesList,
+  getSizeOfAdditionalFile,
+  link,
+  urls,
+}) {
+  return generateAdditionalFilesList(additionalFiles, {
+    getFileSize:
+      (fileSize
+        ? (file) =>
+            // TODO: Kinda near the metal here...
+            getSizeOfAdditionalFile(
+              urls
+                .from('media.root')
+                .to('media.albumAdditionalFile', album.directory, file))
+        : () => null),
+    linkFile: (file) =>
+      link.albumAdditionalFile({album, file}),
+  });
+}
diff --git a/src/page/group.js b/src/page/group.js
index 9a48c1d8..81e1728d 100644
--- a/src/page/group.js
+++ b/src/page/group.js
@@ -247,9 +247,10 @@ function generateGroupSidebar(currentGroup, isGallery, {
           [
             html.tag('summary',
               {style: getLinkThemeString(category.color)},
-              language.$('groupSidebar.groupList.category', {
-                category: `<span class="group-name">${category.name}</span>`,
-              })),
+              html.tag('span',
+                language.$('groupSidebar.groupList.category', {
+                  category: `<span class="group-name">${category.name}</span>`,
+                }))),
             html.tag('ul',
               category.groups.map((group) => {
                 const linkKey = (
diff --git a/src/page/track.js b/src/page/track.js
index caba3668..7f0d1cf2 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -5,6 +5,7 @@ import {
   generateAlbumNavLinks,
   generateAlbumSecondaryNav,
   generateAlbumSidebar,
+  generateAlbumAdditionalFilesList as unbound_generateAlbumAdditionalFilesList,
 } from './album.js';
 
 import {
@@ -73,6 +74,11 @@ export function write(track, {wikiData}) {
   const hasCommentary =
     track.commentary || otherReleases.some((t) => t.commentary);
 
+  const hasAdditionalFiles = !empty(track.additionalFiles);
+  const hasSheetMusicFiles = !empty(track.sheetMusicFiles);
+  const hasMidiProjectFiles = !empty(track.midiProjectFiles);
+  const numAdditionalFiles = album.additionalFiles.flatMap((g) => g.files).length;
+
   const generateCommentary = ({language, link, transformMultiline}) =>
     transformMultiline([
       track.commentary,
@@ -161,12 +167,16 @@ export function write(track, {wikiData}) {
     page: ({
       absoluteTo,
       fancifyURL,
+      generateAdditionalFilesList,
+      generateAdditionalFilesShortcut,
       generateChronologyLinks,
+      generateContentHeading,
       generateNavigationLinks,
       generateTrackListDividedByGroups,
       getAlbumStylesheet,
       getArtistString,
       getLinkThemeString,
+      getSizeOfAdditionalFile,
       getThemeString,
       getTrackCover,
       html,
@@ -184,6 +194,14 @@ export function write(track, {wikiData}) {
         link,
       });
 
+      const generateAlbumAdditionalFilesList = bindOpts(unbound_generateAlbumAdditionalFilesList, {
+        [bindOpts.bindIndex]: 2,
+        generateAdditionalFilesList,
+        getSizeOfAdditionalFile,
+        link,
+        urls,
+      });
+
       return {
         title: language.$('trackPage.title', {track: track.name}),
         stylesheet: getAlbumStylesheet(album, {to}),
@@ -274,6 +292,30 @@ export function write(track, {wikiData}) {
               ]),
 
             html.tag('p',
+              {
+                [html.onlyIfContent]: true,
+                [html.joinChildren]: '<br>',
+              },
+              [
+                hasSheetMusicFiles &&
+                  language.$('releaseInfo.sheetMusicFiles.shortcut', {
+                    link: html.tag('a',
+                      {href: '#sheet-music-files'},
+                      language.$('releaseInfo.sheetMusicFiles.shortcut.link')),
+                  }),
+
+                hasMidiProjectFiles &&
+                  language.$('releaseInfo.midiProjectFiles.shortcut', {
+                    link: html.tag('a',
+                      {href: '#midi-project-files'},
+                      language.$('releaseInfo.midiProjectFiles.shortcut.link')),
+                  }),
+
+                hasAdditionalFiles &&
+                  generateAdditionalFilesShortcut(track.additionalFiles),
+              ]),
+
+            html.tag('p',
               (empty(track.urls)
                 ? language.$('releaseInfo.listenOn.noLinks')
                 : language.$('releaseInfo.listenOn', {
@@ -283,8 +325,10 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(otherReleases) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.alsoReleasedAs')),
+                generateContentHeading({
+                  id: 'also-released-as',
+                  title: language.$('releaseInfo.alsoReleasedAs'),
+                }),
 
                 html.tag('ul', otherReleases.map(track =>
                   html.tag('li', language.$('releaseInfo.alsoReleasedAs.item', {
@@ -295,8 +339,10 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(contributorContribs) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.contributors')),
+                generateContentHeading({
+                  id: 'contributors',
+                  title: language.$('releaseInfo.contributors'),
+                }),
 
                 html.tag('ul', contributorContribs.map(contrib =>
                   html.tag('li', getArtistString([contrib], {
@@ -307,20 +353,26 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(referencedTracks) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.tracksReferenced', {
-                    track: html.tag('i', track.name),
-                  })),
+                generateContentHeading({
+                  id: 'references',
+                  title:
+                    language.$('releaseInfo.tracksReferenced', {
+                      track: html.tag('i', track.name),
+                    }),
+                }),
 
                 html.tag('ul', referencedTracks.map(getTrackItem)),
               ]),
 
             ...html.fragment(
               !empty(referencedByTracks) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.tracksThatReference', {
-                    track: html.tag('i', track.name),
-                  })),
+                generateContentHeading({
+                  id: 'referenced-by',
+                  title:
+                    language.$('releaseInfo.tracksThatReference', {
+                      track: html.tag('i', track.name),
+                    }),
+                }),
 
                 generateTrackListDividedByGroups(referencedByTracks, {
                   getTrackItem,
@@ -330,20 +382,26 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               !empty(sampledTracks) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.tracksSampled', {
-                    track: html.tag('i', track.name),
-                  })),
+                generateContentHeading({
+                  id: 'samples',
+                  title:
+                    language.$('releaseInfo.tracksSampled', {
+                      track: html.tag('i', track.name),
+                    }),
+                }),
 
                 html.tag('ul', sampledTracks.map(getTrackItem)),
               ]),
 
             ...html.fragment(
               !empty(sampledByTracks) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.tracksThatSample', {
-                    track: html.tag('i', track.name),
-                  })),
+                generateContentHeading({
+                  id: 'sampled-by',
+                  title:
+                    language.$('releaseInfo.tracksThatSample', {
+                      track: html.tag('i', track.name),
+                    })
+                }),
 
                 html.tag('ul', sampledByTracks.map(getTrackItem)),
               ]),
@@ -351,10 +409,13 @@ export function write(track, {wikiData}) {
             ...html.fragment(
               wikiInfo.enableFlashesAndGames &&
               !empty(flashesThatFeature) && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.flashesThatFeature', {
-                    track: html.tag('i', track.name),
-                  })),
+                generateContentHeading({
+                  id: 'featured-in',
+                  title:
+                    language.$('releaseInfo.flashesThatFeature', {
+                      track: html.tag('i', track.name),
+                    }),
+                }),
 
                 html.tag('ul', flashesThatFeature.map(({flash, as}) =>
                   html.tag('li',
@@ -371,16 +432,56 @@ export function write(track, {wikiData}) {
 
             ...html.fragment(
               track.lyrics && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.lyrics')),
+                generateContentHeading({
+                  id: 'lyrics',
+                  title: language.$('releaseInfo.lyrics'),
+                }),
 
                 html.tag('blockquote', transformLyrics(track.lyrics)),
               ]),
 
             ...html.fragment(
+              hasSheetMusicFiles && [
+                generateContentHeading({
+                  id: 'sheet-music-files',
+                  title: language.$('releaseInfo.sheetMusicFiles.heading'),
+                }),
+
+                generateAlbumAdditionalFilesList(album, track.sheetMusicFiles, {
+                  fileSize: false,
+                }),
+              ]),
+
+            ...html.fragment(
+              hasMidiProjectFiles && [
+                generateContentHeading({
+                  id: 'midi-project-files',
+                  title: language.$('releaseInfo.midiProjectFiles.heading'),
+                }),
+
+                generateAlbumAdditionalFilesList(album, track.midiProjectFiles),
+              ]),
+
+            ...html.fragment(
+              hasAdditionalFiles && [
+                generateContentHeading({
+                  id: 'additional-files',
+                  title: language.$('releaseInfo.additionalFiles.heading', {
+                    additionalFiles: language.countAdditionalFiles(numAdditionalFiles, {
+                      unit: true,
+                    }),
+                  })
+                }),
+
+                generateAlbumAdditionalFilesList(album, track.additionalFiles),
+              ]),
+
+            ...html.fragment(
               hasCommentary && [
-                html.tag('p', {class: ['content-heading']},
-                  language.$('releaseInfo.artistCommentary')),
+                generateContentHeading({
+                  id: 'artist-commentary',
+                  title: language.$('releaseInfo.artistCommentary'),
+                }),
 
                 html.tag('blockquote', generateCommentary({
                   link,