2 files changed, 110 insertions, 8 deletions
diff --git a/src/content/dependencies/generateCommentaryIndexPage.js b/src/content/dependencies/generateCommentaryIndexPage.js
new file mode 100644
index 00000000..0cb5a408
--- /dev/null
+++ b/src/content/dependencies/generateCommentaryIndexPage.js
@@ -0,0 +1,102 @@
+import {accumulateSum, stitchArrays} from '../../util/sugar.js';
+import {filterMultipleArrays, sortChronologically} from '../../util/wiki-data.js';
+
+export default {
+  contentDependencies: ['generatePageLayout', 'linkAlbumCommentary'],
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl({albumData}) {
+    return {albumData};
+  },
+
+  query(sprawl) {
+    const query = {};
+
+    query.albums =
+      sortChronologically(sprawl.albumData.slice());
+
+    const entries =
+      query.albums.map(album =>
+        [album, ...album.tracks]
+          .filter(({commentary}) => commentary)
+          .map(({commentary}) => commentary));
+
+    query.wordCounts =
+      entries.map(entries =>
+        accumulateSum(
+          entries,
+          entry => entry.split(' ').length));
+
+    query.entryCounts =
+      entries.map(entries => entries.length);
+
+    filterMultipleArrays(query.albums, query.wordCounts, query.entryCounts,
+      (album, wordCount, entryCount) => entryCount >= 1);
+
+    return query;
+  },
+
+  relations(relation, query) {
+    return {
+      layout:
+        relation('generatePageLayout'),
+
+      albumLinks:
+        query.albums
+          .map(album => relation('linkAlbumCommentary', album)),
+    };
+  },
+
+  data(query) {
+    return {
+      wordCounts: query.wordCounts,
+      entryCounts: query.entryCounts,
+
+      totalWordCount: accumulateSum(query.wordCounts),
+      totalEntryCount: accumulateSum(query.entryCounts),
+    };
+  },
+
+  generate(data, relations, {html, language}) {
+    return relations.layout.slots({
+      title: language.$('commentaryIndex.title'),
+
+      headingMode: 'static',
+
+      mainClasses: ['long-content'],
+      mainContent: [
+        html.tag('p', language.$('commentaryIndex.infoLine', {
+          words:
+            html.tag('b',
+              language.formatWordCount(data.totalWordCount, {unit: true})),
+
+          entries:
+            html.tag('b',
+                language.countCommentaryEntries(data.totalEntryCount, {unit: true})),
+        })),
+
+        html.tag('p',
+          language.$('commentaryIndex.albumList.title')),
+
+        html.tag('ul',
+          stitchArrays({
+            albumLink: relations.albumLinks,
+            wordCount: data.wordCounts,
+            entryCount: data.entryCounts,
+          }).map(({albumLink, wordCount, entryCount}) =>
+            html.tag('li',
+              language.$('commentaryIndex.albumList.item', {
+                album: albumLink,
+                words: language.formatWordCount(wordCount, {unit: true}),
+                entries: language.countCommentaryEntries(entryCount, {unit: true}),
+              })))),
+      ],
+
+      navLinkStyle: 'hierarchical',
+      navLinks: [
+        {auto: 'home'},
+        {auto: 'current'},
+      ],
+    });
+  },
+};
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index 848727db..a194e268 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -359,14 +359,14 @@ export default {
             return {
               type: 'image',
               data:
-                image.slots({
-                  src,
-                  class: 'content-image',
-                  link: link ?? true,
-                  width: width ?? null,
-                  height: height ?? null,
-                  thumb: slots.thumb,
-                }),
+                html.tag('div', {class: 'content-image'},
+                  image.slots({
+                    src,
+                    link: link ?? true,
+                    width: width ?? null,
+                    height: height ?? null,
+                    thumb: slots.thumb,
+                  })),
             };
           }