blodemd 0.0.13 → 0.0.15

package/docs/components/docs/mobile-nav.tsx

@@ -109,82 +109,86 @@ export const MobileNav = ({
         side="bottom"
         sideOffset={14}
       >
-        <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
-          {tabs?.length ? (
-            <div className="flex flex-col gap-4">
-              <div className="text-sm font-medium text-muted-foreground">
-                Sections
-              </div>
-              <div className="flex flex-col gap-3">
-                {tabs.map((tab, index) => {
-                  const href =
-                    (tab.href ? resolveHref(tab.href, basePath) : undefined) ??
-                    (tab.slugPrefix
-                      ? toDocHref(tab.slugPrefix, basePath)
-                      : undefined);
-                  if (!href) {
-                    return null;
-                  }
-                  const isActive = index === activeTabIndex;
+        {open ? (
+          <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
+            {tabs?.length ? (
+              <div className="flex flex-col gap-4">
+                <div className="text-sm font-medium text-muted-foreground">
+                  Sections
+                </div>
+                <div className="flex flex-col gap-3">
+                  {tabs.map((tab, index) => {
+                    const href =
+                      (tab.href
+                        ? resolveHref(tab.href, basePath)
+                        : undefined) ??
+                      (tab.slugPrefix
+                        ? toDocHref(tab.slugPrefix, basePath)
+                        : undefined);
+                    if (!href) {
+                      return null;
+                    }
+                    const isActive = index === activeTabIndex;
 
-                  return (
+                    return (
+                      <MobileLink
+                        className={isActive ? "text-primary" : ""}
+                        href={href}
+                        key={tab.label}
+                        onOpenChange={setOpen}
+                        rel={
+                          tab.href && isExternalHref(tab.href)
+                            ? "noopener noreferrer"
+                            : undefined
+                        }
+                        target={
+                          tab.href && isExternalHref(tab.href)
+                            ? "_blank"
+                            : undefined
+                        }
+                      >
+                        {tab.label}
+                      </MobileLink>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : null}
+            {globalLinks.length > 0 ? (
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-3">
+                  {globalLinks.map((link) => (
                     <MobileLink
-                      className={isActive ? "text-primary" : ""}
-                      href={href}
-                      key={tab.label}
+                      href={link.href}
+                      key={link.label}
                       onOpenChange={setOpen}
-                      rel={
-                        tab.href && isExternalHref(tab.href)
-                          ? "noopener noreferrer"
-                          : undefined
-                      }
-                      target={
-                        tab.href && isExternalHref(tab.href)
-                          ? "_blank"
-                          : undefined
-                      }
+                      rel="noopener noreferrer"
+                      target="_blank"
                     >
-                      {tab.label}
+                      {link.label}
                     </MobileLink>
-                  );
-                })}
-              </div>
-            </div>
-          ) : null}
-          {globalLinks.length > 0 ? (
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-col gap-3">
-                {globalLinks.map((link) => (
-                  <MobileLink
-                    href={link.href}
-                    key={link.label}
-                    onOpenChange={setOpen}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    {link.label}
-                  </MobileLink>
-                ))}
+                  ))}
+                </div>
               </div>
-            </div>
-          ) : null}
-          {entries.map((entry) => {
-            if (entry.type === "page") {
-              return renderPageLink(entry);
-            }
+            ) : null}
+            {entries.map((entry) => {
+              if (entry.type === "page") {
+                return renderPageLink(entry);
+              }
 
-            return (
-              <div className="flex flex-col gap-4" key={entry.title}>
-                <div className="text-sm font-medium text-muted-foreground">
-                  {entry.title}
+              return (
+                <div className="flex flex-col gap-4" key={entry.title}>
+                  <div className="text-sm font-medium text-muted-foreground">
+                    {entry.title}
+                  </div>
+                  <div className="flex flex-col gap-3">
+                    {entry.items.map((item) => renderPageLink(item))}
+                  </div>
                 </div>
-                <div className="flex flex-col gap-3">
-                  {entry.items.map((item) => renderPageLink(item))}
-                </div>
-              </div>
-            );
-          })}
-        </div>
+              );
+            })}
+          </div>
+        ) : null}
       </PopoverContent>
     </Popover>
   );

package/docs/components/docs/sidebar-active-highlight.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { normalizePath } from "@repo/common";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+const ACTIVE_CLASSES = ["border-accent", "bg-accent", "text-foreground"];
+
+export const SidebarActiveHighlight = ({ basePath }: { basePath: string }) => {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const stripped = basePath
+      ? pathname.replace(new RegExp(`^${basePath}`), "")
+      : pathname;
+    const target = normalizePath(stripped) || "index";
+
+    const links = document.querySelectorAll<HTMLElement>(
+      "[data-sidebar-link][data-path]"
+    );
+    for (const link of links) {
+      const isActive = link.dataset.path === target;
+      if (isActive) {
+        link.dataset.active = "true";
+        link.classList.add(...ACTIVE_CLASSES);
+      } else {
+        delete link.dataset.active;
+        link.classList.remove(...ACTIVE_CLASSES);
+      }
+    }
+  }, [basePath, pathname]);
+
+  return null;
+};

package/docs/components/docs/sidebar-scroll-area.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 let savedScrollTop = 0;
 
@@ -13,7 +13,7 @@ export const SidebarScrollArea = ({
 }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const el = scrollRef.current;
     if (!el) {
       return;
@@ -21,12 +21,17 @@ export const SidebarScrollArea = ({
 
     if (savedScrollTop > 0) {
       el.scrollTop = savedScrollTop;
-    } else {
+      return;
+    }
+
+    // Defer to allow SidebarActiveHighlight to mark the active link first.
+    const id = requestAnimationFrame(() => {
       const active = el.querySelector<HTMLElement>("[data-active]");
       if (active) {
         active.scrollIntoView({ behavior: "instant", block: "center" });
       }
-    }
+    });
+    return () => cancelAnimationFrame(id);
   });
 
   useEffect(() => {

package/docs/components/git/repo-picker.tsx

@@ -49,13 +49,13 @@ import { GITHUB_INSTALL_STATE_KEY } from "@/lib/github-install";
 import { timeAgo } from "@/lib/time-ago";
 import { cn } from "@/lib/utils";
 
-export interface RepoPickerInstallation {
+interface RepoPickerInstallation {
   id: number;
   accountLogin: string;
   accountType: string;
 }
 
-export interface RepoPickerProps {
+interface RepoPickerProps {
   accessToken: string;
   installations: RepoPickerInstallation[];
   onAddAccount: () => void;
@@ -387,6 +387,9 @@ export const RepoPicker = ({
   const handlePick = (repo: RepoSummary) => {
     setSelected(repo);
     setBranch(repo.defaultBranch || "main");
+    // Reset the docs path so an edit made for a previous repo doesn't carry
+    // over to a freshly picked one.
+    setDocsPath("docs");
     setError(null);
   };
 

package/docs/components/mdx/index.tsx

@@ -2,6 +2,8 @@ import type { MDXComponents } from "mdx/types";
 import Link from "next/link";
 import type { ComponentProps } from "react";
 
+import { isExternalHref, resolveHref } from "@/lib/routes";
+
 import { Accordion, AccordionGroup } from "./accordion";
 import { AgentInstructions } from "./agent-instructions";
 import { Badge } from "./badge";
@@ -42,30 +44,36 @@ const Tree = Object.assign(
   }
 );
 
-const MdxLink = ({
-  href,
-  children,
-  ...props
-}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-  if (!href) {
-    return <a {...props}>{children}</a>;
-  }
-  const isExternal = href.startsWith("http");
-  if (isExternal) {
+const createMdxLink = (basePath: string, currentPath: string) => {
+  const MdxLink = ({
+    href,
+    children,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+    if (!href) {
+      return <a {...props}>{children}</a>;
+    }
+    if (isExternalHref(href)) {
+      return (
+        <a {...props} href={href} rel="noopener noreferrer" target="_blank">
+          {children}
+        </a>
+      );
+    }
     return (
-      <a {...props} href={href} rel="noopener noreferrer" target="_blank">
+      <Link href={resolveHref(href, basePath, currentPath)} {...props}>
         {children}
-      </a>
+      </Link>
     );
-  }
-  return (
-    <Link href={href} {...props}>
-      {children}
-    </Link>
-  );
+  };
+  MdxLink.displayName = "MdxLink";
+  return MdxLink;
 };
 
-export const mdxComponents: MDXComponents = {
+export const createMdxComponents = (
+  basePath = "",
+  currentPath = ""
+): MDXComponents => ({
   Accordion,
   AccordionGroup,
   AgentInstructions,
@@ -106,6 +114,8 @@ export const mdxComponents: MDXComponents = {
   View,
   ViewGroup,
   Warning,
-  a: MdxLink,
+  a: createMdxLink(basePath, currentPath),
   pre: CodeBlock,
-};
+});
+
+export const mdxComponents: MDXComponents = createMdxComponents();

package/docs/components/posthog-provider.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import posthogJs from "posthog-js";
+import { useEffect } from "react";
+
+const DEFAULT_POSTHOG_HOST = "https://us.i.posthogJs.com";
+
+interface PostHogProviderProps {
+  projectKey: string;
+  host?: string;
+}
+
+export const PostHogProvider = ({ projectKey, host }: PostHogProviderProps) => {
+  useEffect(() => {
+    if (!projectKey) {
+      return;
+    }
+    if (posthogJs.__loaded) {
+      return;
+    }
+    posthogJs.init(projectKey, {
+      api_host: host || DEFAULT_POSTHOG_HOST,
+      capture_pageleave: true,
+      capture_pageview: false,
+      person_profiles: "identified_only",
+    });
+  }, [projectKey, host]);
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    if (!(pathname && posthogJs.__loaded)) {
+      return;
+    }
+    const query = searchParams?.toString();
+    const url = query ? `${pathname}?${query}` : pathname;
+    posthogJs.capture("$pageview", { $current_url: url });
+  }, [pathname, searchParams]);
+
+  return null;
+};

package/docs/components/tenant-analytics.tsx

@@ -0,0 +1,49 @@
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { headers } from "next/headers";
+import Script from "next/script";
+import { Suspense } from "react";
+
+import {
+  decodeTenantAnalyticsHeader,
+  TENANT_HEADERS,
+} from "@/lib/tenant-headers";
+
+import { PostHogProvider } from "./posthog-provider";
+
+// Consent Mode v2 default-denied bootstrap. Replace with a real CMP when ready.
+const CONSENT_DEFAULTS_SCRIPT = `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('consent','default',{ad_storage:'denied',ad_user_data:'denied',ad_personalization:'denied',analytics_storage:'denied',wait_for_update:500});`;
+
+export const TenantAnalytics = async () => {
+  if (process.env.VERCEL_ENV !== "production") {
+    return null;
+  }
+
+  const headerStore = await headers();
+  const analytics = decodeTenantAnalyticsHeader(
+    headerStore.get(TENANT_HEADERS.ANALYTICS)
+  );
+  if (!analytics) {
+    return null;
+  }
+
+  return (
+    <>
+      {analytics.ga4?.measurementId ? (
+        <>
+          <Script id="ga-consent-defaults" strategy="afterInteractive">
+            {CONSENT_DEFAULTS_SCRIPT}
+          </Script>
+          <GoogleAnalytics gaId={analytics.ga4.measurementId} />
+        </>
+      ) : null}
+      {analytics.posthog?.projectKey ? (
+        <Suspense fallback={null}>
+          <PostHogProvider
+            host={analytics.posthog.host}
+            projectKey={analytics.posthog.projectKey}
+          />
+        </Suspense>
+      ) : null}
+    </>
+  );
+};

package/docs/components/third-parties.tsx

@@ -5,6 +5,9 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { usePathname } from "next/navigation";
 
 const PRIVATE_PATH_PREFIXES = ["/app", "/oauth"];
+const DEFAULT_BLODEMD_GA_ID = "G-WE1RCNSC4E";
+const BLODEMD_GA_ID =
+  process.env.NEXT_PUBLIC_BLODEMD_GA_ID?.trim() || DEFAULT_BLODEMD_GA_ID;
 
 const isPrivatePath = (pathname: string | null) => {
   if (!pathname) {
@@ -23,7 +26,7 @@ export const ThirdParties = () => {
   return (
     <>
       <SpeedInsights />
-      <GoogleAnalytics gaId="G-WE1RCNSC4E" />
+      {BLODEMD_GA_ID ? <GoogleAnalytics gaId={BLODEMD_GA_ID} /> : null}
     </>
   );
 };

package/docs/components/ui/copy-button.tsx

@@ -6,7 +6,7 @@ import {
 } from "blode-icons-react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import type { MouseEvent } from "react";
 
 import { Button as ButtonPrimitive } from "@/components/animate-ui/primitives/buttons/button";
@@ -68,6 +68,16 @@ const CopyButton = ({
     onChange: onCopiedChange,
     value: copied,
   });
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    },
+    []
+  );
 
   const handleCopy = useCallback(
     async (e: MouseEvent<HTMLButtonElement>) => {
@@ -80,7 +90,10 @@ const CopyButton = ({
           await navigator.clipboard.writeText(content);
           setIsCopied(true);
           onCopiedChange?.(true, content);
-          setTimeout(() => {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(() => {
             setIsCopied(false);
             onCopiedChange?.(false);
           }, delay);
@@ -102,6 +115,7 @@ const CopyButton = ({
       {...props}
     >
       <span
+        aria-hidden="true"
         className="inline-flex animate-in fade-in-0 zoom-in-95 duration-200 motion-reduce:animate-none"
         data-slot="copy-button-icon"
         key={isCopied ? "check" : "copy"}