From 1a7d0a619a937764f8c11ba74b259fea9fe47985 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Sat, 2 Nov 2024 11:19:13 +0100 Subject: [PATCH] fix: sandpack theme --- src/app/layout.tsx | 2 +- src/components/mdx/Sandpack/Sandpack.tsx | 51 ++++++++++++++++++------ 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 08a39e46..4da438d8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -61,7 +61,7 @@ export default function RootLayout({ - {children} + {children} ) diff --git a/src/components/mdx/Sandpack/Sandpack.tsx b/src/components/mdx/Sandpack/Sandpack.tsx index 8346acb3..500f6b62 100644 --- a/src/components/mdx/Sandpack/Sandpack.tsx +++ b/src/components/mdx/Sandpack/Sandpack.tsx @@ -1,15 +1,23 @@ import cn from '@/lib/cn' import { crawl } from '@/utils/docs' import { - Sandpack as SP, - type SandpackFile, + SandpackCodeEditor, + SandpackLayout, + SandpackPreview, + SandpackProvider, type SandpackFiles, - type SandpackProps, + type SandpackProviderProps, } from '@codesandbox/sandpack-react' import fs from 'node:fs' import path from 'node:path' -type Files = Record> +// https://tailwindcss.com/docs/configuration#referencing-in-java-script +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from '../../../../tailwind.config' +const fullConfig = resolveConfig(tailwindConfig) +// console.log('fullConfig', fullConfig.theme.colors) +// console.log(fullConfig.theme.fontSize.sm) +// console.log(fullConfig.theme.fontFamily.mono) function getSandpackDependencies(folder: string) { const pkgPath = `${folder}/package.json` @@ -21,7 +29,7 @@ function getSandpackDependencies(folder: string) { async function getSandpackFiles( folder: string, - files: Files = {}, + files: SandpackFiles = {}, extensions = ['js', 'ts', 'jsx', 'tsx', 'css'], ) { const filepaths = await crawl( @@ -39,7 +47,7 @@ async function getSandpackFiles( return { ...acc, [key]: { - ...file, + ...((typeof file !== 'string' && file) || undefined), code: fs.readFileSync(filepath, 'utf-8'), }, } @@ -50,17 +58,14 @@ async function getSandpackFiles( export const Sandpack = async ({ className, folder, - files, ...props -}: { +}: SandpackProviderProps & { className: string folder?: string - files?: Files -} & Omit) => { +}) => { // console.log('folder', folder) - const _files = folder ? await getSandpackFiles(folder, files) : files - // console.log('_files', _files) + const _files = folder ? await getSandpackFiles(folder, props.files) : props.files const pkgDeps = folder ? getSandpackDependencies(folder) : null const dependencies = pkgDeps ?? props.customSetup?.dependencies @@ -77,7 +82,27 @@ export const Sandpack = async ({ return (
- + + + + + +
) }