refactor: use shields.io built-in JSR logo for badges (#487)

The JSR logo has been added to Simple Icons since
simple-icons/simple-icons#10794.

I used the `logoSize` parameter to make the logo fit the badge. The
feature was introduced at badges/shields#9191.

Currently, we can't use `logoSize` in the response due to
badges/shields#10132. So I passed these
parameters with search parameters instead.

Author: LitoMore

frontend/routes/badges/package.ts

@@ -25,14 +25,9 @@ export const handler: Handlers<unknown, State> = {
         return Response.json({
           schemaVersion: 1,
           label: "",
-          // namedLogo: "jsr", TODO: add icon to shields.io or simple-icons. temporary solution below.
-          logoSvg: await Deno.readTextFile(
-            new URL("../../static/logo.svg", import.meta.url),
-          ),
           message: packageResp.data.latestVersion,
           labelColor: "rgb(247,223,30)",
           color: "rgb(8,51,68)",
-          logoWidth: "25",
         });
       }
     } else {
@@ -42,6 +37,9 @@ export const handler: Handlers<unknown, State> = {
       const shieldsUrl = new URL("https://img.shields.io/endpoint");
       shieldsUrl.search = url.search;
       shieldsUrl.searchParams.set("url", url.href);
+      shieldsUrl.searchParams.set("logo", "jsr");
+      shieldsUrl.searchParams.set("logoColor", "rgb(8,51,68)");
+      shieldsUrl.searchParams.set("logoSize", "auto");
 
       const res = await fetch(shieldsUrl);
 

frontend/routes/badges/package_score.ts

@@ -29,14 +29,9 @@ export const handler: Handlers<unknown, State> = {
         return Response.json({
           schemaVersion: 1,
           label: "",
-          // namedLogo: "jsr", TODO: add icon to shields.io or simple-icons. temporary solution below.
-          logoSvg: await Deno.readTextFile(
-            new URL("../../static/logo.svg", import.meta.url),
-          ),
           message: `${packageResp.data.score}%`,
           labelColor: "rgb(247,223,30)",
           color: "rgb(8,51,68)",
-          logoWidth: "25",
         });
       }
     } else {
@@ -46,6 +41,9 @@ export const handler: Handlers<unknown, State> = {
       const shieldsUrl = new URL("https://img.shields.io/endpoint");
       shieldsUrl.search = url.search;
       shieldsUrl.searchParams.set("url", url.href);
+      shieldsUrl.searchParams.set("logo", "jsr");
+      shieldsUrl.searchParams.set("logoColor", "rgb(8,51,68)");
+      shieldsUrl.searchParams.set("logoSize", "auto");
 
       const res = await fetch(shieldsUrl);
 

frontend/routes/badges/scope.ts

@@ -25,14 +25,9 @@ export const handler: Handlers<unknown, State> = {
         return Response.json({
           schemaVersion: 1,
           label: "",
-          // namedLogo: "jsr", TODO: add icon to shields.io or simple-icons. temporary solution below.
-          logoSvg: await Deno.readTextFile(
-            new URL("../../static/logo.svg", import.meta.url),
-          ),
           message: `@${scopeResp.data.scope}`,
           labelColor: "rgb(247,223,30)",
           color: "rgb(8,51,68)",
-          logoWidth: "25",
         });
       }
     } else {
@@ -42,6 +37,9 @@ export const handler: Handlers<unknown, State> = {
       const shieldsUrl = new URL("https://img.shields.io/endpoint");
       shieldsUrl.search = url.search;
       shieldsUrl.searchParams.set("url", url.href);
+      shieldsUrl.searchParams.set("logo", "jsr");
+      shieldsUrl.searchParams.set("logoColor", "rgb(8,51,68)");
+      shieldsUrl.searchParams.set("logoSize", "auto");
 
       const res = await fetch(shieldsUrl);