add css vars and style breadcrumbs

fern-api · Jun 10, 2024 · a4dcb1c · a4dcb1c
1 parent b44c7aa
commit a4dcb1c
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@babel/preset-typescript": "^7.24.1",
     "@next/eslint-plugin-next": "^14.1.0",
     "@playwright/test": "^1.44.1",
+    "@radix-ui/colors": "^3.0.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/is-ci": "^3.0.4",

diff --git a/packages/ui/static-bundle/astro.config.mjs b/packages/ui/static-bundle/astro.config.mjs
@@ -5,5 +5,10 @@ import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
+    vite: {
+        build: {
+            minify: false,
+        },
+    },
     integrations: [react(), tailwind()],
 });
diff --git a/packages/ui/static-bundle/package.json b/packages/ui/static-bundle/package.json
@@ -14,9 +14,11 @@
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-ui/components": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
+    "@fern-ui/ui": "workspace:*",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.10.1",
+    "clsx": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.4"

diff --git a/packages/ui/static-bundle/src/components/EndpointUrl.tsx b/packages/ui/static-bundle/src/components/EndpointUrl.tsx
@@ -8,15 +8,17 @@ export const EndpointUrl: React.FC<{
     const { copyToClipboard, wasJustCopied } = useCopyToClipboard(endpoint.slug);
     return (
         <FernTooltipProvider>
-            <FernTooltip
-                content={wasJustCopied ? "Copied!" : "Copy to clipboard"}
-                open={wasJustCopied ? true : undefined}
-            >
-                <div className="flex gap-2" onClick={copyToClipboard}>
-                    <FernTag colorScheme="blue">{endpoint.method}</FernTag>
-                    <div>{endpoint.slug}</div>
-                </div>
-            </FernTooltip>
+            <div className="flex">
+                <FernTooltip
+                    content={wasJustCopied ? "Copied!" : "Copy to clipboard"}
+                    open={wasJustCopied ? true : undefined}
+                >
+                    <div className="flex gap-2" onClick={copyToClipboard}>
+                        <FernTag colorScheme="blue">{endpoint.method}</FernTag>
+                        <div>{endpoint.slug}</div>
+                    </div>
+                </FernTooltip>
+            </div>
         </FernTooltipProvider>
     );
 };
diff --git a/packages/ui/static-bundle/src/pages/[...path].astro b/packages/ui/static-bundle/src/pages/[...path].astro
@@ -1,12 +1,15 @@
 ---
 import { FernNavigation } from "@fern-api/fdr-sdk";
 import { NodeCollector } from "@fern-api/fdr-sdk/navigation";
+import { getColorVariables } from "@fern-ui/ui/src/next-app/utils/getColorVariables";
 import type { GetStaticPaths } from "astro";
+import cn from "clsx";
 import DocsMainContent from "../components/DocsMainContent.astro";
-import { getRoot } from "../utils";
+import { getDocs } from "../utils";
 
 export const getStaticPaths = (async () => {
-    const root = await getRoot("gemini.ferndocs.com");
+    const docs = await getDocs("gemini.ferndocs.com");
+    const root = FernNavigation.utils.convertLoadDocsForUrlResponse(docs);
     return NodeCollector.collect(root)
         .getPageSlugs()
         .map((path) => {
@@ -18,7 +21,8 @@ export const getStaticPaths = (async () => {
 
 const { path } = Astro.params;
 
-const root = await getRoot("gemini.ferndocs.com");
+const docs = await getDocs("gemini.ferndocs.com");
+const root = FernNavigation.utils.convertLoadDocsForUrlResponse(docs);
 const node = FernNavigation.utils.findNode(root, path.split("/"));
 
 if (node.type === "notFound") {
@@ -28,15 +32,40 @@ if (node.type === "notFound") {
 if (node.type === "redirect") {
     return Astro.redirect(node.redirect);
 }
+
+const colorVariables = getColorVariables(
+    {
+        dark: undefined,
+        light: undefined,
+    },
+    docs.definition.filesV2
+);
 ---
 
 <html>
     <head>
         <title>{node.node.title}</title>
+        <style
+            is:global
+            define:vars={Object.fromEntries(
+                Object.entries(colorVariables.light).map(([key, value]) => [key.replace(/^--/, ""), value])
+            )}
+        ></style>
     </head>
     <body>
-        <ul>
-            {node.breadcrumb.map((crumb) => <li>{crumb}</li>)}
+        <ul class="mb-8 flex">
+            {
+                node.breadcrumb.map((crumb, index) => (
+                    <li
+                        class={cn(
+                            index &&
+                                "flex items-center before:border-t before:border-r before:block before:border-current before:size-[0.5em] before:rotate-45 before:mx-2"
+                        )}
+                    >
+                        {crumb}
+                    </li>
+                ))
+            }
         </ul>
         <DocsMainContent node={node.node} />
     </body>

diff --git a/packages/ui/static-bundle/src/utils.ts b/packages/ui/static-bundle/src/utils.ts
@@ -1,6 +1,6 @@
-import { FdrClient, FernNavigation } from "@fern-api/fdr-sdk";
+import { DocsV2Read, FdrClient } from "@fern-api/fdr-sdk";
 
-export const getRoot = async (url: string): Promise<FernNavigation.RootNode> => {
+export const getDocs = async (url: string): Promise<DocsV2Read.LoadDocsForUrlResponse> => {
     const client = new FdrClient({
         environment: process.env.NEXT_PUBLIC_FDR_ORIGIN ?? "https://registry.buildwithfern.com",
     });
@@ -11,5 +11,5 @@ export const getRoot = async (url: string): Promise<FernNavigation.RootNode> =>
         throw new Error("Failed to fetch docs");
     }
 
-    return FernNavigation.utils.convertLoadDocsForUrlResponse(docs.body);
+    return docs.body;
 };
diff --git a/packages/ui/static-bundle/tailwind.config.mjs b/packages/ui/static-bundle/tailwind.config.mjs
@@ -9,7 +9,6 @@ export default {
     ...baseConfig,
     content: [
         "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
-        "../tailwind.config.js",
         path.join(path.dirname(require.resolve("@fern-ui/components")), "**/*.{ts,tsx}"),
     ],
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml