chronology tweaks & html.onlyIfContent bugfix

4 files changed, 57 insertions, 55 deletions

diff --git a/src/misc-templates.js b/src/misc-templates.js
index 2275269..0a33648 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -154,19 +154,20 @@ function unbound_generateChronologyLinks(currentThing, {
   headingString,
 }) {
   const contributions = currentThing[contribKey];
-  if (!contributions) {
-    return '';
+
+  if (empty(contributions)) {
+    return [];
   }
 
   if (contributions.length > 8) {
-    return `<div class="chronology">${language.$('misc.chronology.seeArtistPages')}</div>`;
+    return html.tag('div', {class: 'chronology'},
+      language.$('misc.chronology.seeArtistPages'));
   }
 
   return contributions
     .map(({who: artist}) => {
-      const thingsUnsorted = unique(getThings(artist)).filter(
-        (t) => t[dateKey]
-      );
+      const thingsUnsorted = unique(getThings(artist))
+        .filter((t) => t[dateKey]);
 
       // Kinda a hack, but we automatically detect which is (probably) the
       // right function to use here.
@@ -208,10 +209,7 @@ function unbound_generateChronologyLinks(currentThing, {
                 navigation,
               })
             : heading)));
-    })
-    // TODO: use html.fragment when calling and get rid of these lines
-    .filter(Boolean)
-    .join('\n');
+    });
 }
 
 // Content warning tags
diff --git a/src/page/album.js b/src/page/album.js
index 741fcab..cb512e8 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -580,8 +580,6 @@ export function generateAlbumChronologyLinks(album, currentTrack, {
   generateChronologyLinks,
   html,
 }) {
-  const isTrackPage = !!currentTrack;
-
   return html.tag(
     'div',
     {
@@ -589,34 +587,38 @@ export function generateAlbumChronologyLinks(album, currentTrack, {
       class: 'nav-chronology-links',
     },
     [
-      isTrackPage &&
-        generateChronologyLinks(currentTrack, {
-          contribKey: 'artistContribs',
-          getThings: (artist) => [
-            ...artist.tracksAsArtist,
-            ...artist.tracksAsContributor,
-          ],
-          headingString: 'misc.chronology.heading.track',
-        }),
+      ...html.fragment(
+        currentTrack && [
+          ...html.fragment(
+            generateChronologyLinks(currentTrack, {
+              contribKey: 'artistContribs',
+              getThings: (artist) => [
+                ...artist.tracksAsArtist,
+                ...artist.tracksAsContributor,
+              ],
+              headingString: 'misc.chronology.heading.track',
+            })),
 
-      isTrackPage &&
-        generateChronologyLinks(currentTrack, {
-          contribKey: 'contributorContribs',
+          ...html.fragment(
+            generateChronologyLinks(currentTrack, {
+              contribKey: 'contributorContribs',
+              getThings: (artist) => [
+                ...artist.tracksAsArtist,
+                ...artist.tracksAsContributor,
+              ],
+              headingString: 'misc.chronology.heading.track',
+            })),
+        ]),
+
+      ...html.fragment(
+        generateChronologyLinks(currentTrack || album, {
+          contribKey: 'coverArtistContribs',
+          dateKey: 'coverArtDate',
           getThings: (artist) => [
-            ...artist.tracksAsArtist,
-            ...artist.tracksAsContributor,
+            ...artist.albumsAsCoverArtist,
+            ...artist.tracksAsCoverArtist,
           ],
-          headingString: 'misc.chronology.heading.track',
-        }),
-
-      generateChronologyLinks(currentTrack || album, {
-        contribKey: 'coverArtistContribs',
-        dateKey: 'coverArtDate',
-        getThings: (artist) => [
-          ...artist.albumsAsCoverArtist,
-          ...artist.tracksAsCoverArtist,
-        ],
-        headingString: 'misc.chronology.heading.coverArt',
-      }),
+          headingString: 'misc.chronology.heading.coverArt',
+        })),
     ]);
 }
diff --git a/src/page/flash.js b/src/page/flash.js
index 1e818ae..e5353a1 100644
--- a/src/page/flash.js
+++ b/src/page/flash.js
@@ -229,6 +229,10 @@ function generateNavForFlash(flash, {
     bottomRowContent: previousNextLinks && `(${previousNextLinks})`,
 
     content: html.tag('div',
+      {
+        [html.onlyIfContent]: true,
+        class: 'nav-chronology-links',
+      },
       generateChronologyLinks(flash, {
         headingString: 'misc.chronology.heading.flash',
         contribKey: 'contributorContribs',
diff --git a/src/util/html.js b/src/util/html.js
index 6c429b9..a6b0d62 100644
--- a/src/util/html.js
+++ b/src/util/html.js
@@ -56,6 +56,18 @@ export function tag(tagName, ...args) {
     throw new Error(`Tag <${tagName}> is self-closing but got content!`);
   }
 
+  if (Array.isArray(content)) {
+    if (content.some(item => Array.isArray(item))) {
+      throw new Error(`Found array instead of string (tag) or null/falsey, did you forget to \`...\` spread an array or fragment?`);
+    }
+
+    const joiner = attrs?.[joinChildren];
+    content = content.filter(Boolean).join(
+      (joiner
+        ? `\n${joiner}\n`
+        : '\n'));
+  }
+
   if (attrs?.[onlyIfContent] && !content) {
     return '';
   }
@@ -71,18 +83,6 @@ export function tag(tagName, ...args) {
     openTag = tagName;
   }
 
-  if (Array.isArray(content)) {
-    if (content.some(item => Array.isArray(item))) {
-      throw new Error(`Found array instead of string (tag) or null/falsey, did you forget to \`...\` spread an array or fragment?`);
-    }
-
-    const joiner = attrs?.[joinChildren];
-    content = content.filter(Boolean).join(
-      (joiner
-        ? `\n${joiner}\n`
-        : '\n'));
-  }
-
   if (content) {
     if (content.includes('\n')) {
       return [
@@ -102,12 +102,10 @@ export function tag(tagName, ...args) {
     } else {
       return `<${openTag}>${content}</${tagName}>`;
     }
+  } else if (selfClosing) {
+    return `<${openTag}>`;
   } else {
-    if (selfClosing) {
-      return `<${openTag}>`;
-    } else {
-      return `<${openTag}></${tagName}>`;
-    }
+    return `<${openTag}></${tagName}>`;
   }
 }