HangerThem
88c8676d3f
- Only preload the post cover and latest-post image instead of every image - Drop in-post image quality from 100 to 90 and add responsive sizes - Downscale 2940px screenshots to 1800px; convert linkboard-old to WebP (3.1 MB -> 60 KB) - Make CodeWrapper a server component; only CopyButton ships to the client - Pin the Mermaid CDN script to an exact version for reproducible builds
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { CopyButton } from '@/components/ui/CopyButton'
|
|
import { getTextContent } from '@/lib/react-node-text'
|
|
|
|
type CodeWrapperProps = {
|
|
language?: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function CodeWrapper({ language, children }: CodeWrapperProps) {
|
|
const text = getTextContent(children).replace(/\n$/, '')
|
|
const lineCount = text.length === 0 ? 1 : text.split('\n').length
|
|
|
|
return (
|
|
<div className="rounded-md overflow-x-auto border border-border bg-fg/10">
|
|
<div className="flex items-center gap-2 px-2 h-6 border-b border-border w-full">
|
|
<div className="space-x-1" aria-hidden="true">
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
</div>
|
|
<span className="text-xs text-fg-dim font-mono">{language ?? 'code'}</span>
|
|
<CopyButton textToCopy={text} className="ml-auto" />
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div
|
|
className="select-none text-right py-2 px-3 border-r border-border font-mono text-sm leading-6 min-w-6"
|
|
aria-hidden="true"
|
|
>
|
|
{Array.from({ length: lineCount }, (_, i) => (
|
|
<span className="block text-fg-dim" key={i}>
|
|
{i + 1}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<pre className="flex-1 p-2 m-0 overflow-x-auto text-fg-dim font-mono text-sm leading-6">
|
|
{children}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|