From fefd47f7039849220dd46c990af3677d8d1535eb Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Fri, 12 Dec 2025 18:00:51 +0000
Subject: [PATCH] feat: add external attribute support to image-preview for
 direct URL rendering

Introduce an 'external' attribute on the image-preview component to bypass the devrant image URL builder when the source is an external link. Update the component's observed attributes, rendering logic, and lightbox initialization to conditionally use the raw src URL. Modify rant-content to detect external images via the presence of links and pass the external flag accordingly.
---
 js/components/image-preview.js | 10 ++++++----
 js/components/rant-content.js  |  3 ++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/components/image-preview.js b/js/components/image-preview.js
index 10b1934..a830fe2 100644
--- a/js/components/image-preview.js
+++ b/js/components/image-preview.js
@@ -10,7 +10,7 @@ import { buildDevrantImageUrl, isGifUrl } from '../utils/url.js';
 
 class ImagePreview extends BaseComponent {
     static get observedAttributes() {
-        return ['src', 'width', 'height', 'alt'];
+        return ['src', 'width', 'height', 'alt', 'external'];
     }
 
     init() {
@@ -23,14 +23,15 @@ class ImagePreview extends BaseComponent {
         const width = this.getAttr('width');
         const height = this.getAttr('height');
         const alt = this.getAttr('alt') || 'Image';
+        const external = this.hasAttribute('external');
 
         if (!src) {
             this.setHtml('');
             return;
         }
 
-        const imageUrl = buildDevrantImageUrl(src);
-        const isGif = isGifUrl(imageUrl);
+        const imageUrl = external ? src : buildDevrantImageUrl(src);
+        const isGif = isGifUrl(src);
         const aspectRatio = width && height ? width / height : null;
 
         this.addClass('image-preview');
@@ -71,7 +72,8 @@ class ImagePreview extends BaseComponent {
         const src = this.getAttr('src');
         if (!src) return;
 
-        const imageUrl = buildDevrantImageUrl(src);
+        const external = this.hasAttribute('external');
+        const imageUrl = external ? src : buildDevrantImageUrl(src);
 
         const lightbox = document.createElement('image-lightbox');
         lightbox.setAttribute('src', imageUrl);
diff --git a/js/components/rant-content.js b/js/components/rant-content.js
index 6b933e8..d563aea 100644
--- a/js/components/rant-content.js
+++ b/js/components/rant-content.js
@@ -53,11 +53,12 @@ class RantContent extends BaseComponent {
         let html = `<div class="content-text">${renderedText}</div>`;
 
         if (images.length > 0) {
+            const isExternal = links && links.length > 0;
             html += `
                 <div class="content-images">
                     ${images.map(url => {
                         const safeUrl = sanitizeUrl(url);
-                        return safeUrl ? `<image-preview src="${safeUrl}"></image-preview>` : '';
+                        return safeUrl ? `<image-preview src="${safeUrl}"${isExternal ? ' external' : ''}></image-preview>` : '';
                     }).join('')}
                 </div>
             `;