Merge branch 'main' into better-anchor-style

.changeset/big-starfishes-punch.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+do not render default footer content if the `Footer#children` prop was not provided

.changeset/famous-days-complain.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+fix `Uncaught Error: Minified React error #418; visit https://react.dev/errors/418` error due mismatch of last updated time date

.changeset/fresh-llamas-judge.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+fix `ThemeSwitch#lite` prop

.changeset/giant-garlics-kiss.md

@@ -0,0 +1,7 @@
+---
+"nextra": patch
+"nextra-theme-blog": patch
+"nextra-theme-docs": patch
+---
+
+fix regression from Nextra 3 setting [`theme.collapsed?: boolean` in `_meta` file](https://nextra.site/docs/file-conventions/meta-file#theme-option) for folders has no effect in sidebar

.changeset/nice-weeks-dream.md

@@ -0,0 +1,5 @@
+---
+"nextra": patch
+---
+
+improve github alert syntax name in DOM

.changeset/tidy-apples-beam.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+add missing transition state for `<Navbar>` links and `<TOC>` extra content links

.changeset/twelve-hotels-nail.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+allow change `_meta` file `theme.toc` property with `type: 'page'`

docs/app/_meta.global.tsx

@@ -178,7 +178,8 @@ export default {
   blog: {
     type: 'page',
     theme: {
-      typesetting: 'article'
+      typesetting: 'article',
+      toc: false
     }
   },
   about: {

docs/app/docs/guide/i18n/page.mdx

@@ -2,6 +2,7 @@
 icon: GlobeIcon
 ---
 
+import { ExampleCode } from '@components/example-code'
 import { Steps } from 'nextra/components'
 
 # Next.js I18n
@@ -56,30 +57,21 @@ i18n: [
 ]
 ```
 
-## Automatically detect and redirect to user-selected language (optional)
+## Automatically detect and redirect to user-selected language (_optional_)
 
 You can automatically detect the user's preferred language and redirect them to
-the corresponding version of the site. To achieve this, create a `middleware.js`
-file in the root of your project and export Nextra's middleware function from
-`nextra/locales`:
-
-```js filename="middleware.js" {1}
-export { middleware } from 'nextra/locales'
-
-export const config = {
-  // Matcher ignoring `/_next/` and `/api/`
-  matcher: [
-    '/((?!api|_next/static|_next/image|favicon.ico|icon.svg|apple-icon.png|manifest).*)'
-  ]
-}
-```
+the corresponding version of the site. To achieve this, create a `middleware.ts`
+or `middleware.js` file in the root of your project and export Nextra's
+middleware function from `nextra/locales`:
+
+<ExampleCode example="swr-site" filePath="middleware.ts" metadata="{1}" />
 
 > [!WARNING]
 >
 > This approach will not work for i18n sites that are statically exported with
 > `output: 'export'` in `nextConfig`.
 
-## Custom 404 page (optional)
+## Custom 404 page (_optional_)
 
 You can have a custom `not-found.jsx` with translations for an i18n website that
 uses a shared theme layout. For guidance on implementing this, you can check out

docs/app/docs/guide/page.mdx

@@ -6,12 +6,11 @@ import {
   BrushIcon,
   GlobeIcon,
   LightningIcon,
-  LinkIcon,
   PictureIcon,
   StarsIcon
 } from '@components/icons'
 import { Cards } from 'nextra/components'
-import { InformationCircleIcon, MarkdownIcon } from 'nextra/icons'
+import { InformationCircleIcon, LinkIcon, MarkdownIcon } from 'nextra/icons'
 import { MDXRemote } from 'nextra/mdx-remote'
 import { createIndexPage, getPageMap } from 'nextra/page-map'
 

docs/app/docs/page.mdx

@@ -44,25 +44,25 @@ The Nextra FAQ is a collection of useful questions and answers about the
 project. If you have a question that isn't answered here, please
 [open a discussion](https://github.com/shuding/nextra/discussions).
 
-<details open>
+<details>
   {/* prettier-ignore */}
   <summary className="mb-2">Can I use Nextra with Next.js `pages` router?</summary>
   Nextra 4 only works with the `app` router. Only Nextra 1/2/3 supports the
   `pages` router.
 </details>
 
-<details open>
+<details>
   <summary className="mb-2">Can I use X with Nextra?</summary>
-  The answer is "yes" for most things. Since Nextra is just a Next.js plugin, almost all the things
-  that can be done with React can be done with Nextra. Here are some examples and guides:
+The answer is "yes" for most things. Since Nextra is just a Next.js plugin, almost all the things
+that can be done with React can be done with Nextra. Here are some examples and guides:
 
 - [Use Tailwind CSS](/docs/guide/tailwind-css)
 - [Use custom CSS and Sass](/docs/guide/custom-css)
 - [Use custom fonts](https://nextjs.org/docs/basic-features/font-optimization)
 
 </details>
 
-<details open>
+<details>
   {/* prettier-ignore */}
   <summary className="mb-2">How can I add a live coding component in Nextra?</summary>
   There are libraries like [Sandpack](https://sandpack.codesandbox.io) and

docs/app/layout.tsx

@@ -62,8 +62,9 @@ const navbar = (
       <NextraLogo
         height="20"
         className={cn(
+          'hover:transition-all hover:duration-1000',
           '[mask-image:linear-gradient(60deg,#000_25%,rgba(0,0,0,.2)_50%,#000_75%)] [mask-position:0] [mask-size:400%]',
-          'hover:[mask-position:100%] hover:[transition:mask-position_1s_ease]'
+          'hover:[mask-position:100%]'
         )}
       />
     }

docs/components/icons/index.ts

@@ -1,6 +1,5 @@
 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'

examples/docs/src/app/layout.jsx

@@ -44,7 +44,7 @@ export default async function RootLayout({ children }) {
         <Layout
           banner={<Banner storageKey="Nextra 2">Nextra 2 Alpha</Banner>}
           navbar={navbar}
-          footer={<Footer />}
+          footer={<Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>}
           editLink="Edit this page on GitHub"
           docsRepositoryBase="https://github.com/shuding/nextra/blob/main/examples/docs"
           sidebar={{ defaultMenuCollapseLevel: 1 }}

examples/swr-site/app/[lang]/layout.tsx

@@ -75,7 +75,7 @@ export default async function RootLayout({ children, params }) {
       projectLink="https://github.com/vercel/swr"
       chatLink="https://discord.com"
     >
-      <LocaleSwitch />
+      <LocaleSwitch lite />
     </Navbar>
   )
   const footer = (

packages/nextra-theme-blog/CHANGELOG.md

@@ -1,5 +1,17 @@
 # nextra-theme-blog
 
+## 4.1.0
+
+### Minor Changes
+
+- 7caf059: - generate unique anchor id for `<summary>` elements based on its content at build time
+  - add anchor link icon for `<summary>`
+
+### Patch Changes
+
+- Updated dependencies [7caf059]
+  - [email protected]
+
 ## 4.0.9
 
 ### Patch Changes

packages/nextra-theme-blog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextra-theme-blog",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "description": "A Nextra theme for blogs.",
   "repository": "https://github.com/shuding/nextra",
   "author": "Shu Ding <[email protected]>",

packages/nextra-theme-docs/CHANGELOG.md

@@ -1,5 +1,18 @@
 # nextra-theme-docs
 
+## 4.1.0
+
+### Minor Changes
+
+- 7caf059: - generate unique anchor id for `<summary>` elements based on its content at build time
+  - add anchor link icon for `<summary>`
+
+### Patch Changes
+
+- fa7f1ee: fix cropped sidebar footer on desktop, when Nextra's `<Banner>` is used
+- Updated dependencies [7caf059]
+  - [email protected]
+
 ## 4.0.9
 
 ### Patch Changes

packages/nextra-theme-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextra-theme-docs",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "description": "A Nextra theme for documentation sites.",
   "repository": "https://github.com/shuding/nextra",
   "author": "Shu Ding <[email protected]>",

packages/nextra-theme-docs/src/components/footer/index.tsx

@@ -18,16 +18,18 @@ export const Footer: FC<ComponentProps<'footer'>> = ({
         </div>
       </Switchers>
       <hr className="nextra-border" />
-      <footer
-        className={cn(
-          'x:mx-auto x:flex x:max-w-(--nextra-content-width) x:justify-center x:py-12 x:text-gray-600 x:dark:text-gray-400 x:md:justify-start',
-          'x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]',
-          className
-        )}
-        {...props}
-      >
-        {children || `MIT ${new Date().getFullYear()} © Nextra.`}
-      </footer>
+      {children && (
+        <footer
+          className={cn(
+            'x:mx-auto x:flex x:max-w-(--nextra-content-width) x:justify-center x:py-12 x:text-gray-600 x:dark:text-gray-400 x:md:justify-start',
+            'x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </footer>
+      )}
     </div>
   )
 }

packages/nextra-theme-docs/src/components/last-updated.tsx

@@ -20,7 +20,11 @@ export const LastUpdated: FC<{
   return (
     <>
       {children}{' '}
-      <time dateTime={date.toISOString()}>
+      <time
+        dateTime={date.toISOString()}
+        // Can provoke React 418 error https://react.dev/errors/418
+        suppressHydrationWarning
+      >
         {date.toLocaleDateString(dateLocale, {
           day: 'numeric',
           month: 'long',

packages/nextra-theme-docs/src/components/locale-switch.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import cn from 'clsx'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { usePathname } from 'next/navigation'
 import { Select } from 'nextra/components'
@@ -17,24 +18,24 @@ interface LocaleSwitchProps {
 export const LocaleSwitch: FC<LocaleSwitchProps> = ({ lite, className }) => {
   const { i18n } = useThemeConfig()
   const pathname = usePathname()
-  if (!i18n.length) return null
+  if (!i18n.length) return
 
   const [, locale] = pathname.split('/', 2)
   return (
     <Select
       title="Change language"
-      className={className}
+      className={cn('x:flex x:items-center x:gap-2', className)}
       onChange={lang => {
         const date = new Date(Date.now() + ONE_YEAR)
         document.cookie = `NEXT_LOCALE=${lang}; expires=${date.toUTCString()}; path=/`
         location.href = addBasePath(pathname.replace(`/${locale}`, `/${lang}`))
       }}
       value={locale!}
       selectedOption={
-        <span className="x:flex x:items-center x:gap-2">
+        <>
           <GlobeIcon height="12" />
           {!lite && i18n.find(l => locale === l.locale)?.name}
-        </span>
+        </>
       }
       options={i18n.map(l => ({
         id: l.locale,

packages/nextra-theme-docs/src/components/navbar/index.client.tsx

@@ -18,7 +18,7 @@ const classes = {
   link: cn(
     'x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap',
     'x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200',
-    'x:ring-inset'
+    'x:ring-inset x:transition-colors'
   )
 }
 
@@ -35,7 +35,7 @@ const NavbarMenu: FC<{
         className={({ focus }) =>
           cn(
             classes.link,
-            'x:items-center x:flex x:gap-1.5',
+            'x:items-center x:flex x:gap-1.5 x:cursor-pointer',
             focus && 'x:nextra-focus'
           )
         }

packages/nextra-theme-docs/src/components/navbar/index.tsx

@@ -57,7 +57,7 @@ export const Navbar: FC<NavbarProps> = props => {
         {logoLink ? (
           <NextLink
             href={typeof logoLink === 'string' ? logoLink : '/'}
-            className="x:focus-visible:nextra-focus x:flex x:items-center x:hover:opacity-75 x:me-auto"
+            className="x:transition-opacity x:focus-visible:nextra-focus x:flex x:items-center x:hover:opacity-75 x:me-auto"
           >
             {logo}
           </NextLink>

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

@@ -4,7 +4,7 @@ import cn from 'clsx'
 import { usePathname } from 'next/navigation'
 import type { Heading } from 'nextra'
 import { Anchor, Button, Collapse } from 'nextra/components'
-import { useFSRoute } from 'nextra/hooks'
+import { useFSRoute, useHash } from 'nextra/hooks'
 import { ArrowRightIcon, ExpandIcon } from 'nextra/icons'
 import type { Item, MenuItem, PageItem } from 'nextra/normalize-pages'
 import type { FC, FocusEventHandler, MouseEventHandler } from 'react'
@@ -292,10 +292,12 @@ export const MobileNav: FC = () => {
 
   const menu = useMenu()
   const pathname = usePathname()
+  const hash = useHash()
 
   useEffect(() => {
     setMenu(false)
-  }, [pathname])
+    // Close mobile menu when path changes or hash changes (e.g. clicking on search result which points to the current page)
+  }, [pathname, hash])
 
   const anchors = toc.filter(v => v.depth === 2)
   const sidebarRef = useRef<HTMLUListElement>(null!)
@@ -347,8 +349,8 @@ export const MobileNav: FC = () => {
 
       {hasMenu && (
         <div className={cn(classes.footer, 'x:mt-auto')}>
-          <ThemeSwitch lite={hasI18n} className="x:grow" />
-          <LocaleSwitch />
+          <ThemeSwitch className="x:grow" />
+          <LocaleSwitch className="x:grow x:justify-end" />
         </div>
       )}
     </aside>
@@ -428,6 +430,7 @@ export const Sidebar: FC<{ toc: Heading[] }> = ({ toc }) => {
         {hasMenu && (
           <div
             className={cn(
+              'x:sticky x:bottom-0 x:bg-nextra-bg',
               classes.footer,
               !isExpanded && 'x:flex-wrap x:justify-center',
               showToggleAnimation && [