Merge pull request #29 from thefrontside/tm/better-registry-integration

Show registry information on detail pages

www/components/api.tsx

@@ -1,6 +1,6 @@
 import { call, type Operation } from "effection";
 import type { JSXElement } from "revolution";
-import type { Package, RenderableDocNode } from "../hooks/use-package.tsx";
+import { type RenderableDocNode, usePackage } from "../hooks/use-package.tsx";
 import type {
   ClassDef,
   InterfaceDef,
@@ -21,28 +21,28 @@ import {
 import { useMDX } from "../hooks/use-mdx.tsx";
 import { useMarkdown } from "../hooks/use-markdown.tsx";
 
-interface DescriptionProps {
-  pkg: Package;
-}
+export function API() {
+  return function* (): Operation<JSXElement> {
+    const pkg = yield* usePackage();
 
-export function* API({ pkg }: DescriptionProps): Operation<JSXElement> {
-  const elements: JSXElement[] = [];
-  for (const exportName of Object.keys(pkg.docs)) {
-    const nodes = pkg.docs[exportName];
-    for (const node of nodes) {
-      const { MDXDoc = () => <></> } = node;
+    const elements: JSXElement[] = [];
+    for (const exportName of Object.keys(pkg.docs)) {
+      const nodes = pkg.docs[exportName];
+      for (const node of nodes) {
+        const { MDXDoc = () => <></> } = node;
 
-      elements.push(
-        <section id={node.id}>
-          {yield* Type({ node })}
-          <div class="pl-2 -mt-5">
-            <MDXDoc />
-          </div>
-        </section>,
-      );
+        elements.push(
+          <section id={node.id}>
+            {yield* Type({ node })}
+            <div class="pl-2 -mt-5">
+              <MDXDoc />
+            </div>
+          </section>,
+        );
+      }
     }
-  }
-  return <>{elements}</>;
+    return <>{elements}</>;
+  };
 }
 
 interface TypeProps {

www/components/index/item.tsx

@@ -0,0 +1,22 @@
+import { initPackageContext, PackageConfig } from "../../hooks/use-package.tsx";
+
+interface PackageIndexItemProps {
+  config: PackageConfig;
+}
+
+export function PackageIndexItem(props: PackageIndexItemProps) {
+  return function* () {
+    const pkg = yield* initPackageContext(props.config);
+
+    return (
+      <li class="px-0">
+        <h3>
+          <a href={pkg.workspace}>{pkg.workspace}</a>
+        </h3>
+        <p>
+          <pkg.MDXDescription />
+        </p>
+      </li>
+    );
+  };
+}

www/components/package/cicle-score.tsx

@@ -0,0 +1,34 @@
+import { PackageDetailsResult } from "../../hooks/use-jsr-client.ts";
+
+export function CircleScore({ details }: { details: PackageDetailsResult }) {
+  return (
+    <>
+      <h3 class="text-2xl flex justify-center">
+        <img src="/assets/images/jsr-logo.svg" alt="JSR Logo" class="mr-2" />
+        Score
+      </h3>
+      <div
+        class={`h-32 w-32 justify-center aspect-square rounded-full p-1.5 ${
+          getScoreBgColorClass(
+            details.score,
+          )
+        }`}
+        style="background-image: conic-gradient(transparent, transparent 100%, #e7e8e8 100%)"
+      >
+        <span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center text-3xl font-bold">
+          {details.score}%
+        </span>
+      </div>
+    </>
+  );
+}
+
+/** @src https://github.com/jsr-io/jsr/blob/34603e996f56eb38e811619f8aebc6e5c4ad9fa7/frontend/utils/score_ring_color.ts */
+export function getScoreBgColorClass(score: number): string {
+  if (score >= 90) {
+    return "bg-green-500";
+  } else if (score >= 60) {
+    return "bg-yellow-500";
+  }
+  return "bg-red-500";
+}

www/components/package/cross.tsx

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  stroke="currentColor"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M6 18L18 6M6 6l12 12"
+  >
+  </path>
+</svg>;

www/components/exports.tsx → www/components/package/exports.tsx

@@ -1,16 +1,16 @@
 import { join } from "jsr:@std/[email protected]";
-import type { JSXElement } from "revolution/jsx-runtime";
 
-import type { Package, RenderableDocNode } from "../hooks/use-package.tsx";
-import { Keyword, Punctuation } from "./tokens.tsx";
+import {
+  type RenderableDocNode,
+  usePackage,
+} from "../../hooks/use-package.tsx";
+import { Keyword, Punctuation } from "../tokens.tsx";
 
-export function Exports({ pkg }: { pkg: Package }): JSXElement {
-  return (
-    <>
-      <h2>Exports</h2>{" "}
-      <p class="text-slate-800">
-        Click an export to jump to it's documentation.
-      </p>
+export function PackageExports() {
+  return function* () {
+    const pkg = yield* usePackage();
+
+    return (
       <>
         {Object.keys(pkg.docs).map((exportName) => (
           <PackageExport
@@ -20,8 +20,8 @@ export function Exports({ pkg }: { pkg: Package }): JSXElement {
           />
         ))}
       </>
-    </>
-  );
+    );
+  };
 }
 
 interface PackageExportOptions {

www/components/package/header.tsx

@@ -0,0 +1,59 @@
+import { usePackage } from "../../hooks/use-package.tsx";
+import { PackageSourceLink } from "./source-link.tsx";
+
+export function PackageHeader() {
+  return function* () {
+    const pkg = yield* usePackage();
+
+    return (
+      <header class="space-y-3 mb-5">
+        <div class="[&>*]:inline-block">
+          <span class="text-3xl font-bold align-middle">
+            @{pkg.scope}
+            <span>/</span>
+            {pkg.name}
+          </span>
+          <span class="text-3xl mx-2 align-middle">v{pkg.version}</span>
+          {yield* PackageSourceLink()()}
+        </div>
+        <div class="space-x-1">
+          <a href={`${pkg.jsr}`} class="inline-block align-middle">
+            <img src={`${pkg.jsrBadge}`} alt="JSR Badge" />
+          </a>
+          <a href={`${pkg.npm}`} class="inline-block align-middle">
+            <img
+              src={`${pkg.npmVersionBadge}`}
+              alt="NPM Badge with published version"
+            />
+          </a>
+          <a
+            href={`${pkg.bundlephobia}`}
+            class="inline-block align-middle"
+          >
+            <img src={`${pkg.bundleSizeBadge}`} alt="Bundle size badge" />
+          </a>
+          <a
+            href={`${pkg.bundlephobia}`}
+            class="inline-block align-middle"
+          >
+            <img
+              src={`${pkg.dependencyCountBadge}`}
+              class="inline-block"
+              alt="Dependency count badge"
+            />
+          </a>
+          <a
+            href={`${pkg.bundlephobia}`}
+            class="inline-block align-middle"
+          >
+            <img
+              src={`${pkg.treeShakingSupportBadge}`}
+              class="inline-block"
+              alt="Tree shaking support badge"
+            />
+          </a>
+        </div>
+      </header>
+    );
+  };
+}