bind and htmlify rest of misc-templates

5 files changed, 260 insertions, 180 deletions

diff --git a/.gitignore b/.gitignore
index 6745b9a3..447e8916 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
+.DS_Store
 
 # FOR NOW: We are using site2.css instead of site.css,
 # thanks to breaking changes - we can't have the release
diff --git a/src/misc-templates.js b/src/misc-templates.js
index 62f41c5f..7b4ef579 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -4,10 +4,6 @@
 // These are made available right on a page spec's ({wikiData, language, ...})
 // args object!
 
-import fixWS from 'fix-whitespace';
-
-import * as html from './util/html.js';
-
 import {Track, Album} from './data/things.js';
 
 import {getColors} from './util/colors.js';
@@ -26,7 +22,10 @@ const MASTODON_DOMAINS = ['types.pl'];
 
 // "Additional Files" listing
 
-export function generateAdditionalFilesShortcut(additionalFiles, {language}) {
+function unbound_generateAdditionalFilesShortcut(additionalFiles, {
+  html,
+  language,
+}) {
   if (!additionalFiles?.length) return '';
 
   return language.$('releaseInfo.additionalFiles.shortcut', {
@@ -39,10 +38,13 @@ export function generateAdditionalFilesShortcut(additionalFiles, {language}) {
   });
 }
 
-export function generateAdditionalFilesList(
-  additionalFiles,
-  {language, getFileSize, linkFile}
-) {
+function unbound_generateAdditionalFilesList(additionalFiles, {
+  html,
+  language,
+
+  getFileSize,
+  linkFile,
+}) {
   if (!additionalFiles?.length) return [];
 
   const fileCount = additionalFiles.flatMap((g) => g.files).length;
@@ -86,10 +88,16 @@ export function generateAdditionalFilesList(
 
 // Artist strings
 
-export function getArtistString(
-  artists,
-  {iconifyURL, link, language, showIcons = false, showContrib = false}
-) {
+function unbound_getArtistString(artists, {
+  html,
+  language,
+  link,
+
+  iconifyURL,
+
+  showIcons = false,
+  showContrib = false,
+}) {
   return language.formatConjunctionList(
     artists.map(({who, what}) => {
       const {urls} = who;
@@ -134,14 +142,17 @@ export function getArtistString(
 
 // Chronology links
 
-export function generateChronologyLinks(currentThing, {
+function unbound_generateChronologyLinks(currentThing, {
+  html,
+  language,
+  link,
+
+  generateNavigationLinks,
+
   dateKey = 'date',
   contribKey,
   getThings,
-  generateNavigationLinks,
   headingString,
-  link,
-  language,
 }) {
   const contributions = currentThing[contribKey];
   if (!contributions) {
@@ -208,7 +219,10 @@ export function generateChronologyLinks(currentThing, {
 
 // Content warning tags
 
-export function getRevealStringFromWarnings(warnings, {language}) {
+function unbound_getRevealStringFromWarnings(warnings, {
+  html,
+  language,
+}) {
   return (
     language.$('misc.contentWarnings', {warnings}) +
     html.tag('br') +
@@ -217,31 +231,37 @@ export function getRevealStringFromWarnings(warnings, {language}) {
   );
 }
 
-export function getRevealStringFromTags(tags, {language}) {
+function unbound_getRevealStringFromTags(tags, {
+  language,
+
+  getRevealStringFromWarnings,
+}) {
   return (
-    tags &&
-    tags.some((tag) => tag.isContentWarning) &&
+    tags?.some(tag => tag.isContentWarning) &&
       getRevealStringFromWarnings(
         language.formatUnitList(
           tags
             .filter(tag => tag.isContentWarning)
-            .map(tag => tag.name)),
-        {language})
+            .map(tag => tag.name)))
   );
 }
 
 // Cover art links
 
-export function generateCoverLink({
+function unbound_generateCoverLink({
+  html,
   img,
-  link,
   language,
-  to,
-  wikiData,
-  src,
-  path,
+  link,
+
+  getRevealStringFromTags,
+
   alt,
+  path,
+  src,
   tags = [],
+  to,
+  wikiData,
 }) {
   const {wikiInfo} = wikiData;
 
@@ -278,7 +298,7 @@ export function generateCoverLink({
 
 // CSS & color shenanigans
 
-export function getThemeString(color, additionalVariables = []) {
+function unbound_getThemeString(color, additionalVariables = []) {
   if (!color) return '';
 
   const {primary, dim, bg} = getColors(color);
@@ -299,7 +319,9 @@ export function getThemeString(color, additionalVariables = []) {
   ].join('\n');
 }
 
-export function getAlbumStylesheet(album, {to}) {
+function unbound_getAlbumStylesheet(album, {
+  to,
+}) {
   const hasWallpaper = album.wallpaperArtistContribs.length >= 1;
   const hasWallpaperStyle = !!album.wallpaperStyle;
   const hasBannerStyle = !!album.bannerStyle;
@@ -316,11 +338,11 @@ export function getAlbumStylesheet(album, {to}) {
       ? [
           `body::before {`,
           `    background-image: url("${wallpaperSource}");`,
-          ...html.fragment(
-            hasWallpaperStyle &&
-              album.wallpaperStyle
-              .split('\n')
-              .map(line => `    ${line}`)),
+          ...(hasWallpaperStyle
+            ? album.wallpaperStyle
+                .split('\n')
+                .map(line => `    ${line}`)
+            : []),
           `}`,
         ]
       : []);
@@ -346,9 +368,11 @@ export function getAlbumStylesheet(album, {to}) {
 
 // Divided track lists
 
-export function generateTrackListDividedByGroups(tracks, {
-  getTrackItem,
+function unbound_generateTrackListDividedByGroups(tracks, {
+  html,
   language,
+
+  getTrackItem,
   wikiData,
 }) {
   const {divideTrackListsByGroups: groups} = wikiData.wikiInfo;
@@ -405,7 +429,12 @@ export function generateTrackListDividedByGroups(tracks, {
 
 // Fancy lookin' links
 
-export function fancifyURL(url, {language, album = false} = {}) {
+function unbound_fancifyURL(url, {
+  html,
+  language,
+
+  album = false,
+} = {}) {
   let local = Symbol();
   let domain;
   try {
@@ -415,6 +444,7 @@ export function fancifyURL(url, {language, album = false} = {}) {
     // be absolute relative to the domain name in order to work.)
     domain = local;
   }
+
   return html.tag('a',
     {
       href: url,
@@ -455,8 +485,13 @@ export function fancifyURL(url, {language, album = false} = {}) {
     : domain);
 }
 
-export function fancifyFlashURL(url, flash, {language}) {
-  const link = fancifyURL(url, {language});
+function unbound_fancifyFlashURL(url, flash, {
+  html,
+  language,
+
+  fancifyURL,
+}) {
+  const link = fancifyURL(url);
   return html.tag('span',
     {class: 'nowrap'},
     url.includes('homestuck.com')
@@ -473,7 +508,11 @@ export function fancifyFlashURL(url, flash, {language}) {
     : link);
 }
 
-export function iconifyURL(url, {language, to}) {
+function unbound_iconifyURL(url, {
+  html,
+  language,
+  to,
+}) {
   const domain = new URL(url).hostname;
   const [id, msg] = (
     domain.includes('bandcamp.com')
@@ -511,10 +550,13 @@ export function iconifyURL(url, {language, to}) {
 
 // Grids
 
-export function getGridHTML({
+function unbound_getGridHTML({
   img,
+  html,
   language,
 
+  getRevealStringFromTags,
+
   entries,
   srcFn,
   linkFn,
@@ -527,25 +569,25 @@ export function getGridHTML({
     .map(({large, item}, i) =>
       linkFn(item, {
         class: ['grid-item', 'box', large && 'large-grid-item'],
-        text: fixWS`
-                ${img({
-                  src: srcFn(item),
-                  alt: altFn(item),
-                  thumb: 'small',
-                  lazy: typeof lazy === 'number' ? i >= lazy : lazy,
-                  square: true,
-                  reveal: getRevealStringFromTags(item.artTags, {language}),
-                  noSrcText: noSrcTextFn(item),
-                })}
-                <span>${item.name}</span>
-                ${detailsFn && `<span>${detailsFn(item)}</span>`}
-            `,
-      })
-    )
+        text: html.fragment([
+          img({
+            src: srcFn(item),
+            alt: altFn(item),
+            thumb: 'small',
+            lazy: typeof lazy === 'number' ? i >= lazy : lazy,
+            square: true,
+            reveal: getRevealStringFromTags(item.artTags, {language}),
+            noSrcText: noSrcTextFn(item),
+          }),
+          html.tag('span', item.name),
+          detailsFn &&
+            html.tag('span', detailsFn(item)),
+        ]),
+      }))
     .join('\n');
 }
 
-export function getAlbumGridHTML({
+function unbound_getAlbumGridHTML({
   getAlbumCover,
   getGridHTML,
   link,
@@ -571,7 +613,13 @@ export function getAlbumGridHTML({
   });
 }
 
-export function getFlashGridHTML({getFlashCover, getGridHTML, link, ...props}) {
+function unbound_getFlashGridHTML({
+  link,
+
+  getFlashCover,
+  getGridHTML,
+  ...props
+}) {
   return getGridHTML({
     srcFn: getFlashCover,
     linkFn: link.flash,
@@ -581,11 +629,13 @@ export function getFlashGridHTML({getFlashCover, getGridHTML, link, ...props}) {
 
 // Nav-bar links
 
-export function generateInfoGalleryLinks(
-  currentThing,
-  isGallery,
-  {link, language, linkKeyGallery, linkKeyInfo}
-) {
+function unbound_generateInfoGalleryLinks(currentThing, isGallery, {
+  link,
+  language,
+
+  linkKeyGallery,
+  linkKeyInfo,
+}) {
   return [
     link[linkKeyInfo](currentThing, {
       class: isGallery ? '' : 'current',
@@ -606,12 +656,13 @@ export function generateInfoGalleryLinks(
 // By default, generated links include ID attributes which enable client-side
 // keyboard shortcuts. Provide isMain: false to disable this (if the generated
 // links aren't the for the page's primary navigation).
-export function generateNavigationLinks(current, {
+function unbound_generateNavigationLinks(current, {
+  language,
+  link,
+
   additionalLinks = [],
   data,
   isMain = true,
-  language,
-  link,
   linkKey = 'anything',
 }) {
   let previousLink, nextLink;
@@ -659,10 +710,15 @@ export function generateNavigationLinks(current, {
 
 // Footer stuff
 
-export function getFooterLocalizationLinks(
-  pathname,
-  {defaultLanguage, languages, paths, language, to}
-) {
+function unbound_getFooterLocalizationLinks(pathname, {
+  html,
+  language,
+  to,
+  paths,
+
+  defaultLanguage,
+  languages,
+}) {
   const {toPath} = paths;
   const keySuffix = toPath[0].replace(/^localized\./, '.');
   const toArgs = toPath.slice(1);
@@ -697,3 +753,37 @@ export function getFooterLocalizationLinks(
     language.$('misc.uiLanguage', {languages: links.join('\n')})
   );
 }
+
+// Exports
+
+export {
+  unbound_generateAdditionalFilesList as generateAdditionalFilesList,
+  unbound_generateAdditionalFilesShortcut as generateAdditionalFilesShortcut,
+
+  unbound_getArtistString as getArtistString,
+
+  unbound_generateChronologyLinks as generateChronologyLinks,
+
+  unbound_getRevealStringFromWarnings as getRevealStringFromWarnings,
+  unbound_getRevealStringFromTags as getRevealStringFromTags,
+
+  unbound_generateCoverLink as generateCoverLink,
+
+  unbound_getThemeString as getThemeString,
+  unbound_getAlbumStylesheet as getAlbumStylesheet,
+
+  unbound_generateTrackListDividedByGroups as generateTrackListDividedByGroups,
+
+  unbound_fancifyURL as fancifyURL,
+  unbound_fancifyFlashURL as fancifyFlashURL,
+  unbound_iconifyURL as iconifyURL,
+
+  unbound_getGridHTML as getGridHTML,
+  unbound_getAlbumGridHTML as getAlbumGridHTML,
+  unbound_getFlashGridHTML as getFlashGridHTML,
+
+  unbound_generateInfoGalleryLinks as generateInfoGalleryLinks,
+  unbound_generateNavigationLinks as generateNavigationLinks,
+
+  unbound_getFooterLocalizationLinks as getFooterLocalizationLinks,
+}
\ No newline at end of file
diff --git a/src/page/album.js b/src/page/album.js
index 1cceead9..a92d9a06 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -219,9 +219,7 @@ export function write(album, {wikiData}) {
               },
               [
                 hasAdditionalFiles &&
-                  generateAdditionalFilesShortcut(album.additionalFiles, {
-                    language,
-                  }),
+                  generateAdditionalFilesShortcut(album.additionalFiles),
 
                 hasCommentaryEntries &&
                   language.$('releaseInfo.viewCommentary', {
diff --git a/src/page/flash.js b/src/page/flash.js
index c123c1be..6def3050 100644
--- a/src/page/flash.js
+++ b/src/page/flash.js
@@ -72,13 +72,10 @@ export function write(flash, {wikiData}) {
                 html.tag('li',
                   language.$('trackList.item.withArtists', {
                     track: link.track(track),
-                    by: `<span class="by">${
+                    by: html.tag('span', {class: 'by'},
                       language.$('trackList.item.withArtists.by', {
-                        artists: getArtistString(
-                          track.artistContribs
-                        ),
-                      })
-                    }</span>`,
+                        artists: getArtistString(track.artistContribs),
+                      })),
                   })))),
           ] : [],
 
diff --git a/src/upd8.js b/src/upd8.js
index 86b2f526..6cccabfa 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -976,9 +976,10 @@ writePage.html = (
 
         getFooterLocalizationLinks(paths.pathname, {
           defaultLanguage,
+          html,
+          language,
           languages,
           paths,
-          language,
           to,
         }),
       ]);
@@ -1150,53 +1151,41 @@ writePage.html = (
     footerHTML,
   ].filter(Boolean).join('\n');
 
-  const infoCardHTML = fixWS`
-        <div id="info-card-container">
-            <div class="info-card-decor">
-                <div class="info-card">
-                    <div class="info-card-art-container no-reveal">
-                        ${img({
-                          class: 'info-card-art',
-                          src: '',
-                          link: true,
-                          square: true,
-                        })}
-                    </div>
-                    <div class="info-card-art-container reveal">
-                        ${img({
-                          class: 'info-card-art',
-                          src: '',
-                          link: true,
-                          square: true,
-                          reveal: getRevealStringFromWarnings(
-                            '<span class="info-card-art-warnings"></span>',
-                            {language}
-                          ),
-                        })}
-                    </div>
-                    <h1 class="info-card-name"><a></a></h1>
-                    <p class="info-card-album">${language.$(
-                      'releaseInfo.from',
-                      {
-                        album: '<a></a>',
-                      }
-                    )}</p>
-                    <p class="info-card-artists">${language.$(
-                      'releaseInfo.by',
-                      {
-                        artists: '<span></span>',
-                      }
-                    )}</p>
-                    <p class="info-card-cover-artists">${language.$(
-                      'releaseInfo.coverArtBy',
-                      {
-                        artists: '<span></span>',
-                      }
-                    )}</p>
-                </div>
-            </div>
-        </div>
-    `;
+  const infoCardHTML = html.tag('div', {id: 'info-card-container'},
+    html.tag('div', {id: 'info-card-decor'},
+      html.tag('div', {id: 'info-card'}, [
+        html.tag('div', {class: ['info-card-art-container', 'no-reveal']},
+          img({
+            class: 'info-card-art',
+            src: '',
+            link: true,
+            square: true,
+          })),
+        html.tag('div', {class: ['info-card-art-container', 'reveal']},
+          img({
+            class: 'info-card-art',
+            src: '',
+            link: true,
+            square: true,
+            reveal: getRevealStringFromWarnings(
+              html.tag('span', {class: 'info-card-art-warnings'}),
+              {html, language}),
+          })),
+        html.tag('h1', {class: 'info-card-name'},
+          html.tag('a')),
+        html.tag('p', {class: 'info-card-album'},
+          language.$('releaseInfo.from', {
+            album: html.tag('a'),
+          })),
+        html.tag('p', {class: 'info-card-artists'},
+          language.$('releaseInfo.by', {
+            artists: html.tag('span'),
+          })),
+        html.tag('p', {class: 'info-card-cover-artists'},
+          language.$('releaseInfo.coverArtBy', {
+            artists: html.tag('span'),
+          })),
+      ])));
 
   const socialEmbedHTML = [
     socialEmbed.title &&
@@ -2367,27 +2356,45 @@ async function main() {
             });
 
             bound.iconifyURL = bindOpts(iconifyURL, {
+              html,
               language,
               to,
             });
 
             bound.fancifyURL = bindOpts(fancifyURL, {
+              html,
               language,
             });
 
             bound.fancifyFlashURL = bindOpts(fancifyFlashURL, {
               [bindOpts.bindIndex]: 2,
+              html,
+              language,
+
+              fancifyURL: bound.fancifyURL,
+            });
+
+            bound.getRevealStringFromWarnings = bindOpts(getRevealStringFromWarnings, {
+              html,
               language,
             });
 
+            bound.getRevealStringFromTags = bindOpts(getRevealStringFromTags, {
+              language,
+
+              getRevealStringFromWarnings: bound.getRevealStringFromWarnings,
+            });
+
             bound.getLinkThemeString = getLinkThemeString;
 
             bound.getThemeString = getThemeString;
 
             bound.getArtistString = bindOpts(getArtistString, {
-              iconifyURL: bound.iconifyURL,
+              html,
               link: bound.link,
               language,
+
+              iconifyURL: bound.iconifyURL,
             });
 
             bound.getAlbumCover = bindOpts(getAlbumCover, {
@@ -2406,93 +2413,80 @@ async function main() {
               to,
             });
 
-            bound.generateAdditionalFilesShortcut = bindOpts(
-              generateAdditionalFilesShortcut,
-              {
-                language,
-              }
-            );
+            bound.generateAdditionalFilesShortcut = bindOpts(generateAdditionalFilesShortcut, {
+              html,
+              language,
+            });
 
-            bound.generateAdditionalFilesList = bindOpts(
-              generateAdditionalFilesList,
-              {
-                language,
-              }
-            );
+            bound.generateAdditionalFilesList = bindOpts(generateAdditionalFilesList, {
+              html,
+              language,
+            });
 
-            bound.generateNavigationLinks = bindOpts(
-              generateNavigationLinks,
-              {
-                link: bound.link,
-                language,
-              }
-            );
+            bound.generateNavigationLinks = bindOpts(generateNavigationLinks, {
+              link: bound.link,
+              language,
+            });
 
             bound.generateChronologyLinks = bindOpts(generateChronologyLinks, {
-              generateNavigationLinks: bound.generateNavigationLinks,
-              link: bound.link,
+              html,
               language,
+              link: bound.link,
               wikiData,
+
+              generateNavigationLinks: bound.generateNavigationLinks,
             });
 
             bound.generateCoverLink = bindOpts(generateCoverLink, {
               [bindOpts.bindIndex]: 0,
+              html,
               img,
               link: bound.link,
               language,
               to,
               wikiData,
+
+              getRevealStringFromTags: bound.getRevealStringFromTags,
             });
 
-            bound.generateInfoGalleryLinks = bindOpts(
-              generateInfoGalleryLinks,
-              {
-                [bindOpts.bindIndex]: 2,
-                link: bound.link,
-                language,
-              }
-            );
+            bound.generateInfoGalleryLinks = bindOpts(generateInfoGalleryLinks, {
+              [bindOpts.bindIndex]: 2,
+              link: bound.link,
+              language,
+            });
 
-            bound.generateTrackListDividedByGroups = bindOpts(
-              generateTrackListDividedByGroups,
-              {
-                language,
-                wikiData,
-              }
-            );
+            bound.generateTrackListDividedByGroups = bindOpts(generateTrackListDividedByGroups, {
+              html,
+              language,
+              wikiData,
+            });
 
             bound.getGridHTML = bindOpts(getGridHTML, {
               [bindOpts.bindIndex]: 0,
               img,
+              html,
               language,
+
+              getRevealStringFromTags: bound.getRevealStringFromTags,
             });
 
             bound.getAlbumGridHTML = bindOpts(getAlbumGridHTML, {
               [bindOpts.bindIndex]: 0,
-              getAlbumCover: bound.getAlbumCover,
-              getGridHTML: bound.getGridHTML,
               link: bound.link,
               language,
+
+              getAlbumCover: bound.getAlbumCover,
+              getGridHTML: bound.getGridHTML,
             });
 
             bound.getFlashGridHTML = bindOpts(getFlashGridHTML, {
               [bindOpts.bindIndex]: 0,
-              getFlashCover: bound.getFlashCover,
-              getGridHTML: bound.getGridHTML,
               link: bound.link,
-            });
 
-            bound.getRevealStringFromTags = bindOpts(getRevealStringFromTags, {
-              language,
+              getFlashCover: bound.getFlashCover,
+              getGridHTML: bound.getGridHTML,
             });
 
-            bound.getRevealStringFromWarnings = bindOpts(
-              getRevealStringFromWarnings,
-              {
-                language,
-              }
-            );
-
             bound.getAlbumStylesheet = bindOpts(getAlbumStylesheet, {
               to,
             });