[v4] sync with nextra 3.2.4 / capitalize folders in sidebar even without index pages

.changeset/slimy-ghosts-develop.md

@@ -0,0 +1,9 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+- fix missing tailwind class for `json` icon in code blocks
+- capitalize folders in sidebar even without index pages
+- sync with nextra 3.2.4

docs/mdx-components.ts

@@ -1 +1,8 @@
-export { useMDXComponents } from 'nextra-theme-docs'
+import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs'
+
+const docsComponents = getDocsMDXComponents()
+
+export const useMDXComponents: typeof getDocsMDXComponents = components => ({
+  ...docsComponents,
+  ...components
+})

examples/docs/mdx-components.js

@@ -1 +1,8 @@
-export { useMDXComponents } from 'nextra-theme-docs'
+import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs'
+
+const docsComponents = getDocsMDXComponents()
+
+export const useMDXComponents = components => ({
+  ...docsComponents,
+  ...components
+})

examples/docs/src/app/docs/[[...mdxPath]]/page.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks -- false positive, useMDXComponents are not react hooks */
 
-import { useMDXComponents } from 'nextra-theme-docs'
 import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { useMDXComponents } from '../../../../mdx-components'
 
 export const generateStaticParams = generateStaticParamsFor('mdxPath')
 

examples/docs/src/content/_meta.js

@@ -1,7 +1,7 @@
 export default {
   index: '',
   'get-started': '',
-  features: 'Features',
-  themes: 'Themes',
-  advanced: 'Advanced'
+  features: '',
+  themes: '',
+  advanced: ''
 }

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -272,10 +272,7 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(
     <ul className={cn(classes.list, className)} ref={forwardedRef}>
       {directories.map(item => {
         const ComponentToUse =
-          item.type === 'menu' ||
-          (item.children && (item.children.length || !('frontMatter' in item)))
-            ? Folder
-            : File
+          item.type === 'menu' || item.children?.length ? Folder : File
 
         return (
           <ComponentToUse

packages/nextra-theme-docs/tailwind.config.ts

@@ -15,7 +15,7 @@ export default {
   content: [
     './src/**/*.{ts,tsx}',
     '../nextra/src/client/icons/*.svg',
-    '../nextra/src/client/{components,mdx-components}/**/*.tsx'
+    '../nextra/src/client/{components,hocs,mdx-components}/**/*.tsx'
   ],
   theme: {
     screens: {

packages/nextra/src/client/components/index.ts

@@ -14,6 +14,6 @@ export { Playground } from './playground.js'
 export { Search } from './search.js'
 export { Select } from './select.js'
 export { Steps } from './steps.js'
-export * from '../with/index.js'
+export * from '../hocs/index.js'
 export { Mermaid } from '@theguild/remark-mermaid/mermaid'
 export * from '../mdx-components/index.js'

packages/nextra/src/client/components/playground.tsx

@@ -64,8 +64,8 @@ export const Playground: FC<
   if (compiledSource) {
     // `<MDXRemote>` cannot be used here because `useMDXComponents` may include components that
     // are only available on the server.
-    const MDXContent = evaluate(compiledSource, scope).default
-    return <MDXContent components={components} />
+    const MDXContent = evaluate(compiledSource, scope, components).default
+    return <MDXContent />
   }
 
   return fallback

packages/nextra/src/client/evaluate.ts

@@ -1,13 +1,17 @@
-import { useMDXComponents } from 'next-mdx-import-source-file'
 import jsxDevRuntime from 'react/jsx-dev-runtime'
 import jsxRuntime from 'react/jsx-runtime'
+import type { MDXComponents } from './mdx-components.js'
 
 const runtime =
   process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime
 
 export type Scope = Record<string, unknown>
 
-export function evaluate(rawJs: string, scope: Scope = {}) {
+export function evaluate(
+  rawJs: string,
+  scope: Scope = {},
+  components?: MDXComponents
+) {
   // if we're ready to render, we can assemble the component tree and let React do its thing
   // first we set up the scope which has to include the mdx custom
   // create element function as well as any components we're using
@@ -20,5 +24,12 @@ export function evaluate(rawJs: string, scope: Scope = {}) {
   // function with the actual values.
   const hydrateFn = Reflect.construct(Function, ['$', ...keys, rawJs])
 
-  return hydrateFn({ ...runtime, useMDXComponents }, ...values)
+  return hydrateFn(
+    {
+      ...runtime,
+      // Inject components in `<MDXContent>` and TOC
+      useMDXComponents: () => components
+    },
+    ...values
+  )
 }

packages/nextra/src/client/mdx-components/anchor.tsx

@@ -8,9 +8,9 @@ export const Anchor: FC<ComponentPropsWithoutRef<'a'>> = ({
   href = '',
   ...props
 }) => {
+  props.className = cn('focus-visible:nextra-focus', props.className)
   if (EXTERNAL_URL_RE.test(href)) {
     const { children } = props
-    props.className = cn('focus-visible:nextra-focus', props.className)
     return (
       <a href={href} target="_blank" rel="noreferrer" {...props}>
         {children}

packages/nextra/src/client/normalize-pages.ts

@@ -162,7 +162,8 @@ export function normalizePages({
       extendedMeta.title ||
       currentItem.frontMatter?.sidebarTitle ||
       currentItem.frontMatter?.title ||
-      (type === 'separator' ? '' : currentItem.name)
+      // @ts-expect-error -- we use title for capitalize folders without index page
+      (type === 'separator' ? '' : currentItem.title || currentItem.name)
 
     const getItem = (): Item => ({
       ...currentItem,

packages/nextra/src/server/__tests__/normalize.test.ts

@@ -39,10 +39,12 @@ describe('normalize-page', () => {
       {
         name: '1-level',
         route: '/1-level',
+        title: '1 Level',
         children: [
           {
             name: '2-level',
             route: '/1-level/2-level',
+            title: '2 Level',
             children: [
               {
                 data: {
@@ -102,6 +104,7 @@ describe('normalize-page', () => {
       {
         name: '1-level',
         route: '/1-level',
+        title: '1 Level',
         children: [
           {
             data: {
@@ -217,14 +220,14 @@ describe('normalize-page', () => {
               "isUnderCurrentDocsTree": true,
               "name": "two",
               "route": "/one/two",
-              "title": "two",
+              "title": "Two",
               "type": "doc",
             },
           ],
           "isUnderCurrentDocsTree": true,
           "name": "one",
           "route": "/one",
-          "title": "one",
+          "title": "One",
           "type": "doc",
         },
       ]
@@ -364,7 +367,7 @@ describe('normalize-page', () => {
           asIndexPage: true
         },
         type: 'doc',
-        title: 'themes',
+        title: 'Themes',
         isUnderCurrentDocsTree: true
       },
       {
@@ -384,7 +387,7 @@ describe('normalize-page', () => {
           asIndexPage: true
         },
         type: 'doc',
-        title: 'themes-test',
+        title: 'Themes Test',
         isUnderCurrentDocsTree: true
       }
     ])

packages/nextra/src/server/__tests__/page-map.test.ts

@@ -38,6 +38,7 @@ describe('Page Process', () => {
           ],
           "name": "docs",
           "route": "/docs",
+          "title": "Docs",
         },
         {
           "frontMatter": undefined,