Skip to content

Commit f718079

Browse files
waleedlatif1waleedlatif1
authored
improvement(docs): instant copy button + performance optimizations (#3076)
1 parent dd2f0c6 commit f718079

File tree

8 files changed

+22
-59
lines changed

8 files changed

+22
-59
lines changed

‎apps/docs/app/[lang]/[[...slug]]/page.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type React from 'react'
22
import { findNeighbour } from 'fumadocs-core/page-tree'
3+
import { Pre } from 'fumadocs-ui/components/codeblock'
34
import defaultMdxComponents from 'fumadocs-ui/mdx'
45
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
56
import { ChevronLeft, ChevronRight } from 'lucide-react'
@@ -21,6 +22,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
2122
const data = page.data as PageData
2223
const MDX = data.body
2324
const baseUrl = 'https://docs.sim.ai'
25+
const markdownContent = await data.getText('processed')
2426

2527
const pageTreeRecord = source.pageTree as Record<string, any>
2628
const pageTree =
@@ -200,7 +202,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
200202
<div className='relative mt-6 sm:mt-0'>
201203
<div className='absolute top-1 right-0 flex items-center gap-2'>
202204
<div className='hidden sm:flex'>
203-
<LLMCopyButton markdownUrl={`${page.url}.mdx`} />
205+
<LLMCopyButton content={markdownContent} />
204206
</div>
205207
<PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
206208
</div>
@@ -211,7 +213,11 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
211213
<MDX
212214
components={{
213215
...defaultMdxComponents,
214-
CodeBlock,
216+
pre: (props: React.HTMLAttributes<HTMLPreElement>) => (
217+
<CodeBlock {...props}>
218+
<Pre>{props.children}</Pre>
219+
</CodeBlock>
220+
),
215221
h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
216222
<Heading as='h1' {...props} />
217223
),

‎apps/docs/app/[lang]/layout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { defineI18nUI } from 'fumadocs-ui/i18n'
33
import { DocsLayout } from 'fumadocs-ui/layouts/docs'
44
import { RootProvider } from 'fumadocs-ui/provider/next'
55
import { Geist_Mono, Inter } from 'next/font/google'
6+
import Script from 'next/script'
67
import {
78
SidebarFolder,
89
SidebarItem,
@@ -17,11 +18,13 @@ import '../global.css'
1718
const inter = Inter({
1819
subsets: ['latin'],
1920
variable: '--font-geist-sans',
21+
display: 'swap',
2022
})
2123

2224
const geistMono = Geist_Mono({
2325
subsets: ['latin'],
2426
variable: '--font-geist-mono',
27+
display: 'swap',
2528
})
2629

2730
const { provider } = defineI18nUI(i18n, {
@@ -93,10 +96,9 @@ export default async function Layout({ children, params }: LayoutProps) {
9396
type='application/ld+json'
9497
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
9598
/>
96-
{/* OneDollarStats Analytics - CDN script handles everything automatically */}
97-
<script defer src='https://assets.onedollarstats.com/stonks.js' />
9899
</head>
99100
<body className='flex min-h-screen flex-col font-sans'>
101+
<Script src='https://assets.onedollarstats.com/stonks.js' strategy='lazyOnload' />
100102
<RootProvider i18n={provider(lang)}>
101103
<Navbar />
102104
<DocsLayout

‎apps/docs/app/[lang]/not-found.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function NotFound() {
99
<DocsPage>
1010
<DocsBody>
1111
<div className='flex min-h-[60vh] flex-col items-center justify-center text-center'>
12-
<h1 className='mb-4 bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] bg-clip-text font-bold text-8xl text-transparent'>
12+
<h1 className='mb-4 bg-gradient-to-b from-[#47d991] to-[#33c482] bg-clip-text font-bold text-8xl text-transparent'>
1313
404
1414
</h1>
1515
<h2 className='mb-2 font-semibold text-2xl text-foreground'>Page Not Found</h2>

‎apps/docs/components/icons.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5127,11 +5127,11 @@ export function SimilarwebIcon(props: SVGProps<SVGSVGElement>) {
51275127
<path
51285128
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'
51295129
fill='currentColor'
5130-
/>
5130+
/>
51315131
</svg>
51325132
)
51335133
}
5134-
5134+
51355135
export function CalComIcon(props: SVGProps<SVGSVGElement>) {
51365136
return (
51375137
<svg

‎apps/docs/components/navbar/navbar.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,7 @@ import { ThemeToggle } from '@/components/ui/theme-toggle'
88

99
export function Navbar() {
1010
return (
11-
<nav
12-
className='sticky top-0 z-50 border-border/50 border-b'
13-
style={{
14-
backdropFilter: 'blur(25px) saturate(180%)',
15-
WebkitBackdropFilter: 'blur(25px) saturate(180%)',
16-
}}
17-
>
11+
<nav className='sticky top-0 z-50 border-border/50 border-b bg-background/80 backdrop-blur-md backdrop-saturate-150'>
1812
{/* Desktop: Single row layout */}
1913
<div className='hidden h-16 w-full items-center lg:flex'>
2014
<div

‎apps/docs/components/page-actions.tsx‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,13 @@
11
'use client'
22

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

7-
const cache = new Map<string, string>()
8-
9-
export function LLMCopyButton({
10-
markdownUrl,
11-
}: {
12-
/**
13-
* A URL to fetch the raw Markdown/MDX content of page
14-
*/
15-
markdownUrl: string
16-
}) {
17-
const [isLoading, setLoading] = useState(false)
18-
const [checked, onClick] = useCopyButton(async () => {
19-
const cached = cache.get(markdownUrl)
20-
if (cached) return navigator.clipboard.writeText(cached)
21-
22-
setLoading(true)
23-
24-
try {
25-
await navigator.clipboard.write([
26-
new ClipboardItem({
27-
'text/plain': fetch(markdownUrl).then(async (res) => {
28-
const content = await res.text()
29-
cache.set(markdownUrl, content)
30-
31-
return content
32-
}),
33-
}),
34-
])
35-
} finally {
36-
setLoading(false)
37-
}
38-
})
6+
export function LLMCopyButton({ content }: { content: string }) {
7+
const [checked, onClick] = useCopyButton(() => navigator.clipboard.writeText(content))
398

409
return (
4110
<button
42-
disabled={isLoading}
4311
onClick={onClick}
4412
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'
4513
aria-label={checked ? 'Copied to clipboard' : 'Copy page content'}

‎apps/docs/components/ui/code-block.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,16 @@ export function CodeBlock(props: React.ComponentProps<typeof FumadocsCodeBlock>)
1717
return (
1818
<FumadocsCodeBlock
1919
{...props}
20-
Actions={({ children, className }) => (
20+
Actions={({ className }) => (
2121
<div className={cn('empty:hidden', className)}>
22-
{/* Custom copy button */}
2322
<button
2423
type='button'
2524
aria-label={copied ? 'Copied Text' : 'Copy Text'}
2625
onClick={(e) => {
27-
const pre = (e.currentTarget as HTMLElement)
28-
.closest('.nd-codeblock')
29-
?.querySelector('pre')
26+
const pre = (e.currentTarget as HTMLElement).closest('figure')?.querySelector('pre')
3027
if (pre) handleCopy(pre.textContent || '')
3128
}}
32-
className={cn(
33-
'cursor-pointer rounded-md p-2 transition-all',
34-
'border border-border bg-background/80 hover:bg-muted',
35-
'backdrop-blur-sm'
36-
)}
29+
className='cursor-pointer rounded-md p-2 text-muted-foreground transition-colors hover:text-foreground'
3730
>
3831
<span className='flex items-center justify-center'>
3932
{copied ? (

‎apps/sim/components/icons.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5131,7 +5131,7 @@ export function SimilarwebIcon(props: SVGProps<SVGSVGElement>) {
51315131
</svg>
51325132
)
51335133
}
5134-
5134+
51355135
export function CalComIcon(props: SVGProps<SVGSVGElement>) {
51365136
return (
51375137
<svg

0 commit comments

Comments
 (0)