feat: add docs copy page (#7872)

apps/v4/app/(app)/docs/[[...slug]]/page.tsx

@@ -10,6 +10,7 @@ import { findNeighbour } from "fumadocs-core/server"
 
 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
+import { DocsCopyPage } from "@/components/docs-copy-page"
 import { DocsTableOfContents } from "@/components/docs-toc"
 import { OpenInV0Cta } from "@/components/open-in-v0-cta"
 import { Badge } from "@/registry/new-york-v4/ui/badge"
@@ -102,12 +103,14 @@ export default async function Page(props: {
                 <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
                   {doc.title}
                 </h1>
-                <div className="flex items-center gap-2 pt-1.5">
+                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:border-t-0 sm:bg-transparent sm:px-0 sm:pt-1.5 sm:backdrop-blur-none">
+                  {/* @ts-expect-error - revisit fumadocs types. */}
+                  <DocsCopyPage page={doc.content} />
                   {neighbours.previous && (
                     <Button
                       variant="secondary"
                       size="icon"
-                      className="extend-touch-target size-8 shadow-none md:size-7"
+                      className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
                       asChild
                     >
                       <Link href={neighbours.previous.url}>
@@ -160,7 +163,7 @@ export default async function Page(props: {
             <MDX components={mdxComponents} />
           </div>
         </div>
-        <div className="mx-auto flex h-16 w-full max-w-2xl items-center gap-2 px-4 md:px-0">
+        <div className="mx-auto hidden h-16 w-full max-w-2xl items-center gap-2 px-4 sm:flex md:px-0">
           {neighbours.previous && (
             <Button
               variant="secondary"

apps/v4/app/(app)/llm/[[...slug]]/route.ts

@@ -11,6 +11,7 @@ export async function GET(
 ) {
   const slug = (await params).slug
   const page = source.getPage(slug)
+
   if (!page) {
     notFound()
   }

apps/v4/components/docs-copy-page.tsx

@@ -4,30 +4,19 @@ import { IconCheck, IconCopy } from "@tabler/icons-react"
 
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
 
 export function DocsCopyPage({ page }: { page: string }) {
   const { copyToClipboard, isCopied } = useCopyToClipboard()
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 pl-1.5 md:h-7 [&>svg]:size-3.5"
-          onClick={() => copyToClipboard(page)}
-        >
-          {isCopied ? <IconCheck /> : <IconCopy />} Copy Page
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Copy as Markdown</p>
-      </TooltipContent>
-    </Tooltip>
+    <Button
+      variant="secondary"
+      size="sm"
+      className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
+      onClick={() => copyToClipboard(page)}
+    >
+      {isCopied ? <IconCheck /> : <IconCopy />}
+      Copy Page
+    </Button>
   )
 }

apps/v4/components/site-footer.tsx

@@ -2,10 +2,10 @@ import { siteConfig } from "@/lib/config"
 
 export function SiteFooter() {
   return (
-    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent dark:bg-transparent">
+    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent group-has-[.docs-nav]/body:pb-20 group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent">
       <div className="container-wrapper px-4 xl:px-6">
         <div className="flex h-(--footer-height) items-center justify-between">
-          <div className="text-muted-foreground w-full text-center text-xs leading-loose sm:text-sm">
+          <div className="text-muted-foreground w-full px-1 text-center text-xs leading-loose sm:text-sm">
             Built by{" "}
             <a
               href={siteConfig.links.twitter}