feat(website): switch to shiki

packages/website/package.json

@@ -10,7 +10,6 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "bright": "^0.8.4",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.3",
     "jotai": "^2.6.3",
@@ -25,6 +24,7 @@
     "autoprefixer": "^10.4.17",
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.11",
+    "shiki": "1.0.0-beta.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "5.0.12"

packages/website/src/components/code.tsx

@@ -1,14 +1,21 @@
-import { Code as BrightCode } from 'bright';
+import { getHighlighter } from 'shiki';
 
-import { ClientOnly } from './client-only.js';
 import theme from '../theme.json';
 
 type CodeProps = {
   code: string;
 };
 
-export const Code = ({ code, ...rest }: CodeProps) => (
-  <ClientOnly>
-    <BrightCode lang="tsx" theme={theme} code={code.trim()} {...rest} />
-  </ClientOnly>
-);
+export const Code = async ({ code, ...rest }: CodeProps) => {
+  const highlighter = await getHighlighter({
+    langs: ['tsx'],
+    themes: [theme as any],
+  });
+
+  const html = highlighter.codeToHtml(code.trim(), {
+    lang: 'tsx',
+    theme: 'lucy',
+  });
+
+  return <div dangerouslySetInnerHTML={{ __html: html }} {...rest} />;
+};

packages/website/src/components/mdx.tsx

@@ -81,14 +81,14 @@ export const components = {
   pre: ({ children, ...rest }: any) => (
     <Code
       code={children.props.children}
-      className="code !mb-16 max-w-full !overflow-clip overflow-x-scroll !rounded-xl !bg-gray-900 !p-0 !font-mono !text-sm sm:!-mx-[0.75em] sm:max-w-[calc(100%+1.5em)] sm:!p-[0.5em] sm:!text-base [&>*]:!bg-gray-900"
+      className="code !mb-16 max-w-full overflow-clip overflow-x-scroll rounded-xl bg-gray-900 p-4 font-mono text-sm sm:-mx-3 sm:max-w-[calc(100%+1rem)] sm:p-6 sm:text-base [&>*]:!bg-gray-900"
       {...rest}
     />
   ),
   blockquote: ({ children, ...rest }: any) => {
     return (
-      <div className="overflow-clip rounded-xl bg-gray-950  sm:!-mx-[0.75em]">
-        <blockquote className="px-[calc(1rem+0.5em)] py-4" {...rest}>
+      <div className="overflow-clip rounded-xl bg-gray-950 sm:!-mx-3">
+        <blockquote className="p-4 sm:p-6" {...rest}>
           <div className="mb-1 flex items-center gap-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"

packages/website/src/templates/home-page.tsx

@@ -10,9 +10,7 @@ import { Start } from '../components/start.js';
 export const HomePage = async () => {
   const fileName = '../../README.md';
   const file = readFileSync(fileName, 'utf8');
-  const source = `## Introduction${
-    file.split('## Introduction')[1]?.split('## Tweets')[0]
-  }`;
+  const source = `## Introduction${file.split('## Introduction')[1]}`;
   const mdx = await compileMDX({
     source,
     components,