add edit on github

Author: lherman-cs

app/content/[[...slug]]/page.tsx

@@ -9,6 +9,7 @@ import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { GithubIcon } from 'lucide-react';
 
 export default async function Page(props: PageProps<'/content/[[...slug]]'>) {
   const params = await props.params;
@@ -18,7 +19,20 @@ export default async function Page(props: PageProps<'/content/[[...slug]]'>) {
   const MDX = page.data.body;
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage toc={page.data.toc} full={page.data.full}
+    >
+
+      <div className="flex mb-4">
+        <a
+          href={`https://github.com/pulsebeamdev/docs/blob/main/content/${page.path}`}
+          rel="noreferrer noopener"
+          target="_blank"
+          className="inline-flex items-center gap-2 rounded-md border bg-fd-secondary px-2 py-1 text-xs font-medium text-fd-secondary-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
+        >
+          <GithubIcon className="size-3" />
+          Edit on GitHub
+        </a>
+      </div>
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>

cli.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "node_modules/@fumadocs/cli/dist/schema/default.json",
+  "aliases": {
+    "uiDir": "./components/ui",
+    "componentsDir": "./components",
+    "blockDir": "./components",
+    "cssDir": "./styles",
+    "libDir": "./lib"
+  },
+  "baseDir": "",
+  "uiLibrary": "radix-ui",
+  "commands": {}
+}

components/layout/docs/client.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  use,
+  useMemo,
+} from 'react';
+import { cn } from '../../../lib/cn';
+import { useSidebar } from '../sidebar/base';
+import { usePathname } from 'fumadocs-core/framework';
+import Link from 'fumadocs-core/link';
+import type { SidebarTab } from '../sidebar/tabs';
+import { isTabActive } from '../sidebar/tabs/dropdown';
+import { useIsScrollTop } from 'fumadocs-ui/utils/use-is-scroll-top';
+
+export const LayoutContext = createContext<{
+  isNavTransparent: boolean;
+} | null>(null);
+
+export function LayoutContextProvider({
+  navTransparentMode = 'none',
+  children,
+}: {
+  navTransparentMode?: 'always' | 'top' | 'none';
+  children: ReactNode;
+}) {
+  const isTop =
+    useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;
+  const isNavTransparent =
+    navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';
+
+  return (
+    <LayoutContext
+      value={useMemo(
+        () => ({
+          isNavTransparent,
+        }),
+        [isNavTransparent],
+      )}
+    >
+      {children}
+    </LayoutContext>
+  );
+}
+
+export function LayoutHeader(props: ComponentProps<'header'>) {
+  const { isNavTransparent } = use(LayoutContext)!;
+
+  return (
+    <header data-transparent={isNavTransparent} {...props}>
+      {props.children}
+    </header>
+  );
+}
+
+export function LayoutBody({
+  className,
+  style,
+  children,
+  ...props
+}: ComponentProps<'div'>) {
+  const { collapsed } = useSidebar();
+
+  return (
+    <div
+      id="nd-docs-layout"
+      className={cn(
+        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
+        className,
+      )}
+      data-sidebar-collapsed={collapsed}
+      style={
+        {
+          gridTemplate: `"sidebar header toc"
+        "sidebar toc-popover toc"
+        "sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
+          '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
+          '--fd-docs-row-2':
+            'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
+          '--fd-docs-row-3':
+            'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
+          '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
+          ...style,
+        } as object
+      }
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function LayoutTabs({
+  options,
+  ...props
+}: ComponentProps<'div'> & {
+  options: SidebarTab[];
+}) {
+  const pathname = usePathname();
+  const selected = useMemo(() => {
+    return options.findLast((option) => isTabActive(option, pathname));
+  }, [options, pathname]);
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'flex flex-row items-end gap-6 overflow-auto [grid-area:main]',
+        props.className,
+      )}
+    >
+      {options.map((option, i) => (
+        <Link
+          key={i}
+          href={option.url}
+          className={cn(
+            'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',
+            option.unlisted && selected !== option && 'hidden',
+            selected === option && 'border-fd-primary text-fd-primary',
+          )}
+        >
+          {option.title}
+        </Link>
+      ))}
+    </div>
+  );
+}