content, data: Album.nameDetail

8 files changed, 129 insertions, 64 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index a9ded1f0..152518b0 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -73,6 +73,9 @@ export default {
     name:
       album.name,
 
+    nameDetail:
+      album.nameDetail,
+
     style:
       album.style,
 
@@ -91,6 +94,9 @@ export default {
             album: data.name,
           }),
 
+        titleDetail:
+          language.sanitize(data.nameDetail),
+
         color: data.color,
         headingMode: 'sticky',
         styleTags: relations.albumStyleTags,
diff --git a/src/content/dependencies/generateAlbumSidebarGroupBox.js b/src/content/dependencies/generateAlbumSidebarGroupBox.js
index 9aa29cf6..529a48d4 100644
--- a/src/content/dependencies/generateAlbumSidebarGroupBox.js
+++ b/src/content/dependencies/generateAlbumSidebarGroupBox.js
@@ -99,7 +99,9 @@ export default {
               language.$(boxCapsule, 'next', {
                 [language.onlyIfOptions]: ['album'],
 
-                album: relations.nextAlbumLink,
+                album:
+                  relations.nextAlbumLink
+                    ?.slot('showNameDetail', 'accent'),
               })),
 
           slots.mode === 'album' &&
@@ -109,7 +111,9 @@ export default {
               language.$(boxCapsule, 'previous', {
                 [language.onlyIfOptions]: ['album'],
 
-                album: relations.previousAlbumLink,
+                album:
+                  relations.previousAlbumLink
+                    ?.slot('showNameDetail', 'accent'),
               })),
         ],
       })),
diff --git a/src/content/dependencies/generateAlbumSidebarTrackListBox.js b/src/content/dependencies/generateAlbumSidebarTrackListBox.js
index 4e9437c9..f46c7dbe 100644
--- a/src/content/dependencies/generateAlbumSidebarTrackListBox.js
+++ b/src/content/dependencies/generateAlbumSidebarTrackListBox.js
@@ -17,7 +17,9 @@ export default {
 
       content: [
         html.tag('h1', {[html.onlyIfSiblings]: true},
-          relations.albumLink),
+          relations.albumLink.slots({
+            showNameDetail: 'inside',
+          })),
 
         relations.trackSections,
       ],
diff --git a/src/content/dependencies/generateCoverArtworkArtTagDetails.js b/src/content/dependencies/generateCoverArtworkArtTagDetails.js
index db69533d..b34fbdd8 100644
--- a/src/content/dependencies/generateCoverArtworkArtTagDetails.js
+++ b/src/content/dependencies/generateCoverArtworkArtTagDetails.js
@@ -67,5 +67,8 @@ export default {
               preferShortName: data.preferShortName,
             }).map(({artTagLink, preferShortName}) =>
                 html.tag('li',
-                  artTagLink.slot('preferShortName', preferShortName)))))),
+                  artTagLink.slots({
+                    preferShortName,
+                    showTooltip: 'wiki',
+                  })))))),
 };
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
index 1211dfb8..b6a59097 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
@@ -57,7 +57,10 @@ export default {
           const workingOptions = {};
 
           workingOptions.album =
-            relations.albumLink.slot('color', false);
+            relations.albumLink.slots({
+              showNameDetail: 'accent',
+              color: false,
+            });
 
           const yearCapsule = language.encapsulate(itemCapsule, 'withYear');
 
diff --git a/src/content/dependencies/generatePreviousNextLink.js b/src/content/dependencies/generatePreviousNextLink.js
index 1e98358f..1166b6aa 100644
--- a/src/content/dependencies/generatePreviousNextLink.js
+++ b/src/content/dependencies/generatePreviousNextLink.js
@@ -44,13 +44,14 @@ export default {
 
     return html.resolve(slots.link, {
       slots: {
-        tooltipStyle: 'browser',
-        color: false,
         attributes,
 
+        showTooltip: 'browser',
+        color: false,
+
         content:
           language.$('misc.nav', slots.direction),
-      }
+      },
     });
   },
 };
diff --git a/src/content/dependencies/linkThing.js b/src/content/dependencies/linkThing.js
index 166a857d..64b3ddcd 100644
--- a/src/content/dependencies/linkThing.js
+++ b/src/content/dependencies/linkThing.js
@@ -19,6 +19,7 @@ export default {
   data: (pathKey, thing) => ({
     name: thing.name,
     nameShort: thing.nameShort ?? thing.shortName,
+    nameDetail: thing.nameDetail,
     nameText: thing.nameText,
 
     path:
@@ -43,9 +44,28 @@ export default {
       default: false,
     },
 
-    tooltipStyle: {
-      validate: v => v.is('none', 'auto', 'browser', 'wiki'),
-      default: 'auto',
+    showTooltip: {
+      // This is a bit of a misnomer since it just switches between two
+      // modes of differently conditional behavior (or no tooltip ever).
+      // But there's no world where BOTH modes are active at once, so.
+      validate: v => v.is(
+        // false - no tooltip
+        false,
+
+        // wiki - shows a wiki tooltip containing the thing's entire name
+        // if slots.preferShortName is set and a short name is present
+        'wiki',
+
+        // browser - shows a browser tooltip containing the thing's name
+        // if slots.content is set
+        'browser'),
+
+      default: false,
+    },
+
+    showNameDetail: {
+      validate: v => v.is(false, 'accent', 'inside'),
+      default: false,
     },
 
     color: {
@@ -54,10 +74,7 @@ export default {
     },
 
     colorContext: {
-      validate: v => v.is(
-        'image-box',
-        'primary-only'),
-
+      validate: v => v.is('image-box', 'primary-only'),
       default: 'primary-only',
     },
 
@@ -70,7 +87,7 @@ export default {
     hash: {type: 'string'},
   },
 
-  generate(data, relations, slots, {html}) {
+  generate(data, relations, slots, {html, language}) {
     const path =
       slots.path ?? data.path;
 
@@ -80,36 +97,64 @@ export default {
     const name =
       relations.name.slot('preferShortName', slots.preferShortName);
 
+    const showCustomContent =
+      !html.isBlank(slots.content);
+
     const showShortName =
-      slots.preferShortName &&
-     !data.nameText &&
-      data.nameShort &&
-      data.nameShort !== data.name;
-
-    const showWikiTooltip =
-      (slots.tooltipStyle === 'auto'
-        ? showShortName
-        : slots.tooltipStyle === 'wiki');
-
-    const wikiTooltip =
-      showWikiTooltip &&
+      !!(slots.preferShortName &&
+         data.nameShort &&
+         data.nameShort !== data.name &&
+        !data.nameText &&
+        !showCustomContent);
+
+    const effectiveTooltipStyle =
+      (slots.showTooltip === 'wiki'
+        ? (showShortName ? 'wiki' : null)
+
+     : slots.showTooltip === 'browser'
+        ? (showCustomContent ? 'browser' : null)
+
+        : null);
+
+    if (effectiveTooltipStyle === 'browser') {
+      linkAttributes.add('title', data.name);
+    }
+
+    let wikiTooltip = null;
+    if (effectiveTooltipStyle === 'wiki') {
+      wikiTooltip =
         relations.tooltip.slots({
           attributes: {class: 'thing-name-tooltip'},
           content: data.name,
         });
 
-    if (slots.tooltipStyle === 'browser') {
-      linkAttributes.add('title', data.name);
-    }
-
-    if (showWikiTooltip) {
       linkAttributes.add('class', 'text-with-tooltip-interaction-cue');
     }
 
+    const showNameDetail =
+      !!(slots.showNameDetail &&
+         data.nameDetail &&
+        !showCustomContent);
+
+    const effectiveNameDetailStyle =
+      (showNameDetail === true
+        ? slots.showNameDetail
+        : null);
+
+    const nameDetailCapsule =
+      language.encapsulate('misc.linkWithNameDetail');
+
     const content =
-      (html.isBlank(slots.content)
-        ? name
-        : slots.content);
+      (showCustomContent
+        ? slots.content
+
+     : effectiveNameDetailStyle === 'inside'
+        ? language.$(nameDetailCapsule, 'insideLink', {
+            name,
+            detail: data.nameDetail,
+          })
+
+        : name);
 
     if (slots.color !== false) {
       const {colorStyle} = relations;
@@ -120,26 +165,42 @@ export default {
         colorStyle.setSlot('color', slots.color);
       }
 
-      if (showWikiTooltip) {
+      if (effectiveTooltipStyle === 'wiki') {
         wrapperAttributes.add(colorStyle);
       } else {
         linkAttributes.add(colorStyle);
       }
     }
 
+    const link =
+      relations.linkTemplate.slots({
+        path: slots.anchor ? [] : path,
+        href: slots.anchor ? '' : null,
+        attributes: linkAttributes,
+        hash: slots.hash,
+        linkless: slots.linkless,
+        content,
+      });
+
+    const text =
+      (effectiveNameDetailStyle === 'accent'
+        ? language.$(nameDetailCapsule, 'withAccent', {
+            link,
+
+            accent:
+              html.tag('span', {class: 'name-detail'},
+                language.$(nameDetailCapsule, 'accent', {
+                  detail: data.nameDetail,
+                })),
+          })
+
+        : link);
+
     return relations.textWithTooltip.slots({
       attributes: wrapperAttributes,
       customInteractionCue: true,
 
-      text:
-        relations.linkTemplate.slots({
-          path: slots.anchor ? [] : path,
-          href: slots.anchor ? '' : null,
-          attributes: linkAttributes,
-          hash: slots.hash,
-          linkless: slots.linkless,
-          content,
-        }),
+      text,
 
       tooltip:
         wikiTooltip ?? null,
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index b2d878ac..4079f0f0 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -3,6 +3,7 @@ import {basename} from 'node:path';
 import {logWarn} from '#cli';
 import {bindFind} from '#find';
 import {replacerSpec, parseContentNodes} from '#replacer';
+import {errors} from '#sugar';
 
 import {Marked} from 'marked';
 import striptags from 'striptags';
@@ -625,28 +626,12 @@ export default {
             if (hash) link.setSlot('hash', hash);
 
             // TODO: This is obviously hacky.
-            let hasPreferShortNameSlot;
-            try {
-              link.getSlotDescription('preferShortName');
-              hasPreferShortNameSlot = true;
-            } catch {
-              hasPreferShortNameSlot = false;
-            }
-
-            if (hasPreferShortNameSlot) {
+            if (!errors(() => link.getSlotDescription('preferShortName'))) {
               link.setSlot('preferShortName', slots.preferShortLinkNames);
             }
 
             // TODO: The same, the same.
-            let hasTooltipStyleSlot;
-            try {
-              link.getSlotDescription('tooltipStyle');
-              hasTooltipStyleSlot = true;
-            } catch {
-              hasTooltipStyleSlot = false;
-            }
-
-            if (hasTooltipStyleSlot) {
+            if (!errors(() => link.getSlotDescription('tooltipStyle'))) {
               link.setSlot('tooltipStyle', 'none');
             }