From 54a207d5eb80a669bf353abad177616df2ab80a2 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 15 Nov 2025 12:52:19 -0300
Subject: [PATCH 1/2] fix: download buttons for png and svg

---
 src/components/AssetDownload/index.tsx | 47 ++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/AssetDownload/index.tsx b/src/components/AssetDownload/index.tsx
index 7e110988e4d..ba9518ed5e4 100644
--- a/src/components/AssetDownload/index.tsx
+++ b/src/components/AssetDownload/index.tsx
@@ -5,13 +5,12 @@ import type { ImageProps, StaticImageData } from "next/image"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex, Stack } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import { ButtonLink } from "../ui/buttons/Button"
-import { Flex, Stack } from "../ui/flex"
-
 import { useTranslation } from "@/hooks/useTranslation"
 
 type AssetDownloadProps = {
@@ -41,6 +40,40 @@ const AssetDownload = ({
       eventName: title,
     })
   }
+
+  const handleDownload = async (url: string, fileExtension: string) => {
+    if (!url) return
+
+    matomoHandler()
+
+    try {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      const blobUrl = window.URL.createObjectURL(blob)
+      const link = document.createElement("a")
+      link.href = blobUrl
+      link.download = `${title.replace(/\s+/g, "-").toLowerCase()}.${fileExtension}`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(blobUrl)
+    } catch (error) {
+      console.error("Failed to download file:", error)
+    }
+  }
+
+  const handleSvgDownload = () => {
+    if (!svgUrl) return
+    handleDownload(svgUrl, "svg")
+  }
+
+  const handleImageDownload = () => {
+    const imgSrc = (image as StaticImageData).src
+    if (!imgSrc) return
+    const fileExt = extname(imgSrc).slice(1)
+    handleDownload(imgSrc, fileExt)
+  }
+
   const imgSrc = (image as StaticImageData).src
 
   return (
@@ -56,14 +89,14 @@ const AssetDownload = ({
         )}
       </div>
       <Flex className="mt-4 gap-5">
-        <ButtonLink href={imgSrc} onClick={matomoHandler} target="_blank">
+        <Button onClick={handleImageDownload}>
           {t("page-assets-download-download")} (
           {extname(imgSrc).slice(1).toUpperCase()})
-        </ButtonLink>
+        </Button>
         {svgUrl && (
-          <ButtonLink href={svgUrl} onClick={matomoHandler} target="_blank">
+          <Button onClick={handleSvgDownload}>
             {t("page-assets-download-download")} (SVG)
-          </ButtonLink>
+          </Button>
         )}
       </Flex>
     </Stack>

From ec6dda2a0f90135d39d1b2365be9dde4a7f022ad Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 2 Dec 2025 20:16:56 -0700
Subject: [PATCH 2/2] refactor: replace download handling with ButtonLink for
 direct file downloads

---
 src/components/AssetDownload/index.tsx | 55 +++++++-------------------
 1 file changed, 15 insertions(+), 40 deletions(-)

diff --git a/src/components/AssetDownload/index.tsx b/src/components/AssetDownload/index.tsx
index ba9518ed5e4..f78ce0bb05d 100644
--- a/src/components/AssetDownload/index.tsx
+++ b/src/components/AssetDownload/index.tsx
@@ -5,7 +5,7 @@ import type { ImageProps, StaticImageData } from "next/image"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
-import { Button } from "@/components/ui/buttons/Button"
+import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Flex, Stack } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
@@ -41,40 +41,8 @@ const AssetDownload = ({
     })
   }
 
-  const handleDownload = async (url: string, fileExtension: string) => {
-    if (!url) return
-
-    matomoHandler()
-
-    try {
-      const response = await fetch(url)
-      const blob = await response.blob()
-      const blobUrl = window.URL.createObjectURL(blob)
-      const link = document.createElement("a")
-      link.href = blobUrl
-      link.download = `${title.replace(/\s+/g, "-").toLowerCase()}.${fileExtension}`
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-      window.URL.revokeObjectURL(blobUrl)
-    } catch (error) {
-      console.error("Failed to download file:", error)
-    }
-  }
-
-  const handleSvgDownload = () => {
-    if (!svgUrl) return
-    handleDownload(svgUrl, "svg")
-  }
-
-  const handleImageDownload = () => {
-    const imgSrc = (image as StaticImageData).src
-    if (!imgSrc) return
-    const fileExt = extname(imgSrc).slice(1)
-    handleDownload(imgSrc, fileExt)
-  }
-
   const imgSrc = (image as StaticImageData).src
+  const fileExtension = extname(imgSrc).slice(1)
 
   return (
     <Stack
@@ -89,14 +57,21 @@ const AssetDownload = ({
         )}
       </div>
       <Flex className="mt-4 gap-5">
-        <Button onClick={handleImageDownload}>
-          {t("page-assets-download-download")} (
-          {extname(imgSrc).slice(1).toUpperCase()})
-        </Button>
+        <ButtonLink
+          href={imgSrc}
+          onClick={matomoHandler}
+          download={`${title.replace(/\s+/g, "-").toLowerCase()}.${fileExtension}`}
+        >
+          {t("page-assets-download-download")} ({fileExtension.toUpperCase()})
+        </ButtonLink>
         {svgUrl && (
-          <Button onClick={handleSvgDownload}>
+          <ButtonLink
+            href={svgUrl}
+            onClick={matomoHandler}
+            download={`${title.replace(/\s+/g, "-").toLowerCase()}.svg`}
+          >
             {t("page-assets-download-download")} (SVG)
-          </Button>
+          </ButtonLink>
         )}
       </Flex>
     </Stack>