From d48874a4be60d7455dd6321742102c9cfb77a9f1 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Wed, 6 Dec 2023 12:36:30 -0400
Subject: content: transformContent: new image attributes inline, pixelate

---
 src/content/dependencies/transformContent.js | 10 +++++++---
 src/static/site6.css                         |  4 ++++
 src/util/replacer.js                         |  6 ++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

(limited to 'src')

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);
 
-- 
cgit 1.3.0-6-gf8a5