improvement(docs): instant copy button + performance optimizations (#3076 )

2026-01-30 09:18:01 -05:00 · 2026-01-29 23:24:58 -08:00
8 changed files with 22 additions and 59 deletions
--- a/apps/docs/app/[lang]/[[...slug]]/page.tsx
+++ b/apps/docs/app/[lang]/[[...slug]]/page.tsx
@@ -1,5 +1,6 @@
 import type React from 'react'
 import { findNeighbour } from 'fumadocs-core/page-tree'
+import { Pre } from 'fumadocs-ui/components/codeblock'
 import defaultMdxComponents from 'fumadocs-ui/mdx'
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
@@ -21,6 +22,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
  const data = page.data as PageData
  const MDX = data.body
  const baseUrl = 'https://docs.sim.ai'
+  const markdownContent = await data.getText('processed')

  const pageTreeRecord = source.pageTree as Record<string, any>
  const pageTree =
@@ -200,7 +202,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
        <div className='relative mt-6 sm:mt-0'>
          <div className='absolute top-1 right-0 flex items-center gap-2'>
            <div className='hidden sm:flex'>
-              <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
+              <LLMCopyButton content={markdownContent} />
            </div>
            <PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
          </div>
@@ -211,7 +213,11 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
          <MDX
            components={{
              ...defaultMdxComponents,
-              CodeBlock,
+              pre: (props: React.HTMLAttributes<HTMLPreElement>) => (
+                <CodeBlock {...props}>
+                  <Pre>{props.children}</Pre>
+                </CodeBlock>
+              ),
              h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
                <Heading as='h1' {...props} />
              ),
--- a/apps/docs/app/[lang]/layout.tsx
+++ b/apps/docs/app/[lang]/layout.tsx
@@ -3,6 +3,7 @@ import { defineI18nUI } from 'fumadocs-ui/i18n'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { RootProvider } from 'fumadocs-ui/provider/next'
 import { Geist_Mono, Inter } from 'next/font/google'
+import Script from 'next/script'
 import {
  SidebarFolder,
  SidebarItem,
@@ -17,11 +18,13 @@ import '../global.css'
 const inter = Inter({
  subsets: ['latin'],
  variable: '--font-geist-sans',
+  display: 'swap',
 })

 const geistMono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-geist-mono',
+  display: 'swap',
 })

 const { provider } = defineI18nUI(i18n, {
@@ -93,10 +96,9 @@ export default async function Layout({ children, params }: LayoutProps) {
          type='application/ld+json'
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
-        {/* OneDollarStats Analytics - CDN script handles everything automatically */}
-        <script defer src='https://assets.onedollarstats.com/stonks.js' />
      </head>
      <body className='flex min-h-screen flex-col font-sans'>
+        <Script src='https://assets.onedollarstats.com/stonks.js' strategy='lazyOnload' />
        <RootProvider i18n={provider(lang)}>
          <Navbar />
          <DocsLayout
--- a/apps/docs/app/[lang]/not-found.tsx
+++ b/apps/docs/app/[lang]/not-found.tsx
@@ -9,7 +9,7 @@ export default function NotFound() {
    <DocsPage>
      <DocsBody>
        <div className='flex min-h-[60vh] flex-col items-center justify-center text-center'>
-          <h1 className='mb-4 bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] bg-clip-text font-bold text-8xl text-transparent'>
+          <h1 className='mb-4 bg-gradient-to-b from-[#47d991] to-[#33c482] bg-clip-text font-bold text-8xl text-transparent'>
            404
          </h1>
          <h2 className='mb-2 font-semibold text-2xl text-foreground'>Page Not Found</h2>
--- a/apps/docs/components/icons.tsx
+++ b/apps/docs/components/icons.tsx
@@ -5127,11 +5127,11 @@ export function SimilarwebIcon(props: SVGProps<SVGSVGElement>) {
      <path
        d='M22.099 5.781c-1.283 -2 -3.14 -3.67 -5.27 -4.52l-0.63 -0.213a7.433 7.433 0 0 0 -2.15 -0.331c-2.307 0.01 -4.175 1.92 -4.175 4.275a4.3 4.3 0 0 0 0.867 2.602l-0.26 -0.342c0.124 0.186 0.26 0.37 0.417 0.556 0.663 0.802 1.604 1.635 2.822 2.58 2.999 2.32 4.943 4.378 5.104 6.93 0.038 0.344 0.062 0.696 0.062 1.051 0 1.297 -0.283 2.67 -0.764 3.635h0.005s-0.207 0.377 -0.077 0.487c0.066 0.057 0.21 0.1 0.46 -0.053a12.104 12.104 0 0 0 3.4 -3.33 12.111 12.111 0 0 0 2.088 -6.635 12.098 12.098 0 0 0 -1.9 -6.692zm-9.096 8.718 -1.878 -1.55c-3.934 -2.87 -5.98 -5.966 -4.859 -9.783a8.73 8.73 0 0 1 0.37 -1.016v-0.004s0.278 -0.583 -0.327 -0.295a12.067 12.067 0 0 0 -6.292 9.975 12.11 12.11 0 0 0 2.053 7.421 9.394 9.394 0 0 0 2.154 2.168H4.22c4.148 3.053 7.706 1.446 7.706 1.446h0.003a4.847 4.847 0 0 0 2.962 -4.492 4.855 4.855 0 0 0 -1.889 -3.87z'
        fill='currentColor'
-       />
+      />
    </svg>
  )
 }
-        
+
 export function CalComIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
--- a/apps/docs/components/navbar/navbar.tsx
+++ b/apps/docs/components/navbar/navbar.tsx
@@ -8,13 +8,7 @@ import { ThemeToggle } from '@/components/ui/theme-toggle'

 export function Navbar() {
  return (
-    <nav
-      className='sticky top-0 z-50 border-border/50 border-b'
-      style={{
-        backdropFilter: 'blur(25px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(25px) saturate(180%)',
-      }}
-    >
+    <nav className='sticky top-0 z-50 border-border/50 border-b bg-background/80 backdrop-blur-md backdrop-saturate-150'>
      {/* Desktop: Single row layout */}
      <div className='hidden h-16 w-full items-center lg:flex'>
        <div
--- a/apps/docs/components/page-actions.tsx
+++ b/apps/docs/components/page-actions.tsx
@@ -1,45 +1,13 @@
 'use client'

-import { useState } from 'react'
 import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button'
 import { Check, Copy } from 'lucide-react'

-const cache = new Map<string, string>()
-
-export function LLMCopyButton({
-  markdownUrl,
-}: {
-  /**
-   * A URL to fetch the raw Markdown/MDX content of page
-   */
-  markdownUrl: string
-}) {
-  const [isLoading, setLoading] = useState(false)
-  const [checked, onClick] = useCopyButton(async () => {
-    const cached = cache.get(markdownUrl)
-    if (cached) return navigator.clipboard.writeText(cached)
-
-    setLoading(true)
-
-    try {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          'text/plain': fetch(markdownUrl).then(async (res) => {
-            const content = await res.text()
-            cache.set(markdownUrl, content)
-
-            return content
-          }),
-        }),
-      ])
-    } finally {
-      setLoading(false)
-    }
-  })
+export function LLMCopyButton({ content }: { content: string }) {
+  const [checked, onClick] = useCopyButton(() => navigator.clipboard.writeText(content))

  return (
    <button
-      disabled={isLoading}
      onClick={onClick}
      className='flex cursor-pointer items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-2 text-muted-foreground/60 text-sm leading-none transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
      aria-label={checked ? 'Copied to clipboard' : 'Copy page content'}
--- a/apps/docs/components/ui/code-block.tsx
+++ b/apps/docs/components/ui/code-block.tsx
@@ -17,23 +17,16 @@ export function CodeBlock(props: React.ComponentProps<typeof FumadocsCodeBlock>)
  return (
    <FumadocsCodeBlock
      {...props}
-      Actions={({ children, className }) => (
+      Actions={({ className }) => (
        <div className={cn('empty:hidden', className)}>
-          {/* Custom copy button */}
          <button
            type='button'
            aria-label={copied ? 'Copied Text' : 'Copy Text'}
            onClick={(e) => {
-              const pre = (e.currentTarget as HTMLElement)
-                .closest('.nd-codeblock')
-                ?.querySelector('pre')
+              const pre = (e.currentTarget as HTMLElement).closest('figure')?.querySelector('pre')
              if (pre) handleCopy(pre.textContent || '')
            }}
-            className={cn(
-              'cursor-pointer rounded-md p-2 transition-all',
-              'border border-border bg-background/80 hover:bg-muted',
-              'backdrop-blur-sm'
-            )}
+            className='cursor-pointer rounded-md p-2 text-muted-foreground transition-colors hover:text-foreground'
          >
            <span className='flex items-center justify-center'>
              {copied ? (
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -5131,7 +5131,7 @@ export function SimilarwebIcon(props: SVGProps<SVGSVGElement>) {
    </svg>
  )
 }
-  
+
 export function CalComIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg