[v4] sync with nextra 3.0.15 / bump to Next 15 (#3508)

* aa * more * more * more * aa * pnpm-lock.yaml * yoyoyo * more * rrr * fix * pnpm i * dedupe * Update examples/blog/mdx-components.jsx * yoyo
shuding · Oct 19, 2024 · 2c8a8ab · 2c8a8ab
1 parent 63369a1
commit 2c8a8ab
Show file tree

Hide file tree

Showing 36 changed files with 507 additions and 579 deletions.
diff --git a/.changeset/serious-pets-design.md b/.changeset/serious-pets-design.md
@@ -0,0 +1,14 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+- sync with nextra 3.0.15
+- bump to Next 15
+- remove importing of `style.css` in themes, you need to import now manually by
+
+```js
+import 'nextra-theme-docs/style.css' // for docs theme
+import 'nextra-theme-blog/style.css' // for blog theme
+```
diff --git a/docs/app/docs/docs-theme/theme-configuration/nextra-theme-docs/layout/page.mdx b/docs/app/docs/docs-theme/theme-configuration/nextra-theme-docs/layout/page.mdx
@@ -111,7 +111,7 @@ the docs repository, with the current website title prefilled:
 
 | | | |
 | ---------------- | ------------------------------------- | ----------------------------------------------------------------------------------- |
-| feedback.content | `string \| ReactElement \| null{:ts}` | Content of the feedback link.<br/>Default: `"Question? Give us feedback →"{:json}` |
+| feedback.content | `string \| ReactElement \| null{:ts}` | Content of the feedback link.<br/>Default: `"Question? Give us feedback"{:json}`  |
 | feedback.labels | `string{:ts}` | Labels that can be added to the new created issue.<br/>Default: `"feedback"{:json}` |
 
 </Table>

diff --git a/docs/app/docs/guide/markdown/page.mdx b/docs/app/docs/guide/markdown/page.mdx
@@ -29,9 +29,7 @@ export function Counter({ children }) {
 
 Generates:
 
-import { StarsIcon } from '@components/icons'
 import { Shadow } from '@components/utils/shadow'
-import { Cards } from 'nextra/components'
 import { Counter } from './_counter'
 
 <div className="mt-6 rounded-xl border border-gray-200 p-4 dark:border-gray-900">

diff --git a/docs/app/docs/guide/organize-files/page.mdx b/docs/app/docs/guide/organize-files/page.mdx
@@ -1,5 +1,5 @@
 import { FileIcon, NewsletterIcon } from '@components/icons'
-import { Callout, Cards, FileTree } from 'nextra/components'
+import { Cards, FileTree } from 'nextra/components'
 
 # Organize Files
 

diff --git a/docs/app/env.d.ts b/docs/app/env.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg?svgr' {
+ import type { FC, SVGProps } from 'react'
+ const ReactComponent: FC<SVGProps<SVGElement>>
+
+ export default ReactComponent
+}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -6,6 +6,7 @@ import { getPageMap } from 'nextra/page-map'
 import type { ReactNode } from 'react'
 import './globals.css'
 import cn from 'clsx'
+import 'nextra-theme-docs/style.css'
 
 export const viewport: Viewport = Head.viewport
 
@@ -57,6 +58,15 @@ export default async function RootLayout({
 }: {
  children: ReactNode
 }) {
+ const logo = (
+ <NextraLogo
+ height="20"
+ className={cn(
+ '[mask-position:0] [mask-size:400%] [mask-image:linear-gradient(60deg,#000_25%,rgba(0,0,0,.2)_50%,#000_75%)]',
+ 'hover:[mask-position:100%] hover:[transition:mask-position_1s_ease]'
+ )}
+ />
+ )
  return (
  <html
  lang="en"
@@ -80,18 +90,7 @@ export default async function RootLayout({
  </Link>
  </div>
  </Banner>
- <Navbar
- logo={
- <NextraLogo
- height="20"
- className={cn(
- '[mask-position:0] [mask-size:400%] [mask-image:linear-gradient(60deg,#000_25%,rgba(0,0,0,.2)_50%,#000_75%)]',
- 'hover:[mask-position:100%] hover:[transition:mask-position_1s_ease]'
- )}
- />
- }
- projectLink="https:/shuding/nextra"
- />
+ <Navbar logo={logo} projectLink="https:/shuding/nextra" />
  {children}
  <Footer className="flex-col items-center md:items-start">
  <a

diff --git a/docs/components/icons/index.ts b/docs/components/icons/index.ts
@@ -1,29 +1,29 @@
-export { default as FilesIcon } from './files.svg'
-export { default as TailwindIcon } from './tailwind.svg'
-export { default as LinkIcon } from './link.svg'
-export { default as LightningIcon } from './lightning.svg'
-export { default as GlobeIcon } from './globe.svg'
-export { default as PictureIcon } from './picture.svg'
-export { default as CodeIcon } from './code.svg'
-export { default as BrushIcon } from './brush.svg'
-export { default as DropperIcon } from './dropper.svg'
-export { default as StarsIcon } from './stars.svg'
-export { default as FormulaIcon } from './formula.svg'
-export { default as WarningIcon } from './warning.svg'
-export { default as ChevronRightIcon } from './chevron-right.svg'
-export { default as BoxIcon } from './box.svg'
-export { default as GearIcon } from './gear.svg'
-export { default as RowsIcon } from './rows.svg'
-export { default as CardsIcon } from './cards.svg'
-export { default as OneIcon } from './one.svg'
-export { default as CloudIcon } from './cloud.svg'
-export { default as TableIcon } from './table.svg'
-export { default as FileIcon } from './file.svg'
-export { default as NewsletterIcon } from './newsletter.svg'
-export { default as ArrowRightIcon } from './arrow-right.svg'
-export { default as SwitchIcon } from './switch.svg'
-export { default as DiagramIcon } from './diagram.svg'
-export { default as FolderTreeIcon } from './folder-tree.svg'
-export { default as IdCardIcon } from './id-card.svg'
-export { default as VercelLogo } from './vercel.svg'
-export { default as NextraLogo } from './nextra.svg'
+export { default as FilesIcon } from './files.svg?svgr'
+export { default as TailwindIcon } from './tailwind.svg?svgr'
+export { default as LinkIcon } from './link.svg?svgr'
+export { default as LightningIcon } from './lightning.svg?svgr'
+export { default as GlobeIcon } from './globe.svg?svgr'
+export { default as PictureIcon } from './picture.svg?svgr'
+export { default as CodeIcon } from './code.svg?svgr'
+export { default as BrushIcon } from './brush.svg?svgr'
+export { default as DropperIcon } from './dropper.svg?svgr'
+export { default as StarsIcon } from './stars.svg?svgr'
+export { default as FormulaIcon } from './formula.svg?svgr'
+export { default as WarningIcon } from './warning.svg?svgr'
+export { default as ChevronRightIcon } from './chevron-right.svg?svgr'
+export { default as BoxIcon } from './box.svg?svgr'
+export { default as GearIcon } from './gear.svg?svgr'
+export { default as RowsIcon } from './rows.svg?svgr'
+export { default as CardsIcon } from './cards.svg?svgr'
+export { default as OneIcon } from './one.svg?svgr'
+export { default as CloudIcon } from './cloud.svg?svgr'
+export { default as TableIcon } from './table.svg?svgr'
+export { default as FileIcon } from './file.svg?svgr'
+export { default as NewsletterIcon } from './newsletter.svg?svgr'
+export { default as ArrowRightIcon } from './arrow-right.svg?svgr'
+export { default as SwitchIcon } from './switch.svg?svgr'
+export { default as DiagramIcon } from './diagram.svg?svgr'
+export { default as FolderTreeIcon } from './folder-tree.svg?svgr'
+export { default as IdCardIcon } from './id-card.svg?svgr'
+export { default as VercelLogo } from './vercel.svg?svgr'
+export { default as NextraLogo } from './nextra.svg?svgr'
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -1,4 +1,3 @@
-import path from 'node:path'
 import nextra from 'nextra'
 
 /**
@@ -9,10 +8,6 @@ const withNextra = nextra({
  defaultShowCopyCode: true
 })
 
-const sep = path.sep === '/' ? '/' : '\\\\'
-
-const ALLOWED_SVG_RE = new RegExp(`components${sep}icons${sep}.+\\.svg$`)
-
 /**
  * @type {import('next').NextConfig}
  */
@@ -45,27 +40,26 @@ export default withNextra({
  }
  ],
  webpack(config) {
- const fileLoaderRule = config.module.rules.find(rule =>
- rule.test?.test?.('.svg')
+ // rule.exclude doesn't work starting from Next.js 15
+ const { test: _test, ...imageLoaderOptions } = config.module.rules.find(
+ rule => rule.test?.test?.('.svg')
  )
- fileLoaderRule.exclude = ALLOWED_SVG_RE
-
  config.module.rules.push({
- test: ALLOWED_SVG_RE,
- use: [
+ test: /\.svg$/,
+ oneOf: [
  {
- loader: '@svgr/webpack',
- options: {
- svgoConfig: {
- plugins: ['removeXMLNS']
- }
- }
- }
+ resourceQuery: /svgr/,
+ use: ['@svgr/webpack']
+ },
+ imageLoaderOptions
  ]
  })
  return config
  },
  experimental: {
- optimizePackageImports: ['@components/icons', 'nextra/components']
+ optimizePackageImports: [
+ // '@components/icons',
+ 'nextra/components'
+ ]
  }
 })
diff --git a/examples/blog/app/tags/[tag]/page.jsx b/examples/blog/app/tags/[tag]/page.jsx
@@ -1,7 +1,8 @@
 import { PostCard } from 'nextra-theme-blog'
 import { getPosts, getTags } from '../../posts/get-posts'
 
-export function generateMetadata({ params }) {
+export async function generateMetadata(props) {
+ const params = await props.params
  return {
  title: `Posts Tagged with “${decodeURIComponent(params.tag)}”`
  }
@@ -12,7 +13,8 @@ export async function generateStaticParams() {
  return [...new Set(allTags)].map(tag => ({ tag }))
 }
 
-export default async function TagPage({ params }) {
+export default async function TagPage(props) {
+ const params = await props.params
  return (
  <>
  <h1>{generateMetadata({ params }).title}</h1>

diff --git a/examples/blog/mdx-components.jsx b/examples/blog/mdx-components.jsx
@@ -1,25 +1,29 @@
-import { useMDXComponents as useBlogMDXComponents } from 'nextra-theme-blog'
+import { useMDXComponents as getBlogMDXComponents } from 'nextra-theme-blog'
 
-// In case you want to overwrite some of the components
-export function useMDXComponents() {
- return useBlogMDXComponents({
- h1: ({ children }) => (
- <h1
- style={{
- WebkitBackgroundClip: 'text',
- WebkitTextFillColor: 'transparent',
- backgroundClip: 'text',
- backgroundImage: 'linear-gradient(90deg,#7928CA,#FF0080)'
- }}
- >
- {children}
- </h1>
- ),
- DateFormatter: ({ date }) =>
- `Last updated at ${date.toLocaleDateString('en', {
- day: 'numeric',
- month: 'long',
- year: 'numeric'
- })}`
- })
+const blogComponents = getBlogMDXComponents({
+ h1: ({ children }) => (
+ <h1
+ style={{
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ backgroundClip: 'text',
+ backgroundImage: 'linear-gradient(90deg,#7928CA,#FF0080)'
+ }}
+ >
+ {children}
+ </h1>
+ ),
+ DateFormatter: ({ date }) =>
+ `Last updated at ${date.toLocaleDateString('en', {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric'
+ })}`
+})
+
+export function useMDXComponents(components) {
+ return {
+ ...blogComponents,
+ ...components
+ }
 }
diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -16,13 +16,5 @@
  "nextra-theme-blog": "workspace:*",
  "react": "18.3.1",
  "react-dom": "18.3.1"
- },
- "dependenciesMeta": {
- "nextra": {
- "injected": true
- },
- "nextra-theme-blog": {
- "injected": true
- }
  }
 }
diff --git a/examples/docs/app/[[...mdxPath]]/page.jsx b/examples/docs/app/[[...mdxPath]]/page.jsx
@@ -6,19 +6,21 @@ import { generateStaticParamsFor, importPage } from 'nextra/pages'
 export const generateStaticParams = generateStaticParamsFor('mdxPath')
 
 export async function generateMetadata(props) {
- const { metadata } = await importPage(props.params.mdxPath)
+ const params = await props.params
+ const { metadata } = await importPage(params.mdxPath)
  return metadata
 }
 
 export default async function Page(props) {
- const result = await importPage(props.params.mdxPath)
+ const params = await props.params
+ const result = await importPage(params.mdxPath)
  const { default: MDXContent, useTOC, metadata, title } = result
 
  const Wrapper = useMDXComponents().wrapper
 
  return (
  <Wrapper toc={useTOC()} metadata={metadata} title={title}>
- <MDXContent {...props} />
+ <MDXContent {...props} params={params} />
  </Wrapper>
  )
 }
diff --git a/examples/docs/app/layout.jsx b/examples/docs/app/layout.jsx
@@ -2,6 +2,7 @@
 import { Layout, Navbar } from 'nextra-theme-docs'
 import { Banner, Head } from 'nextra/components'
 import { getPageMap } from 'nextra/page-map'
+import 'nextra-theme-docs/style.css'
 
 export const { viewport } = Head
 

diff --git a/examples/swr-site/app/[lang]/[[...mdxPath]]/page.tsx b/examples/swr-site/app/[lang]/[[...mdxPath]]/page.tsx
@@ -5,7 +5,8 @@ import { useMDXComponents } from '../../../mdx-components'
 
 export const generateStaticParams = generateStaticParamsFor('mdxPath')
 
-export async function generateMetadata({ params }: PageProps) {
+export async function generateMetadata(props: PageProps) {
+ const params = await props.params
  const { metadata } = await importPage(params.mdxPath, params.lang)
  return metadata
 }
@@ -18,14 +19,14 @@ type PageProps = {
 }
 
 export default async function Page(props: PageProps) {
- const { mdxPath, lang } = props.params
- const result = await importPage(mdxPath, lang)
+ const params = await props.params
+ const result = await importPage(params.mdxPath, params.lang)
  const { default: MDXContent, useTOC, metadata, title } = result
  const Wrapper = useMDXComponents().wrapper
 
  return (
  <Wrapper toc={useTOC()} metadata={metadata} title={title}>
- <MDXContent {...props} />
+ <MDXContent {...props} params={params} />
  </Wrapper>
  )
 }
diff --git a/examples/swr-site/app/[lang]/layout.tsx b/examples/swr-site/app/[lang]/layout.tsx
@@ -42,7 +42,8 @@ export const metadata: Metadata = {
  }
 }
 
-export default async function RootLayout({ children, params: { lang } }) {
+export default async function RootLayout({ children, params }) {
+ const { lang } = await params
  const dictionary = await getDictionary(lang)
  let pageMap = await getPageMap(lang)