Merge branch 'preview' into listing-tweaks

21 files changed, 231 insertions, 163 deletions

diff --git a/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs b/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs
index 5ca63482..42a409ad 100644
--- a/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAdditionalFilesList.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAdditionalFilesList.js TAP generateAdditionalFilesList (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/generateAdditionalFilesList.js > TAP > generateAdditionalFilesList (snapshot) > basic behavior 1`] = `
 <dl>
     <dt>SBURB Wallpaper</dt>
     <dd>
@@ -24,6 +24,6 @@ exports[`test/snapshot/generateAdditionalFilesList.js TAP generateAdditionalFile
 </dl>
 `
 
-exports[`test/snapshot/generateAdditionalFilesList.js TAP generateAdditionalFilesList (snapshot) > no additional files 1`] = `
+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
index c94371ca..e166140a 100644
--- a/tap-snapshots/test/snapshot/generateAdditionalFilesShortcut.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAdditionalFilesShortcut.js.test.cjs
@@ -5,10 +5,10 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAdditionalFilesShortcut.js TAP generateAdditionalFilesShortcut (snapshot) > basic behavior 1`] = `
+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`] = `
+exports[`test/snapshot/generateAdditionalFilesShortcut.js > TAP > generateAdditionalFilesShortcut (snapshot) > no additional files 1`] = `
 
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumBanner.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumBanner.js.test.cjs
index 28eaf6d3..c900eb44 100644
--- a/tap-snapshots/test/snapshot/generateAlbumBanner.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumBanner.js.test.cjs
@@ -5,14 +5,14 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAlbumBanner.js TAP generateAlbumBanner (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/generateAlbumBanner.js > TAP > generateAlbumBanner (snapshot) > basic behavior 1`] = `
 <div id="banner"><img src="media/album-art/cool-album/banner.png" alt="album banner" width="800" height="200"></div>
 `
 
-exports[`test/snapshot/generateAlbumBanner.js TAP generateAlbumBanner (snapshot) > no banner 1`] = `
+exports[`test/snapshot/generateAlbumBanner.js > TAP > generateAlbumBanner (snapshot) > no banner 1`] = `
 
 `
 
-exports[`test/snapshot/generateAlbumBanner.js TAP generateAlbumBanner (snapshot) > no dimensions 1`] = `
+exports[`test/snapshot/generateAlbumBanner.js > TAP > generateAlbumBanner (snapshot) > no dimensions 1`] = `
 <div id="banner"><img src="media/album-art/cool-album/banner.png" alt="album banner" width="1100" height="200"></div>
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
index d787df68..2c679fc8 100644
--- a/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
@@ -5,28 +5,31 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAlbumCoverArtwork.js TAP generateAlbumCoverArtwork (snapshot) > display: primary 1`] = `
+exports[`test/snapshot/generateAlbumCoverArtwork.js > TAP > generateAlbumCoverArtwork (snapshot) > display: primary 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/cover.png">
-        <div class="square">
-            <div class="square-content">
-                <div class="reveal">
-                    <div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/cover.medium.jpg"></div></div>
-                    <span class="reveal-text-container">
-                        <span class="reveal-text">
-                            cw: creepy crawlies
-                            <br>
-                            <span class="reveal-interaction">click to show</span>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </a>
+    [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', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/damara/">Damara</a>, <a href="tag/cronus/">Cronus</a>, <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
-exports[`test/snapshot/generateAlbumCoverArtwork.js TAP generateAlbumCoverArtwork (snapshot) > display: thumbnail 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/cover.small.jpg"></div></div></div></div>
+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' ], 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 e769026f..9702cad8 100644
--- a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
@@ -5,11 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-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>
-`
-
-exports[`test/snapshot/generateAlbumReleaseInfo.js TAP generateAlbumReleaseInfo (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > basic behavior 1`] = `
 <p>
     By <span class="nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="nowrap"><a href="artist/tensei/">Tensei</a> (hot jams) (<span class="icons"><a href="https://tenseimusic.bandcamp.com/" class="icon">
                 <svg>
@@ -33,10 +29,14 @@ exports[`test/snapshot/generateAlbumReleaseInfo.js TAP generateAlbumReleaseInfo
 <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>
 `
 
-exports[`test/snapshot/generateAlbumReleaseInfo.js TAP generateAlbumReleaseInfo (snapshot) > equal cover art date 1`] = `
+exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > equal cover art date 1`] = `
 <p>Released 4/12/2020.</p>
 `
 
-exports[`test/snapshot/generateAlbumReleaseInfo.js TAP generateAlbumReleaseInfo (snapshot) > reduced details 1`] = `
+exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > reduced details 1`] = `
 
 `
+
+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>
+`
diff --git a/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
index f84827ae..29d06283 100644
--- a/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
@@ -5,29 +5,29 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAlbumSecondaryNav.js TAP generateAlbumSecondaryNav (snapshot) > basic behavior, mode: album 1`] = `
+exports[`test/snapshot/generateAlbumSecondaryNav.js > TAP > generateAlbumSecondaryNav (snapshot) > basic behavior, mode: album 1`] = `
 <nav id="secondary-nav" class="nav-links-groups">
-    <span>
+    <span style="--primary-color: #abcdef; --dark-color: #21272e; --dim-color: #818181; --dim-ghost-color: #818181cc; --bg-color: #161616cc; --bg-black-color: #06090bcc; --shadow-color: #0d0d0dcc">
         <a href="group/vcg/">VCG</a>
-        (<a href="album/first/">Previous</a>, <a href="album/last/">Next</a>)
+        (<a href="album/first/" title="First">Previous</a>, <a href="album/last/" title="Last">Next</a>)
     </span>
-    <span>
+    <span style="--primary-color: #123456; --dark-color: #0e2842; --dim-color: #000000; --dim-ghost-color: #000000cc; --bg-color: #161616cc; --bg-black-color: #000913cc; --shadow-color: #0d0d0dcc">
         <a href="group/bepis/">Bepis</a>
-        (<a href="album/second/">Next</a>)
+        (<a href="album/second/" title="Second">Next</a>)
     </span>
 </nav>
 `
 
-exports[`test/snapshot/generateAlbumSecondaryNav.js TAP generateAlbumSecondaryNav (snapshot) > basic behavior, mode: track 1`] = `
+exports[`test/snapshot/generateAlbumSecondaryNav.js > TAP > generateAlbumSecondaryNav (snapshot) > basic behavior, mode: track 1`] = `
 <nav id="secondary-nav" class="nav-links-groups">
-    <a href="group/vcg/">VCG</a>
-    <a href="group/bepis/">Bepis</a>
+    <a href="group/vcg/" style="--primary-color: #abcdef; --dim-color: #818181">VCG</a>
+    <a href="group/bepis/" style="--primary-color: #123456; --dim-color: #000000">Bepis</a>
 </nav>
 `
 
-exports[`test/snapshot/generateAlbumSecondaryNav.js TAP generateAlbumSecondaryNav (snapshot) > dateless album in mixed group 1`] = `
+exports[`test/snapshot/generateAlbumSecondaryNav.js > TAP > generateAlbumSecondaryNav (snapshot) > dateless album in mixed group 1`] = `
 <nav id="secondary-nav" class="nav-links-groups">
-    <a href="group/vcg/">VCG</a>
-    <a href="group/bepis/">Bepis</a>
+    <a href="group/vcg/" style="--primary-color: #abcdef; --dim-color: #818181">VCG</a>
+    <a href="group/bepis/" style="--primary-color: #123456; --dim-color: #000000">Bepis</a>
 </nav>
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs
index 3be84969..cd820cde 100644
--- a/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumSidebarGroupBox.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAlbumSidebarGroupBox.js TAP generateAlbumSidebarGroupBox (snapshot) > basic behavior, mode: album 1`] = `
+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>
@@ -13,12 +13,12 @@ Very cool group.
 <p class="group-chronology-link">Previous: <a href="album/first/">First</a></p>
 `
 
-exports[`test/snapshot/generateAlbumSidebarGroupBox.js TAP generateAlbumSidebarGroupBox (snapshot) > basic behavior, mode: track 1`] = `
+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>
 `
 
-exports[`test/snapshot/generateAlbumSidebarGroupBox.js TAP generateAlbumSidebarGroupBox (snapshot) > dateless album in mixed group 1`] = `
+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>
diff --git a/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs
index 59eb4456..304717d1 100644
--- a/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumTrackList.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateAlbumTrackList.js TAP generateAlbumTrackList (snapshot) > basic behavior, default track section 1`] = `
+exports[`test/snapshot/generateAlbumTrackList.js > TAP > generateAlbumTrackList (snapshot) > basic behavior, default track section 1`] = `
 <ul>
     <li>(0:20) <a href="track/t1/">Track 1</a></li>
     <li>(0:30) <a href="track/t2/">Track 2</a></li>
@@ -14,7 +14,7 @@ exports[`test/snapshot/generateAlbumTrackList.js TAP generateAlbumTrackList (sna
 </ul>
 `
 
-exports[`test/snapshot/generateAlbumTrackList.js TAP generateAlbumTrackList (snapshot) > basic behavior, with track sections 1`] = `
+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">First section (~1:30):</dt>
     <dd>
diff --git a/tap-snapshots/test/snapshot/generateBanner.js.test.cjs b/tap-snapshots/test/snapshot/generateBanner.js.test.cjs
index 24e49603..bf2c03c3 100644
--- a/tap-snapshots/test/snapshot/generateBanner.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateBanner.js.test.cjs
@@ -5,10 +5,10 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateBanner.js TAP generateBanner (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/generateBanner.js > TAP > generateBanner (snapshot) > basic behavior 1`] = `
 <div id="banner"><img src="media/album-art/cool-album/banner.png" alt="Very cool banner art." width="800" height="200"></div>
 `
 
-exports[`test/snapshot/generateBanner.js TAP generateBanner (snapshot) > no dimensions 1`] = `
+exports[`test/snapshot/generateBanner.js > TAP > generateBanner (snapshot) > no dimensions 1`] = `
 <div id="banner"><img src="media/album-art/cool-album/banner.png" width="1100" height="200"></div>
 `
diff --git a/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
index 88be76ea..bc1432de 100644
--- a/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
@@ -5,28 +5,31 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateCoverArtwork.js TAP generateCoverArtwork (snapshot) > display: primary 1`] = `
+exports[`test/snapshot/generateCoverArtwork.js > TAP > generateCoverArtwork (snapshot) > display: primary 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/cover.png">
-        <div class="square">
-            <div class="square-content">
-                <div class="reveal">
-                    <div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/cover.medium.jpg"></div></div>
-                    <span class="reveal-text-container">
-                        <span class="reveal-text">
-                            cw: creepy crawlies
-                            <br>
-                            <span class="reveal-interaction">click to show</span>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </a>
+    [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', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/damara/">Damara</a>, <a href="tag/cronus/">Cronus</a>, <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
-exports[`test/snapshot/generateCoverArtwork.js TAP generateCoverArtwork (snapshot) > display: thumbnail 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/cover.small.jpg"></div></div></div></div>
+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
index 07268581..ed7b882a 100644
--- a/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
@@ -5,24 +5,24 @@
  * 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: {"tooltip":true,"color":false,"attributes":{"id":"previous-button"},"content":"Previous"}
-next: {"tooltip":true,"color":false,"attributes":{"id":"next-button"},"content":"Next"}
+exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > basic behavior 1`] = `
+previous: { tooltip: true, color: false, attributes: { id: 'previous-button' }, content: Tag (no name, 1 items) }
+next: { tooltip: true, color: false, attributes: { id: 'next-button' }, content: Tag (no name, 1 items) }
 `
 
-exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > disable id 1`] = `
-previous: {"tooltip":true,"color":false,"attributes":{"id":false},"content":"Previous"}
-next: {"tooltip":true,"color":false,"attributes":{"id":false},"content":"Next"}
+exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > disable id 1`] = `
+previous: { tooltip: true, color: false, attributes: { id: false }, content: Tag (no name, 1 items) }
+next: { tooltip: true, 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) > neither link present 1`] = `
 
 `
 
-exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > next missing 1`] = `
-previous: {"tooltip":true,"color":false,"attributes":{"id":"previous-button"},"content":"Previous"}
+exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > next missing 1`] = `
+previous: { tooltip: true, color: false, attributes: { id: 'previous-button' }, content: Tag (no name, 1 items) }
 `
 
-exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > previous missing 1`] = `
-next: {"tooltip":true,"color":false,"attributes":{"id":"next-button"},"content":"Next"}
+exports[`test/snapshot/generatePreviousNextLinks.js > TAP > generatePreviousNextLinks (snapshot) > previous missing 1`] = `
+next: { tooltip: true, color: false, attributes: { id: 'next-button' }, content: Tag (no name, 1 items) }
 `
diff --git a/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
index 92216a89..78063c48 100644
--- a/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
@@ -5,39 +5,46 @@
  * 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`] = `
+exports[`test/snapshot/generateTrackCoverArtwork.js > TAP > generateTrackCoverArtwork (snapshot) > display: primary - no unique art 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/cover.png">
-        <div class="square">
-            <div class="square-content">
-                <div class="reveal">
-                    <div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/cover.medium.jpg"></div></div>
-                    <span class="reveal-text-container">
-                        <span class="reveal-text">
-                            cw: creepy crawlies
-                            <br>
-                            <span class="reveal-interaction">click to show</span>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </a>
+    [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', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/damara/">Damara</a>, <a href="tag/cronus/">Cronus</a>, <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
-exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: primary - unique art 1`] = `
+exports[`test/snapshot/generateTrackCoverArtwork.js > TAP > generateTrackCoverArtwork (snapshot) > display: primary - unique art 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/beesmp3.jpg"><div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/beesmp3.medium.jpg"></div></div></div></div></a>
+    [mocked: image
+     args: [ [ { name: 'Bees', directory: 'bees', isContentWarning: false } ] ]
+     slots: { path: [ 'media.trackCover', 'bee-forus-seatbelt-safebee', 'beesmp3', 'jpg' ], thumb: 'medium', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
-exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: thumbnail - no unique art 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/cover.small.jpg"></div></div></div></div>
+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' ], thumb: 'small', reveal: false, link: false, square: true }]
 `
 
-exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: thumbnail - unique art 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/beesmp3.small.jpg"></div></div></div></div>
+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' ], 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 e94ed822..2add28ed 100644
--- a/tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateTrackReleaseInfo.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/generateTrackReleaseInfo.js TAP generateTrackReleaseInfo (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > basic behavior 1`] = `
 <p>
     By <a href="artist/toby-fox/">Toby Fox</a>.
     <br>
@@ -16,21 +16,21 @@ exports[`test/snapshot/generateTrackReleaseInfo.js TAP generateTrackReleaseInfo
 <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>
 `
 
-exports[`test/snapshot/generateTrackReleaseInfo.js TAP generateTrackReleaseInfo (snapshot) > cover artist contribs, non-unique 1`] = `
+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>This wiki doesn&apos;t have any listening links for <i>Suspicious Track</i>.</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`] = `
+exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > cover artist contribs, unique 1`] = `
 <p>
     By <a href="artist/toby-fox/">Toby Fox</a>.
     <br>
-    Cover art by <span class="nowrap"><a href="artist/alpaca/">Alpaca</a> (🔥)</span>.
+    Cover art by <span class="nowrap"><a href="artist/alpaca/">Alpaca</a> (&#x1F525;)</span>.
 </p>
-<p>This wiki doesn&apos;t have any listening links for <i>Suspicious Track</i>.</p>
+<p>This wiki doesn't have any listening links for <i>Suspicious Track</i>.</p>
 `
 
-exports[`test/snapshot/generateTrackReleaseInfo.js TAP generateTrackReleaseInfo (snapshot) > reduced details 1`] = `
+exports[`test/snapshot/generateTrackReleaseInfo.js > TAP > generateTrackReleaseInfo (snapshot) > reduced details 1`] = `
 <p>By <a href="artist/toby-fox/">Toby Fox</a>.</p>
-<p>This wiki doesn&apos;t have any listening links for <i>Suspicious Track</i>.</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 c2f6aea6..f88141d5 100644
--- a/tap-snapshots/test/snapshot/image.js.test.cjs
+++ b/tap-snapshots/test/snapshot/image.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/image.js TAP image (snapshot) > content warnings via tags 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via tags 1`] = `
 <div class="reveal">
     <div class="image-container"><div class="image-inner-area"><img src="media/album-art/beyond-canon/cover.png"></div></div>
     <span class="reveal-text-container">
@@ -18,43 +18,59 @@ exports[`test/snapshot/image.js TAP image (snapshot) > content warnings via tags
 </div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > id with link 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > id with link 1`] = `
 <a id="banana" class="box image-link" href="foobar"><div class="image-container"><div class="image-inner-area"><img src="foobar"></div></div></a>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > id with square 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > id with square 1`] = `
 <div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img id="banana" src="foobar"></div></div></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > id without link 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > id without link 1`] = `
 <div class="image-container"><div class="image-inner-area"><img id="banana" src="foobar"></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > lazy with square 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > lazy with square 1`] = `
 <noscript><div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="foobar"></div></div></div></div></noscript>
 <div class="square js-hide"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="lazy" data-original="foobar"></div></div></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > link with file size 1`] = `
-<a class="box image-link" href="media/album-art/pingas/cover.png"><div class="image-container"><div class="image-inner-area"><img data-original-size="1000000" src="media/album-art/pingas/cover.png"></div></div></a>
+exports[`test/snapshot/image.js > TAP > image (snapshot) > link with file size 1`] = `
+<a class="box image-link" href="media/album-art/pingas/cover.png"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/pingas/cover.png"></div></div></a>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > source missing 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path 1`] = `
+<div class="image-container"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div>
+`
+
+exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path w/ missingSourceContent 1`] = `
+<div class="image-container"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div>
+`
+
+exports[`test/snapshot/image.js > TAP > image (snapshot) > source missing 1`] = `
 <div class="image-container placeholder-image"><div class="image-inner-area"><div class="image-text-area">Example of missing source message.</div></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > source via path 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > source via path 1`] = `
 <div class="image-container"><div class="image-inner-area"><img src="media/album-art/beyond-canon/cover.png"></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > source via src 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > source via src 1`] = `
 <div class="image-container"><div class="image-inner-area"><img src="https://example.com/bananas.gif"></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > square 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > square 1`] = `
 <div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="foobar"></div></div></div></div>
 `
 
-exports[`test/snapshot/image.js TAP image (snapshot) > width & height 1`] = `
+exports[`test/snapshot/image.js > TAP > image (snapshot) > thumb requested but source is gif 1`] = `
+<div class="image-container"><div class="image-inner-area"><img src="media/flash-art/5426.gif"></div></div>
+`
+
+exports[`test/snapshot/image.js > TAP > image (snapshot) > thumbnail details 1`] = `
+<div class="image-container"><div class="image-inner-area"><img data-original-length="1200" data-thumbs="voluminous:1200 middling:900 petite:20" src="media/album-art/beyond-canon/cover.voluminous.jpg"></div></div>
+`
+
+exports[`test/snapshot/image.js > TAP > image (snapshot) > width & height 1`] = `
 <div class="image-container"><div class="image-inner-area"><img width="600" height="400" src="foobar"></div></div>
 `
diff --git a/tap-snapshots/test/snapshot/linkArtist.js.test.cjs b/tap-snapshots/test/snapshot/linkArtist.js.test.cjs
index 77516f3f..6b532aef 100644
--- a/tap-snapshots/test/snapshot/linkArtist.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkArtist.js.test.cjs
@@ -5,10 +5,10 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkArtist.js TAP linkArtist (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/linkArtist.js > TAP > linkArtist (snapshot) > basic behavior 1`] = `
 <a href="artist/toby-fox/">Toby Fox</a>
 `
 
-exports[`test/snapshot/linkArtist.js TAP linkArtist (snapshot) > prefer short name 1`] = `
+exports[`test/snapshot/linkArtist.js > TAP > linkArtist (snapshot) > prefer short name 1`] = `
 <a href="artist/55gore/">55gore</a>
 `
diff --git a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
index 7124ad18..75b9d273 100644
--- a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > loads of links 1`] = `
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links 1`] = `
 <span class="nowrap"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a> (<span class="icons"><a href="https://loremipsum.io" class="icon">
             <svg>
                 <title>External (loremipsum.io)</title>
@@ -29,20 +29,20 @@ exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > loa
         </a></span>)</span>
 `
 
-exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > no accents 1`] = `
+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 & Scratch</a>
+<a href="artist/the-big-baddies/">Grounder &amp; Scratch</a>
 <a href="artist/toby-fox/">Toby Fox</a>
 `
 
-exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > no preventWrapping 1`] = `
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > no preventWrapping 1`] = `
 <a href="artist/clark-powell/">Clark Powell</a> (<span class="icons"><a href="https://soundcloud.com/plazmataz" class="icon">
         <svg>
             <title>SoundCloud</title>
             <use href="static/icons.svg#icon-soundcloud"></use>
         </svg>
     </a></span>)
-<a href="artist/the-big-baddies/">Grounder & Scratch</a> (Snooping)
+<a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)
 <a href="artist/toby-fox/">Toby Fox</a> (Arrangement) (<span class="icons"><a href="https://tobyfox.bandcamp.com/" class="icon">
         <svg>
             <title>Bandcamp</title>
@@ -56,20 +56,20 @@ exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > no
     </a></span>)
 `
 
-exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > only showContribution 1`] = `
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showContribution 1`] = `
 <a href="artist/clark-powell/">Clark Powell</a>
-<span class="nowrap"><a href="artist/the-big-baddies/">Grounder & Scratch</a> (Snooping)</span>
+<span class="nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
 <span class="nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)</span>
 `
 
-exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > only showIcons 1`] = `
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showIcons 1`] = `
 <span class="nowrap"><a href="artist/clark-powell/">Clark Powell</a> (<span class="icons"><a href="https://soundcloud.com/plazmataz" class="icon">
             <svg>
                 <title>SoundCloud</title>
                 <use href="static/icons.svg#icon-soundcloud"></use>
             </svg>
         </a></span>)</span>
-<a href="artist/the-big-baddies/">Grounder & Scratch</a>
+<a href="artist/the-big-baddies/">Grounder &amp; Scratch</a>
 <span class="nowrap"><a href="artist/toby-fox/">Toby Fox</a> (<span class="icons"><a href="https://tobyfox.bandcamp.com/" class="icon">
             <svg>
                 <title>Bandcamp</title>
@@ -83,14 +83,14 @@ exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > onl
         </a></span>)</span>
 `
 
-exports[`test/snapshot/linkContribution.js TAP linkContribution (snapshot) > showContribution & showIcons 1`] = `
+exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons 1`] = `
 <span class="nowrap"><a href="artist/clark-powell/">Clark Powell</a> (<span class="icons"><a href="https://soundcloud.com/plazmataz" class="icon">
             <svg>
                 <title>SoundCloud</title>
                 <use href="static/icons.svg#icon-soundcloud"></use>
             </svg>
         </a></span>)</span>
-<span class="nowrap"><a href="artist/the-big-baddies/">Grounder & Scratch</a> (Snooping)</span>
+<span class="nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
 <span class="nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement) (<span class="icons"><a href="https://tobyfox.bandcamp.com/" class="icon">
             <svg>
                 <title>Bandcamp</title>
diff --git a/tap-snapshots/test/snapshot/linkExternal.js.test.cjs b/tap-snapshots/test/snapshot/linkExternal.js.test.cjs
index 156b7f90..cd6dca76 100644
--- a/tap-snapshots/test/snapshot/linkExternal.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkExternal.js.test.cjs
@@ -5,7 +5,7 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkExternal.js TAP linkExternal (snapshot) > basic domain matches 1`] = `
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > basic domain matches 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>
@@ -19,21 +19,21 @@ exports[`test/snapshot/linkExternal.js TAP linkExternal (snapshot) > basic domai
 <a href="https://buzinkai.newgrounds.com/" class="nowrap">Newgrounds</a>
 `
 
-exports[`test/snapshot/linkExternal.js TAP linkExternal (snapshot) > custom domains for common platforms 1`] = `
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > custom domains for common platforms 1`] = `
 <a href="https://music.solatrus.com/" class="nowrap">music.solatrus.com</a>
 <a href="https://types.pl/" class="nowrap">Mastodon (types.pl)</a>
 `
 
-exports[`test/snapshot/linkExternal.js TAP linkExternal (snapshot) > custom matches - album 1`] = `
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > custom matches - album 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 (playlist)</a>
 `
 
-exports[`test/snapshot/linkExternal.js TAP linkExternal (snapshot) > missing domain (arbitrary local path) 1`] = `
+exports[`test/snapshot/linkExternal.js > TAP > linkExternal (snapshot) > missing domain (arbitrary local path) 1`] = `
 <a href="/foo/bar/baz.mp3" class="nowrap">Wiki Archive (local upload)</a>
 `
 
-exports[`test/snapshot/linkExternal.js TAP linkExternal (snapshot) > unknown domain (arbitrary world wide web path) 1`] = `
+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">snoo.ping.as</a>
 `
diff --git a/tap-snapshots/test/snapshot/linkExternalFlash.js.test.cjs b/tap-snapshots/test/snapshot/linkExternalFlash.js.test.cjs
index d7f6c1c3..d29d0dde 100644
--- a/tap-snapshots/test/snapshot/linkExternalFlash.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkExternalFlash.js.test.cjs
@@ -5,14 +5,14 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkExternalFlash.js TAP linkExternalFlash (snapshot) > basic behavior 1`] = `
+exports[`test/snapshot/linkExternalFlash.js > TAP > linkExternalFlash (snapshot) > basic behavior 1`] = `
 <span class="nowrap"><a href="https://homestuck.com/story/4109/" class="nowrap">homestuck.com</a> (page 4109)</span>
 <span class="nowrap"><a href="https://youtu.be/FDt-SLyEcjI" class="nowrap">YouTube</a> (on any device)</span>
 <span class="nowrap"><a href="https://www.bgreco.net/hsflash/006009.html" class="nowrap">www.bgreco.net</a> (HQ Audio)</span>
 <span class="nowrap"><a href="https://www.newgrounds.com/portal/view/582345" class="nowrap">Newgrounds</a></span>
 `
 
-exports[`test/snapshot/linkExternalFlash.js TAP linkExternalFlash (snapshot) > secret page 1`] = `
+exports[`test/snapshot/linkExternalFlash.js > TAP > linkExternalFlash (snapshot) > secret page 1`] = `
 <span class="nowrap"><a href="https://homestuck.com/story/pony/" class="nowrap">homestuck.com</a> (secret page)</span>
 <span class="nowrap"><a href="https://youtu.be/USB1pj6hAjU" class="nowrap">YouTube</a> (on any device)</span>
 `
diff --git a/tap-snapshots/test/snapshot/linkTemplate.js.test.cjs b/tap-snapshots/test/snapshot/linkTemplate.js.test.cjs
index 45a9e616..0d9ef77b 100644
--- a/tap-snapshots/test/snapshot/linkTemplate.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkTemplate.js.test.cjs
@@ -5,15 +5,15 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/linkTemplate.js TAP linkTemplate (snapshot) > fill many slots 1`] = `
+exports[`test/snapshot/linkTemplate.js > TAP > linkTemplate (snapshot) > fill many slots 1`] = `
 <a class="dog" id="cat1" href="https://hsmusic.wiki/media/cool%20file.pdf#fooey" style="--primary-color: #123456ff; --dim-color: #12345677">My Cool Link</a>
 `
 
-exports[`test/snapshot/linkTemplate.js TAP linkTemplate (snapshot) > fill path slot & provide appendIndexHTML 1`] = `
+exports[`test/snapshot/linkTemplate.js > TAP > linkTemplate (snapshot) > fill path slot & provide appendIndexHTML 1`] = `
 <a href="/c*lzone/myCoolPath/ham/pineapple/tomato/index.html">delish</a>
 `
 
-exports[`test/snapshot/linkTemplate.js TAP linkTemplate (snapshot) > link in content 1`] = `
+exports[`test/snapshot/linkTemplate.js > TAP > linkTemplate (snapshot) > link in content 1`] = `
 <a href="#the-more-ye-know">
     Oh geez oh heck
     There's a link in here!!
@@ -23,10 +23,10 @@ exports[`test/snapshot/linkTemplate.js TAP linkTemplate (snapshot) > link in con
 </a>
 `
 
-exports[`test/snapshot/linkTemplate.js TAP linkTemplate (snapshot) > missing content 1`] = `
+exports[`test/snapshot/linkTemplate.js > TAP > linkTemplate (snapshot) > missing content 1`] = `
 <a href="banana">(Missing link content)</a>
 `
 
-exports[`test/snapshot/linkTemplate.js TAP linkTemplate (snapshot) > special characters in path argument 1`] = `
+exports[`test/snapshot/linkTemplate.js > TAP > linkTemplate (snapshot) > special characters in path argument 1`] = `
 <a href="media/album-additional/homestuck-vol-1/Showtime%20(Piano%20Refrain)%20-%20%23xXxAwesomeSheetMusick%3FrxXx%23.pdf">Damn, that's some good sheet music</a>
 `
diff --git a/tap-snapshots/test/snapshot/linkThing.js.test.cjs b/tap-snapshots/test/snapshot/linkThing.js.test.cjs
new file mode 100644
index 00000000..5a5b2516
--- /dev/null
+++ b/tap-snapshots/test/snapshot/linkThing.js.test.cjs
@@ -0,0 +1,39 @@
+/* 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/linkThing.js > TAP > linkThing (snapshot) > basic behavior 1`] = `
+<a href="track/foo/" style="--primary-color: #abcdef; --dim-color: #818181">Cool track!</a>
+`
+
+exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > color 1`] = `
+<a href="track/showtime-piano-refrain/">Showtime (Piano Refrain)</a>
+<a href="track/showtime-piano-refrain/" style="--primary-color: #38f43d; --dim-color: #389f33">Showtime (Piano Refrain)</a>
+<a href="track/showtime-piano-refrain/" style="--primary-color: #aaccff; --dim-color: #828282">Showtime (Piano Refrain)</a>
+`
+
+exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > nested links in content stripped 1`] = `
+<a href="foo/"><b>Oooo! Very spooky.</b></a>
+`
+
+exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > preferShortName 1`] = `
+<a href="tag/five-oceanfalls/">Five</a>
+`
+
+exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > tags in name escaped 1`] = `
+<a href="track/foo/">&lt;a href=&quot;SNOOPING&quot;&gt;AS USUAL&lt;/a&gt; I SEE</a>
+<a href="track/bar/">&lt;b&gt;boldface&lt;/b&gt;</a>
+<a href="album/exile/">&gt;Exile&lt;</a>
+<a href="track/heart/">&lt;3</a>
+`
+
+exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > tooltip & content 1`] = `
+<a href="album/beyond-canon/">Beyond Canon</a>
+<a href="album/beyond-canon/" title="Beyond Canon">Beyond Canon</a>
+<a href="album/beyond-canon/" title="Beyond Canon">Next</a>
+<a href="album/beyond-canon/" title="Apple">Banana</a>
+<a href="album/beyond-canon/">Banana</a>
+`
diff --git a/tap-snapshots/test/snapshot/transformContent.js.test.cjs b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
index d144cf12..85ee740f 100644
--- a/tap-snapshots/test/snapshot/transformContent.js.test.cjs
+++ b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
@@ -5,12 +5,12 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > dates 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > dates 1`] = `
 <p><time datetime="Thu, 13 Apr 2023 00:00:00 GMT">4/12/2023</time> Yep!</p>
 <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) > inline images 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > inline images 1`] = `
 <p><img src="snooping.png"> as USUAL...</p>
 <p>What do you know? <img src="cowabunga.png" width="24" height="32"></p>
 <p><a href="to-localized.album/cool-album" style="--primary-color: #123456; --dim-color: #000000">I'm on the left.</a><img src="im-on-the-right.jpg"></p>
@@ -20,12 +20,12 @@ exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > inl
 <p>And... all done! <img src="end-of-source.png"></p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > links to a thing 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > links to a thing 1`] = `
 <p>This is <a href="to-localized.album/cool-album" style="--primary-color: #123456; --dim-color: #000000">my favorite album</a>.</p>
 <p>That&#39;s right, <a href="to-localized.album/cool-album" style="--primary-color: #123456; --dim-color: #000000">Cool Album</a>!</p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > lyrics - basic line breaks 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > lyrics - basic line breaks 1`] = `
 <p>Hey, ho<br>
 And away we go<br>
 Truly, music</p>
@@ -33,7 +33,7 @@ Truly, music</p>
 (That&#39;s right)</p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > lyrics - line breaks around tags 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > lyrics - line breaks around tags 1`] = `
 <p>The date be <time datetime="Tue, 13 Apr 2004 03:00:00 GMT">4/13/2004</time><br>
 I say, the date be <time datetime="Tue, 13 Apr 2004 03:00:00 GMT">4/13/2004</time><br>
 <time datetime="Tue, 13 Apr 2004 03:00:00 GMT">4/13/2004</time><br>
@@ -46,31 +46,31 @@ I say, the date be <time datetime="Tue, 13 Apr 2004 03:00:00 GMT">4/13/2004</tim
 <time datetime="Tue, 13 Apr 2004 03:00:00 GMT">4/13/2004</time>, and don&#39;t ye forget it</p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > lyrics - repeated and edge line breaks 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > lyrics - repeated and edge line breaks 1`] = `
 <p>Well, you know<br>
 How it goes</p>
 <p>Yessiree</p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #1 1`] = `
-<div class="content-image"><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.large.jpg"></div></div></a></div>
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #1 1`] = `
+<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #2 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #2 1`] = `
 <p>Rad.</p>
-<div class="content-image"><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.large.jpg"></div></div></a></div>
+<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #3 1`] = `
-<div class="content-image"><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.large.jpg"></div></div></a></div>
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #3 1`] = `
+<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
 <p>Baller.</p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > super basic string 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > super basic string 1`] = `
 <p>Neat listing: Albums - by Date</p>
 `
 
-exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > two text paragraphs 1`] = `
+exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > two text paragraphs 1`] = `
 <p>Hello, world!</p>
 <p>Wow, this is very cool.</p>
 `