[v3] fix normalize pages issues, back to top issues (#2654)

* aa

* fix

* fix lint

* fix build error

* fix back to top

* prettier

* back to top true by default

* remove some stuff

* a

* prettier

* optimize imports

* aa

* try

* comment for now

.changeset/hungry-suits-love.md

@@ -0,0 +1,11 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix “Scroll to top” is not supposed to be interactable when it is hidden.
+
+`display:children` doesn't collapse breadcrumbs
+
+hide external links from pagination
+
+remove xmlns attribute from icons

docs/theme.config.tsx

@@ -127,9 +127,6 @@ const config: DocsThemeConfig = {
         </p>
       </div>
     )
-  },
-  toc: {
-    backToTop: true
   }
 }
 

examples/swr-site/pages/es/examples/_meta.ts

@@ -2,6 +2,5 @@ export default {
   basic: 'Uso Básico',
   auth: 'Autenticación',
   'infinite-loading': 'Carga Infinita',
-  'error-handling': 'Manejo De Errores',
-  ssr: 'Next.js SSR'
+  'error-handling': 'Manejo De Errores'
 }

examples/swr-site/theme.config.tsx

@@ -186,7 +186,6 @@ const config: DocsThemeConfig = {
     toggleButton: true
   },
   toc: {
-    backToTop: true,
     extraContent: (
       // eslint-disable-next-line @next/next/no-img-element -- ignore since url is external and dynamic
       <img alt="placeholder cat" src="https://placekitten.com/g/300/200" />

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

@@ -1,38 +1,30 @@
 import cn from 'clsx'
 import { ArrowRightIcon } from 'nextra/icons'
 import type { ReactElement } from 'react'
-import { useEffect, useRef } from 'react'
 
 function scrollToTop() {
   window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 
-export function BackToTop({ className }: { className?: string }): ReactElement {
-  const ref = useRef<HTMLButtonElement>(null)
-  useEffect(() => {
-    function toggleVisible() {
-      const { scrollTop } = document.documentElement
-      ref.current?.classList.toggle('_opacity-0', scrollTop < 300)
-    }
-
-    window.addEventListener('scroll', toggleVisible)
-    return () => {
-      window.removeEventListener('scroll', toggleVisible)
-    }
-  }, [])
-
+export function BackToTop({
+  className,
+  hidden
+}: {
+  className?: string
+  hidden: boolean
+}): ReactElement {
   return (
     <button
-      ref={ref}
       aria-hidden="true"
       onClick={scrollToTop}
+      disabled={hidden}
       className={cn(
-        '_flex _items-center _gap-1.5 _transition _opacity-0',
+        '_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0',
         className
       )}
     >
       Scroll to top
-      <ArrowRightIcon className="_-rotate-90 _w-3.5 _h-3.5 _border _rounded-full _border-current" />
+      <ArrowRightIcon className="_-rotate-90 _size-4 _border _rounded-full _border-current" />
     </button>
   )
 }

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

@@ -21,7 +21,7 @@ const linkClassName = cn(
 
 export function TOC({ toc, filePath }: TOCProps): ReactElement {
   const activeAnchor = useActiveAnchor()
-  const tocRef = useRef<HTMLDivElement>(null)
+  const tocRef = useRef<HTMLUListElement>(null)
   const themeConfig = useThemeConfig()
 
   const hasHeadings = toc.length > 0
@@ -34,12 +34,11 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
   const activeSlug = Object.entries(activeAnchor).find(
     ([, { isActive }]) => isActive
   )?.[0]
+  const activeIndex = toc.findIndex(({ id }) => id === activeSlug)
 
   useEffect(() => {
     if (!activeSlug) return
-    const anchor = tocRef.current?.querySelector(
-      `li > a[href="#${activeSlug}"]`
-    )
+    const anchor = tocRef.current?.querySelector(`a[href="#${activeSlug}"]`)
 
     if (anchor) {
       scrollIntoView(anchor, {
@@ -54,7 +53,6 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
 
   return (
     <div
-      ref={tocRef}
       className={cn(
         'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
         '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4'
@@ -65,7 +63,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
           <p className="_mb-4 _font-semibold _tracking-tight">
             {renderComponent(themeConfig.toc.title)}
           </p>
-          <ul>
+          <ul ref={tocRef}>
             {toc.map(({ id, value, depth }) => (
               <li className="_my-2 _scroll-my-6 _scroll-py-6" key={id}>
                 <a
@@ -120,7 +118,9 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
 
           {renderComponent(themeConfig.toc.extraContent)}
 
-          {themeConfig.toc.backToTop && <BackToTop className={linkClassName} />}
+          {themeConfig.toc.backToTop && (
+            <BackToTop className={linkClassName} hidden={activeIndex < 2} />
+          )}
         </div>
       )}
     </div>

packages/nextra-theme-docs/src/constants.tsx

@@ -193,7 +193,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
     }
   },
   toc: {
-    backToTop: false,
+    backToTop: true,
     component: TOC,
     float: true,
     title: 'On This Page'

packages/nextra/__test__/__snapshots__/normalize-page.spec.ts.snap

@@ -1913,7 +1913,6 @@ exports[`normalize-page > zh-CN getting-started 1`] = `
         },
         {
           "name": "ssr",
-          "route": "#",
           "title": "Next.js SSR",
           "type": "doc",
         },
@@ -2110,7 +2109,6 @@ exports[`normalize-page > zh-CN getting-started 1`] = `
     },
     {
       "name": "ssr",
-      "route": "#",
       "title": "Next.js SSR",
       "type": "doc",
     },
@@ -2306,7 +2304,6 @@ exports[`normalize-page > zh-CN getting-started 1`] = `
     {
       "isUnderCurrentDocsTree": true,
       "name": "ssr",
-      "route": "#",
       "title": "Next.js SSR",
       "type": "doc",
     },
@@ -2539,7 +2536,6 @@ exports[`normalize-page > zh-CN home 1`] = `
         },
         {
           "name": "ssr",
-          "route": "#",
           "title": "Next.js SSR",
           "type": "doc",
         },
@@ -2736,7 +2732,6 @@ exports[`normalize-page > zh-CN home 1`] = `
     },
     {
       "name": "ssr",
-      "route": "#",
       "title": "Next.js SSR",
       "type": "doc",
     },
@@ -2932,7 +2927,6 @@ exports[`normalize-page > zh-CN home 1`] = `
     {
       "isUnderCurrentDocsTree": true,
       "name": "ssr",
-      "route": "#",
       "title": "Next.js SSR",
       "type": "doc",
     },

packages/nextra/__test__/__snapshots__/page-map.test.ts.snap

@@ -857,7 +857,6 @@ exports[`Page Process > should match i18n site page maps 1`] = `
             "basic": "Uso Básico",
             "error-handling": "Manejo De Errores",
             "infinite-loading": "Carga Infinita",
-            "ssr": "Next.js SSR",
           },
         },
         {