ad87a6c7fd
Did some digging into why the page size had ballooned, and it turns out it was due to viz.js taking up half the bundle size. So I've dropped the Dot custom mdx component, and reverted to having all pages served from one page using getStaticPaths. Might optimize a bit more later, but for now page size first load JS went from 816KB to 272KB so that's a big improvement.
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import CopyToClipboard from 'shared/components/copy-to-clipboard'
|
|
//import Dot from './dot.js'
|
|
|
|
const names = {
|
|
js: 'javascript',
|
|
bash: 'bash',
|
|
sh: 'shell',
|
|
json: 'JSON',
|
|
yaml: 'YAML',
|
|
}
|
|
|
|
const Highlight = (props) => {
|
|
|
|
let language = 'txt'
|
|
if (props.language) language = props.language
|
|
if (props.children?.props?.className) {
|
|
language = props.children.props.className.split('-').pop()
|
|
}
|
|
//if (language === 'dot') return <Dot>{props.children}</Dot>
|
|
|
|
const preProps = {
|
|
className: `language-${language} hljs text-base lg:text-lg whitespace-pre overflow-scroll pr-4`
|
|
}
|
|
if (props.raw) preProps.dangerouslySetInnerHTML = { __html: props.raw }
|
|
|
|
return (
|
|
<div className="hljs my-4">
|
|
<div className={`
|
|
flex flex-row justify-between
|
|
text-xs uppercase font-bold text-neutral-content
|
|
mt-1 border-b border-neutral-content border-opacity-25
|
|
py-1 mb-2 lg:text-sm
|
|
`}>
|
|
<span> </span>
|
|
<span>{names[language] ? names[language] : language}</span>
|
|
<CopyToClipboard content={props.children} />
|
|
</div>
|
|
<pre {...preProps}>
|
|
{props.children}
|
|
</pre>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Highlight
|
|
|