From 155fc6332532d225767b83f1197d9a83071b6366 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sat, 10 May 2025 22:55:36 +0330
Subject: [PATCH 01/20] add badge route

---
 README.md                                     |  3 ++
 .../app/app/components/GettingStarted.vue     | 23 ++++++++++
 packages/app/server/routes/badge.get.ts       | 42 +++++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 packages/app/server/routes/badge.get.ts

diff --git a/README.md b/README.md
index c5fb25e8..c394d2ff 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+[![pkg.pr.new](https://pkg.pr.new/badge?owner=stackblitz-labs&repo=pkg.pr.new)](https://pkg.pr.new/view/stackblitz-labs/pkg.pr.new)
+
+
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 
 # pkg.pr.new <span><img src="https://emoji.slack-edge.com/TFHDVN56F/stackblitz/fd010078dcccebca.png" width="30" /></span>
diff --git a/packages/app/app/components/GettingStarted.vue b/packages/app/app/components/GettingStarted.vue
index 61dbbed5..f1c4a060 100644
--- a/packages/app/app/components/GettingStarted.vue
+++ b/packages/app/app/components/GettingStarted.vue
@@ -51,5 +51,28 @@
 
       <img src="/pr-screenshot.png" alt="PR Screenshot" class="rounded-lg" />
     </GettingStartedStep>
+
+    <GettingStartedStep step="4">
+      <div>
+        Promote pkg.pr.new by adding a badge to your repository README:
+      </div>
+
+      <CodeSnippet code="[![pkg.pr.new](https://pkg.pr.new/badge?owner=OWNER&repo=REPO)](https://pkg.pr.new/view/OWNER/REPO)" />
+
+      <div class="text-gray-500 text-sm">
+        Replace OWNER and REPO with your GitHub username/organization and repository name.
+      </div>
+
+      <template #actions>
+        <UButton
+          href="https://github.com/stackblitz-labs/pkg.pr.new?tab=readme-ov-file#badge"
+          target="_blank"
+          icon="ph-badge"
+          trailing-icon="ph-arrow-square-out"
+        >
+          Learn more about badge options
+        </UButton>
+      </template>
+    </GettingStartedStep>
   </div>
 </template>
diff --git a/packages/app/server/routes/badge.get.ts b/packages/app/server/routes/badge.get.ts
new file mode 100644
index 00000000..f4a16b94
--- /dev/null
+++ b/packages/app/server/routes/badge.get.ts
@@ -0,0 +1,42 @@
+import { defineEventHandler, setHeader, getQuery, createError } from 'h3'
+
+const BASE_URL = 'https://pkg.pr.new'
+
+export default defineEventHandler(async (event) => {
+    const query = getQuery(event)
+    const owner = query.owner as string
+    const repo = query.repo as string
+    const style = (query.style as string) || 'flat'
+    const label = (query.label as string) || 'pkg.pr.new'
+    const color = (query.color as string) || '0ea5e9'
+
+    if (!owner || !repo) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: 'Owner and repo parameters are required',
+        })
+    }
+
+    const logoBase64 = getPkgPrNewLogoBase64()
+    const shieldsUrl = `https://img.shields.io/static/v1?label=${encodeURIComponent(label)}&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}`
+
+    setHeader(event, 'Content-Type', 'image/svg+xml')
+    setHeader(event, 'Cache-Control', 'public, max-age=86400')
+
+    const response = await fetch(shieldsUrl)
+    const svg = await response.text()
+
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <a xlink:href="${BASE_URL}/view/${owner}/${repo}">
+      ${svg}
+    </a>
+  </svg>`
+})
+
+function getPkgPrNewLogoBase64(): string {
+    const logo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216">
+    <path fill="#0ea5e9" d="M193.76 49.65l-88-48.18a12 12 0 0 0-11.52 0l-88 48.18a12 12 0 0 0-6.24 10.52v95.64a12 12 0 0 0 6.24 10.52l88 48.18a11.95 11.95 0 0 0 11.52 0l88-48.18a12 12 0 0 0 6.24-10.52V60.17a12 12 0 0 0-6.24-10.52"/>
+  </svg>`
+
+    return Buffer.from(logo).toString('base64')
+}
\ No newline at end of file

From f763510e3696bd33d0c195e2d1b118bcbac7c0ca Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sat, 10 May 2025 22:55:56 +0330
Subject: [PATCH 02/20] prettier

---
 README.md                                     |  1 -
 .../app/app/components/GettingStarted.vue     | 11 ++--
 packages/app/server/routes/badge.get.ts       | 64 +++++++++----------
 3 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index c394d2ff..08ee1591 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,5 @@
 [![pkg.pr.new](https://pkg.pr.new/badge?owner=stackblitz-labs&repo=pkg.pr.new)](https://pkg.pr.new/view/stackblitz-labs/pkg.pr.new)
 
-
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 
 # pkg.pr.new <span><img src="https://emoji.slack-edge.com/TFHDVN56F/stackblitz/fd010078dcccebca.png" width="30" /></span>
diff --git a/packages/app/app/components/GettingStarted.vue b/packages/app/app/components/GettingStarted.vue
index f1c4a060..76c02147 100644
--- a/packages/app/app/components/GettingStarted.vue
+++ b/packages/app/app/components/GettingStarted.vue
@@ -53,14 +53,15 @@
     </GettingStartedStep>
 
     <GettingStartedStep step="4">
-      <div>
-        Promote pkg.pr.new by adding a badge to your repository README:
-      </div>
+      <div>Promote pkg.pr.new by adding a badge to your repository README:</div>
 
-      <CodeSnippet code="[![pkg.pr.new](https://pkg.pr.new/badge?owner=OWNER&repo=REPO)](https://pkg.pr.new/view/OWNER/REPO)" />
+      <CodeSnippet
+        code="[![pkg.pr.new](https://pkg.pr.new/badge?owner=OWNER&repo=REPO)](https://pkg.pr.new/view/OWNER/REPO)"
+      />
 
       <div class="text-gray-500 text-sm">
-        Replace OWNER and REPO with your GitHub username/organization and repository name.
+        Replace OWNER and REPO with your GitHub username/organization and
+        repository name.
       </div>
 
       <template #actions>
diff --git a/packages/app/server/routes/badge.get.ts b/packages/app/server/routes/badge.get.ts
index f4a16b94..ae71bac5 100644
--- a/packages/app/server/routes/badge.get.ts
+++ b/packages/app/server/routes/badge.get.ts
@@ -1,42 +1,42 @@
-import { defineEventHandler, setHeader, getQuery, createError } from 'h3'
+import { defineEventHandler, setHeader, getQuery, createError } from "h3";
 
-const BASE_URL = 'https://pkg.pr.new'
+const BASE_URL = "https://pkg.pr.new";
 
 export default defineEventHandler(async (event) => {
-    const query = getQuery(event)
-    const owner = query.owner as string
-    const repo = query.repo as string
-    const style = (query.style as string) || 'flat'
-    const label = (query.label as string) || 'pkg.pr.new'
-    const color = (query.color as string) || '0ea5e9'
-
-    if (!owner || !repo) {
-        throw createError({
-            statusCode: 400,
-            statusMessage: 'Owner and repo parameters are required',
-        })
-    }
-
-    const logoBase64 = getPkgPrNewLogoBase64()
-    const shieldsUrl = `https://img.shields.io/static/v1?label=${encodeURIComponent(label)}&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}`
-
-    setHeader(event, 'Content-Type', 'image/svg+xml')
-    setHeader(event, 'Cache-Control', 'public, max-age=86400')
-
-    const response = await fetch(shieldsUrl)
-    const svg = await response.text()
-
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  const query = getQuery(event);
+  const owner = query.owner as string;
+  const repo = query.repo as string;
+  const style = (query.style as string) || "flat";
+  const label = (query.label as string) || "pkg.pr.new";
+  const color = (query.color as string) || "0ea5e9";
+
+  if (!owner || !repo) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Owner and repo parameters are required",
+    });
+  }
+
+  const logoBase64 = getPkgPrNewLogoBase64();
+  const shieldsUrl = `https://img.shields.io/static/v1?label=${encodeURIComponent(label)}&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}`;
+
+  setHeader(event, "Content-Type", "image/svg+xml");
+  setHeader(event, "Cache-Control", "public, max-age=86400");
+
+  const response = await fetch(shieldsUrl);
+  const svg = await response.text();
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <a xlink:href="${BASE_URL}/view/${owner}/${repo}">
       ${svg}
     </a>
-  </svg>`
-})
+  </svg>`;
+});
 
 function getPkgPrNewLogoBase64(): string {
-    const logo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216">
+  const logo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216">
     <path fill="#0ea5e9" d="M193.76 49.65l-88-48.18a12 12 0 0 0-11.52 0l-88 48.18a12 12 0 0 0-6.24 10.52v95.64a12 12 0 0 0 6.24 10.52l88 48.18a11.95 11.95 0 0 0 11.52 0l88-48.18a12 12 0 0 0 6.24-10.52V60.17a12 12 0 0 0-6.24-10.52"/>
-  </svg>`
+  </svg>`;
 
-    return Buffer.from(logo).toString('base64')
-}
\ No newline at end of file
+  return Buffer.from(logo).toString("base64");
+}

From 646b62559af34b362d20a80eff0db6f310e12e5a Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 11:17:42 +0330
Subject: [PATCH 03/20] update url

---
 packages/app/server/routes/badge.get.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/server/routes/badge.get.ts b/packages/app/server/routes/badge.get.ts
index ae71bac5..c4173f27 100644
--- a/packages/app/server/routes/badge.get.ts
+++ b/packages/app/server/routes/badge.get.ts
@@ -27,7 +27,7 @@ export default defineEventHandler(async (event) => {
   const svg = await response.text();
 
   return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <a xlink:href="${BASE_URL}/view/${owner}/${repo}">
+    <a xlink:href="${BASE_URL}/~/${owner}/${repo}">
       ${svg}
     </a>
   </svg>`;

From fc9f31ddd17d8e31e27e2f304313a13618e144b4 Mon Sep 17 00:00:00 2001
From: AmirHossein Sakhravi <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 11:29:36 +0330
Subject: [PATCH 04/20] test staging route

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 08ee1591..afb13a57 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![pkg.pr.new](https://pkg.pr.new/badge?owner=stackblitz-labs&repo=pkg.pr.new)](https://pkg.pr.new/view/stackblitz-labs/pkg.pr.new)
+[![pkg.pr.new](https://6de7d3b2.stackblitz-cr.pages.dev/badge?owner=stackblitz-labs&repo=pkg.pr.new)](https://pkg.pr.new/view/stackblitz-labs/pkg.pr.new)
 
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 

From fdda98029f98df61c6d10a0d65fb45402332ba15 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 21:39:57 +0330
Subject: [PATCH 05/20] some changes

---
 README.md                                     |  2 +-
 .../app/app/components/BadgeGenerator.vue     | 43 +++++++++++++++++++
 .../app/app/components/GettingStarted.vue     |  9 ++--
 packages/app/app/pages/~/[owner]/[repo].vue   |  6 +++
 .../[owner]/[repo].get.ts}                    | 19 +++++---
 5 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 packages/app/app/components/BadgeGenerator.vue
 rename packages/app/server/routes/{badge.get.ts => badge/[owner]/[repo].get.ts} (70%)

diff --git a/README.md b/README.md
index afb13a57..67be6056 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![pkg.pr.new](https://6de7d3b2.stackblitz-cr.pages.dev/badge?owner=stackblitz-labs&repo=pkg.pr.new)](https://pkg.pr.new/view/stackblitz-labs/pkg.pr.new)
+[![pkg.pr.new](https://pkg.pr.new/badge/stackblitz-labs/pkg.pr.new)](https://pkg.pr.new/~/stackblitz-labs/pkg.pr.new)
 
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 
diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
new file mode 100644
index 00000000..7b56fbfd
--- /dev/null
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const props = defineProps<{
+  owner: string;
+  repo: string;
+}>();
+
+const copied = ref(false);
+
+const baseUrl = process.client ? window.location.origin : "https://pkg.pr.new";
+const badgeUrl = `${baseUrl}/badge/${props.owner}/${props.repo}`;
+const redirectUrl = `${baseUrl}/~/${props.owner}/${props.repo}`;
+
+function copyBadgeCode() {
+  const badgeCode = `[![${props.repo}](${badgeUrl})](${redirectUrl})`;
+  navigator.clipboard.writeText(badgeCode);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 2000);
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+    <h3 class="font-semibold">Add a badge to your README</h3>
+
+    <div class="flex items-center gap-2">
+      <img :src="badgeUrl" :alt="`${repo} badge`" height="20" class="h-5" />
+      <UButton
+        @click="copyBadgeCode"
+        size="sm"
+        color="primary"
+        :icon="copied ? 'i-ph-check-bold' : 'i-ph-copy'"
+      >
+        {{ copied ? "Copied!" : "Copy Markdown" }}
+      </UButton>
+    </div>
+
+    <div class="text-xs text-gray-500">
+      Add this badge to your README to help promote pkg.pr.new
+    </div>
+  </div>
+</template>
diff --git a/packages/app/app/components/GettingStarted.vue b/packages/app/app/components/GettingStarted.vue
index 76c02147..b5a6ff84 100644
--- a/packages/app/app/components/GettingStarted.vue
+++ b/packages/app/app/components/GettingStarted.vue
@@ -55,9 +55,12 @@
     <GettingStartedStep step="4">
       <div>Promote pkg.pr.new by adding a badge to your repository README:</div>
 
-      <CodeSnippet
-        code="[![pkg.pr.new](https://pkg.pr.new/badge?owner=OWNER&repo=REPO)](https://pkg.pr.new/view/OWNER/REPO)"
-      />
+      <div class="w-[550px]">
+        <CodeSnippet
+          class="text-[10px]"
+          code="[![pkg.pr.new](https://pkg.pr.new/badge/OWNER/REPO)](https://pkg.pr.new/~/OWNER/REPO)"
+        />
+      </div>
 
       <div class="text-gray-500 text-sm">
         Replace OWNER and REPO with your GitHub username/organization and
diff --git a/packages/app/app/pages/~/[owner]/[repo].vue b/packages/app/app/pages/~/[owner]/[repo].vue
index 7034278d..30c0d157 100644
--- a/packages/app/app/pages/~/[owner]/[repo].vue
+++ b/packages/app/app/pages/~/[owner]/[repo].vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 definePageMeta({
   name: "repo:details",
 });
@@ -78,6 +80,10 @@ useSeoMeta({
       </div>
     </div>
 
+    <div class="max-w-xl mx-auto w-full">
+      <BadgeGenerator :owner="repository.owner.login" :repo="repository.name" />
+    </div>
+
     <Commits :owner="repository.owner.login" :repo="repository.name" />
   </div>
 </template>
diff --git a/packages/app/server/routes/badge.get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
similarity index 70%
rename from packages/app/server/routes/badge.get.ts
rename to packages/app/server/routes/badge/[owner]/[repo].get.ts
index c4173f27..fe130415 100644
--- a/packages/app/server/routes/badge.get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -1,13 +1,20 @@
-import { defineEventHandler, setHeader, getQuery, createError } from "h3";
+import {
+  defineEventHandler,
+  setHeader,
+  getRouterParams,
+  createError,
+  getQuery,
+} from "h3";
 
 const BASE_URL = "https://pkg.pr.new";
 
 export default defineEventHandler(async (event) => {
+  const params = getRouterParams(event);
+  const owner = params.owner as string;
+  const repo = params.repo as string;
+
   const query = getQuery(event);
-  const owner = query.owner as string;
-  const repo = query.repo as string;
   const style = (query.style as string) || "flat";
-  const label = (query.label as string) || "pkg.pr.new";
   const color = (query.color as string) || "0ea5e9";
 
   if (!owner || !repo) {
@@ -18,10 +25,10 @@ export default defineEventHandler(async (event) => {
   }
 
   const logoBase64 = getPkgPrNewLogoBase64();
-  const shieldsUrl = `https://img.shields.io/static/v1?label=${encodeURIComponent(label)}&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}`;
+  const shieldsUrl = `https://img.shields.io/static/v1?label=&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}`;
 
   setHeader(event, "Content-Type", "image/svg+xml");
-  setHeader(event, "Cache-Control", "public, max-age=86400");
+  setHeader(event, "Cache-Control", "public, max-age=86400"); // Cache for 24 hours
 
   const response = await fetch(shieldsUrl);
   const svg = await response.text();

From 4d2d56e9c2b2faaf255d82d432056a1229cc86ee Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 22:06:18 +0330
Subject: [PATCH 06/20] update

---
 .../app/app/components/BadgeGenerator.vue     | 29 +++++++++----------
 .../server/routes/badge/[owner]/[repo].get.ts | 29 +++++++++++++++++--
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index 7b56fbfd..79e0910a 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -21,23 +21,20 @@ function copyBadgeCode() {
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-    <h3 class="font-semibold">Add a badge to your README</h3>
+  <div
+    class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
+  >
+    <span class="text-xs font-medium">Add a badge to your README</span>
 
-    <div class="flex items-center gap-2">
-      <img :src="badgeUrl" :alt="`${repo} badge`" height="20" class="h-5" />
-      <UButton
-        @click="copyBadgeCode"
-        size="sm"
-        color="primary"
-        :icon="copied ? 'i-ph-check-bold' : 'i-ph-copy'"
-      >
-        {{ copied ? "Copied!" : "Copy Markdown" }}
-      </UButton>
-    </div>
+    <img :src="badgeUrl" :alt="`${repo} badge`" height="16" class="h-4" />
 
-    <div class="text-xs text-gray-500">
-      Add this badge to your README to help promote pkg.pr.new
-    </div>
+    <UButton
+      @click="copyBadgeCode"
+      size="xs"
+      color="primary"
+      :icon="copied ? 'i-ph-check-bold' : 'i-ph-copy'"
+      variant="ghost"
+      class="ml-auto"
+    />
   </div>
 </template>
diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index fe130415..dc1463cf 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -41,9 +41,32 @@ export default defineEventHandler(async (event) => {
 });
 
 function getPkgPrNewLogoBase64(): string {
-  const logo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216">
-    <path fill="#0ea5e9" d="M193.76 49.65l-88-48.18a12 12 0 0 0-11.52 0l-88 48.18a12 12 0 0 0-6.24 10.52v95.64a12 12 0 0 0 6.24 10.52l88 48.18a11.95 11.95 0 0 0 11.52 0l88-48.18a12 12 0 0 0 6.24-10.52V60.17a12 12 0 0 0-6.24-10.52"/>
-  </svg>`;
+  const logo = `<svg xmlns="http://www.w3.org/2000/svg" width="71" height="73" viewBox="0 0 71 73" fill="none">
+  <g filter="url(#filter0_di_18_22)">
+    <path d="M29.6539 2.52761C26.8827 3.91317 24.6248 5.06781 24.6248 5.10629C24.6248 5.14478 31.2447 8.57019 39.3399 12.7269C47.448 16.8707 54.1706 20.3731 54.2988 20.4886C54.5169 20.681 54.5298 21.1942 54.5298 28.9046C54.5298 36.6149 54.5169 37.1281 54.2988 37.3847C54.1706 37.5386 52.7208 38.3597 51.0915 39.2193C49.4494 40.0788 47.9612 40.7716 47.7816 40.7716C47.5891 40.7716 47.3839 40.6562 47.2684 40.4894C47.1016 40.2328 47.076 39.1166 47.076 32.2402L47.0632 24.286L16.9914 8.80112C5.66316 14.446 4.62399 15.0105 4.35458 15.3825L4.03385 15.8187C3.98253 41.7723 3.99536 49.4314 4.03385 49.5981C4.07233 49.7521 4.25194 50.06 4.45721 50.2781C4.7138 50.586 8.54974 52.5617 19.7882 58.1681C31.0266 63.7873 34.8754 65.6604 35.2089 65.6604C35.5425 65.6604 38.1725 64.4159 45.3184 60.8879C50.6169 58.2579 57.5062 54.8453 60.6108 53.2801C65.9863 50.586 66.2685 50.432 66.538 49.9445L66.833 49.4314C66.833 17.1273 66.8202 16.0496 66.6021 15.6263C66.3968 15.2029 65.4988 14.7282 51.1813 7.58234C36.928 0.474933 35.9402 -0.0125789 35.3372 0.000250395C34.7727 0.0130796 34.0928 0.320982 29.6539 2.52761Z" fill="url(#paint0_linear_18_22)"/>
+  </g>
+  <defs>
+    <filter id="filter0_di_18_22" x="0.460111" y="1.52588e-05" width="69.9128" height="72.7401" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="3.53989"/>
+      <feGaussianBlur stdDeviation="1.76994"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_22"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_18_22" result="shape"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1.76994"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.95 0"/>
+      <feBlend mode="normal" in2="shape" result="effect2_innerShadow_18_22"/>
+    </filter>
+    <linearGradient id="paint0_linear_18_22" x1="35.4165" y1="1.52588e-05" x2="35.4165" y2="66.8238" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#999999"/>
+    </linearGradient>
+  </defs>
+</svg>`;
 
   return Buffer.from(logo).toString("base64");
 }

From 6fd8057c9b3376026cbc69cf7f8450ed8b7d390e Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 23:16:02 +0330
Subject: [PATCH 07/20] update

---
 packages/app/app/components/BadgeGenerator.vue       | 12 ++++--------
 packages/app/app/pages/~/[owner]/[repo].vue          |  9 ++++++---
 .../app/server/routes/badge/[owner]/[repo].get.ts    |  6 +++---
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index 79e0910a..f551c9bd 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -21,20 +21,16 @@ function copyBadgeCode() {
 </script>
 
 <template>
-  <div
-    class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
-  >
-    <span class="text-xs font-medium">Add a badge to your README</span>
-
-    <img :src="badgeUrl" :alt="`${repo} badge`" height="16" class="h-4" />
+  <div class="inline-flex items-center gap-1">
+    <img :src="badgeUrl" :alt="`${repo} badge`" class="h-[20px]" />
 
     <UButton
       @click="copyBadgeCode"
       size="xs"
-      color="primary"
+      color="gray"
       :icon="copied ? 'i-ph-check-bold' : 'i-ph-copy'"
       variant="ghost"
-      class="ml-auto"
+      class="!p-1"
     />
   </div>
 </template>
diff --git a/packages/app/app/pages/~/[owner]/[repo].vue b/packages/app/app/pages/~/[owner]/[repo].vue
index 30c0d157..05258650 100644
--- a/packages/app/app/pages/~/[owner]/[repo].vue
+++ b/packages/app/app/pages/~/[owner]/[repo].vue
@@ -78,10 +78,13 @@ useSeoMeta({
           variant="link"
         />
       </div>
-    </div>
 
-    <div class="max-w-xl mx-auto w-full">
-      <BadgeGenerator :owner="repository.owner.login" :repo="repository.name" />
+      <div class="flex justify-center mt-2">
+        <BadgeGenerator
+          :owner="repository.owner.login"
+          :repo="repository.name"
+        />
+      </div>
     </div>
 
     <Commits :owner="repository.owner.login" :repo="repository.name" />
diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index dc1463cf..dd91b564 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -15,7 +15,7 @@ export default defineEventHandler(async (event) => {
 
   const query = getQuery(event);
   const style = (query.style as string) || "flat";
-  const color = (query.color as string) || "0ea5e9";
+  const color = (query.color as string) || "000";
 
   if (!owner || !repo) {
     throw createError({
@@ -25,10 +25,10 @@ export default defineEventHandler(async (event) => {
   }
 
   const logoBase64 = getPkgPrNewLogoBase64();
-  const shieldsUrl = `https://img.shields.io/static/v1?label=&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}`;
+  const shieldsUrl = `https://img.shields.io/static/v1?label=&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}&logoWidth=16&logoPosition=start`;
 
   setHeader(event, "Content-Type", "image/svg+xml");
-  setHeader(event, "Cache-Control", "public, max-age=86400"); // Cache for 24 hours
+  setHeader(event, "Cache-Control", "public, max-age=86400");
 
   const response = await fetch(shieldsUrl);
   const svg = await response.text();

From bae98ab02c4134d04eb69b7e37debd85f6596016 Mon Sep 17 00:00:00 2001
From: AmirHossein Sakhravi <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 23:31:59 +0330
Subject: [PATCH 08/20] test staging

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 67be6056..8577d161 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![pkg.pr.new](https://pkg.pr.new/badge/stackblitz-labs/pkg.pr.new)](https://pkg.pr.new/~/stackblitz-labs/pkg.pr.new)
+[![pkg.pr.new](https://d4a1abd4.stackblitz-cr.pages.dev/badge/stackblitz-labs/pkg.pr.new)](https://pkg.pr.new/~/stackblitz-labs/pkg.pr.new)
 
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 

From 164d6de1bebb27c73ba1545811f4813129e8c449 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Sun, 11 May 2025 23:41:36 +0330
Subject: [PATCH 09/20] update

---
 packages/app/app/components/BadgeGenerator.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index f551c9bd..fe6ffc26 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -22,7 +22,11 @@ function copyBadgeCode() {
 
 <template>
   <div class="inline-flex items-center gap-1">
-    <img :src="badgeUrl" :alt="`${repo} badge`" class="h-[20px]" />
+    <img
+      :src="badgeUrl"
+      :alt="`${repo} badge`"
+      class="h-[20px] min-w-[100px] max-w-[300px]"
+    />
 
     <UButton
       @click="copyBadgeCode"

From add0e9602fa97c813cc7fd2acd6c1c46657eb30c Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 10:49:50 +0330
Subject: [PATCH 10/20] align

---
 packages/app/server/routes/badge/[owner]/[repo].get.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index dd91b564..4eb83917 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -42,6 +42,7 @@ export default defineEventHandler(async (event) => {
 
 function getPkgPrNewLogoBase64(): string {
   const logo = `<svg xmlns="http://www.w3.org/2000/svg" width="71" height="73" viewBox="0 0 71 73" fill="none">
+    <g transform="translate(0,10)">
   <g filter="url(#filter0_di_18_22)">
     <path d="M29.6539 2.52761C26.8827 3.91317 24.6248 5.06781 24.6248 5.10629C24.6248 5.14478 31.2447 8.57019 39.3399 12.7269C47.448 16.8707 54.1706 20.3731 54.2988 20.4886C54.5169 20.681 54.5298 21.1942 54.5298 28.9046C54.5298 36.6149 54.5169 37.1281 54.2988 37.3847C54.1706 37.5386 52.7208 38.3597 51.0915 39.2193C49.4494 40.0788 47.9612 40.7716 47.7816 40.7716C47.5891 40.7716 47.3839 40.6562 47.2684 40.4894C47.1016 40.2328 47.076 39.1166 47.076 32.2402L47.0632 24.286L16.9914 8.80112C5.66316 14.446 4.62399 15.0105 4.35458 15.3825L4.03385 15.8187C3.98253 41.7723 3.99536 49.4314 4.03385 49.5981C4.07233 49.7521 4.25194 50.06 4.45721 50.2781C4.7138 50.586 8.54974 52.5617 19.7882 58.1681C31.0266 63.7873 34.8754 65.6604 35.2089 65.6604C35.5425 65.6604 38.1725 64.4159 45.3184 60.8879C50.6169 58.2579 57.5062 54.8453 60.6108 53.2801C65.9863 50.586 66.2685 50.432 66.538 49.9445L66.833 49.4314C66.833 17.1273 66.8202 16.0496 66.6021 15.6263C66.3968 15.2029 65.4988 14.7282 51.1813 7.58234C36.928 0.474933 35.9402 -0.0125789 35.3372 0.000250395C34.7727 0.0130796 34.0928 0.320982 29.6539 2.52761Z" fill="url(#paint0_linear_18_22)"/>
   </g>
@@ -66,6 +67,7 @@ function getPkgPrNewLogoBase64(): string {
       <stop offset="1" stop-color="#999999"/>
     </linearGradient>
   </defs>
+  </g>
 </svg>`;
 
   return Buffer.from(logo).toString("base64");

From 288a6800360964a114e1ee89e52aa6dc502cfa6a Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 11:03:46 +0330
Subject: [PATCH 11/20] text

---
 packages/app/app/pages/~/[owner]/[repo].vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/app/app/pages/~/[owner]/[repo].vue b/packages/app/app/pages/~/[owner]/[repo].vue
index 05258650..c4e8018f 100644
--- a/packages/app/app/pages/~/[owner]/[repo].vue
+++ b/packages/app/app/pages/~/[owner]/[repo].vue
@@ -79,7 +79,10 @@ useSeoMeta({
         />
       </div>
 
-      <div class="flex justify-center mt-2">
+      <div class="flex flex-col items-center justify-center mt-2">
+        <p class="text-sm mb-[10px]">
+          You can copy the badge and put in your README!
+        </p>
         <BadgeGenerator
           :owner="repository.owner.login"
           :repo="repository.name"

From 30d3f313a802eeb7304bae989dbf83df9f6b99ca Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 11:16:39 +0330
Subject: [PATCH 12/20] readme

---
 README.md | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8577d161..b70d12e3 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,3 @@
-[![pkg.pr.new](https://d4a1abd4.stackblitz-cr.pages.dev/badge/stackblitz-labs/pkg.pr.new)](https://pkg.pr.new/~/stackblitz-labs/pkg.pr.new)
-
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 
 # pkg.pr.new <span><img src="https://emoji.slack-edge.com/TFHDVN56F/stackblitz/fd010078dcccebca.png" width="30" /></span>
@@ -28,6 +26,24 @@ It is aiming to reduce the number of these comments :)
 
 > This was fixed in #18. Can we release that fix?
 
+## Badge
+
+Show that your project uses pkg.pr.new by adding a badge to your README:
+
+[![pkg.pr.new](https://pkg.pr.new/badge/stackblitz-labs/pkg.pr.new)](https://pkg.pr.new/~/stackblitz-labs/pkg.pr.new)
+
+### How to Get a Badge for Your Repository
+
+1. **Automatically on Repository Page**:
+   Visit your repository page at `https://pkg.pr.new/~/OWNER/REPO` and you'll find a badge with a copy button that will copy the markdown code for you.
+
+2. **Direct Badge URL**:
+   Use this format to create a badge for your repository:
+   ```markdown
+   [![pkg.pr.new](https://pkg.pr.new/badge/OWNER/REPO)](https://pkg.pr.new/~/OWNER/REPO)
+   ```
+   Just replace `OWNER` and `REPO` with your GitHub username/organization and repository name.
+
 These are some of the projects and companies using pkg.pr.new:
 
 <p align="center">

From 8c6678089b75a36ddef5c55960a5c34c978b57f8 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 11:52:58 +0330
Subject: [PATCH 13/20] logo

---
 packages/app/server/routes/badge/[owner]/[repo].get.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index 4eb83917..9bcdec6a 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -42,7 +42,7 @@ export default defineEventHandler(async (event) => {
 
 function getPkgPrNewLogoBase64(): string {
   const logo = `<svg xmlns="http://www.w3.org/2000/svg" width="71" height="73" viewBox="0 0 71 73" fill="none">
-    <g transform="translate(0,10)">
+    <g transform="translate(0,7)">
   <g filter="url(#filter0_di_18_22)">
     <path d="M29.6539 2.52761C26.8827 3.91317 24.6248 5.06781 24.6248 5.10629C24.6248 5.14478 31.2447 8.57019 39.3399 12.7269C47.448 16.8707 54.1706 20.3731 54.2988 20.4886C54.5169 20.681 54.5298 21.1942 54.5298 28.9046C54.5298 36.6149 54.5169 37.1281 54.2988 37.3847C54.1706 37.5386 52.7208 38.3597 51.0915 39.2193C49.4494 40.0788 47.9612 40.7716 47.7816 40.7716C47.5891 40.7716 47.3839 40.6562 47.2684 40.4894C47.1016 40.2328 47.076 39.1166 47.076 32.2402L47.0632 24.286L16.9914 8.80112C5.66316 14.446 4.62399 15.0105 4.35458 15.3825L4.03385 15.8187C3.98253 41.7723 3.99536 49.4314 4.03385 49.5981C4.07233 49.7521 4.25194 50.06 4.45721 50.2781C4.7138 50.586 8.54974 52.5617 19.7882 58.1681C31.0266 63.7873 34.8754 65.6604 35.2089 65.6604C35.5425 65.6604 38.1725 64.4159 45.3184 60.8879C50.6169 58.2579 57.5062 54.8453 60.6108 53.2801C65.9863 50.586 66.2685 50.432 66.538 49.9445L66.833 49.4314C66.833 17.1273 66.8202 16.0496 66.6021 15.6263C66.3968 15.2029 65.4988 14.7282 51.1813 7.58234C36.928 0.474933 35.9402 -0.0125789 35.3372 0.000250395C34.7727 0.0130796 34.0928 0.320982 29.6539 2.52761Z" fill="url(#paint0_linear_18_22)"/>
   </g>

From c1a85e3e1957d1501fb71259b146bdfb9236f582 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 11:58:54 +0330
Subject: [PATCH 14/20] base url

---
 .../app/server/routes/badge/[owner]/[repo].get.ts    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index 9bcdec6a..2236902e 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -1,14 +1,18 @@
 import {
   defineEventHandler,
-  setHeader,
+  getQuery,
   getRouterParams,
+  setHeader,
   createError,
-  getQuery,
+  getRequestURL,
 } from "h3";
 
-const BASE_URL = "https://pkg.pr.new";
-
 export default defineEventHandler(async (event) => {
+  const url = getRequestURL(event, {
+    xForwardedHost: true,
+    xForwardedProto: true,
+  });
+  const BASE_URL = url.origin;
   const params = getRouterParams(event);
   const owner = params.owner as string;
   const repo = params.repo as string;

From 409475aeba8611f99e328fa29f37c7fc6040bf35 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 12:05:55 +0330
Subject: [PATCH 15/20] revert

---
 .../app/server/routes/badge/[owner]/[repo].get.ts    | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index 2236902e..9bcdec6a 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -1,18 +1,14 @@
 import {
   defineEventHandler,
-  getQuery,
-  getRouterParams,
   setHeader,
+  getRouterParams,
   createError,
-  getRequestURL,
+  getQuery,
 } from "h3";
 
+const BASE_URL = "https://pkg.pr.new";
+
 export default defineEventHandler(async (event) => {
-  const url = getRequestURL(event, {
-    xForwardedHost: true,
-    xForwardedProto: true,
-  });
-  const BASE_URL = url.origin;
   const params = getRouterParams(event);
   const owner = params.owner as string;
   const repo = params.repo as string;

From 8f94cfbb9b7112b4715a8b893b4f1ddac4eb3b07 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 14:29:47 +0330
Subject: [PATCH 16/20] test bg div

---
 packages/app/app/components/BadgeGenerator.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index fe6ffc26..56e04f57 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -22,11 +22,10 @@ function copyBadgeCode() {
 
 <template>
   <div class="inline-flex items-center gap-1">
-    <img
-      :src="badgeUrl"
-      :alt="`${repo} badge`"
-      class="h-[20px] min-w-[100px] max-w-[300px]"
-    />
+    <div
+      class="h-[20px] min-w-[100px] max-w-[300px] bg-no-repeat bg-contain"
+      :style="{ backgroundImage: `url(${badgeUrl})` }"
+    ></div>
 
     <UButton
       @click="copyBadgeCode"

From f897514fc9232f62f98d32a5dc9935cffe48be93 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 16:42:30 +0330
Subject: [PATCH 17/20] badges

---
 .../app/app/components/BadgeGenerator.vue     | 34 +++++++++------
 .../server/routes/badge/[owner]/[repo].get.ts | 41 +++++++++----------
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index 56e04f57..64ab9280 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -1,31 +1,41 @@
 <script setup lang="ts">
+import { ref } from "vue";
 const props = defineProps<{
   owner: string;
   repo: string;
+  color?: string;
 }>();
 
 const copied = ref(false);
-
+const style = "flat";
+const color = props.color || "000";
 const baseUrl = process.client ? window.location.origin : "https://pkg.pr.new";
-const badgeUrl = `${baseUrl}/badge/${props.owner}/${props.repo}`;
+
+const badgeUrl =
+  `${baseUrl}/badge/${props.owner}/${props.repo}` +
+  `?style=${style}` +
+  `&color=${encodeURIComponent(color)}` +
+  `&logoSize=auto`;
+
 const redirectUrl = `${baseUrl}/~/${props.owner}/${props.repo}`;
 
 function copyBadgeCode() {
-  const badgeCode = `[![${props.repo}](${badgeUrl})](${redirectUrl})`;
-  navigator.clipboard.writeText(badgeCode);
+  const md = `[![${props.repo}](${badgeUrl})](${redirectUrl})`;
+  navigator.clipboard.writeText(md);
   copied.value = true;
-  setTimeout(() => {
-    copied.value = false;
-  }, 2000);
+  setTimeout(() => (copied.value = false), 2000);
 }
 </script>
 
 <template>
-  <div class="inline-flex items-center gap-1">
-    <div
-      class="h-[20px] min-w-[100px] max-w-[300px] bg-no-repeat bg-contain"
-      :style="{ backgroundImage: `url(${badgeUrl})` }"
-    ></div>
+  <div class="inline-flex items-center gap-[2px]">
+    <a :href="redirectUrl" target="_blank" rel="noopener">
+      <img
+        :src="badgeUrl"
+        :alt="`${props.repo} badge`"
+        class="h-5 w-auto block max-w-none"
+      />
+    </a>
 
     <UButton
       @click="copyBadgeCode"
diff --git a/packages/app/server/routes/badge/[owner]/[repo].get.ts b/packages/app/server/routes/badge/[owner]/[repo].get.ts
index 9bcdec6a..fdcd595c 100644
--- a/packages/app/server/routes/badge/[owner]/[repo].get.ts
+++ b/packages/app/server/routes/badge/[owner]/[repo].get.ts
@@ -6,38 +6,37 @@ import {
   getQuery,
 } from "h3";
 
-const BASE_URL = "https://pkg.pr.new";
-
 export default defineEventHandler(async (event) => {
-  const params = getRouterParams(event);
-  const owner = params.owner as string;
-  const repo = params.repo as string;
-
-  const query = getQuery(event);
-  const style = (query.style as string) || "flat";
-  const color = (query.color as string) || "000";
-
+  const { owner, repo } = getRouterParams(event) as {
+    owner: string;
+    repo: string;
+  };
   if (!owner || !repo) {
     throw createError({
       statusCode: 400,
-      statusMessage: "Owner and repo parameters are required",
+      statusMessage: "Owner and repo are required",
     });
   }
 
+  const { style = "flat", color = "000" } = getQuery(event) as Record<
+    string,
+    string
+  >;
   const logoBase64 = getPkgPrNewLogoBase64();
-  const shieldsUrl = `https://img.shields.io/static/v1?label=&message=${encodeURIComponent(repo)}&color=${color}&style=${style}&logo=data:image/svg+xml;base64,${logoBase64}&logoWidth=16&logoPosition=start`;
+  const shieldsUrl =
+    `https://img.shields.io/static/v1?` +
+    `label=&message=${encodeURIComponent(repo)}` +
+    `&color=${color}` +
+    `&style=${style}` +
+    `&logo=data:image/svg+xml;base64,${logoBase64}` +
+    `&logoSize=auto`;
+
+  const res = await fetch(shieldsUrl);
+  const svg = await res.text();
 
   setHeader(event, "Content-Type", "image/svg+xml");
   setHeader(event, "Cache-Control", "public, max-age=86400");
-
-  const response = await fetch(shieldsUrl);
-  const svg = await response.text();
-
-  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <a xlink:href="${BASE_URL}/~/${owner}/${repo}">
-      ${svg}
-    </a>
-  </svg>`;
+  return svg;
 });
 
 function getPkgPrNewLogoBase64(): string {

From 659d58a23720ff032a588b0085dab3f1f4af6292 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 17:21:46 +0330
Subject: [PATCH 18/20] pointer

---
 packages/app/app/components/BadgeGenerator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index 64ab9280..462641b1 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -43,7 +43,7 @@ function copyBadgeCode() {
       color="gray"
       :icon="copied ? 'i-ph-check-bold' : 'i-ph-copy'"
       variant="ghost"
-      class="!p-1"
+      class="!p-1 cursor-pointer"
     />
   </div>
 </template>

From 7ca918bdc9ac21c5bb72e97d4510c84d530e5c9b Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 17:27:25 +0330
Subject: [PATCH 19/20] trigger ci


From 82a0d9e4bc6637def872367263bed722c57a80e2 Mon Sep 17 00:00:00 2001
From: AmirSa12 <amirhosseinpr184@gmail.com>
Date: Mon, 12 May 2025 17:47:44 +0330
Subject: [PATCH 20/20] dynamic url

---
 .../app/app/components/BadgeGenerator.vue     | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/app/app/components/BadgeGenerator.vue b/packages/app/app/components/BadgeGenerator.vue
index 462641b1..b8c3dc2d 100644
--- a/packages/app/app/components/BadgeGenerator.vue
+++ b/packages/app/app/components/BadgeGenerator.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, computed } from "vue";
+
 const props = defineProps<{
   owner: string;
   repo: string;
@@ -9,18 +10,26 @@ const props = defineProps<{
 const copied = ref(false);
 const style = "flat";
 const color = props.color || "000";
-const baseUrl = process.client ? window.location.origin : "https://pkg.pr.new";
 
-const badgeUrl =
-  `${baseUrl}/badge/${props.owner}/${props.repo}` +
-  `?style=${style}` +
-  `&color=${encodeURIComponent(color)}` +
-  `&logoSize=auto`;
+const baseUrl = ref("https://pkg.pr.new");
+onMounted(() => {
+  baseUrl.value = window.location.origin;
+});
+
+const badgeUrl = computed(
+  () =>
+    `${baseUrl.value}/badge/${props.owner}/${props.repo}` +
+    `?style=${style}` +
+    `&color=${encodeURIComponent(color)}` +
+    `&logoSize=auto`,
+);
 
-const redirectUrl = `${baseUrl}/~/${props.owner}/${props.repo}`;
+const redirectUrl = computed(
+  () => `${baseUrl.value}/~/${props.owner}/${props.repo}`,
+);
 
 function copyBadgeCode() {
-  const md = `[![${props.repo}](${badgeUrl})](${redirectUrl})`;
+  const md = `[![${props.repo}](${badgeUrl.value})](${redirectUrl.value})`;
   navigator.clipboard.writeText(md);
   copied.value = true;
   setTimeout(() => (copied.value = false), 2000);