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