content: various higher-level attribute processing cleanup

4 files changed, 112 insertions, 112 deletions

diff --git a/src/content/dependencies/generateAlbumTrackListItem.js b/src/content/dependencies/generateAlbumTrackListItem.js
index 4cfa5cb0..a66414db 100644
--- a/src/content/dependencies/generateAlbumTrackListItem.js
+++ b/src/content/dependencies/generateAlbumTrackListItem.js
@@ -44,11 +44,10 @@ export default {
   },
 
   generate(data, relations, {getColors, html, language}) {
-    let style;
-
+    let colorStyle;
     if (data.color) {
       const {primary} = getColors(data.color);
-      style = `--primary-color: ${primary}`;
+      colorStyle = {style: `--primary-color: ${primary}`};
     }
 
     const parts = ['trackList.item.withDuration'];
@@ -70,7 +69,8 @@ export default {
           }));
     }
 
-    return html.tag('li', {style},
+    return html.tag('li',
+      colorStyle,
       language.formatString(...parts, options));
   },
 };
diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js
index 816cc98a..1c7ef1f1 100644
--- a/src/content/dependencies/generateContentHeading.js
+++ b/src/content/dependencies/generateContentHeading.js
@@ -18,9 +18,11 @@ export default {
 
   generate: (relations, slots, {html}) =>
     html.tag(slots.tag, {class: 'content-heading'},
-      {id: slots.id},
       {tabindex: '0'},
 
+      slots.id &&
+        {id: slots.id},
+
       slots.color &&
         relations.colorStyle.slot('color', slots.color),
 
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 9fa2ba1c..a271ceec 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -121,21 +121,51 @@ export default {
       !isMissingImageFile &&
       !empty(data.contentWarnings);
 
-    const colorStyle =
-      slots.color &&
-        relations.colorStyle
-          .slot('color', slots.color);
-
     const willSquare = slots.square;
 
-    const idOnImg = willLink ? null : slots.id;
-    const idOnLink = willLink ? slots.id : null;
+    const imgAttributes = html.attributes([
+      slots.alt && {alt: slots.alt},
+      slots.width && {width: slots.width},
+      slots.height && {height: slots.height},
+
+      customLink &&
+        {'data-no-image-preview': true},
+    ]);
+
+    const linkAttributes = html.attributes([
+      (customLink
+        ? {href: slots.link}
+        : {href: originalSrc}),
+    ]);
+
+    const containerAttributes = html.attributes();
+
+    if (slots.id) {
+      if (willLink) {
+        linkAttributes.set('id', slots.id);
+      } else {
+        imgAttributes.set('id', slots.id);
+      }
+    }
+
+    if (slots.class) {
+      if (willLink) {
+        linkAttributes.set('class', slots.class);
+      } else {
+        imgAttributes.set('class', slots.class);
+      }
+    }
 
-    const classOnImg = willLink ? null : slots.class;
-    const classOnLink = willLink ? slots.class : null;
+    if (slots.color) {
+      const colorStyle =
+        relations.colorStyle.slot('color', slots.color);
 
-    const styleOnContainer = willLink ? null : colorStyle;
-    const styleOnLink = willLink ? colorStyle : null;
+      if (willLink) {
+        linkAttributes.add(colorStyle);
+      } else {
+        containerAttributes.add(colorStyle);
+      }
+    }
 
     if (!originalSrc || isMissingImageFile) {
       return prepare(
@@ -171,84 +201,72 @@ export default {
       logWarn`No thumbnail info cached: ${mediaSrc} - displaying original image here (instead of ${slots.thumb})`;
     }
 
-    // Important to note that these might not be set at all, even if
-    // slots.thumb was provided.
-    let thumbSrc = null;
-    let availableThumbs = null;
-    let originalLength = null;
+    let displaySrc = originalSrc;
 
+    // If thumbnails are available *and* being used, calculate thumbSrc,
+    // and provide some attributes relevant to the large image overlay.
     if (hasThumbnails && slots.thumb) {
-      // Note: This provides mediaSrc to getThumbnailEqualOrSmaller, since
-      // it's the identifier which thumbnail utilities use to query from the
-      // thumbnail cache. But we use the result to operate on originalSrc,
-      // which is the HTML output-appropriate path including `../../` or
-      // another alternate base path.
-      const selectedSize = getThumbnailEqualOrSmaller(slots.thumb, mediaSrc);
-      thumbSrc = to('thumb.path', mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`));
+      const selectedSize =
+        getThumbnailEqualOrSmaller(slots.thumb, mediaSrc);
+
+      const mediaSrcJpeg =
+        mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`);
+
+      displaySrc =
+        to('thumb.path', mediaSrcJpeg);
 
       const dimensions = getDimensionsOfImagePath(mediaSrc);
-      availableThumbs = getThumbnailsAvailableForDimensions(dimensions);
+      const availableThumbs = getThumbnailsAvailableForDimensions(dimensions);
 
       const [width, height] = dimensions;
-      originalLength = Math.max(width, height)
-    }
+      const originalLength = Math.max(width, height)
 
-    let fileSize = null;
-    if (willLink && mediaSrc) {
-      fileSize = getSizeOfImagePath(mediaSrc);
-    }
-
-    const imgAttributes = {
-      id: idOnImg,
-      class: classOnImg,
-      alt: slots.alt,
-      width: slots.width,
-      height: slots.height,
-    };
+      const fileSize =
+        (willLink && mediaSrc
+          ? getSizeOfImagePath(mediaSrc)
+          : null);
 
-    if (customLink) {
-      imgAttributes['data-no-image-preview'] = true;
-    }
+      imgAttributes.add([
+        fileSize &&
+          {'data-original-size': fileSize},
 
-    // These attributes are only relevant when a thumbnail is available *and*
-    // being used.
-    if (hasThumbnails && slots.thumb) {
-      if (fileSize) {
-        imgAttributes['data-original-size'] = fileSize;
-      }
+        originalLength &&
+          {'data-original-length': originalLength},
 
-      if (originalLength) {
-        imgAttributes['data-original-length'] = originalLength;
-      }
+        !empty(availableThumbs) &&
+          {'data-thumbs':
+              availableThumbs
+                .map(([name, size]) => `${name}:${size}`)
+                .join(' ')},
+      ]);
+    }
 
-      if (!empty(availableThumbs)) {
-        imgAttributes['data-thumbs'] =
-          availableThumbs
-            .map(([name, size]) => `${name}:${size}`)
-            .join(' ');
-      }
+    if (!displaySrc) {
+      return (
+        prepareVisible(
+          html.tag('img', imgAttributes)));
     }
 
     const nonlazyHTML =
-      originalSrc &&
-        prepareVisible(
-          html.tag('img',
-            imgAttributes,
-            {src: thumbSrc ?? originalSrc}));
+      prepareVisible(
+        html.tag('img',
+          imgAttributes,
+          {src: displaySrc}));
 
     if (slots.lazy) {
       return html.tags([
-        html.tag('noscript', nonlazyHTML),
+        html.tag('noscript',
+          nonlazyHTML),
+
         prepareHidden(
           html.tag('img', {class: 'lazy'},
             imgAttributes,
-            {'data-original': thumbSrc ?? originalSrc}),
-          true),
+            {'data-original': displaySrc})),
       ]);
+    } else {
+      return nonlazyHTML;
     }
 
-    return nonlazyHTML;
-
     function prepareVisible(content) {
       return prepare(content, false);
     }
@@ -262,7 +280,7 @@ export default {
 
       wrapped =
         html.tag('div', {class: 'image-container'},
-          styleOnContainer,
+          containerAttributes,
 
           !originalSrc &&
             {style: 'placeholder-image'},
@@ -293,17 +311,11 @@ export default {
       if (willLink) {
         wrapped =
           html.tag('a', {class: ['box', 'image-link']},
-            {id: idOnLink},
-            {class: classOnLink},
-            styleOnLink,
+            linkAttributes,
 
             hide &&
               {class: 'js-hide'},
 
-            (typeof slots.link === 'string'
-              ? {href: slots.link}
-              : {href: originalSrc}),
-
             wrapped);
       }
 
diff --git a/src/content/dependencies/linkTemplate.js b/src/content/dependencies/linkTemplate.js
index a361a4e7..f3744bdf 100644
--- a/src/content/dependencies/linkTemplate.js
+++ b/src/content/dependencies/linkTemplate.js
@@ -30,26 +30,18 @@ export default {
     language,
     to,
   }) {
-    let href;
-    let style;
-    let title;
+    const attributes = html.attributes();
 
-    if (slots.linkless) {
-      href = null;
-    } else {
-      if (slots.href) {
-        href = encodeURI(slots.href);
-      } else if (!empty(slots.path)) {
-        href = to(...slots.path);
-      } else {
-        href = '';
-      }
+    if (!slots.linkless) {
+      let href =
+        (slots.href
+          ? encodeURI(slots.href)
+       : !empty(slots.path)
+          ? to(...slots.path)
+          : '');
 
       if (appendIndexHTML) {
-        if (
-          /^(?!https?:\/\/).+\/$/.test(href) &&
-          href.endsWith('/')
-        ) {
+        if (/^(?!https?:\/\/).+\/$/.test(href) && href.endsWith('/')) {
           href += 'index.html';
         }
       }
@@ -57,23 +49,18 @@ export default {
       if (slots.hash) {
         href += (slots.hash.startsWith('#') ? '' : '#') + slots.hash;
       }
+
+      attributes.add({href});
     }
 
     if (slots.color) {
       const {primary, dim} = getColors(slots.color);
-      style = `--primary-color: ${primary}; --dim-color: ${dim}`;
-    }
-
-    if (slots.attributes?.style) {
-      if (style) {
-        style += '; ' + slots.attributes.style;
-      } else {
-        style = slots.attributes.style;
-      }
+      attributes.set('style',
+        `--primary-color: ${primary}; --dim-color: ${dim}`);
     }
 
     if (slots.tooltip) {
-      title = slots.tooltip;
+      attributes.set('title', slots.tooltip);
     }
 
     const content =
@@ -83,11 +70,10 @@ export default {
             disallowedTags: new Set(['a']),
           }));
 
-    return html.tag('a', {
-      ...slots.attributes ?? {},
-      href,
-      style,
-      title,
-    }, content);
+    return (
+      html.tag('a',
+        attributes,
+        slots.attributes,
+        content));
   },
 }