« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
-rw-r--r--src/content/dependencies/transformContent.js12
-rw-r--r--src/static/site6.css6
-rw-r--r--tap-snapshots/test/snapshot/transformContent.js.test.cjs6
3 files changed, 15 insertions, 9 deletions
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index ff893896..ddf82391 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -385,7 +385,7 @@ export default {
               type: 'image',
               inline: false,
               data:
-                html.tag('div', {class: 'content-image'},
+                html.tag('div', {class: 'content-image-container'},
                   image.slots({
                     src,
 
@@ -394,10 +394,12 @@ export default {
                     height: height ?? null,
                     thumb: slots.thumb,
 
-                    attributes:
-                      (pixelate
-                        ? {class: 'pixelate'}
-                        : null),
+                    attributes: [
+                      {class: 'content-image'},
+
+                      pixelate &&
+                        {class: 'pixelate'},
+                    ],
                   })),
             };
           }
diff --git a/src/static/site6.css b/src/static/site6.css
index 2058e984..cd00a721 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -739,11 +739,15 @@ ul.image-details li {
   display: none;
 }
 
-.content-image {
+.content-image-container {
   margin-top: 1em;
   margin-bottom: 1em;
 }
 
+.content-image {
+  display: inline-block !important;
+}
+
 .image-link {
   display: block;
   overflow: hidden;
diff --git a/tap-snapshots/test/snapshot/transformContent.js.test.cjs b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
index dd4b8759..8dfa7b0f 100644
--- a/tap-snapshots/test/snapshot/transformContent.js.test.cjs
+++ b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
@@ -92,16 +92,16 @@ How it goes</p>
 `
 
 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>
+<div class="content-image-container">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large', attributes: [ { class: 'content-image' }, undefined ] }]</div>
 `
 
 exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #2 1`] = `
 <p>Rad.</p>
-<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
+<div class="content-image-container">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large', attributes: [ { class: 'content-image' }, undefined ] }]</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>
+<div class="content-image-container">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large', attributes: [ { class: 'content-image' }, undefined ] }]</div>
 <p>Baller.</p>
 `