9a6f4e8c4b
This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { SandpackCodeViewer, SandpackFiles, SandpackProvider } from '@codesandbox/sandpack-react'
|
|
import { useTheme } from 'next-themes'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export const Code = (props: any) => {
|
|
return <code {...props} />
|
|
}
|
|
|
|
export function CodeBlock({ code }: { code: SandpackFiles }) {
|
|
const [isClientSide, setIsClientSide] = useState(false)
|
|
const { theme } = useTheme()
|
|
useEffect(() => setIsClientSide(true), [])
|
|
|
|
// This is to avoid hydration mismatch between the server and the client because of the useTheme.
|
|
if (!isClientSide) {
|
|
return null
|
|
}
|
|
|
|
const trimmedCode = Object.fromEntries(
|
|
Object.entries(code).map(([key, value]) => [key, (value as string).trim()])
|
|
)
|
|
return (
|
|
<div className="code-example">
|
|
<SandpackProvider
|
|
className="sandpack"
|
|
key={`sandpack-${theme}`}
|
|
template="react-ts"
|
|
options={{ activeFile: Object.keys(code)[0] }}
|
|
customSetup={{
|
|
dependencies: {
|
|
'@tldraw/assets': 'latest',
|
|
tldraw: 'latest',
|
|
},
|
|
}}
|
|
files={trimmedCode}
|
|
theme={theme === 'dark' ? 'dark' : 'light'}
|
|
>
|
|
<SandpackCodeViewer />
|
|
</SandpackProvider>
|
|
</div>
|
|
)
|
|
}
|