feat(#626): Allow specifying logoColor when generating badge (#629)

In this PR:

- Allow specifying `logoColor` when generating badge, fallback to
`rgb(8,51,68)` if none is explicitly set, resolves #626
- Update documentation
- Update e2e tests

Author: alectrocute

e2e/main_test.ts

@@ -332,18 +332,17 @@ Deno.test("[GET /badges/@luca/flag] works", async (t) => {
     assertNotMatch(text, /please use https/);
   });
 
-  // Skipping: These are not registered with shields.io yet
-  // await t.step("Package score badge", async () => {
-  //   const res = await fetch(`${JSR_URL}badges/@luca/flag/score`);
-  //   const text = await res.text();
-  //   assertEquals(res.status, 200);
-  //   assertNotMatch(text, /please use https/);
-  // });
+  await t.step("Package score badge", async () => {
+    const res = await fetch(`${JSR_URL}badges/@luca/flag/score`);
+    const text = await res.text();
+    assertEquals(res.status, 200);
+    assertNotMatch(text, /please use https/);
+  });
 
-  // await t.step("Scope badge", async () => {
-  //   const res = await fetch(`${JSR_URL}badges/@luca`);
-  //   const text = await res.text();
-  //   assertEquals(res.status, 200);
-  //   assertNotMatch(text, /please use https/);
-  // });
+  await t.step("Scope badge", async () => {
+    const res = await fetch(`${JSR_URL}badges/@luca`);
+    const text = await res.text();
+    assertEquals(res.status, 200);
+    assertNotMatch(text, /please use https/);
+  });
 });

frontend/docs/badges.md

@@ -86,3 +86,22 @@ To include it in a Markdown document, use the following code, replacing
   <img src="https://jsr.io/badges/@<scope>" alt="" />
 </a>
 ```
+
+## Custom Badge Styling
+
+These badges can be customized by adding query parameters to the URL, for
+example:
+
+```
+https://jsr.io/badges/@<scope>/<package>?color=blue&labelColor=121212&logoColor=red
+```
+
+Here's how it looks:
+
+[![JSR Scope](https://jsr.io/badges/@luca?color=blue&labelColor=121212&logoColor=red)](https://jsr.io/@luca)
+
+The supported style-related query parameters can be found in the
+[Shields.io documentation](https://shields.io/badges/endpoint-badge#:~:text=Query%20Parameters).
+
+> Note: `logoSize`, `logo`, `url` and `cacheSeconds` are not supported and if
+> provided, they will be ignored.

frontend/routes/badges/package.ts

@@ -37,10 +37,13 @@ export const handler: Handlers<unknown, State> = {
       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");
       shieldsUrl.searchParams.set("cacheSeconds", "300");
 
+      if (!ctx.url.searchParams.has("logoColor")) {
+        shieldsUrl.searchParams.set("logoColor", "rgb(8,51,68)");
+      }
+
       const res = await fetch(shieldsUrl);
 
       return new Response(res.body, {

frontend/routes/badges/package_score.ts

@@ -41,11 +41,12 @@ export const handler: Handlers<unknown, State> = {
       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");
       shieldsUrl.searchParams.set("cacheSeconds", "300");
 
-      console.log(shieldsUrl.href);
+      if (!ctx.url.searchParams.has("logoColor")) {
+        shieldsUrl.searchParams.set("logoColor", "rgb(8,51,68)");
+      }
 
       const res = await fetch(shieldsUrl);
 

frontend/routes/badges/scope.ts

@@ -37,10 +37,13 @@ export const handler: Handlers<unknown, State> = {
       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");
       shieldsUrl.searchParams.set("cacheSeconds", "300");
 
+      if (!ctx.url.searchParams.has("logoColor")) {
+        shieldsUrl.searchParams.set("logoColor", "rgb(8,51,68)");
+      }
+
       const res = await fetch(shieldsUrl);
 
       return new Response(res.body, {