More minimal JS

fern-api · Jun 10, 2024 · 3739098 · 3739098
1 parent 0745379
commit 3739098
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 41 deletions.
diff --git a/packages/ui/static-bundle/src/components/ApiPage.astro b/packages/ui/static-bundle/src/components/ApiPage.astro
@@ -1,6 +1,6 @@
 ---
 import type { FernNavigation } from "@fern-api/fdr-sdk";
-import { EndpointUrl } from "./EndpointUrl";
+import EndpointUrl from "./EndpointUrl.astro";
 
 type Props = {
     node: FernNavigation.NavigationNodeApiLeaf;
@@ -9,4 +9,4 @@ type Props = {
 const { node } = Astro.props;
 ---
 
-{node.type === "endpoint" && <EndpointUrl endpoint={node} client:load />}
+{node.type === "endpoint" && <EndpointUrl endpoint={node} />}
diff --git a/packages/ui/static-bundle/src/components/EndpointUrl.astro b/packages/ui/static-bundle/src/components/EndpointUrl.astro
@@ -0,0 +1,45 @@
+---
+import type { FernNavigation } from "@fern-api/fdr-sdk";
+import Tooltip from "./Tooltip.astro";
+
+type Props = {
+    endpoint: FernNavigation.EndpointNode;
+};
+
+const { endpoint } = Astro.props;
+---
+
+<div class="flex items-center gap-1">
+    <div class="rounded bg-blue-100 px-2 leading-loose">{endpoint.method}</div>
+    <Tooltip>
+        <fern-endpoint
+            class="block font-mono hover:bg-gray-200 px-2 transition-colors rounded cursor-pointer leading-loose"
+        >
+            {endpoint.slug}
+        </fern-endpoint>
+    </Tooltip>
+</div>
+
+<script>
+    class Endpoint extends HTMLElement {
+        constructor() {
+            super();
+            this.addEventListener("click", async (event) => {
+                event.preventDefault();
+
+                try {
+                    await navigator.clipboard.writeText(this.innerText);
+                    const popover = this.parentElement?.querySelector<HTMLElement>("[popover]");
+                    if (popover) {
+                        popover.innerText = "Copied!";
+                        popover.showPopover();
+                    }
+                } catch (error) {
+                    console.error(error);
+                }
+            });
+        }
+    }
+
+    customElements.define("fern-endpoint", Endpoint);
+</script>
diff --git a/packages/ui/static-bundle/src/components/EndpointUrl.tsx b/packages/ui/static-bundle/src/components/EndpointUrl.tsx
diff --git a/packages/ui/static-bundle/src/components/Tooltip.astro b/packages/ui/static-bundle/src/components/Tooltip.astro
@@ -0,0 +1,39 @@
+---
+
+---
+
+<fern-tooltip class="relative">
+    <slot id="test" />
+    <div id="test" popover class="m-0 -translate-x-1/2">test</div>
+</fern-tooltip>
+
+<script>
+    class Tooltip extends HTMLElement {
+        constructor() {
+            super();
+
+            const popover = this.querySelector<HTMLElement>("[popover]");
+
+            if (popover) {
+                const initialText = popover.innerText;
+
+                this.addEventListener("mouseenter", () => {
+                    const { top, left, width, height } = this.getBoundingClientRect();
+
+                    popover.style.top = `${top + height}px`;
+                    popover.style.left = `${left + width / 2}px`;
+
+                    popover.showPopover();
+                });
+
+                this.addEventListener("mouseleave", () => {
+                    popover.hidePopover();
+                    popover.innerText = initialText;
+                    popover.removeAttribute("style");
+                });
+            }
+        }
+    }
+
+    customElements.define("fern-tooltip", Tooltip);
+</script>
diff --git a/packages/ui/static-bundle/src/pages/[...path].astro b/packages/ui/static-bundle/src/pages/[...path].astro
@@ -1,7 +1,6 @@
 ---
 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 DocsMainContent from "../components/DocsMainContent.astro";
 import { getDocs } from "../utils";
@@ -31,25 +30,11 @@ 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 class="mb-8 flex">