diff --git a/packages/website/package.json b/packages/website/package.json index 3c35f2c62..e859afe4a 100644 --- a/packages/website/package.json +++ b/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" diff --git a/packages/website/src/components/client-only.tsx b/packages/website/src/components/client-only.tsx deleted file mode 100644 index b1830e60c..000000000 --- a/packages/website/src/components/client-only.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client'; - -import { useEffect, useState } from 'react'; -import type { ReactNode } from 'react'; - -type ClientOnlyProps = { - children: ReactNode; -}; - -export const ClientOnly = ({ children }: ClientOnlyProps) => { - const [hasMounted, setHasMounted] = useState(false); - - useEffect(() => { - setHasMounted(true); - }, []); - - if (!hasMounted) { - return null; - } - - return children; -}; diff --git a/packages/website/src/components/code.tsx b/packages/website/src/components/code.tsx index e5dd00ba3..3957c4b4a 100644 --- a/packages/website/src/components/code.tsx +++ b/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) => ( - - - -); +export const Code = async ({ code, ...rest }: CodeProps) => { + const html = highlighter.codeToHtml(code.trim(), { + lang: 'tsx', + theme: 'lucy', + }); + + return
; +}; diff --git a/packages/website/src/components/mdx.tsx b/packages/website/src/components/mdx.tsx index 3d18caf5a..db905d7f4 100644 --- a/packages/website/src/components/mdx.tsx +++ b/packages/website/src/components/mdx.tsx @@ -81,14 +81,14 @@ export const components = { pre: ({ children, ...rest }: any) => ( ), blockquote: ({ children, ...rest }: any) => { return ( -
-
+
+
{ 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, diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts index 4646ab3e5..5f9ac00bb 100644 --- a/packages/website/vite.config.ts +++ b/packages/website/vite.config.ts @@ -8,5 +8,9 @@ export default defineConfig(({ mode }) => { }, }; } - return {}; + return { + build: { + target: ['chrome89', 'edge89', 'safari15', 'firefox89'], + }, + }; }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a40cf27d0..67f053c61 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -589,9 +589,6 @@ importers: packages/website: dependencies: - bright: - specifier: ^0.8.4 - version: 0.8.4(react@18.3.0-canary-b30030471-20240117) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -629,6 +626,9 @@ importers: prettier-plugin-tailwindcss: specifier: ^0.5.11 version: 0.5.11(prettier@3.2.4) + shiki: + specifier: 1.0.0-beta.0 + version: 1.0.0-beta.0 tailwindcss: specifier: ^3.4.1 version: 3.4.1 @@ -888,10 +888,6 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 - /@code-hike/lighter@0.8.1: - resolution: {integrity: sha512-St4rPmB7C2EWmAK1sAbvD3lZeM7UDInVDMjQDzEDsu4Q3B3AqF25vXedQK51U0UO0MCOASgBBdTiNwvJAfIqMQ==} - dev: false - /@emotion/hash@0.9.1: resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} @@ -1376,6 +1372,10 @@ packages: requiresBuild: true optional: true + /@shikijs/core@1.0.0-beta.0: + resolution: {integrity: sha512-uicyrkx379Q5sxQuGV3kduHPWIAkjxmeA5A4J6syscx8wiEyIV06i/Q6s9GeKLCb857Hi90H8e/FoFSbcjnZsw==} + dev: true + /@sindresorhus/is@4.6.0: resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==} engines: {node: '>=10'} @@ -2455,16 +2455,6 @@ packages: fill-range: 7.0.1 dev: true - /bright@0.8.4(react@18.3.0-canary-b30030471-20240117): - resolution: {integrity: sha512-SBlcJje8EDh3lLihqr0W27yHCVpuh3NReziNxZOwUzuaShqq+V/imY+J+AvJdTIOifiCQkyIsgVWKAj5G/eOyg==} - peerDependencies: - react: ^18 - dependencies: - '@code-hike/lighter': 0.8.1 - react: 18.3.0-canary-b30030471-20240117 - server-only: 0.0.1 - dev: false - /browserslist@4.22.2: resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -5776,6 +5766,7 @@ packages: /server-only@0.0.1: resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==} + dev: true /set-function-length@1.2.0: resolution: {integrity: sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==} @@ -5822,6 +5813,12 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + /shiki@1.0.0-beta.0: + resolution: {integrity: sha512-CcP0IhEDQ3LWfJC44cfxfId9pjJi9Nephl8DxgrL4tKWprI/oz6deZyL0vB+XWxhTx/1uonzWQKaSQPwKx5dTA==} + dependencies: + '@shikijs/core': 1.0.0-beta.0 + dev: true + /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: