From 7c36db6ead2f6e552d79ed200c067279402259b9 Mon Sep 17 00:00:00 2001
From: Andrey Helldar <helldar@dragon-code.pro>
Date: Thu, 15 Jan 2026 18:34:37 +0300
Subject: [PATCH] Refactor image URL construction logic to encode title and
 description placeholders

---
 src/utils/image.ts                            | 11 +--
 tests/unit/__snapshots__/preview.test.ts.snap | 68 +++++++++----------
 2 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/utils/image.ts b/src/utils/image.ts
index 987ea03..e1465f1 100644
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -75,16 +75,19 @@ const render = (
     parameters.packageManager = packageManager(config);
     parameters.packageName = packageName(config.package);
 
-    parameters.title = config.data?.title || "";
-    parameters.description = config.data?.description || "";
-
     parameters.images = detectIcon(config.image, packageData);
 
+    url = url
+        .replace("{title}", encodeUri(config.data?.title || ""))
+        .replace("{description}", encodeUri(config.data?.description || ""));
+
     for (const [key, value] of Object.entries(parameters)) {
         url = url.replace(`{${key}}`, encodeUri(value));
     }
 
-    return `${url}?${(new URLSearchParams(parameters)).toString()}`;
+    const query: string = new URLSearchParams(parameters).toString();
+
+    return `${url}?${query}`;
 };
 
 export const getImages = (config: Config, packageData: LockFile): string => {
diff --git a/tests/unit/__snapshots__/preview.test.ts.snap b/tests/unit/__snapshots__/preview.test.ts.snap
index fb69bd6..3152e0a 100644
--- a/tests/unit/__snapshots__/preview.test.ts.snap
+++ b/tests/unit/__snapshots__/preview.test.ts.snap
@@ -4,8 +4,8 @@ exports[`custom config 1`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=composer+require+--dev&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=composer+require+--dev&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=composer+require+--dev&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=composer+require+--dev&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -16,8 +16,8 @@ exports[`custom config 2`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=composer+global+require+--dev&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=composer+global+require+--dev&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=composer+global+require+--dev&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=composer+global+require+--dev&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -28,8 +28,8 @@ exports[`custom config 3`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install+-D&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install+-D&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -40,8 +40,8 @@ exports[`custom config 4`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install+-g+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install+-g+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install+-g+-D&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install+-g+-D&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -52,8 +52,8 @@ exports[`custom config 5`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=yarn+add+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=yarn+add+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=yarn+add+-D&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=yarn+add+-D&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -64,8 +64,8 @@ exports[`custom config 6`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=yarn+global+add+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=yarn+global+add+-D&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=yarn+global+add+-D&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=yarn+global+add+-D&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -76,8 +76,8 @@ exports[`custom config 7`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=foo&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=foo&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=foo&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=foo&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -88,8 +88,8 @@ exports[`custom config 8`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=foo&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=foo&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=foo&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=foo&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -100,8 +100,8 @@ exports[`default config 1`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 "
@@ -111,8 +111,8 @@ exports[`default config 2`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 Something
@@ -123,8 +123,8 @@ exports[`default config 3`] = `
 "# Preview Updater
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage
@@ -137,8 +137,8 @@ exports[`default config 4`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage
@@ -151,8 +151,8 @@ exports[`default config 5`] = `
 "# Preview Updater
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage
@@ -165,8 +165,8 @@ exports[`default config 6`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage
@@ -179,8 +179,8 @@ exports[`default config 7`] = `
 "# Some Title
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage
@@ -193,8 +193,8 @@ exports[`default config 8`] = `
 "# Preview Updater
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage
@@ -207,8 +207,8 @@ exports[`default config 9`] = `
 "# Preview Updater
 
 <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code">
-    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&title=Some+title&description=Some+description&images=code" alt="Some title">
+    <source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=dark&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code">
+    <img src="https://banners.beyondco.de/Some%20title.png?pattern=topography&style=style_2&fontSize=100px&md=1&showWatermark=1&theme=light&packageManager=npm+install&packageName=foo%2Fbar-baz&images=code" alt="Some title">
 </picture>
 
 ## Usage