Unified the header

thefrontside · Jan 9, 2025 · 1e33c6b · 1e33c6b
1 parent 448dbcb
commit 1e33c6b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 30 deletions.
diff --git a/components/package/source-link.tsx b/components/package/source-link.tsx
@@ -12,7 +12,7 @@ export function* PackageSourceLink({
   return (
     <a
       href={pkg.source.toString()}
-      class={`flex flex-row items-center rounded-full bg-gray-200 px-2 py-1 ${props.class ?? ""}`}
+      class={`flex flex-row h-10 items-center rounded-full bg-gray-200 px-2 py-1 ${props.class ?? ""}`}
     >
       <IconGithub />
       <span class="px-1">{pkg.ref.repository.nameWithOwner}</span>

diff --git a/routes/api-minor-symbol-route.tsx b/routes/api-minor-symbol-route.tsx
@@ -1,7 +1,6 @@
 import { type JSXElement, useParams } from "revolution";
 
 import { Type } from "../components/api.tsx";
-import { Keyword } from "../components/tokens.tsx";
 import {
   defaultLinkResolver,
   ResolveLinkFunction,
@@ -13,10 +12,9 @@ import { useAppHtml } from "./app.html.tsx";
 import { fetchMinorVersions } from "./api-index-route.tsx";
 import { all, Operation } from "effection";
 import { DocsPages, isDocsPages } from "../hooks/use-deno-doc.tsx";
-import { ApiReference } from "./api-reference-route.tsx";
+import { ApiReference, SymbolHeader } from "./api-reference-route.tsx";
 import { Alert } from "./api-minor-index-route.tsx";
 import { compare, extractVersion } from "../lib/semver.ts";
-import { PackageSourceLink } from "../components/package/source-link.tsx";
 
 export function apiMinorSymbolRoute({
   library,
@@ -162,16 +160,10 @@ export function apiMinorSymbolRoute({
                             .
                           </p>
                         </Alert>
-                      ) : <></>}
-                      <h1>
-                        <Keyword>
-                          {page.kind === "typeAlias"
-                            ? "type alias "
-                            : page.kind}
-                        </Keyword>{" "}
-                        {page.name}
-                        {yield* PackageSourceLink({ pkg })}
-                      </h1>
+                      ) : (
+                        <></>
+                      )}
+                      {yield* SymbolHeader({ pkg, page })}
                       <>{elements}</>
                     </>
                   ),
@@ -197,4 +189,4 @@ export function apiMinorSymbolRoute({
       }
     },
   };
-}
+}
diff --git a/routes/api-reference-route.tsx b/routes/api-reference-route.tsx
@@ -21,6 +21,7 @@ import { useAppHtml } from "./app.html.tsx";
 import { IconExternal } from "../components/icons/external.tsx";
 import { extractVersion } from "../lib/semver.ts";
 import { PackageSourceLink } from "../components/package/source-link.tsx";
+import { Package } from "../resources/package.ts";
 
 export function apiReferenceRoute({
   library,
@@ -121,17 +122,7 @@ export function apiReferenceRoute({
                   ref: ref,
                   content: (
                     <>
-                      <header class="flex flex-row space-x-2">
-                        <h1 class="mb-0">
-                          <Keyword>
-                            {page.kind === "typeAlias"
-                              ? "type alias "
-                              : page.kind}
-                          </Keyword>{" "}
-                          {page.name}
-                        </h1>
-                        {yield* PackageSourceLink({ pkg, class: "text-lg" })}
-                      </header>
+                      {yield* SymbolHeader({ pkg, page })}
                       <>{elements}</>
                     </>
                   ),
@@ -199,10 +190,7 @@ export function* ApiReference({
           <h3 class="text-xl flex flex-col">
             <span class="font-bold">API Reference</span>
             <span>
-              <a
-                href={ref.getUrl().toString()}
-                class="font-semibold text-base"
-              >
+              <a href={ref.getUrl().toString()} class="font-semibold text-base">
                 {version}{" "}
                 <IconExternal
                   class="inline-block align-baseline"
@@ -220,6 +208,21 @@ export function* ApiReference({
   );
 }
 
+export function* SymbolHeader({ page, pkg }: { page: DocPage; pkg: Package }) {
+  return (
+    <header class="flex flex-row items-center space-x-2">
+      <h1 class="mb-0">
+        <Keyword>
+          {page.kind === "typeAlias" ? "type alias " : page.kind}
+        </Keyword>{" "}
+        {page.name}
+      </h1>
+      {yield* PackageSourceLink({ pkg })}
+    </header>
+  );
+}
+
+
 function* Menu({
   pages,
   current,