content: generateAlbumCommentaryPage

4 files changed, 164 insertions, 140 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
new file mode 100644
index 00000000..15d43a32
--- /dev/null
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -0,0 +1,162 @@
+export default {
+  contentDependencies: [
+    'generateAlbumNavAccent',
+    'generateAlbumStyleRules',
+    'generateColorStyleRules',
+    'generateColorStyleVariables',
+    'generateContentHeading',
+    'generatePageLayout',
+    'linkAlbum',
+    'linkTrack',
+    'transformContent',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, album) {
+    const relations = {};
+
+    relations.layout =
+      relation('generatePageLayout');
+
+    relations.albumStyleRules =
+      relation('generateAlbumStyleRules', album);
+
+    relations.colorStyleRules =
+      relation('generateColorStyleRules', album.color);
+
+    relations.albumLink =
+      relation('linkAlbum', album);
+
+    relations.albumNavAccent =
+      relation('generateAlbumNavAccent', album, null);
+
+    if (album.commentary) {
+      relations.albumCommentaryContent =
+        relation('transformContent', album.commentary);
+    }
+
+    const tracksWithCommentary =
+      album.tracks
+        .filter(({commentary}) => commentary);
+
+    relations.trackCommentaryHeadings =
+      tracksWithCommentary
+        .map(() => relation('generateContentHeading'));
+
+    relations.trackCommentaryLinks =
+      tracksWithCommentary
+        .map(track => relation('linkTrack', track));
+
+    relations.trackCommentaryContent =
+      tracksWithCommentary
+        .map(track => relation('transformContent', track.commentary));
+
+    relations.trackCommentaryColorVariables =
+      tracksWithCommentary
+        .map(track =>
+          (track.color === album.color
+            ? null
+            : relation('generateColorStyleVariables', track.color)));
+
+    return relations;
+  },
+
+  data(album) {
+    const data = {};
+
+    data.name = album.name;
+
+    const tracksWithCommentary =
+      album.tracks
+        .filter(({commentary}) => commentary);
+
+    const thingsWithCommentary =
+      (album.commentary
+        ? [album, ...tracksWithCommentary]
+        : tracksWithCommentary);
+
+    data.entryCount = thingsWithCommentary.length;
+
+    data.wordCount =
+      thingsWithCommentary
+        .map(({commentary}) => commentary)
+        .join(' ')
+        .split(' ')
+        .length;
+
+    data.trackCommentaryDirectories =
+      tracksWithCommentary
+        .map(track => track.directory);
+
+    return data;
+  },
+
+  generate(data, relations, {html, language}) {
+    return relations.layout
+      .slots({
+        title:
+          language.$('albumCommentaryPage.title', {
+            album: data.name,
+          }),
+
+        headingMode: 'sticky',
+
+        colorStyleRules: [relations.colorStyleRules],
+        additionalStyleRules: [relations.albumStyleRules],
+
+        mainClasses: ['long-content'],
+        mainContent: [
+          html.tag('p',
+            language.$('albumCommentaryPage.infoLine', {
+              words:
+                html.tag('b',
+                  language.formatWordCount(data.wordCount, {unit: true})),
+
+              entries:
+                html.tag('b',
+                  language.countCommentaryEntries(data.entryCount, {unit: true})),
+            })),
+
+          relations.albumCommentaryContent && [
+            html.tag('h3',
+              {class: ['content-heading']},
+              language.$('albumCommentaryPage.entry.title.albumCommentary')),
+
+            html.tag('blockquote',
+              relations.albumCommentaryContent),
+          ],
+
+          relations.trackCommentaryContent.map((commentaryContent, i) => [
+            relations.trackCommentaryHeadings[i]
+              .slots({
+                tag: 'h3',
+                id: data.trackCommentaryDirectories[i],
+                title: relations.trackCommentaryLinks[i],
+              }),
+
+            html.tag('blockquote',
+              {style: relations.trackCommentaryColorVariables[i]},
+              relations.trackCommentaryContent[i]),
+          ]),
+        ],
+
+        navLinkStyle: 'hierarchical',
+        navLinks: [
+          {auto: 'home'},
+          {
+            html:
+              relations.albumLink
+                .slot('attributes', {class: 'current'}),
+
+            accent:
+              relations.albumNavAccent.slots({
+                showTrackNavigation: false,
+                showExtraLinks: true,
+                currentExtra: 'commentary',
+              }),
+          },
+        ],
+      });
+  },
+};
diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js
deleted file mode 100644
index eb462d9a..00000000
--- a/src/page/album-commentary.js
+++ /dev/null
@@ -1,137 +0,0 @@
-// Album commentary page and index specifications.
-
-import {generateAlbumExtrasPageNav} from './album.js';
-import {accumulateSum} from '../util/sugar.js';
-import {filterAlbumsByCommentary} from '../util/wiki-data.js';
-
-export const description = `per-album artist commentary pages & index`
-
-export function condition({wikiData}) {
-  return filterAlbumsByCommentary(wikiData.albumData).length;
-}
-
-export function targets({wikiData}) {
-  return filterAlbumsByCommentary(wikiData.albumData);
-}
-
-export function write(album) {
-  const entries = [album, ...album.tracks]
-    .filter((x) => x.commentary)
-    .map((x) => x.commentary);
-  const words = entries.join(' ').split(' ').length;
-
-  const page = {
-    type: 'page',
-    path: ['albumCommentary', album.directory],
-    page: ({
-      getAlbumStylesheet,
-      getLinkThemeString,
-      getThemeString,
-      html,
-      language,
-      link,
-      transformMultiline,
-    }) => ({
-      title: language.$('albumCommentaryPage.title', {album: album.name}),
-      stylesheet: getAlbumStylesheet(album),
-      theme: getThemeString(album.color),
-
-      main: {
-        classes: ['long-content'],
-        headingMode: 'sticky',
-
-        content: [
-          html.tag('p',
-            language.$('albumCommentaryPage.infoLine', {
-              words: html.tag('b', language.formatWordCount(words, {unit: true})),
-              entries: html.tag('b', language.countCommentaryEntries(entries.length, {unit: true})),
-            })),
-
-          ...html.fragment(album.commentary && [
-            html.tag('h3',
-              {class: ['content-heading']},
-              language.$('albumCommentaryPage.entry.title.albumCommentary')),
-
-            html.tag('blockquote',
-              transformMultiline(album.commentary)),
-          ]),
-
-          ...album.tracks.filter(t => t.commentary).flatMap(track => [
-            html.tag('h3',
-              {id: track.directory, class: ['content-heading']},
-              language.$('albumCommentaryPage.entry.title.trackCommentary', {
-                track: link.track(track),
-              })),
-
-            html.tag('blockquote',
-              {style: getLinkThemeString(track.color)},
-              transformMultiline(track.commentary)),
-          ])
-        ],
-      },
-
-      nav: generateAlbumExtrasPageNav(album, 'commentary', {
-        html,
-        language,
-        link,
-      }),
-    }),
-  };
-
-  return [page];
-}
-
-export function writeTargetless({wikiData}) {
-  const data = filterAlbumsByCommentary(wikiData.albumData)
-    .map((album) => ({
-      album,
-      entries: [album, ...album.tracks]
-        .filter((x) => x.commentary)
-        .map((x) => x.commentary),
-    }))
-    .map(({album, entries}) => ({
-      album,
-      entries,
-      words: entries.join(' ').split(' ').length,
-    }));
-
-  const totalEntries = accumulateSum(data, ({entries}) => entries.length);
-  const totalWords = accumulateSum(data, ({words}) => words);
-
-  const page = {
-    type: 'page',
-    path: ['commentaryIndex'],
-    page: ({
-      html,
-      language,
-      link,
-    }) => ({
-      title: language.$('commentaryIndex.title'),
-
-      main: {
-        classes: ['long-content'],
-        headingMode: 'static',
-
-        content: [
-          html.tag('p', language.$('commentaryIndex.infoLine', {
-            words: html.tag('b', language.formatWordCount(totalWords, {unit: true})),
-            entries: html.tag('b', language.countCommentaryEntries(totalEntries, {unit: true})),
-          })),
-
-          html.tag('p', language.$('commentaryIndex.albumList.title')),
-
-          html.tag('ul', data.map(({album, entries, words}) =>
-            html.tag('li', language.$('commentaryIndex.albumList.item', {
-              album: link.albumCommentary(album),
-              words: language.formatWordCount(words, {unit: true}),
-              entries: language.countCommentaryEntries(entries.length, {unit: true}),
-            })))),
-        ],
-      },
-
-      nav: {simple: true},
-    }),
-  };
-
-  return [page];
-}
diff --git a/src/page/album.js b/src/page/album.js
index 390a57c2..a8e0b591 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -1,6 +1,6 @@
 // Album page specification.
 
-export const description = `per-album info & track artwork gallery pages`;
+export const description = `per-album info, artwork gallery & commentary pages`;
 
 export function targets({wikiData}) {
   return wikiData.albumData;
@@ -31,7 +31,6 @@ export function pathsForTarget(album) {
       },
     },
 
-    /*
     hasCommentaryPage && {
       type: 'page',
       path: ['albumCommentary', album.directory],
@@ -42,6 +41,7 @@ export function pathsForTarget(album) {
       },
     },
 
+    /*
     {
       type: 'data',
       path: ['album', album.directory],
diff --git a/src/page/index.js b/src/page/index.js
index 77ebfb6f..01c3d2de 100644
--- a/src/page/index.js
+++ b/src/page/index.js
@@ -8,7 +8,6 @@
 //
 
 export * as album from './album.js';
-// export * as albumCommentary from './album-commentary.js';
 export * as artist from './artist.js';
 // export * as artistAlias from './artist-alias.js';
 // export * as flash from './flash.js';