New layout implementation (#631)

* refactor loader and layout resolution * use global css import * test ssg * fix fast refresh * upadte snapshot * add changeset * remove @edge-runtime/vm * fix test * fix test * apply review suggestions * fix string template * update snapshot * deprecate the Nextra.* component * fix import * fix import * fix import
shuding · Aug 3, 2022 · c8605d6 · c8605d6
1 parent 96ed5c2
commit c8605d6
Show file tree

Hide file tree

Showing 29 changed files with 507 additions and 279 deletions.
diff --git a/.changeset/silent-phones-own.md 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
@@ -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
diff --git 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
@@ -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
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+import { Tabs, Tab } from 'nextra-theme-docs/tabs'
+
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i react react-dom next nextra 
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 2. Install the docs theme
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 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
@@ -7,21 +7,23 @@ A built-in component provided by `nextra-theme-docs`.
 When wrapping your content with `<Bleed>`, it will be slightly wider than the container
 and will overflow on both sides.
 
-<Nextra.Bleed>
+import Bleed from 'nextra-theme-docs/bleed'
+
+<Bleed>
   <div style={{ border: '1px solid #888', padding: '4rem 2.5rem', textAlign: 'center' }}>
     _There is nothing to writing. All you do is sit down at a typewriter and **bleed**._
 
     — Ernest Hemingway
 
   </div>
-</Nextra.Bleed>
+</Bleed>
 
 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:
 
-<Nextra.Bleed>
+<Bleed>
   <iframe
     width="100%"
     height="430"
@@ -30,33 +32,33 @@ For example you can put text, image, video or any component inside:
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowFullscreen
   />
-</Nextra.Bleed>
+</Bleed>
 
 You can even make it full-bleed using `<Bleed full>`:
 
-<Nextra.Bleed full>
+<Bleed full>
   ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
-</Nextra.Bleed>
+</Bleed>
 
 ## Usage
 
 ### MDX component
 
 ```mdx filename="bleed.mdx"
-<Nextra.Bleed>Hey, I can use **Markdown** syntax here.</Nextra.Bleed>
+<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
 
-<Nextra.Bleed full>
+<Bleed full>
   ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
-</Nextra.Bleed>
+</Bleed>
 
-<Nextra.Bleed full>
+<Bleed full>
   <iframe
     src="https://codesandbox.io/embed/swr-states-4une7"
     width="100%"
     height="500px"
     title="SWR-States"
   />
-</Nextra.Bleed>
+</Bleed>
 ```
 
 ### React Component

diff --git a/examples/docs/src/pages/themes/docs/callout.mdx b/examples/docs/src/pages/themes/docs/callout.mdx
@@ -4,48 +4,50 @@ A built-in component provided by `nextra-theme-docs`.
 
 ## Example
 
-<Nextra.Callout>
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>
   A **callout** is a short piece of text intended to attract attention.
-</Nextra.Callout>
+</Callout>
 
 ## Usage
 
 ### Default
 
-<Nextra.Callout emoji="👾">
+<Callout emoji="👾">
   **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
   Nishikado.
-</Nextra.Callout>
+</Callout>
 
 ```mdx
-<Nextra.Callout emoji="👾">
+<Callout emoji="👾">
   **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
   Nishikado.
-</Nextra.Callout>
+</Callout>
 ```
 
 ### Warning
 
-<Nextra.Callout type="warning" emoji="⚠️">
+<Callout type="warning" emoji="⚠️">
   This API will be deprecated soon.
-</Nextra.Callout>
+</Callout>
 
 ```mdx
-<Nextra.Callout type="warning" emoji="⚠️">
+<Callout type="warning" emoji="⚠️">
   This API will be deprecated soon.
-</Nextra.Callout>
+</Callout>
 ```
 
 ### Error
 
-<Nextra.Callout type="error" emoji="🚫">
+<Callout type="error" emoji="🚫">
   This is a dangerous feature that can cause everything to explode.
-</Nextra.Callout>
+</Callout>
 
 ```mdx
-<Nextra.Callout type="error" emoji="️🚫">
+<Callout type="error" emoji="️🚫">
   This is a dangerous feature that can cause everything to explode.
-</Nextra.Callout>
+</Callout>
 ```
 
 ### React Component

diff --git a/examples/docs/src/pages/themes/docs/index.mdx b/examples/docs/src/pages/themes/docs/index.mdx
@@ -1,50 +1,53 @@
 # Docs Theme
 
-<Nextra.Callout>This website is built with the docs theme.</Nextra.Callout>
+import Callout from 'nextra-theme-docs/callout'
+import { Tabs, Tab } from 'nextra-theme-docs/tabs'
+
+<Callout>This website is built with the docs theme.</Callout>
 
 you can install the blog theme with the following commands:
 
 ## Getting start
 
 1. Install Next.js, Nextra and React
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i react react-dom next nextra
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 2. Install the docs theme
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 3. Create the following Next.js config and theme config under the root directory:
 
@@ -104,6 +107,6 @@ export default function Nextra({ Component, pageProps }) {
 
 ---
 
-<Nextra.Callout>
+<Callout>
 You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
-</Nextra.Callout>
+</Callout>