some changes

Author: AmirSa12

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>
 

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>

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

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>

packages/app/server/routes/badge.get.ts …erver/routes/badge/[owner]/[repo].get.tspackages/app/server/routes/badge.get.ts renamed to packages/app/server/routes/badge/[owner]/[repo].get.ts packages/app/server/routes/badge.get.ts renamed to 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();