allow configuring theme.toc with layout: 'default' in _meta files (#4105)

* a

* a

* allow configuring `theme.toc` with `layout: 'default'` in `_meta` files

* more

Author: dimaMachina

.changeset/fluffy-mails-laugh.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": minor
+---
+
+allow configuring `theme.toc` with `layout: 'default'` in `_meta` files

docs/app/about/page.mdx

@@ -11,7 +11,7 @@ import { cloneElement } from 'react'
 export default function MdxLayout(props) {
   return cloneElement(props.children, {
     components: {
-      img: Image
+      img: props => <Image {...props} className="inline" />
     }
   })
 }
@@ -65,16 +65,12 @@ Feel free to use the Nextra logo and other assets in your project. But please
 don't modify the logo, and don't use the logo to represent your project or
 product.
 
-<div className="[&_img]:inline mt-6">
-
 |    Name     |                   Description                    |                Preview                |
 | :---------: | :----------------------------------------------: | :-----------------------------------: |
 |    Icon     | Useful for favicons, app icons, link icons, etc. |      ![Nextra icon](../icon.svg)      |
 |    Logo     |                 Full Nextra logo                 |       ![Nextra logo](/logo.svg)       |
 | Social Card |              The Nextra social card              | ![Nextra card](/opengraph-image.jpeg) |
 
-</div>
-
 ## License
 
 The Nextra project and themes are licensed under

docs/app/docs/docs-theme/built-ins/layout/page.mdx

@@ -154,8 +154,6 @@ The above is also equivalent to `navigation: true{:js}`.
 
 ## Page Map [!TODO]
 
-## Search [!TODO]
-
 ## Sidebar
 
 |                                    |                |             |                                                                                    |

docs/app/showcase/page.mdx

@@ -13,7 +13,7 @@ import { cloneElement } from 'react'
 Projects powered by Nextra
 
 {/* prettier-ignore */}
-<Cards className="[&_img]:object-cover [&_img]:[aspect-ratio:12/6.3]">
+<Cards>
 <>[![GraphQL Hive preview](./_logos/graphql-hive.png)](https://the-guild.dev/graphql/hive)</>
 <>[![Speakeasy preview](./_logos/speakeasy.png)](https://speakeasyapi.dev/docs)</>
 <>[![React Flow preview](./_logos/react-flow.jpg)](https://reactflow.dev)</>
@@ -64,7 +64,9 @@ Projects powered by Nextra
 export default function MdxLayout(props) {
   return cloneElement(props.children, {
     components: {
-      img: Image,
+      img: props => (
+        <Image {...props} className="[aspect-ratio:12/6.3] object-cover" />
+      ),
       a({ children, href }) {
         const { alt } = children.props
         return (

docs/app/sponsors/page.mdx

@@ -23,7 +23,7 @@ import { cloneElement } from 'react'
 </div>
 
 {/* prettier-ignore */}
-<Cards num={3} className="[&_img]:object-cover [&_img]:[aspect-ratio:12/6.3]">
+<Cards num={3}>
 <>[![GraphQL Hive preview](../showcase/_logos/graphql-hive.png)](https://the-guild.dev/graphql/hive?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink)</>
 <>[![Speakeasy preview](../showcase/_logos/speakeasy.png)](https://speakeasyapi.dev/docs?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink)</>
 <>[![xyflow preview](../showcase/_logos/xyflow.jpg)](https://xyflow.com?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink)</>
@@ -32,7 +32,9 @@ import { cloneElement } from 'react'
 export default function MdxLayout(props) {
   return cloneElement(props.children, {
     components: {
-      img: Image,
+      img: props => (
+        <Image {...props} className="[aspect-ratio:12/6.3] object-cover" />
+      ),
       a({ children, href }) {
         const { alt } = children.props
         return (

packages/nextra-theme-blog/src/components/go-back.tsx

@@ -12,10 +12,7 @@ export const GoBack: FC = () => {
   const isNestedPage = segments.length > 2
   if (!isNestedPage) return null
   return (
-    <Button
-      onClick={router.back}
-      className="x:print:hidden x:underline x:cursor-pointer"
-    >
+    <Button onClick={router.back} className="x:print:hidden x:underline">
       Back
     </Button>
   )

packages/nextra-theme-blog/src/components/theme-switch.tsx

@@ -20,7 +20,7 @@ export function ThemeSwitch() {
   return (
     <Button
       aria-label="Toggle Dark Mode"
-      className="x:p-2 x:cursor-pointer"
+      className="x:p-2"
       onClick={toggleTheme}
     >
       <IconToUse height="14" />

packages/nextra-theme-docs/src/components/back-to-top.tsx

@@ -30,7 +30,7 @@ export const BackToTop: FC<{
       disabled={hidden}
       className={({ disabled }) =>
         cn(
-          'x:flex x:items-center x:gap-1.5 x:cursor-pointer',
+          'x:flex x:items-center x:gap-1.5',
           'x:whitespace-nowrap', // Safari
           disabled ? 'x:opacity-0' : 'x:opacity-100',
           className
@@ -39,7 +39,7 @@ export const BackToTop: FC<{
     >
       {children}
       <ArrowRightIcon
-        height="16"
+        height="1.1em"
         className="x:-rotate-90 x:border x:rounded-full x:border-current"
       />
     </Button>

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

@@ -18,7 +18,7 @@ interface LocaleSwitchProps {
 export const LocaleSwitch: FC<LocaleSwitchProps> = ({ lite, className }) => {
   const { i18n } = useThemeConfig()
   const pathname = usePathname()
-  if (!i18n.length) return
+  if (!i18n.length) return null
 
   const [, locale] = pathname.split('/', 2)
   return (

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

@@ -456,7 +456,7 @@ export const Sidebar: FC<{ toc: Heading[] }> = ({ toc }) => {
                 title={isExpanded ? 'Collapse sidebar' : 'Expand sidebar'}
                 className={({ hover }) =>
                   cn(
-                    'x:rounded-md x:p-2 x:cursor-pointer',
+                    'x:rounded-md x:p-2',
                     hover
                       ? 'x:bg-gray-100 x:text-gray-900 x:dark:bg-primary-100/5 x:dark:text-gray-50'
                       : 'x:text-gray-600 x:dark:text-gray-400'

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

@@ -18,7 +18,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({ lite, className }) => {
   const mounted = useMounted()
   const { darkMode, themeSwitch } = useThemeConfig()
   if (!darkMode) {
-    return
+    return null
   }
   const IconToUse = mounted && resolvedTheme === 'dark' ? MoonIcon : SunIcon
   const id = mounted ? (theme as keyof typeof themeSwitch) : 'light'

packages/nextra-theme-docs/src/mdx-components/wrapper.client.tsx

@@ -28,7 +28,7 @@ export const ClientWrapper: MDXWrapper = ({
 
   return (
     <>
-      {themeContext.layout !== 'full' && (
+      {(themeContext.layout === 'default' || themeContext.toc) && (
         <nav
           className="nextra-toc x:order-last x:max-xl:hidden x:w-64 x:shrink-0 x:print:hidden"
           aria-label="table of contents"

packages/nextra/src/client/components/banner/index.client.tsx

@@ -5,21 +5,23 @@ import { useEffect, useRef } from 'react'
 
 export const ClientBanner: FC<ComponentPropsWithoutRef<'div'>> = props => {
   const banner = useRef<HTMLDivElement>(null!)
-  // Set height on mount because text can be wrapped on next line and height can be different
+
   useEffect(() => {
-    const height = banner.current.clientHeight
-    document.documentElement.style.setProperty(
-      '--nextra-banner-height',
-      `${height}px`
-    )
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const { height } = entry.contentRect
+        // Set height because banner text can be wrapped on next line and his height can be different
+        document.documentElement.style.setProperty(
+          '--nextra-banner-height',
+          `${height}px`
+        )
+      }
+    })
+    resizeObserver.observe(banner.current)
+    return () => {
+      resizeObserver.disconnect()
+    }
   }, [])
 
-  return (
-    <div
-      ref={banner}
-      // Because we update class in `<script>`
-      suppressHydrationWarning
-      {...props}
-    />
-  )
+  return <div ref={banner} {...props} />
 }

packages/nextra/src/client/components/banner/index.tsx

@@ -10,9 +10,9 @@ export const Banner: FC<{
   children: ReactNode
   dismissible?: boolean
   storageKey?: string
-}> = ({ children, dismissible = true, storageKey = 'nextra-banner' }) => {
+}> = ({ children, dismissible = true, storageKey = BANNER_CLASS_NAME }) => {
   if (!children) {
-    return
+    return null
   }
   const hideBannerScript = `try{document.querySelector('.${BANNER_CLASS_NAME}').classList.toggle('x:hidden',localStorage.getItem(${JSON.stringify(storageKey)}))}catch(e){}`
 
@@ -24,6 +24,8 @@ export const Banner: FC<{
         'x:text-slate-50 x:dark:text-white x:bg-neutral-900 x:dark:bg-[linear-gradient(1deg,#383838,#212121)]',
         'x:print:[display:none]' // to not match `x:[.nextra-banner:not([class$=hidden])~&]` class
       )}
+      // Because we update class in `<script>`
+      suppressHydrationWarning
     >
       <div className="x:w-full x:text-center x:font-medium x:text-sm x:py-2.5">
         {children}

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

@@ -20,7 +20,7 @@ export const Button: FC<ButtonProps> = ({
     <HeadlessButton
       className={args =>
         cn(
-          'x:transition',
+          'x:transition x:cursor-pointer',
           args.focus && 'x:nextra-focus',
           variant === 'outline' && [classes.border, 'x:rounded-md x:p-1.5'],
           typeof className === 'function' ? className(args) : className

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

@@ -79,7 +79,7 @@ export const Select: FC<MenuProps> = ({
                 )}
               >
                 {option.name}
-                {selected && <CheckIcon height="16" />}
+                {selected && <CheckIcon height="1em" />}
               </li>
             )}
           </ListboxOption>

packages/nextra/src/client/mdx-components/pre/copy-to-clipboard.tsx

@@ -40,7 +40,7 @@ export const CopyToClipboard: FC<ComponentProps<'button'>> = props => {
       variant="outline"
       {...props}
     >
-      <IconToUse height="16" className="nextra-copy-icon" />
+      <IconToUse height="1em" className="nextra-copy-icon" />
     </Button>
   )
 }

packages/nextra/src/client/mdx-components/pre/index.tsx

@@ -32,7 +32,7 @@ export const Pre: FC<PreProps> = ({
   ...props
 }) => {
   const copyButton = copy === '' && (
-    <CopyToClipboard className={filename ? 'x:ms-auto' : ''} />
+    <CopyToClipboard className={filename ? 'x:ms-auto x:text-sm' : ''} />
   )
 
   return (
@@ -81,7 +81,7 @@ export const Pre: FC<PreProps> = ({
         >
           {hasWordWrap === '' && (
             <ToggleWordWrapButton>
-              <WordWrapIcon height="16" />
+              <WordWrapIcon height="1em" />
             </ToggleWordWrapButton>
           )}
           {!filename && copyButton}

packages/nextra/src/client/remove-links.ts

@@ -1,19 +1,12 @@
 // should be used on server
 'use no memo'
 
-import type { ReactElement, ReactNode, ReactPortal } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import { Children, cloneElement } from 'react'
 
 type TOCElement = ReactElement | string
 
-type WithProps = ReactElement | ReactPortal
-
-function isLink(node: ReactNode): node is WithProps {
-  // @ts-expect-error -- fixme
-  return hasProps(node) && !!node.props.href
-}
-
-function hasProps(node: ReactNode): node is WithProps {
+function hasProps(node: ReactNode) {
   return !!node && typeof node === 'object'
 }
 
@@ -23,7 +16,11 @@ export function removeLinks(node: ReactNode): TOCElement[] | string {
   }
   // @ts-expect-error fixme
   return Children.map(node, child => {
-    if (isLink(child)) {
+    if (
+      hasProps(child) &&
+      // @ts-expect-error -- fixme
+      child.props.href
+    ) {
       // Skip footnotes links
       // @ts-expect-error -- fixme
       if (child.props['data-footnote-ref']) {