From af0dc19861e30aad980744657ed30cedc270d433 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Thu, 19 Feb 2026 03:12:03 +0100
Subject: [PATCH] Open external links in new tab for buy and discogs buttons

---
 components/IconButton.vue | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index d2b48d6..4f7792e 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -6,21 +6,21 @@
                 <Icon name="ion:book-sharp" style="color: white" />
             </button>
 
-            <button v-else-if="type === 'document'" @click="modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', link)" class="inline-flex p-1">
+            <a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="!isExternalLink && openDocument()" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
-            </button>
+            </a>
 
-            <NuxtLink v-else-if="type === 'buy'" class="inline-flex p-1" :to="link">
+            <a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1">
                 <Icon name="bxs:purchase-tag" style="color: white" />
-            </NuxtLink>
+            </a>
 
             <NuxtLink v-else-if="type === 'email'" class="inline-flex p-1" :to="link">
                 <Icon name="ic:baseline-email" style="color: white" />
             </NuxtLink>
 
-            <NuxtLink v-else-if="type === 'discogs'" class="inline-flex p-1" :to="link">
+            <a v-else-if="type === 'discogs'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1">
                 <Icon name="simple-icons:discogs" style="color: white" />
-            </NuxtLink>
+            </a>
 
             <button @click="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" v-else-if="type === 'audio'" class="inline-flex p-1">
                 <Icon name="wpf:speaker" style="color: white" />
@@ -41,14 +41,20 @@
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
   import { useModalStore } from "@/stores/ModalStore"
+  import { computed } from "vue"
+
+  const props = defineProps(['type', 'work', 'visible', 'link', 'newTab'])
 
   const audioPlayerStore = useAudioPlayerStore()
   const modalStore = useModalStore()
 
-</script>
+  const isExternalLink = computed(() => {
+    return props.link && !props.link.endsWith('.pdf')
+  })
 
-<script>
-    export default {
-        props: ['type', 'work', 'visible', 'link', 'newTab']
+  const openDocument = () => {
+    if (props.link?.endsWith('.pdf')) {
+      modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)
     }
+  }
 </script>