From 4e3b34e36ad7f0f6902779c91e3f3fbd4482347b Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Sun, 25 Aug 2024 11:44:15 +0200 Subject: [PATCH] fix: sandpack ssr styles (#298) * fb sandpack.css * SandpackCSS * doc --- docs/getting-started/authoring.mdx | 12 +++++++++++- src/app/layout.tsx | 4 ++++ src/app/sandpack-styles.tsx | 16 ++++++++++++++++ src/components/mdx/index.tsx | 8 ++++++-- 4 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 src/app/sandpack-styles.tsx diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx index 34dce7c1..3ca73e2f 100644 --- a/docs/getting-started/authoring.mdx +++ b/docs/getting-started/authoring.mdx @@ -61,7 +61,10 @@ Responsive grid. #### `Sandpack` -See [Sandpack docs](https://sandpack.codesandbox.io/docs/getting-started/usage). +Inline sandboxes. + +> [!NOTE] +> See Sandpack [official documentation](https://sandpack.codesandbox.io/docs/getting-started/usage) for full usage. ```tsx +> [!TIP] +> Sandpack UI SSR-rendering[^1] is also supported (out of the box). + +[^1]: https://sandpack.codesandbox.io/docs/guides/ssr#nextjs-app-dir + + + #### `Codesandbox` ```md diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 44702ea3..1a6cd3bf 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,6 +5,7 @@ import type { Metadata } from 'next' import { ThemeProvider } from 'next-themes' import { Inconsolata, Inter } from 'next/font/google' import './globals.css' +import { SandpackCSS } from './sandpack-styles' const inter = Inter({ subsets: ['latin'] }) const inconsolata = Inconsolata({ subsets: ['latin'] }) @@ -56,6 +57,9 @@ export default function RootLayout({ }>) { return ( + + + { + useServerInsertedHTML(() => { + return