npm - @ecency/render-helper - Versions diffs - 2.4.29 → 2.4.31 - Mend

@ecency/render-helper 2.4.29 → 2.4.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/browser/index.d.ts CHANGED Viewed

@@ -54,6 +54,11 @@ declare function setProxyBase(p: string): void;
  * @param _format - @deprecated Ignored. Always uses 'match' — format is handled server-side via Accept header.
  */
 declare function proxifyImageSrc(url?: string, width?: number, height?: number, _format?: string): string;
+/**
+ * Builds a srcset string with multiple width variants for responsive images.
+ * Uses the image proxy's width parameter to serve appropriately sized images.
+ */
+declare function buildSrcSet(url?: string): string;
 declare function setCacheSize(size: number): void;
@@ -71,4 +76,4 @@ declare function isValidPermlink(permlink: string): boolean;
  */
 declare function simpleMarkdownToHTML(input: string): string;
-export { type Entry, type RenderOptions, SECTION_LIST, type SeoContext, catchPostImage, isValidPermlink, getPostBodySummary as postBodySummary, proxifyImageSrc, markdown2Html as renderPostBody, setCacheSize, setProxyBase, simpleMarkdownToHTML };
+export { type Entry, type RenderOptions, SECTION_LIST, type SeoContext, buildSrcSet, catchPostImage, isValidPermlink, getPostBodySummary as postBodySummary, proxifyImageSrc, markdown2Html as renderPostBody, setCacheSize, setProxyBase, simpleMarkdownToHTML };

package/dist/browser/index.js CHANGED Viewed

@@ -123,6 +123,8 @@ var ALLOWED_ATTRIBUTES = {
   ],
   "img": [
     "src",
+    "srcset",
+    "sizes",
     "alt",
     "class",
     "loading",
@@ -199,8 +201,11 @@ function createDoc(html) {
     return null;
   }
   const cleanedHtml = removeDuplicateAttributes(html);
-  const doc = DOMParser.parseFromString(`<body>${cleanedHtml}</body>`, "text/html");
-  return doc;
+  try {
+    return DOMParser.parseFromString(`<body>${cleanedHtml}</body>`, "text/html");
+  } catch {
+    return null;
+  }
 }
 function makeEntryCacheKey(entry) {
   return `${entry.author}-${entry.permlink}-${entry.last_update}-${entry.updated}`;
@@ -275,6 +280,10 @@ function sanitizeHtml(html) {
       const decodedLower = decoded.toLowerCase();
       if (name.startsWith("on")) return "";
       if (tag === "img" && name === "src" && (!/^https?:\/\//.test(decodedLower) || decodedLower.startsWith("javascript:"))) return "";
+      if (tag === "img" && name === "srcset") {
+        const candidates = decoded.split(",").map((c) => c.trim().split(/\s+/)[0]);
+        if (candidates.some((url) => !/^https?:\/\//.test(url))) return "";
+      }
       if (tag === "video" && ["src", "poster"].includes(name) && (!/^https?:\/\//.test(decodedLower) || decodedLower.startsWith("javascript:"))) return "";
       if (tag === "img" && ["dynsrc", "lowsrc"].includes(name)) return "";
       if (tag === "span" && name === "class" && decoded.toLowerCase().trim() === "wr") return "";
@@ -289,6 +298,9 @@ var proxyBase = "https://images.ecency.com";
 function setProxyBase(p2) {
   proxyBase = p2;
 }
+function getProxyBase() {
+  return proxyBase;
+}
 function extractPHash(url) {
   if (url.startsWith(`${proxyBase}/p/`)) {
     const [hash] = url.split("/p/")[1].split("?");
@@ -336,8 +348,24 @@ function proxifyImageSrc(url, width = 0, height = 0, _format = "match") {
   const b58url = multihash.toB58String(Buffer.from(realUrl.toString()));
   return `${proxyBase}/p/${b58url}?${qs}`;
 }
+var SRCSET_WIDTHS = [320, 600, 800, 1024, 1280];
+function buildSrcSet(url) {
+  if (!url || typeof url !== "string") return "";
+  const escapedBase = proxyBase.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const proxyPattern = new RegExp(`^${escapedBase}/p/([^?]+)`);
+  const match = url.match(proxyPattern);
+  if (match) {
+    const phash = extractPHash(url) || match[1];
+    return SRCSET_WIDTHS.map((w) => `${proxyBase}/p/${phash}?format=match&mode=fit&width=${w} ${w}w`).join(", ");
+  }
+  return SRCSET_WIDTHS.map((w) => {
+    const proxied = proxifyImageSrc(url, w);
+    return proxied ? `${proxied} ${w}w` : "";
+  }).filter(Boolean).join(", ");
+}
 // src/methods/img.method.ts
+var IMAGE_SIZES = "(max-width: 768px) 100vw, 700px";
 function img(el, state) {
   const src = el.getAttribute("src") || "";
   const decodedSrc = decodeURIComponent(
@@ -347,11 +375,15 @@ function img(el, state) {
   const isInvalid = !src || decodedSrc.startsWith("javascript") || decodedSrc.startsWith("vbscript") || decodedSrc === "x";
   if (isInvalid) {
     el.removeAttribute("src");
+    el.removeAttribute("srcset");
+    el.removeAttribute("sizes");
     return;
   }
   const isRelative = !/^https?:\/\//i.test(decodedSrc) && !decodedSrc.startsWith("/");
   if (isRelative) {
     el.removeAttribute("src");
+    el.removeAttribute("srcset");
+    el.removeAttribute("sizes");
     return;
   }
   el.setAttribute("itemprop", "image");
@@ -366,22 +398,41 @@ function img(el, state) {
   }
   const cls = el.getAttribute("class") || "";
   const shouldReplace = !cls.includes("no-replace");
-  const hasAlreadyProxied = src.startsWith("https://images.ecency.com/p/") || src.startsWith("https://images.ecency.com/u/") || /^https:\/\/images\.ecency\.com\/\d+x\d+\//.test(src);
+  const base = getProxyBase().replace(/\/+$/, "");
+  const hasAlreadyProxied = src.startsWith(`${base}/p/`) || src.startsWith(`${base}/u/`) || new RegExp(`^${base.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/\\d+x\\d+/`).test(src);
   if (shouldReplace && !hasAlreadyProxied) {
     const proxified = proxifyImageSrc(decodedSrc);
     if (proxified) {
       el.setAttribute("src", proxified);
+      const srcset = buildSrcSet(decodedSrc);
+      if (srcset) {
+        el.setAttribute("srcset", srcset);
+        el.setAttribute("sizes", IMAGE_SIZES);
+      }
+    }
+  } else if (shouldReplace && hasAlreadyProxied) {
+    if (src.startsWith(`${base}/p/`)) {
+      const srcset = buildSrcSet(src);
+      if (srcset) {
+        el.setAttribute("srcset", srcset);
+        el.setAttribute("sizes", IMAGE_SIZES);
+      }
     }
   }
 }
 function createImageHTML(src, isLCP) {
   const proxified = proxifyImageSrc(src);
   if (!proxified) return "";
+  const base = getProxyBase().replace(/\/+$/, "");
+  const isAlreadyProxied = src.startsWith(`${base}/u/`) || new RegExp(`^${base.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/\\d+x\\d+/`).test(src);
+  const srcset = isAlreadyProxied ? "" : buildSrcSet(src);
   const loading = isLCP ? "eager" : "lazy";
   const fetch = isLCP ? 'fetchpriority="high"' : 'decoding="async"';
+  const srcsetAttr = srcset ? `srcset="${srcset}" sizes="${IMAGE_SIZES}"` : "";
   return `<img
     class="markdown-img-link"
     src="${proxified}"
+    ${srcsetAttr}
     loading="${loading}"
     ${fetch}
     itemprop="image"
@@ -1774,6 +1825,6 @@ function getPostBodySummary(obj, length, platform) {
   return res;
 }
-export { SECTION_LIST, catchPostImage, isValidPermlink, getPostBodySummary as postBodySummary, proxifyImageSrc, markdown2Html as renderPostBody, setCacheSize, setProxyBase, simpleMarkdownToHTML };
+export { SECTION_LIST, buildSrcSet, catchPostImage, isValidPermlink, getPostBodySummary as postBodySummary, proxifyImageSrc, markdown2Html as renderPostBody, setCacheSize, setProxyBase, simpleMarkdownToHTML };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map