add display: 'normal' | 'hidden' for _meta item type: 'menu' (#4182)

Author: dimaMachina

.changeset/rotten-candles-hide.md

@@ -0,0 +1,5 @@
+---
+"nextra": patch
+---
+
+add `display: 'normal' | 'hidden'` for `_meta` item `type: 'menu'`

docs/app/docs/file-conventions/page.mdx

@@ -9,19 +9,49 @@ description:
 
 import { Cards } from 'nextra/components'
 import { FileIcon, FolderIcon, MdxIcon } from 'nextra/icons'
-import { MDXRemote } from 'nextra/mdx-remote'
-import { createIndexPage, getPageMap } from 'nextra/page-map'
+import { getIndexPageMap, getPageMap } from 'nextra/page-map'
+import { useMDXComponents } from '../../../mdx-components'
 
 # File Conventions
 
-<MDXRemote
-  compiledSource={await createIndexPage(
-    await getPageMap('/docs/file-conventions')
-  )}
-  components={{
+export async function Page() {
+  const { h2: H2 } = useMDXComponents()
+  const currentRoute = metadata.filePath
+    .replace('app', '')
+    .replace('/page.mdx', '')
+  const pageMap = await getPageMap(currentRoute)
+  const icons = {
     Cards,
     FileIcon,
     FolderIcon,
     MdxIcon
-  }}
-/>
+  }
+  return getIndexPageMap(pageMap).map(pageItem => {
+    if (!Array.isArray(pageItem)) {
+      return <H2>{pageItem.title}</H2>
+    }
+    return (
+      <Cards>
+        {pageItem.map(item => {
+          const icon = item.frontMatter?.icon
+          const Icon = icons[icon]
+          if (icon && !Icon) {
+            throw new Error(
+              "Icon is defined in front matter but isn't provided"
+            )
+          }
+          return (
+            <Cards.Card
+              key={item.name}
+              title={item.title}
+              href={item.route || item.href}
+              icon={Icon && <Icon />}
+            />
+          )
+        })}
+      </Cards>
+    )
+  })
+}
+
+<Page />

packages/nextra/src/server/page-map/index-page.ts

@@ -1,4 +1,4 @@
-import type { MdxFile, PageMapItem } from '../../types.js'
+import type { MdxFile, PageMapItem, SeparatorItem } from '../../types.js'
 import { compileMdx } from '../compile.js'
 
 function renderCard(item: MdxFile): string {
@@ -42,3 +42,25 @@ export async function createIndexPage(pageMap: PageMapItem[]): Promise<string> {
 
   return rawJs
 }
+
+export function getIndexPageMap(pageMap: PageMapItem[]) {
+  const result: (SeparatorItem | MdxFile[])[] = []
+  for (const item of pageMap) {
+    if ('data' in item) {
+      continue
+    }
+    // @ts-expect-error fixme
+    if (item.type === 'separator') {
+      // @ts-expect-error fixme
+      result.push(item)
+    } else {
+      const lastResult = result.at(-1)
+      if (Array.isArray(lastResult)) {
+        lastResult.push(item)
+      } else {
+        result.push([item])
+      }
+    }
+  }
+  return result
+}

packages/nextra/src/server/page-map/index.ts

@@ -4,7 +4,7 @@ export { normalizePageMap } from './normalize.js'
 export { convertToPageMap } from './to-page-map.js'
 export { mergeMetaWithPageMap } from './merge-meta-with-page-map.js'
 export { getPageMap } from './get.js'
-export { createIndexPage } from './index-page.js'
+export { createIndexPage, getIndexPageMap } from './index-page.js'
 
 export function getMetadata(
   page:

packages/nextra/src/server/schemas.ts

@@ -118,7 +118,8 @@ export const menuSchema = z.strictObject({
       obj[key].title ||= pageTitleFromFilename(key)
     }
     return obj
-  })
+  }),
+  display: z.enum(['normal', 'hidden']).optional()
 })
 
 export const itemSchema = z.strictObject({

packages/nextra/styles/cards.css

@@ -10,11 +10,11 @@
     @apply x:select-none;
   }
 
-  svg {
+  & > span > svg {
     @apply x:w-6 x:h-auto x:transition x:text-black/30 x:dark:text-white/40 x:shrink-0;
   }
 
-  &:hover svg {
+  &:hover > span > svg {
     @apply x:text-current!;
   }