« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/tap-snapshots/test/snapshot
diff options
context:
space:
mode:
Diffstat (limited to 'tap-snapshots/test/snapshot')
-rw-r--r--tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs29
-rw-r--r--tap-snapshots/test/snapshot/generateAdditionalFilesShortcut.js.test.cjs14
-rw-r--r--tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs37
-rw-r--r--tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs19
-rw-r--r--tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs29
-rw-r--r--tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs26
-rw-r--r--tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs103
-rw-r--r--tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs37
-rw-r--r--tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs28
-rw-r--r--tap-snapshots/test/snapshot/generateTrackAdditionalNamesBox.js.test.cjs99
-rw-r--r--tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs50
-rw-r--r--tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs10
-rw-r--r--tap-snapshots/test/snapshot/image.js.test.cjs14
-rw-r--r--tap-snapshots/test/snapshot/linkContribution.js.test.cjs233
-rw-r--r--tap-snapshots/test/snapshot/linkExternal.js.test.cjs329
-rw-r--r--tap-snapshots/test/snapshot/transformContent.js.test.cjs10
16 files changed, 429 insertions, 638 deletions
diff --git a/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs b/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs
deleted file mode 100644
index 42a409ad..00000000
--- a/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs
+++ /dev/null
@@ -1,29 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generateAdditionalFilesList.js > TAP > generateAdditionalFilesList (snapshot) > basic behavior 1`] = `
-<dl>
-    <dt>SBURB Wallpaper</dt>
-    <dd>
-        <ul>
-            <li>link to 1280x1024 (2.5 kB)</li>
-            <li>link to 1440x900</li>
-        </ul>
-    </dd>
-    <dt>Alternate Covers: This is just an example description.</dt>
-    <dd>
-        <ul>
-            <li>link to alt1 (1.2 MB)</li>
-            <li>link to alt3 (1.2 MB)</li>
-        </ul>
-    </dd>
-</dl>
-`
-
-exports[`test/snapshot/generateAdditionalFilesList.js > TAP > generateAdditionalFilesList (snapshot) > no additional files 1`] = `
-
-`
diff --git a/tap-snapshots/test/snapshot/generateAdditionalFilesShortcut.js.test.cjs b/tap-snapshots/test/snapshot/generateAdditionalFilesShortcut.js.test.cjs
deleted file mode 100644
index e166140a..00000000
--- a/tap-snapshots/test/snapshot/generateAdditionalFilesShortcut.js.test.cjs
+++ /dev/null
@@ -1,14 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generateAdditionalFilesShortcut.js > TAP > generateAdditionalFilesShortcut (snapshot) > basic behavior 1`] = `
-View <a href="#additional-files">additional files</a>: SBURB Wallpaper, Alternate Covers
-`
-
-exports[`test/snapshot/generateAdditionalFilesShortcut.js > TAP > generateAdditionalFilesShortcut (snapshot) > no additional files 1`] = `
-
-`
diff --git a/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
deleted file mode 100644
index 71d9c55d..00000000
--- a/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
+++ /dev/null
@@ -1,37 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generateAlbumCoverArtwork.js > TAP > generateAlbumCoverArtwork (snapshot) > display: primary 1`] = `
-[mocked: image
- args: [
-   [
-     { name: 'Damara', directory: 'damara', isContentWarning: false },
-     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
-     { name: 'Bees', directory: 'bees', isContentWarning: false },
-     { name: 'creepy crawlies', isContentWarning: true }
-   ]
- ]
- slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], color: '#f28514', thumb: 'medium', reveal: true, link: true, square: true }]
-<ul class="image-details">
-    <li><a href="tag/damara/">Damara</a></li>
-    <li><a href="tag/cronus/">Cronus</a></li>
-    <li><a href="tag/bees/">Bees</a></li>
-</ul>
-`
-
-exports[`test/snapshot/generateAlbumCoverArtwork.js > TAP > generateAlbumCoverArtwork (snapshot) > display: thumbnail 1`] = `
-[mocked: image
- args: [
-   [
-     { name: 'Damara', directory: 'damara', isContentWarning: false },
-     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
-     { name: 'Bees', directory: 'bees', isContentWarning: false },
-     { name: 'creepy crawlies', isContentWarning: true }
-   ]
- ]
- slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], color: '#f28514', thumb: 'small', reveal: false, link: false, square: true }]
-`
diff --git a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
index f9fc025b..14cce64e 100644
--- a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
@@ -7,16 +7,17 @@
 'use strict'
 exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > basic behavior 1`] = `
 <p>
-    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/tensei/">Tensei</a></span><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/">
-                        <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
-                        <span class="icon-text">tenseimusic</span>
-                    </a></span></span></span> (hot jams)</span>.
+    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/tensei/">Tensei</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://tenseimusic.bandcamp.com/">
+                        <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-bandcamp"></use></svg></span>
+                        <span class="external-handle">tenseimusic</span>
+                    </a>
+                    <span class="external-platform">Bandcamp</span></span></span></span> (hot jams)</span>.
     <br>
-    Cover art by <a href="artist/hb/">Hanni Brosh</a>.
+    Cover art by <span class="contribution nowrap"><a href="artist/hb/">Hanni Brosh</a></span>.
     <br>
-    Wallpaper art by <a href="artist/hb/">Hanni Brosh</a> and <span class="contribution nowrap"><a href="artist/niklink/">Niklink</a> (edits)</span>.
+    Wallpaper art by <span class="contribution nowrap"><a href="artist/hb/">Hanni Brosh</a></span> and <span class="contribution nowrap"><a href="artist/niklink/">Niklink</a> (edits)</span>.
     <br>
-    Banner art by <a href="artist/hb/">Hanni Brosh</a> and <span class="contribution nowrap"><a href="artist/niklink/">Niklink</a> (edits)</span>.
+    Banner art by <span class="contribution nowrap"><a href="artist/hb/">Hanni Brosh</a></span> and <span class="contribution nowrap"><a href="artist/niklink/">Niklink</a> (edits)</span>.
     <br>
     Released 3/14/2011.
     <br>
@@ -24,7 +25,7 @@ exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseI
     <br>
     Duration: ~10:25.
 </p>
-<p>Listen on <a href="https://homestuck.bandcamp.com/album/alterniabound-with-alternia" class="nowrap">Bandcamp</a>, <a href="https://www.youtube.com/playlist?list=PLnVpmehyaOFZWO9QOZmD6A3TIK0wZ6xE2" class="nowrap">YouTube (playlist)</a>, or <a href="https://www.youtube.com/watch?v=HO5V2uogkYc" class="nowrap">YouTube (full album)</a>.</p>
+<p>Listen on <a class="external-link" href="https://homestuck.bandcamp.com/album/alterniabound-with-alternia">Bandcamp</a>, <a class="external-link" href="https://www.youtube.com/playlist?list=PLnVpmehyaOFZWO9QOZmD6A3TIK0wZ6xE2">YouTube (playlist)</a>, or <a class="external-link" href="https://www.youtube.com/watch?v=HO5V2uogkYc">YouTube (full album)</a>.</p>
 `
 
 exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > equal cover art date 1`] = `
@@ -36,5 +37,5 @@ exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseI
 `
 
 exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > URLs only 1`] = `
-<p>Listen on <a href="https://homestuck.bandcamp.com/foo" class="nowrap">Bandcamp</a> or <a href="https://soundcloud.com/bar" class="nowrap">SoundCloud</a>.</p>
+<p>Listen on <a class="external-link" href="https://homestuck.bandcamp.com/foo">Bandcamp</a> or <a class="external-link" href="https://soundcloud.com/bar">SoundCloud</a>.</p>
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
index f2b51cb5..145dd0f7 100644
--- a/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
@@ -6,28 +6,29 @@
  */
 'use strict'
 exports[`test/snapshot/generateAlbumSecondaryNav.js > TAP > generateAlbumSecondaryNav (snapshot) > basic behavior, mode: album 1`] = `
-<nav id="secondary-nav" class="nav-links-groups">
-    <span style="--primary-color: #abcdef">
-        <a href="group/vcg/">VCG</a>
-        (<a title="First" href="album/first/">Previous</a>, <a title="Last" href="album/last/">Next</a>)
-    </span>
-    <span style="--primary-color: #123456">
-        <a href="group/bepis/">Bepis</a>
-        (<a title="Second" href="album/second/">Next</a>)
+<nav id="secondary-nav" class="album-secondary-nav with-previous-next">
+    <span class="group-with-series">
+        <span style="--primary-color: #abcdef"><a href="group/vcg/">VCG</a> (<span class="dot-switcher interpage"><span><a title="First" href="album/first/">Previous</a></span><span><a title="Last" href="album/last/">Next</a></span></span>)</span>
+        <span class="series-nav-link" style="--primary-color: #abcdef"><a class="series" href="group/vcg/">Series</a> (<span class="dot-switcher interpage"><span><a class="inert-previous-next-link">Previous</a></span><span><a title="Last" href="album/last/">Next</a></span></span>)</span>
     </span>
+    <span style="--primary-color: #123456"><a href="group/bepis/">Bepis</a> (<span class="dot-switcher interpage"><span><a class="inert-previous-next-link">Previous</a></span><span><a title="Second" href="album/second/">Next</a></span></span>)</span>
 </nav>
 `
 
 exports[`test/snapshot/generateAlbumSecondaryNav.js > TAP > generateAlbumSecondaryNav (snapshot) > basic behavior, mode: track 1`] = `
-<nav id="secondary-nav" class="nav-links-groups">
-    <a style="--primary-color: #abcdef" href="group/vcg/">VCG</a>
-    <a style="--primary-color: #123456" href="group/bepis/">Bepis</a>
+<nav id="secondary-nav" class="album-secondary-nav">
+    <span class="dot-switcher"><span>
+            <span class="group-with-series">
+                <span style="--primary-color: #abcdef"><a href="group/vcg/">VCG</a></span>
+                <span class="series-nav-link" style="--primary-color: #abcdef"><a class="series" href="group/vcg/">Series</a></span>
+            </span>
+        </span><span><span style="--primary-color: #123456"><a href="group/bepis/">Bepis</a></span></span></span>
 </nav>
 `
 
 exports[`test/snapshot/generateAlbumSecondaryNav.js > TAP > generateAlbumSecondaryNav (snapshot) > dateless album in mixed group 1`] = `
-<nav id="secondary-nav" class="nav-links-groups">
-    <a style="--primary-color: #abcdef" href="group/vcg/">VCG</a>
-    <a style="--primary-color: #123456" href="group/bepis/">Bepis</a>
+<nav id="secondary-nav" class="album-secondary-nav with-previous-next">
+    <span style="--primary-color: #abcdef"><a href="group/vcg/">VCG</a></span>
+    <span style="--primary-color: #123456"><a href="group/bepis/">Bepis</a></span>
 </nav>
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs
index cd820cde..6502f719 100644
--- a/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs
@@ -6,20 +6,26 @@
  */
 'use strict'
 exports[`test/snapshot/generateAlbumSidebarGroupBox.js > TAP > generateAlbumSidebarGroupBox (snapshot) > basic behavior, mode: album 1`] = `
-<h1><a href="group/vcg/">VCG</a></h1>
-Very cool group.
-<p>Visit on <a href="https://vcg.bandcamp.com/" class="nowrap">Bandcamp</a> or <a href="https://youtube.com/@vcg" class="nowrap">YouTube</a>.</p>
-<p class="group-chronology-link">Next: <a href="album/last/">Last</a></p>
-<p class="group-chronology-link">Previous: <a href="album/first/">First</a></p>
+<div class="sidebar collapsible individual-group-sidebar-box">
+    <h1><a href="group/vcg/">VCG</a></h1>
+    Very cool group.
+    <p>Visit on <a class="external-link" href="https://vcg.bandcamp.com/">Bandcamp</a> or <a class="external-link" href="https://youtube.com/@vcg">YouTube</a>.</p>
+    <p class="group-chronology-link">Next: <a href="album/last/">Last</a></p>
+    <p class="group-chronology-link">Previous: <a href="album/first/">First</a></p>
+</div>
 `
 
 exports[`test/snapshot/generateAlbumSidebarGroupBox.js > TAP > generateAlbumSidebarGroupBox (snapshot) > basic behavior, mode: track 1`] = `
-<h1><a href="group/vcg/">VCG</a></h1>
-<p>Visit on <a href="https://vcg.bandcamp.com/" class="nowrap">Bandcamp</a> or <a href="https://youtube.com/@vcg" class="nowrap">YouTube</a>.</p>
+<div class="sidebar collapsible individual-group-sidebar-box">
+    <h1><a href="group/vcg/">VCG</a></h1>
+    <p>Visit on <a class="external-link" href="https://vcg.bandcamp.com/">Bandcamp</a> or <a class="external-link" href="https://youtube.com/@vcg">YouTube</a>.</p>
+</div>
 `
 
 exports[`test/snapshot/generateAlbumSidebarGroupBox.js > TAP > generateAlbumSidebarGroupBox (snapshot) > dateless album in mixed group 1`] = `
-<h1><a href="group/vcg/">VCG</a></h1>
-Very cool group.
-<p>Visit on <a href="https://vcg.bandcamp.com/" class="nowrap">Bandcamp</a> or <a href="https://youtube.com/@vcg" class="nowrap">YouTube</a>.</p>
+<div class="sidebar collapsible individual-group-sidebar-box">
+    <h1><a href="group/vcg/">VCG</a></h1>
+    Very cool group.
+    <p>Visit on <a class="external-link" href="https://vcg.bandcamp.com/">Bandcamp</a> or <a class="external-link" href="https://youtube.com/@vcg">YouTube</a>.</p>
+</div>
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs
index 3b6676f8..40a8017d 100644
--- a/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs
@@ -10,13 +10,41 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
     <li>(0:20) <a href="track/t1/">Track 1</a></li>
     <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
     <li>(0:40) <a href="track/t3/">Track 3</a></li>
-    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 `
 
+exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > basic behavior, with descriptions 1`] = `
+<dl class="album-group-list">
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
+    <dd>
+        <blockquote><p>Why yes!</p></blockquote>
+        <ul>
+            <li>(0:20) <a href="track/t1/">Track 1</a></li>
+            <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
+            <li>(0:40) <a href="track/t3/">Track 3</a></li>
+        </ul>
+    </dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd>
+        <blockquote><p>How <em>contentful,</em> this is.</p></blockquote>
+        <ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul>
+    </dd>
+</dl>
+`
+
 exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > basic behavior, with track sections 1`] = `
 <dl class="album-group-list">
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">First section: (~1:00)</span></dt>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
     <dd>
         <ul>
             <li>(0:20) <a href="track/t1/">Track 1</a></li>
@@ -24,14 +52,20 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
             <li>(0:40) <a href="track/t3/">Track 3</a></li>
         </ul>
     </dd>
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">Second section:</span></dt>
-    <dd><ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li></ul></dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd><ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul></dd>
 </dl>
 `
 
 exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > collapseDurationScope: album 1`] = `
 <dl class="album-group-list">
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">First section: (~1:00)</span></dt>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
     <dd>
         <ul>
             <li>(0:20) <a href="track/t1/">Track 1</a></li>
@@ -39,24 +73,30 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
             <li>(0:40) <a href="track/t3/">Track 3</a></li>
         </ul>
     </dd>
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">Second section:</span></dt>
-    <dd><ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li></ul></dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd><ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul></dd>
 </dl>
 <ul>
     <li>(0:20) <a href="track/t1/">Track 1</a></li>
     <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
     <li>(0:40) <a href="track/t3/">Track 3</a></li>
-    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 <ul>
     <li><a href="track/t2/">Track 2</a></li>
-    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 `
 
 exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > collapseDurationScope: never 1`] = `
 <dl class="album-group-list">
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">First section: (~1:00)</span></dt>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
     <dd>
         <ul>
             <li>(0:20) <a href="track/t1/">Track 1</a></li>
@@ -64,24 +104,30 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
             <li>(0:40) <a href="track/t3/">Track 3</a></li>
         </ul>
     </dd>
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">Second section:</span></dt>
-    <dd><ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li></ul></dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd><ul><li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul></dd>
 </dl>
 <ul>
     <li>(0:20) <a href="track/t1/">Track 1</a></li>
     <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
     <li>(0:40) <a href="track/t3/">Track 3</a></li>
-    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 <ul>
     <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
-    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 `
 
 exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > collapseDurationScope: section 1`] = `
 <dl class="album-group-list">
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">First section: (~1:00)</span></dt>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
     <dd>
         <ul>
             <li>(0:20) <a href="track/t1/">Track 1</a></li>
@@ -89,24 +135,30 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
             <li>(0:40) <a href="track/t3/">Track 3</a></li>
         </ul>
     </dd>
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">Second section:</span></dt>
-    <dd><ul><li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li></ul></dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd><ul><li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul></dd>
 </dl>
 <ul>
     <li>(0:20) <a href="track/t1/">Track 1</a></li>
     <li>[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t2/">Track 2</a></li>
     <li>(0:40) <a href="track/t3/">Track 3</a></li>
-    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83">[mocked: generateAlbumTrackListMissingDuration - slots: {}] <a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 <ul>
     <li><a href="track/t2/">Track 2</a></li>
-    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 `
 
 exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > collapseDurationScope: track 1`] = `
 <dl class="album-group-list">
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">First section: (~1:00)</span></dt>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">First section: (~1:00)</span>
+        <template class="content-heading-sticky-title">First section:</template>
+    </dt>
     <dd>
         <ul>
             <li>(0:20) <a href="track/t1/">Track 1</a></li>
@@ -114,17 +166,20 @@ exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList
             <li>(0:40) <a href="track/t3/">Track 3</a></li>
         </ul>
     </dd>
-    <dt class="content-heading" tabindex="0"><span class="content-heading-main-title">Second section:</span></dt>
-    <dd><ul><li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li></ul></dd>
+    <dt class="content-heading" tabindex="0">
+        <span class="content-heading-main-title">Second section:</span>
+        <template class="content-heading-sticky-title">Second section:</template>
+    </dt>
+    <dd><ul><li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li></ul></dd>
 </dl>
 <ul>
     <li>(0:20) <a href="track/t1/">Track 1</a></li>
     <li><a href="track/t2/">Track 2</a></li>
     <li>(0:40) <a href="track/t3/">Track 3</a></li>
-    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 <ul>
     <li><a href="track/t2/">Track 2</a></li>
-    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by">by <a href="artist/apricot/">Apricot</a> and <a href="artist/peach/">Peach</a></span></li>
+    <li style="--primary-color: #ea2e83"><a href="track/t4/">Track 4</a> <span class="by"><span class="chunkwrap">by <span class="contribution nowrap"><a href="artist/apricot/">Apricot</a></span>,</span> <span class="chunkwrap"><span class="contribution nowrap"><a href="artist/peach/">Peach</a></span>,</span> <span class="chunkwrap">and <span class="contribution nowrap"><a href="artist/cerise/">Cerise</a></span></span></span></li>
 </ul>
 `
diff --git a/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
deleted file mode 100644
index f16923d0..00000000
--- a/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
+++ /dev/null
@@ -1,37 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generateCoverArtwork.js > TAP > generateCoverArtwork (snapshot) > display: primary 1`] = `
-[mocked: image
- args: [
-   [
-     { name: 'Damara', directory: 'damara', isContentWarning: false },
-     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
-     { name: 'Bees', directory: 'bees', isContentWarning: false },
-     { name: 'creepy crawlies', isContentWarning: true }
-   ]
- ]
- slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'medium', reveal: true, link: true, square: true }]
-<ul class="image-details">
-    <li><a href="tag/damara/">Damara</a></li>
-    <li><a href="tag/cronus/">Cronus</a></li>
-    <li><a href="tag/bees/">Bees</a></li>
-</ul>
-`
-
-exports[`test/snapshot/generateCoverArtwork.js > TAP > generateCoverArtwork (snapshot) > display: thumbnail 1`] = `
-[mocked: image
- args: [
-   [
-     { name: 'Damara', directory: 'damara', isContentWarning: false },
-     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
-     { name: 'Bees', directory: 'bees', isContentWarning: false },
-     { name: 'creepy crawlies', isContentWarning: true }
-   ]
- ]
- slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'small', reveal: false, link: false, square: true }]
-`
diff --git a/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs b/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
deleted file mode 100644
index b2c4c647..00000000
--- a/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > basic behavior 1`] = `
-previous: { tooltipStyle: 'browser', color: false, attributes: { id: 'previous-button' }, content: Tag (no name, 1 items) }
-next: { tooltipStyle: 'browser', color: false, attributes: { id: 'next-button' }, content: Tag (no name, 1 items) }
-`
-
-exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > disable id 1`] = `
-previous: { tooltipStyle: 'browser', color: false, attributes: { id: false }, content: Tag (no name, 1 items) }
-next: { tooltipStyle: 'browser', color: false, attributes: { id: false }, content: Tag (no name, 1 items) }
-`
-
-exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > neither link present 1`] = `
-
-`
-
-exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > next missing 1`] = `
-previous: { tooltipStyle: 'browser', color: false, attributes: { id: 'previous-button' }, content: Tag (no name, 1 items) }
-`
-
-exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > previous missing 1`] = `
-next: { tooltipStyle: 'browser', color: false, attributes: { id: 'next-button' }, content: Tag (no name, 1 items) }
-`
diff --git a/tap-snapshots/test/snapshot/generateTrackAdditionalNamesBox.js.test.cjs b/tap-snapshots/test/snapshot/generateTrackAdditionalNamesBox.js.test.cjs
deleted file mode 100644
index 3a22266e..00000000
--- a/tap-snapshots/test/snapshot/generateTrackAdditionalNamesBox.js.test.cjs
+++ /dev/null
@@ -1,99 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > inferred additional names only 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [
-   [
-     { name: 'Baz Baz', from: [ { directory: 'the-pyrenees' } ] }
-   ]
- ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > multiple own 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [
-   [
-     { name: 'Apple Time!' },
-     { name: 'Pterodactyl Time!' },
-     { name: 'Banana Time!' }
-   ]
- ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > no additional names 1`] = `
-
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > own additional names only 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [ [ { name: 'Foo Bar', annotation: 'the Alps' } ] ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > own and inferred, some overlap 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [
-   [
-     { name: 'Ke$halo Strike Back', annotation: 'own annotation' },
-     { name: 'Ironic Mania', annotation: 'own annotation' },
-     {
-       name: 'ANARCHY::MEGASTRIFE',
-       from: [ { directory: 'inferred-from' } ]
-     }
-   ]
- ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > own and shared and inferred, various overlap 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [
-   [
-     { name: 'Own!', annotation: 'own annotation' },
-     { name: 'Own! Shared!', annotation: 'own annotation' },
-     { name: 'Own! Inferred!', annotation: 'own annotation' },
-     { name: 'Own! Shared! Inferred!', annotation: 'own annotation' },
-     { name: 'Shared!', annotation: 'shared annotation' },
-     { name: 'Shared! Inferred!', annotation: 'shared annotation' },
-     { name: 'Inferred!', from: [ { directory: 'inferred-from' } ] }
-   ]
- ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > own and shared, some overlap 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [
-   [
-     { name: 'weed dreams..', annotation: 'own annotation' },
-     { name: '夜間のMOON汗', annotation: 'own annotation' },
-     { name: 'GAMINGブラザー96', annotation: 'shared annotation' }
-   ]
- ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > shared additional names only 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [ [ { name: 'Bar Foo', annotation: 'the Rockies' } ] ]
- slots: {}]
-`
-
-exports[`test/snapshot/generateTrackAdditionalNamesBox.js > TAP > generateTrackAdditionalNamesBox (snapshot) > shared and inferred, some overlap 1`] = `
-[mocked: generateAdditionalNamesBox
- args: [
-   [
-     { name: 'Coruscate', annotation: 'shared annotation' },
-     { name: 'Arbroath', annotation: 'shared annotation' },
-     { name: 'Prana Ferox', from: [ { directory: 'inferred-from' } ] }
-   ]
- ]
- slots: {}]
-`
diff --git a/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
deleted file mode 100644
index 1d21e47d..00000000
--- a/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
+++ /dev/null
@@ -1,50 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/snapshot/generateTrackCoverArtwork.js > TAP > generateTrackCoverArtwork (snapshot) > display: primary - no unique art 1`] = `
-[mocked: image
- args: [
-   [
-     { name: 'Damara', directory: 'damara', isContentWarning: false },
-     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
-     { name: 'Bees', directory: 'bees', isContentWarning: false },
-     { name: 'creepy crawlies', isContentWarning: true }
-   ]
- ]
- slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], color: '#abcdef', thumb: 'medium', reveal: true, link: true, square: true }]
-<ul class="image-details">
-    <li><a href="tag/damara/">Damara</a></li>
-    <li><a href="tag/cronus/">Cronus</a></li>
-    <li><a href="tag/bees/">Bees</a></li>
-</ul>
-`
-
-exports[`test/snapshot/generateTrackCoverArtwork.js > TAP > generateTrackCoverArtwork (snapshot) > display: primary - unique art 1`] = `
-[mocked: image
- args: [ [ { name: 'Bees', directory: 'bees', isContentWarning: false } ] ]
- slots: { path: [ 'media.trackCover', 'bee-forus-seatbelt-safebee', 'beesmp3', 'jpg' ], color: '#f28514', thumb: 'medium', reveal: true, link: true, square: true }]
-<ul class="image-details"><li><a href="tag/bees/">Bees</a></li></ul>
-`
-
-exports[`test/snapshot/generateTrackCoverArtwork.js > TAP > generateTrackCoverArtwork (snapshot) > display: thumbnail - no unique art 1`] = `
-[mocked: image
- args: [
-   [
-     { name: 'Damara', directory: 'damara', isContentWarning: false },
-     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
-     { name: 'Bees', directory: 'bees', isContentWarning: false },
-     { name: 'creepy crawlies', isContentWarning: true }
-   ]
- ]
- slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], color: '#abcdef', thumb: 'small', reveal: false, link: false, square: true }]
-`
-
-exports[`test/snapshot/generateTrackCoverArtwork.js > TAP > generateTrackCoverArtwork (snapshot) > display: thumbnail - unique art 1`] = `
-[mocked: image
- args: [ [ { name: 'Bees', directory: 'bees', isContentWarning: false } ] ]
- slots: { path: [ 'media.trackCover', 'bee-forus-seatbelt-safebee', 'beesmp3', 'jpg' ], color: '#f28514', thumb: 'small', reveal: false, link: false, square: true }]
-`
diff --git a/tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs b/tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs
index 3d988dce..098fe145 100644
--- a/tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs
@@ -7,23 +7,23 @@
 'use strict'
 exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > basic behavior 1`] = `
 <p>
-    By <a href="artist/toby-fox/">Toby Fox</a>.
+    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a></span>.
     <br>
     Released 11/29/2011.
     <br>
     Duration: 0:58.
 </p>
-<p>Listen on <a href="https://soundcloud.com/foo" class="nowrap">SoundCloud</a> or <a href="https://youtube.com/watch?v=bar" class="nowrap">YouTube</a>.</p>
+<p>Listen on <a class="external-link" href="https://soundcloud.com/foo">SoundCloud</a> or <a class="external-link" href="https://youtube.com/watch?v=bar">YouTube</a>.</p>
 `
 
 exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > cover artist contribs, non-unique 1`] = `
-<p>By <a href="artist/toby-fox/">Toby Fox</a>.</p>
+<p>By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a></span>.</p>
 <p>This wiki doesn't have any listening links for <i>Suspicious Track</i>.</p>
 `
 
 exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > cover artist contribs, unique 1`] = `
 <p>
-    By <a href="artist/toby-fox/">Toby Fox</a>.
+    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a></span>.
     <br>
     Cover art by <span class="contribution nowrap"><a href="artist/alpaca/">Alpaca</a> (&#x1F525;)</span>.
 </p>
@@ -31,6 +31,6 @@ exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseI
 `
 
 exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > reduced details 1`] = `
-<p>By <a href="artist/toby-fox/">Toby Fox</a>.</p>
+<p>By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a></span>.</p>
 <p>This wiki doesn't have any listening links for <i>Suspicious Track</i>.</p>
 `
diff --git a/tap-snapshots/test/snapshot/image.js.test.cjs b/tap-snapshots/test/snapshot/image.js.test.cjs
index ddfb3e6c..283f4352 100644
--- a/tap-snapshots/test/snapshot/image.js.test.cjs
+++ b/tap-snapshots/test/snapshot/image.js.test.cjs
@@ -12,7 +12,7 @@ exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via
             <img class="image" src="media/album-art/beyond-canon/cover.png">
             <span class="reveal-text-container">
                 <span class="reveal-text">
-                    <img class="reveal-symbol" src="static/warning.svg?413">
+                    <img class="reveal-symbol" src="static/misc/warning.svg">
                     <br>
                     <span class="reveal-warnings">too cool for school</span>
                     <br>
@@ -24,6 +24,14 @@ exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via
 </div>
 `
 
+exports[`test/snapshot/image.js > TAP > image (snapshot) > dimensions 1`] = `
+<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div></div>
+`
+
+exports[`test/snapshot/image.js > TAP > image (snapshot) > dimensions with square 1`] = `
+<div class="image-container square"><div class="image-outer-area square-content"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div></div>
+`
+
 exports[`test/snapshot/image.js > TAP > image (snapshot) > lazy with square 1`] = `
 <noscript><div class="image-container square"><div class="image-outer-area square-content"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></noscript>
 <div class="image-container square js-hide"><div class="image-outer-area square-content"><div class="image-inner-area"><img class="image lazy" data-original="foobar"></div></div></div>
@@ -64,7 +72,3 @@ exports[`test/snapshot/image.js > TAP > image (snapshot) > thumb requested but s
 exports[`test/snapshot/image.js > TAP > image (snapshot) > thumbnail details 1`] = `
 <div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" data-original-length="1200" data-thumbs="voluminous:1200 middling:900 petite:20" src="thumb/album-art/beyond-canon/cover.voluminous.jpg"></div></div></div>
 `
-
-exports[`test/snapshot/image.js > TAP > image (snapshot) > width & height 1`] = `
-<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div></div>
-`
diff --git a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
index 20f5adcb..0c44a85c 100644
--- a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
@@ -5,159 +5,114 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links (inline) 1`] = `
-<span class="contribution nowrap"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a> (<span class="icons icons-inline"><a class="icon" href="https://loremipsum.io">
-            <svg>
-                <title>External (loremipsum.io)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a>, <a class="icon" href="https://loremipsum.io/generator/">
-            <svg>
-                <title>External (loremipsum.io)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a>, <a class="icon" href="https://loremipsum.io/#meaning">
-            <svg>
-                <title>External (loremipsum.io)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a>, <a class="icon" href="https://loremipsum.io/#usage-and-examples">
-            <svg>
-                <title>External (loremipsum.io)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a></span>)</span>
-`
-
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links (tooltip) 1`] = `
-<span class="contribution"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a></span><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://loremipsum.io">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/generator/">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/#meaning">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/#usage-and-examples">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/#controversy">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/#when-to-use-lorem-ipsum">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/#lorem-ipsum-all-the-things">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a><a class="icon has-text" href="https://loremipsum.io/#original-source">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">loremipsum.io</span>
-                </a></span></span></span></span>
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links 1`] = `
+<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://loremipsum.io">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/generator/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/#meaning">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/#usage-and-examples">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/#controversy">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/#when-to-use-lorem-ipsum">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/#lorem-ipsum-all-the-things">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span>
+                <a class="external-link" href="https://loremipsum.io/#original-source">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">loremipsum.io</span>
+                </a>
+                <span class="external-platform">Other</span></span></span></span></span>
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > no accents 1`] = `
-<a href="artist/clark-powell/">Clark Powell</a>
-<a href="artist/the-big-baddies/">Grounder &amp; Scratch</a>
-<a href="artist/toby-fox/">Toby Fox</a>
+<span class="contribution nowrap"><a href="artist/clark-powell/">Clark Powell</a></span>
+<span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a></span>
+<span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a></span>
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > no preventWrapping 1`] = `
-<span class="contribution"><a href="artist/clark-powell/">Clark Powell</a> (<span class="icons icons-inline"><a class="icon" href="https://soundcloud.com/plazmataz">
-            <svg>
-                <title>SoundCloud</title>
-                <use href="static/icons.svg#icon-soundcloud"></use>
-            </svg>
-        </a></span>)</span>
+<span class="contribution"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/clark-powell/">Clark Powell</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://soundcloud.com/plazmataz">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-soundcloud"></use></svg></span>
+                    <span class="external-handle">plazmataz</span>
+                </a>
+                <span class="external-platform">SoundCloud</span></span></span></span></span>
 <span class="contribution"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement) (<span class="icons icons-inline"><a class="icon" href="https://tobyfox.bandcamp.com/">
-            <svg>
-                <title>Bandcamp</title>
-                <use href="static/icons.svg#icon-bandcamp"></use>
-            </svg>
-        </a>, <a class="icon" href="https://toby.fox/">
-            <svg>
-                <title>External (toby.fox)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a></span>)</span>
+<span class="contribution"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/toby-fox/">Toby Fox</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://tobyfox.bandcamp.com/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-bandcamp"></use></svg></span>
+                    <span class="external-handle">tobyfox</span>
+                </a>
+                <span class="external-platform">Bandcamp</span>
+                <a class="external-link" href="https://toby.fox/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">toby.fox</span>
+                </a>
+                <span class="external-platform">Other</span></span></span></span> (Arrangement)</span>
 `
 
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showContribution 1`] = `
-<a href="artist/clark-powell/">Clark Powell</a>
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showAnnotation 1`] = `
+<span class="contribution nowrap"><a href="artist/clark-powell/">Clark Powell</a></span>
 <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
 <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)</span>
 `
 
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showIcons (inline) 1`] = `
-<span class="contribution nowrap"><a href="artist/clark-powell/">Clark Powell</a> (<span class="icons icons-inline"><a class="icon" href="https://soundcloud.com/plazmataz">
-            <svg>
-                <title>SoundCloud</title>
-                <use href="static/icons.svg#icon-soundcloud"></use>
-            </svg>
-        </a></span>)</span>
-<a href="artist/the-big-baddies/">Grounder &amp; Scratch</a>
-<span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (<span class="icons icons-inline"><a class="icon" href="https://tobyfox.bandcamp.com/">
-            <svg>
-                <title>Bandcamp</title>
-                <use href="static/icons.svg#icon-bandcamp"></use>
-            </svg>
-        </a>, <a class="icon" href="https://toby.fox/">
-            <svg>
-                <title>External (toby.fox)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a></span>)</span>
-`
-
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showIcons (tooltip) 1`] = `
-<span class="contribution"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/clark-powell/">Clark Powell</a></span><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
-                    <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
-                    <span class="icon-text">plazmataz</span>
-                </a></span></span></span></span>
-<span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/toby-fox/">Toby Fox</a></span><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
-                    <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
-                    <span class="icon-text">tobyfox</span>
-                </a><a class="icon has-text" href="https://toby.fox/">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">toby.fox</span>
-                </a></span></span></span> (Arrangement)</span>
-`
-
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (inline) 1`] = `
-<span class="contribution nowrap"><a href="artist/clark-powell/">Clark Powell</a> (<span class="icons icons-inline"><a class="icon" href="https://soundcloud.com/plazmataz">
-            <svg>
-                <title>SoundCloud</title>
-                <use href="static/icons.svg#icon-soundcloud"></use>
-            </svg>
-        </a></span>)</span>
-<span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement) (<span class="icons icons-inline"><a class="icon" href="https://tobyfox.bandcamp.com/">
-            <svg>
-                <title>Bandcamp</title>
-                <use href="static/icons.svg#icon-bandcamp"></use>
-            </svg>
-        </a>, <a class="icon" href="https://toby.fox/">
-            <svg>
-                <title>External (toby.fox)</title>
-                <use href="static/icons.svg#icon-globe"></use>
-            </svg>
-        </a></span>)</span>
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showExternalLinks 1`] = `
+<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/clark-powell/">Clark Powell</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://soundcloud.com/plazmataz">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-soundcloud"></use></svg></span>
+                    <span class="external-handle">plazmataz</span>
+                </a>
+                <span class="external-platform">SoundCloud</span></span></span></span></span>
+<span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a></span>
+<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/toby-fox/">Toby Fox</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://tobyfox.bandcamp.com/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-bandcamp"></use></svg></span>
+                    <span class="external-handle">tobyfox</span>
+                </a>
+                <span class="external-platform">Bandcamp</span>
+                <a class="external-link" href="https://toby.fox/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">toby.fox</span>
+                </a>
+                <span class="external-platform">Other</span></span></span></span></span>
 `
 
-exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (tooltip) 1`] = `
-<span class="contribution"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/clark-powell/">Clark Powell</a></span><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
-                    <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
-                    <span class="icon-text">plazmataz</span>
-                </a></span></span></span></span>
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showAnnotation & showExternalLinks 1`] = `
+<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/clark-powell/">Clark Powell</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://soundcloud.com/plazmataz">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-soundcloud"></use></svg></span>
+                    <span class="external-handle">plazmataz</span>
+                </a>
+                <span class="external-platform">SoundCloud</span></span></span></span></span>
 <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/toby-fox/">Toby Fox</a></span><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
-                    <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
-                    <span class="icon-text">tobyfox</span>
-                </a><a class="icon has-text" href="https://toby.fox/">
-                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                    <span class="icon-text">toby.fox</span>
-                </a></span></span></span> (Arrangement)</span>
+<span class="contribution nowrap"><span class="text-with-tooltip"><span class="hoverable"><a class="text-with-tooltip-interaction-cue" href="artist/toby-fox/">Toby Fox</a></span><span class="tooltip contribution-tooltip"><span class="tooltip-content"><a class="external-link" href="https://tobyfox.bandcamp.com/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-bandcamp"></use></svg></span>
+                    <span class="external-handle">tobyfox</span>
+                </a>
+                <span class="external-platform">Bandcamp</span>
+                <a class="external-link" href="https://toby.fox/">
+                    <span class="external-icon"><svg><use href="static/misc/icons.svg#icon-globe"></use></svg></span>
+                    <span class="external-handle">toby.fox</span>
+                </a>
+                <span class="external-platform">Other</span></span></span></span> (Arrangement)</span>
 `
diff --git a/tap-snapshots/test/snapshot/linkExternal.js.test.cjs b/tap-snapshots/test/snapshot/linkExternal.js.test.cjs
index 1c1f35f4..03192e82 100644
--- a/tap-snapshots/test/snapshot/linkExternal.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkExternal.js.test.cjs
@@ -5,171 +5,224 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: album, style: compact 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">youtu.be</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">youtube.com</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">youtube.com</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: album, style: normal 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: album, style: handle 1`] = `
+<a class="external-link" href="https://youtu.be/abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: album, style: platform 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumMultipleTracks, style: compact 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">youtu.be</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">youtube.com</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">youtube.com</a>
+<a class="external-link" href="https://youtu.be/abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumMultipleTracks, style: normal 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube (full album)</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube (full album)</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumMultipleTracks, style: handle 1`] = `
+<a class="external-link" href="https://youtu.be/abc">YouTube (full album)</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube (full album)</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumMultipleTracks, style: platform 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
+<a class="external-link" href="https://youtu.be/abc">YouTube (full album)</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube (full album)</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumNoTracks, style: compact 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">youtu.be</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">youtube.com</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">youtube.com</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumNoTracks, style: normal 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumNoTracks, style: handle 1`] = `
+<a class="external-link" href="https://youtu.be/abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumNoTracks, style: platform 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumOneTrack, style: compact 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">youtu.be</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">youtube.com</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">youtube.com</a>
+<a class="external-link" href="https://youtu.be/abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumOneTrack, style: normal 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumOneTrack, style: handle 1`] = `
+<a class="external-link" href="https://youtu.be/abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: albumOneTrack, style: platform 1`] = `
-<a href="https://youtu.be/abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/watch?v=abc" class="nowrap">YouTube</a>
-<a href="https://youtube.com/Playlist?list=kweh" class="nowrap">YouTube</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: flash, style: compact 1`] = `
-<a href="https://www.bgreco.net/hsflash/002238.html" class="nowrap">bgreco.net</a>
-<a href="https://homestuck.com/story/1234" class="nowrap">homestuck.com</a>
-<a href="https://homestuck.com/story/pony" class="nowrap">homestuck.com</a>
-<a href="https://www.youtube.com/watch?v=wKgOp3Kg2wI" class="nowrap">youtube.com</a>
-<a href="https://youtu.be/IOcvkkklWmY" class="nowrap">youtu.be</a>
-<a href="https://some.external.site/foo/bar/" class="nowrap">some.external.site</a>
+<a class="external-link" href="https://youtu.be/abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/watch?v=abc">YouTube</a>
+<a class="external-link" href="https://youtube.com/Playlist?list=kweh">YouTube</a>
 `
 
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: flash, style: normal 1`] = `
-<a href="https://www.bgreco.net/hsflash/002238.html" class="nowrap">bgreco.net (high quality audio)</a>
-<a href="https://homestuck.com/story/1234" class="nowrap">Homestuck (page 1234)</a>
-<a href="https://homestuck.com/story/pony" class="nowrap">Homestuck (secret page)</a>
-<a href="https://www.youtube.com/watch?v=wKgOp3Kg2wI" class="nowrap">YouTube (on any device)</a>
-<a href="https://youtu.be/IOcvkkklWmY" class="nowrap">YouTube (on any device)</a>
-<a href="https://some.external.site/foo/bar/" class="nowrap">External (some.external.site)</a>
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: flash, style: handle 1`] = `
+<a class="external-link" href="https://www.bgreco.net/hsflash/002238.html">bgreco.net (high quality audio)</a>
+<a class="external-link" href="https://homestuck.com/story/1234">Homestuck (page 1234)</a>
+<a class="external-link" href="https://homestuck.com/story/pony">Homestuck (secret page)</a>
+<a class="external-link" href="https://www.youtube.com/watch?v=wKgOp3Kg2wI">YouTube (on any device)</a>
+<a class="external-link" href="https://youtu.be/IOcvkkklWmY">YouTube (on any device)</a>
+<a class="external-link" href="https://some.external.site/foo/bar/">some.external.site</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: flash, style: platform 1`] = `
-<a href="https://www.bgreco.net/hsflash/002238.html" class="nowrap">bgreco.net</a>
-<a href="https://homestuck.com/story/1234" class="nowrap">Homestuck</a>
-<a href="https://homestuck.com/story/pony" class="nowrap">Homestuck</a>
-<a href="https://www.youtube.com/watch?v=wKgOp3Kg2wI" class="nowrap">YouTube</a>
-<a href="https://youtu.be/IOcvkkklWmY" class="nowrap">YouTube</a>
-<a href="https://some.external.site/foo/bar/" class="nowrap">External</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: generic, style: compact 1`] = `
-<a href="https://homestuck.bandcamp.com/" class="nowrap">homestuck</a>
-<a href="https://soundcloud.com/plazmataz" class="nowrap">plazmataz</a>
-<a href="https://aeritus.tumblr.com/" class="nowrap">aeritus</a>
-<a href="https://twitter.com/awkwarddoesart" class="nowrap">@awkwarddoesart</a>
-<a href="https://www.deviantart.com/chesswanderlust-sama" class="nowrap">deviantart.com</a>
-<a href="https://en.wikipedia.org/wiki/Haydn_Quartet_(vocal_ensemble)" class="nowrap">en.wikipedia.org</a>
-<a href="https://www.poetryfoundation.org/poets/christina-rossetti" class="nowrap">poetryfoundation.org</a>
-<a href="https://www.instagram.com/levc_egm/" class="nowrap">instagram.com</a>
-<a href="https://www.patreon.com/CecilyRenns" class="nowrap">patreon.com</a>
-<a href="https://open.spotify.com/artist/63SNNpNOicDzG3LY82G4q3" class="nowrap">open.spotify.com</a>
-<a href="https://buzinkai.newgrounds.com/" class="nowrap">buzinkai.newgrounds.com</a>
-<a href="https://music.solatrus.com/" class="nowrap">music.solatrus.com</a>
-<a href="https://types.pl/" class="nowrap">types.pl</a>
-<a href="https://community.fandom.com/" class="nowrap">community.fandom.com</a>
-<a href="https://community.fandom.com/wiki/" class="nowrap">community.fandom.com</a>
-<a href="https://community.fandom.com/wiki/Community_Central" class="nowrap">community.fandom.com</a>
-<a href="https://mspaintadventures.fandom.com/" class="nowrap">mspaintadventures.fandom.com</a>
-<a href="https://mspaintadventures.fandom.com/wiki/" class="nowrap">mspaintadventures.fandom.com</a>
-<a href="https://mspaintadventures.fandom.com/wiki/Draconian_Dignitary" class="nowrap">mspaintadventures.fandom.com</a>
-`
-
-exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: generic, style: normal 1`] = `
-<a href="https://homestuck.bandcamp.com/" class="nowrap">Bandcamp</a>
-<a href="https://soundcloud.com/plazmataz" class="nowrap">SoundCloud</a>
-<a href="https://aeritus.tumblr.com/" class="nowrap">Tumblr</a>
-<a href="https://twitter.com/awkwarddoesart" class="nowrap">Twitter</a>
-<a href="https://www.deviantart.com/chesswanderlust-sama" class="nowrap">DeviantArt</a>
-<a href="https://en.wikipedia.org/wiki/Haydn_Quartet_(vocal_ensemble)" class="nowrap">Wikipedia</a>
-<a href="https://www.poetryfoundation.org/poets/christina-rossetti" class="nowrap">Poetry Foundation</a>
-<a href="https://www.instagram.com/levc_egm/" class="nowrap">Instagram</a>
-<a href="https://www.patreon.com/CecilyRenns" class="nowrap">Patreon</a>
-<a href="https://open.spotify.com/artist/63SNNpNOicDzG3LY82G4q3" class="nowrap">Spotify</a>
-<a href="https://buzinkai.newgrounds.com/" class="nowrap">Newgrounds</a>
-<a href="https://music.solatrus.com/" class="nowrap">Bandcamp (music.solatrus.com)</a>
-<a href="https://types.pl/" class="nowrap">Mastodon (types.pl)</a>
-<a href="https://community.fandom.com/" class="nowrap">Fandom</a>
-<a href="https://community.fandom.com/wiki/" class="nowrap">Fandom</a>
-<a href="https://community.fandom.com/wiki/Community_Central" class="nowrap">Fandom</a>
-<a href="https://mspaintadventures.fandom.com/" class="nowrap">MSPA Wiki</a>
-<a href="https://mspaintadventures.fandom.com/wiki/" class="nowrap">MSPA Wiki</a>
-<a href="https://mspaintadventures.fandom.com/wiki/Draconian_Dignitary" class="nowrap">MSPA Wiki (Draconian Dignitary)</a>
+<a class="external-link" href="https://www.bgreco.net/hsflash/002238.html">bgreco.net (high quality audio)</a>
+<a class="external-link" href="https://homestuck.com/story/1234">Homestuck (page 1234)</a>
+<a class="external-link" href="https://homestuck.com/story/pony">Homestuck (secret page)</a>
+<a class="external-link" href="https://www.youtube.com/watch?v=wKgOp3Kg2wI">YouTube (on any device)</a>
+<a class="external-link" href="https://youtu.be/IOcvkkklWmY">YouTube (on any device)</a>
+<a class="external-link" href="https://some.external.site/foo/bar/">some.external.site</a>
+`
+
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: generic, style: handle 1`] = `
+<a class="external-link" href="https://music.apple.com/us/artist/system-of-a-down/462715">Apple Music</a>
+<a class="external-link" href="https://www.artstation.com/eevaningtea">eevaningtea</a>
+<a class="external-link" href="https://witnesstheabsurd.artstation.com/">witnesstheabsurd</a>
+<a class="external-link" href="https://music.solatrus.com/">music.solatrus.com</a>
+<a class="external-link" href="https://homestuck.bandcamp.com/">homestuck</a>
+<a class="external-link" href="https://bsky.app/profile/jacobtheloofah.bsky.social">jacobtheloofah</a>
+<a class="external-link" href="https://aliceflare.carrd.co">aliceflare</a>
+<a class="external-link" href="https://bigchaslappa.carrd.co/">bigchaslappa</a>
+<a class="external-link" href="https://cohost.org/cosmoptera">cosmoptera</a>
+<a class="external-link" href="https://music.deconreconstruction.com/albums/catch-322">MUSIC@DCRC</a>
+<a class="external-link" href="https://music.deconreconstruction.com/albums/catch-322?track=arcjecs-theme">MUSIC@DCRC</a>
+<a class="external-link" href="https://www.deconreconstruction.com/">Deconreconstruction</a>
+<a class="external-link" href="https://culdhira.deviantart.com">culdhira</a>
+<a class="external-link" href="https://www.deviantart.com/chesswanderlust-sama">chesswanderlust-sama</a>
+<a class="external-link" href="https://www.deviantart.com/shilloshilloh/art/Homestuck-Jake-English-268874606">DeviantArt</a>
+<a class="external-link" href="https://www.facebook.com/DoomedCloud/">DoomedCloud</a>
+<a class="external-link" href="https://www.facebook.com/pages/WoodenToaster/280642235307371">WoodenToaster</a>
+<a class="external-link" href="https://www.facebook.com/Svixy/posts/400018786702633">Facebook</a>
+<a class="external-link" href="https://mspaintadventures.fandom.com/wiki/Draconian_Dignitary">MSPA Wiki (Draconian Dignitary)</a>
+<a class="external-link" href="https://mspaintadventures.fandom.com/wiki/">MSPA Wiki</a>
+<a class="external-link" href="https://mspaintadventures.fandom.com/">MSPA Wiki</a>
+<a class="external-link" href="https://community.fandom.com/">Fandom</a>
+<a class="external-link" href="https://community.fandom.com/wiki/">Fandom</a>
+<a class="external-link" href="https://community.fandom.com/wiki/Community_Central">Fandom</a>
+<a class="external-link" href="https://gamebanana.com/members/2028092">GameBanana</a>
+<a class="external-link" href="https://gamebanana.com/mods/459476">GameBanana</a>
+<a class="external-link" href="https://homestuck.com/">Homestuck</a>
+<a class="external-link" href="https://hsmusic.wiki/media/misc/archive/Firefly%20Cloud%20Remix.mp3">HSMusic (wiki archive)</a>
+<a class="external-link" href="https://hsmusic.wiki/feedback/">HSMusic</a>
+<a class="external-link" href="https://archive.org/details/a-life-well-lived">Internet Archive</a>
+<a class="external-link" href="https://archive.org/details/VastError_Volume1/11+Renaissance.mp3">Internet Archive</a>
+<a class="external-link" href="https://instagram.com/bass.and.noises">bass.and.noises</a>
+<a class="external-link" href="https://www.instagram.com/levc_egm/">levc_egm</a>
+<a class="external-link" href="https://tuyoki.itch.io/">tuyoki</a>
+<a class="external-link" href="https://itch.io/profile/bravelittletoreador">bravelittletoreador</a>
+<a class="external-link" href="https://ko-fi.com/gnaach">gnaach</a>
+<a class="external-link" href="https://linktr.ee/bbpanzu">bbpanzu</a>
+<a class="external-link" href="https://types.pl/">types.pl</a>
+<a class="external-link" href="https://canwc.mspfa.com/">MSPFA</a>
+<a class="external-link" href="https://mspfa.com/?s=12003&p=1045">MSPFA</a>
+<a class="external-link" href="https://mspfa.com/user/?u=103334508819793669241">MSPFA</a>
+<a class="external-link" href="https://wodaro.neocities.org">wodaro.neocities.org</a>
+<a class="external-link" href="https://neomints.neocities.org/">neomints.neocities.org</a>
+<a class="external-link" href="https://buzinkai.newgrounds.com/">buzinkai</a>
+<a class="external-link" href="https://www.newgrounds.com/audio/listen/1256058">Newgrounds</a>
+<a class="external-link" href="https://www.patreon.com/CecilyRenns">CecilyRenns</a>
+<a class="external-link" href="https://www.poetryfoundation.org/poets/christina-rossetti">Poetry Foundation</a>
+<a class="external-link" href="https://www.poetryfoundation.org/poems/45000/remember-56d224509b7ae">Poetry Foundation</a>
+<a class="external-link" href="https://soundcloud.com/plazmataz">plazmataz</a>
+<a class="external-link" href="https://soundcloud.com/worthikids/1-i-accidentally-broke-my">SoundCloud</a>
+<a class="external-link" href="https://open.spotify.com/artist/63SNNpNOicDzG3LY82G4q3">Spotify</a>
+<a class="external-link" href="https://open.spotify.com/album/0iHvPD8rM3hQa0qeVtPQ3t">Spotify</a>
+<a class="external-link" href="https://open.spotify.com/track/6YEGQH32aAXb9vQQbBrPlw">Spotify</a>
+<a class="external-link" href="https://www.tiktok.com/@richaadeb">richaadeb</a>
+<a class="external-link" href="https://toyhou.se/ghastaboo">ghastaboo</a>
+<a class="external-link" href="https://aeritus.tumblr.com/">aeritus</a>
+<a class="external-link" href="https://vol5anthology.tumblr.com/post/159528808107/hey-everyone-its-413-and-that-means-we-have">vol5anthology</a>
+<a class="external-link" href="https://www.tumblr.com/electricwestern">electricwestern</a>
+<a class="external-link" href="https://www.tumblr.com/spellmynamewithabang/142767566733/happy-413-this-is-the-first-time-anyones-heard">Tumblr</a>
+<a class="external-link" href="https://www.twitch.tv/ajhebard">ajhebard</a>
+<a class="external-link" href="https://www.twitch.tv/vargskelethor/">vargskelethor/</a>
+<a class="external-link" href="https://twitter.com/awkwarddoesart">awkwarddoesart</a>
+<a class="external-link" href="https://twitter.com/purenonsens/">purenonsens</a>
+<a class="external-link" href="https://twitter.com/circlejourney/status/1202265927183548416">Twitter</a>
+<a class="external-link" href="https://web.archive.org/web/20120405160556/https://homestuck.bandcamp.com/album/colours-and-mayhem-universe-a">Wayback Machine</a>
+<a class="external-link" href="https://web.archive.org/web/20160807111207/http://griffinspacejam.com:80/">Wayback Machine</a>
+<a class="external-link" href="https://en.wikipedia.org/wiki/Haydn_Quartet_(vocal_ensemble)">Wikipedia</a>
+<a class="external-link" href="https://youtube.com/@bani-chan8949">bani-chan8949</a>
+<a class="external-link" href="https://www.youtube.com/@Razzie16">Razzie16</a>
+<a class="external-link" href="https://www.youtube.com/channel/UCQXfvlKkpbOqEz4BepHqK7g">YouTube</a>
+<a class="external-link" href="https://www.youtube.com/watch?v=6ekVnZm29kw">YouTube</a>
+<a class="external-link" href="https://youtu.be/WBkC038wSio">YouTube</a>
+<a class="external-link" href="https://www.youtube.com/playlist?list=PLy5UGIMKOXpONMExgI7lVYFwQa54QFp_H">YouTube</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > context: generic, style: platform 1`] = `
-<a href="https://homestuck.bandcamp.com/" class="nowrap">Bandcamp</a>
-<a href="https://soundcloud.com/plazmataz" class="nowrap">SoundCloud</a>
-<a href="https://aeritus.tumblr.com/" class="nowrap">Tumblr</a>
-<a href="https://twitter.com/awkwarddoesart" class="nowrap">Twitter</a>
-<a href="https://www.deviantart.com/chesswanderlust-sama" class="nowrap">DeviantArt</a>
-<a href="https://en.wikipedia.org/wiki/Haydn_Quartet_(vocal_ensemble)" class="nowrap">Wikipedia</a>
-<a href="https://www.poetryfoundation.org/poets/christina-rossetti" class="nowrap">Poetry Foundation</a>
-<a href="https://www.instagram.com/levc_egm/" class="nowrap">Instagram</a>
-<a href="https://www.patreon.com/CecilyRenns" class="nowrap">Patreon</a>
-<a href="https://open.spotify.com/artist/63SNNpNOicDzG3LY82G4q3" class="nowrap">Spotify</a>
-<a href="https://buzinkai.newgrounds.com/" class="nowrap">Newgrounds</a>
-<a href="https://music.solatrus.com/" class="nowrap">Bandcamp</a>
-<a href="https://types.pl/" class="nowrap">Mastodon</a>
-<a href="https://community.fandom.com/" class="nowrap">Fandom</a>
-<a href="https://community.fandom.com/wiki/" class="nowrap">Fandom</a>
-<a href="https://community.fandom.com/wiki/Community_Central" class="nowrap">Fandom</a>
-<a href="https://mspaintadventures.fandom.com/" class="nowrap">Fandom</a>
-<a href="https://mspaintadventures.fandom.com/wiki/" class="nowrap">Fandom</a>
-<a href="https://mspaintadventures.fandom.com/wiki/Draconian_Dignitary" class="nowrap">Fandom</a>
+<a class="external-link" href="https://music.apple.com/us/artist/system-of-a-down/462715">Apple Music</a>
+<a class="external-link" href="https://www.artstation.com/eevaningtea">ArtStation</a>
+<a class="external-link" href="https://witnesstheabsurd.artstation.com/">ArtStation</a>
+<a class="external-link" href="https://music.solatrus.com/">Bandcamp (music.solatrus.com)</a>
+<a class="external-link" href="https://homestuck.bandcamp.com/">Bandcamp</a>
+<a class="external-link" href="https://bsky.app/profile/jacobtheloofah.bsky.social">Bluesky</a>
+<a class="external-link" href="https://aliceflare.carrd.co">Carrd</a>
+<a class="external-link" href="https://bigchaslappa.carrd.co/">Carrd</a>
+<a class="external-link" href="https://cohost.org/cosmoptera">Cohost</a>
+<a class="external-link" href="https://music.deconreconstruction.com/albums/catch-322">MUSIC@DCRC</a>
+<a class="external-link" href="https://music.deconreconstruction.com/albums/catch-322?track=arcjecs-theme">MUSIC@DCRC</a>
+<a class="external-link" href="https://www.deconreconstruction.com/">Deconreconstruction</a>
+<a class="external-link" href="https://culdhira.deviantart.com">DeviantArt</a>
+<a class="external-link" href="https://www.deviantart.com/chesswanderlust-sama">DeviantArt</a>
+<a class="external-link" href="https://www.deviantart.com/shilloshilloh/art/Homestuck-Jake-English-268874606">DeviantArt</a>
+<a class="external-link" href="https://www.facebook.com/DoomedCloud/">Facebook</a>
+<a class="external-link" href="https://www.facebook.com/pages/WoodenToaster/280642235307371">Facebook</a>
+<a class="external-link" href="https://www.facebook.com/Svixy/posts/400018786702633">Facebook</a>
+<a class="external-link" href="https://mspaintadventures.fandom.com/wiki/Draconian_Dignitary">MSPA Wiki (Draconian Dignitary)</a>
+<a class="external-link" href="https://mspaintadventures.fandom.com/wiki/">MSPA Wiki</a>
+<a class="external-link" href="https://mspaintadventures.fandom.com/">MSPA Wiki</a>
+<a class="external-link" href="https://community.fandom.com/">Fandom</a>
+<a class="external-link" href="https://community.fandom.com/wiki/">Fandom</a>
+<a class="external-link" href="https://community.fandom.com/wiki/Community_Central">Fandom</a>
+<a class="external-link" href="https://gamebanana.com/members/2028092">GameBanana</a>
+<a class="external-link" href="https://gamebanana.com/mods/459476">GameBanana</a>
+<a class="external-link" href="https://homestuck.com/">Homestuck</a>
+<a class="external-link" href="https://hsmusic.wiki/media/misc/archive/Firefly%20Cloud%20Remix.mp3">HSMusic (wiki archive)</a>
+<a class="external-link" href="https://hsmusic.wiki/feedback/">HSMusic</a>
+<a class="external-link" href="https://archive.org/details/a-life-well-lived">Internet Archive</a>
+<a class="external-link" href="https://archive.org/details/VastError_Volume1/11+Renaissance.mp3">Internet Archive</a>
+<a class="external-link" href="https://instagram.com/bass.and.noises">Instagram</a>
+<a class="external-link" href="https://www.instagram.com/levc_egm/">Instagram</a>
+<a class="external-link" href="https://tuyoki.itch.io/">itch.io</a>
+<a class="external-link" href="https://itch.io/profile/bravelittletoreador">itch.io</a>
+<a class="external-link" href="https://ko-fi.com/gnaach">Ko-fi</a>
+<a class="external-link" href="https://linktr.ee/bbpanzu">Linktree</a>
+<a class="external-link" href="https://types.pl/">Mastodon (types.pl)</a>
+<a class="external-link" href="https://canwc.mspfa.com/">MSPFA</a>
+<a class="external-link" href="https://mspfa.com/?s=12003&p=1045">MSPFA</a>
+<a class="external-link" href="https://mspfa.com/user/?u=103334508819793669241">MSPFA</a>
+<a class="external-link" href="https://wodaro.neocities.org">Neocities</a>
+<a class="external-link" href="https://neomints.neocities.org/">Neocities</a>
+<a class="external-link" href="https://buzinkai.newgrounds.com/">Newgrounds</a>
+<a class="external-link" href="https://www.newgrounds.com/audio/listen/1256058">Newgrounds</a>
+<a class="external-link" href="https://www.patreon.com/CecilyRenns">Patreon</a>
+<a class="external-link" href="https://www.poetryfoundation.org/poets/christina-rossetti">Poetry Foundation</a>
+<a class="external-link" href="https://www.poetryfoundation.org/poems/45000/remember-56d224509b7ae">Poetry Foundation</a>
+<a class="external-link" href="https://soundcloud.com/plazmataz">SoundCloud</a>
+<a class="external-link" href="https://soundcloud.com/worthikids/1-i-accidentally-broke-my">SoundCloud</a>
+<a class="external-link" href="https://open.spotify.com/artist/63SNNpNOicDzG3LY82G4q3">Spotify</a>
+<a class="external-link" href="https://open.spotify.com/album/0iHvPD8rM3hQa0qeVtPQ3t">Spotify</a>
+<a class="external-link" href="https://open.spotify.com/track/6YEGQH32aAXb9vQQbBrPlw">Spotify</a>
+<a class="external-link" href="https://www.tiktok.com/@richaadeb">TikTok</a>
+<a class="external-link" href="https://toyhou.se/ghastaboo">Toyhouse</a>
+<a class="external-link" href="https://aeritus.tumblr.com/">Tumblr</a>
+<a class="external-link" href="https://vol5anthology.tumblr.com/post/159528808107/hey-everyone-its-413-and-that-means-we-have">Tumblr</a>
+<a class="external-link" href="https://www.tumblr.com/electricwestern">Tumblr</a>
+<a class="external-link" href="https://www.tumblr.com/spellmynamewithabang/142767566733/happy-413-this-is-the-first-time-anyones-heard">Tumblr</a>
+<a class="external-link" href="https://www.twitch.tv/ajhebard">Twitch</a>
+<a class="external-link" href="https://www.twitch.tv/vargskelethor/">Twitch</a>
+<a class="external-link" href="https://twitter.com/awkwarddoesart">Twitter</a>
+<a class="external-link" href="https://twitter.com/purenonsens/">Twitter</a>
+<a class="external-link" href="https://twitter.com/circlejourney/status/1202265927183548416">Twitter</a>
+<a class="external-link" href="https://web.archive.org/web/20120405160556/https://homestuck.bandcamp.com/album/colours-and-mayhem-universe-a">Wayback Machine</a>
+<a class="external-link" href="https://web.archive.org/web/20160807111207/http://griffinspacejam.com:80/">Wayback Machine</a>
+<a class="external-link" href="https://en.wikipedia.org/wiki/Haydn_Quartet_(vocal_ensemble)">Wikipedia</a>
+<a class="external-link" href="https://youtube.com/@bani-chan8949">YouTube</a>
+<a class="external-link" href="https://www.youtube.com/@Razzie16">YouTube</a>
+<a class="external-link" href="https://www.youtube.com/channel/UCQXfvlKkpbOqEz4BepHqK7g">YouTube</a>
+<a class="external-link" href="https://www.youtube.com/watch?v=6ekVnZm29kw">YouTube</a>
+<a class="external-link" href="https://youtu.be/WBkC038wSio">YouTube</a>
+<a class="external-link" href="https://www.youtube.com/playlist?list=PLy5UGIMKOXpONMExgI7lVYFwQa54QFp_H">YouTube</a>
 `
 
 exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > unknown domain (arbitrary world wide web path) 1`] = `
-<a href="https://snoo.ping.as/usual/i/see/" class="nowrap">External (snoo.ping.as)</a>
+<a class="external-link" href="https://snoo.ping.as/usual/i/see/">snoo.ping.as</a>
 `
diff --git a/tap-snapshots/test/snapshot/transformContent.js.test.cjs b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
index 8d29d967..ac23a1bf 100644
--- a/tap-snapshots/test/snapshot/transformContent.js.test.cjs
+++ b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
@@ -5,6 +5,11 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > absorb punctuation 1`] = `
+<p>Don&#39;t you think this is an <a class="external-link from-content indicate-external" href="https://github.com/hsmusic/hsmusic-wiki/pull/567" title="github.com (opens in new tab)" target="_blank">interesting pull request<span class="normal-content">,</span></a> Steve?</p>
+<p>Aren&#39;t you <a class="external-link from-content indicate-external" href="https://github.com/hsmusic/hsmusic-wiki/pull/567" title="github.com (opens in new tab)" target="_blank">interested<span class="normal-content">...</span></a> in <a class="external-link from-content indicate-external" href="https://github.com/hsmusic/hsmusic-wiki/pull/567" title="github.com (opens in new tab)" target="_blank">checking it out<span class="normal-content">?!!</span></a></p>
+`
+
 exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > basic markdown 1`] = `
 <p>Hello <em>world!</em> This is <strong>SO COOL.</strong></p>
 `
@@ -14,6 +19,11 @@ exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) >
 <p>Very nice: <time datetime="Fri, 25 Oct 2413 03:00:00 GMT">10/25/2413</time></p>
 `
 
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > emails 1`] = `
+<p>Email cute dogs to qznebula@protonmail.com please.</p>
+<p>Just kidding... <a class="external-link from-content indicate-external" href="mailto:qznebula@protonmail.com" title="External (opens in new tab)" target="_blank">unless?</a></p>
+`
+
 exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > escape end of tag 1`] = `
 <p>My favorite album is <a style="--primary-color: #123456" href="to-localized.album/cool-album">[Tactical Omission]</a>.</p>
 <p>Your favorite album is <a style="--primary-color: #123456" href="to-localized.album/cool-album">[Tactical Wha-Huh-Now</a>].</p>