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,14 @@
-import { Code as BrightCode } from 'bright';
-
-import { ClientOnly } from './client-only.js';
-import theme from '../theme.json';
+import { highlighter } from '../lib/index.js';
 
 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 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/lib/index.ts

@@ -0,0 +1,8 @@
+import { getHighlighter } from 'shiki';
+
+import theme from '../theme.json';
+
+export const highlighter: any = await getHighlighter({
+ langs: ['tsx'],
+ themes: [theme as any],
+});

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,

packages/website/vite.config.ts

@@ -8,5 +8,9 @@ export default defineConfig(({ mode }) => {
  },
  };
  }
- return {};
+ return {
+ build: {
+ target: ['chrome89', 'edge89', 'safari15', 'firefox89'],
+ },
+ };
 });