diff --git a/.changeset/silent-phones-own.md b/.changeset/silent-phones-own.md new file mode 100644 index 0000000000..da51cf5b64 --- /dev/null +++ b/.changeset/silent-phones-own.md @@ -0,0 +1,7 @@ +--- +'nextra': patch +'nextra-theme-blog': patch +'nextra-theme-docs': patch +--- + +feat: New layout implementation diff --git a/examples/blog/next.config.mjs b/examples/blog/next.config.mjs index 6c1f3b59a9..fcbcfbfbf6 100644 --- a/examples/blog/next.config.mjs +++ b/examples/blog/next.config.mjs @@ -7,5 +7,21 @@ const withNextra = nextra({ }) export default withNextra({ - reactStrictMode: true + reactStrictMode: true, + webpack(config) { + // To make pnpm workspace and themes work in this monorepo, we need to + // disable webpack's symlinks feature here. Otherwise the symlink + // `./node_modules/nextra-theme-docs/style.css` will be resolved as + // `../../packages/nextra-theme-docs/style.css`, which doesn't contain + // `node_modules` in its full path and webpack can't pick the correct loader + // for it due to: + // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305 + // This is not needed for normal usage, only a workaround for this + // development repository. + config.resolve = { + ...config.resolve, + symlinks: false + } + return config + } }) diff --git a/examples/blog/pages/_app.js b/examples/blog/pages/_app.js deleted file mode 100644 index 7f0719e1ff..0000000000 --- a/examples/blog/pages/_app.js +++ /dev/null @@ -1,8 +0,0 @@ -import 'nextra-theme-blog/style.css' - -export default function MyApp({ Component, pageProps }) { - // Use the layout defined at the page level, if available - const getLayout = Component.getLayout || (page => page) - - return getLayout() -} diff --git a/examples/docs/next.config.js b/examples/docs/next.config.js index 635ef549ec..97c69e8276 100644 --- a/examples/docs/next.config.js +++ b/examples/docs/next.config.js @@ -8,5 +8,21 @@ const withNextra = require('nextra')({ }) module.exports = withNextra({ - reactStrictMode: true + reactStrictMode: true, + webpack(config) { + // To make pnpm workspace and themes work in this monorepo, we need to + // disable webpack's symlinks feature here. Otherwise the symlink + // `./node_modules/nextra-theme-docs/style.css` will be resolved as + // `../../packages/nextra-theme-docs/style.css`, which doesn't contain + // `node_modules` in its full path and webpack can't pick the correct loader + // for it due to: + // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305 + // This is not needed for normal usage, only a workaround for this + // development repository. + config.resolve = { + ...config.resolve, + symlinks: false + } + return config + } }) diff --git a/examples/docs/src/pages/get-started.mdx b/examples/docs/src/pages/get-started.mdx index c791c9c30b..819b88aba3 100644 --- a/examples/docs/src/pages/get-started.mdx +++ b/examples/docs/src/pages/get-started.mdx @@ -15,43 +15,45 @@ Nextra works like a Next.js plugin, and it accepts a theme config (layout) to re 1. Install Next.js, Nextra and React - - +import { Tabs, Tab } from 'nextra-theme-docs/tabs' + + + ```bash npm i react react-dom next nextra ``` - - + + ```bash yarn add react react-dom next nextra ``` - - + + ```bash pnpm i react react-dom next nextra ``` - - + + 2. Install the docs theme - - + + ```bash npm i nextra-theme-docs ``` - - + + ```bash yarn add nextra-theme-docs ``` - - + + ```bash pnpm i nextra-theme-docs ``` - - + + 3. Create the following Next.js config and theme config under the root directory: diff --git a/examples/docs/src/pages/themes/docs/bleed.mdx b/examples/docs/src/pages/themes/docs/bleed.mdx index 57d80d5d50..e9c3967906 100644 --- a/examples/docs/src/pages/themes/docs/bleed.mdx +++ b/examples/docs/src/pages/themes/docs/bleed.mdx @@ -7,21 +7,23 @@ A built-in component provided by `nextra-theme-docs`. When wrapping your content with ``, it will be slightly wider than the container and will overflow on both sides. - +import Bleed from 'nextra-theme-docs/bleed' + +
_There is nothing to writing. All you do is sit down at a typewriter and **bleed**._ — Ernest Hemingway
- + It provides a better reading experience when you want to present some graphical information, which normally looks nicer in a larger size. For example you can put text, image, video or any component inside: - +