content: transformContent: new image attributes inline, pixelate

3 files changed, 17 insertions, 3 deletions

diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index 2002ebee..53341c31 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -369,14 +369,17 @@ export default {
                 ? to('media.path', node.src.slice('media/'.length))
                 : node.src);
 
-            const {link, width, height} = node;
+            const {inline, link, width, height, pixelate} = node;
 
-            if (node.inline) {
+            if (inline) {
               return {
                 type: 'image',
                 inline: true,
                 data:
-                  html.tag('img', {src, width, height}),
+                  html.tag('img', {
+                    src, width, height,
+                    class: pixelate && 'pixelate',
+                  }),
               };
             }
 
@@ -393,6 +396,7 @@ export default {
                     width: width ?? null,
                     height: height ?? null,
                     thumb: slots.thumb,
+                    class: pixelate && 'pixelate',
                   })),
             };
           }
diff --git a/src/static/site6.css b/src/static/site6.css
index d2cda06d..16455418 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1045,6 +1045,10 @@ img {
   object-fit: cover;
 }
 
+img.pixelate {
+  image-rendering: crisp-edges;
+}
+
 .reveal {
   position: relative;
   width: 100%;
diff --git a/src/util/replacer.js b/src/util/replacer.js
index 095ee060..a2df2c3f 100644
--- a/src/util/replacer.js
+++ b/src/util/replacer.js
@@ -313,6 +313,11 @@ export function postprocessImages(inputNodes) {
         }
 
         imageNode.inline = (() => {
+          // Images can force themselves to be rendered inline using a custom
+          // attribute - this style just works better for certain embeds,
+          // usually jokes or small images.
+          if (attributes.get('inline')) return true;
+
           // If we've already determined we're in the middle of a line,
           // we're inline. (Of course!)
           if (!atStartOfLine) {
@@ -344,6 +349,7 @@ export function postprocessImages(inputNodes) {
         if (attributes.get('link')) imageNode.link = attributes.get('link');
         if (attributes.get('width')) imageNode.width = parseInt(attributes.get('width'));
         if (attributes.get('height')) imageNode.height = parseInt(attributes.get('height'));
+        if (attributes.get('pixelate')) imageNode.pixelate = true;
 
         outputNodes.push(imageNode);