update

Author: AmirSa12

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>

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" />

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();