[v4] more work (#3298)

* more * more * more * more * more * more * more * use `next-view-transitions` for transition in `nextra-theme-blog` * more * more * more * more * more * more * prettier * add redirect * more * prettier * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * lint * more * more * more * more * polish * prettier * more * more * more * more * more * more * more * more * better select * more * more * more * more * lint * more * more * more * more * fix edit on github and last updated at for catch all routes * polish banner * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * more * lint * more * fix * lint * fix test * update snapshots
shuding · Sep 27, 2024 · 1e77fab · 1e77fab
1 parent 47e3255
commit 1e77fab
Show file tree

Hide file tree

Showing 151 changed files with 1,002 additions and 1,187 deletions.
diff --git a/.changeset/calm-lemons-poke.md b/.changeset/calm-lemons-poke.md
@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': major
+'nextra-theme-docs': major
+'nextra': major
+---
+
+move `<Collapse>`, `<Details>`, `<Summary>`, `<SkipNavContent>`, `SkipNavLink`, `<Select>` and `<Bleed>` from `nextra-theme-docs` to `nextra/components`
diff --git a/.changeset/grumpy-coats-kneel.md b/.changeset/grumpy-coats-kneel.md
@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+fix edit on github and last updated at for catch all routes
diff --git a/.changeset/kind-chairs-travel.md b/.changeset/kind-chairs-travel.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': minor
+---
+
+use `next-view-transitions` for transition in `nextra-theme-blog`
diff --git a/.changeset/lemon-ducks-sniff.md b/.changeset/lemon-ducks-sniff.md
@@ -0,0 +1,5 @@
+---
+'nextra': major
+---
+
+remove `nextra/remote`, `nextra/schemas` and `nextra/remark-plugins`
diff --git a/.changeset/stupid-mugs-rule.md b/.changeset/stupid-mugs-rule.md
@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': major
+'nextra': major
+---
+
+remove `renderComponent` and `renderString`
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -151,21 +151,21 @@ module.exports = {
  config: 'packages/nextra-theme-docs/tailwind.config.ts',
  callees: ['cn'],
  whitelist: [
+ 'nextra-navbar',
+ 'nextra-navbar-blur',
+ 'nextra-sidebar',
  'nextra-breadcrumb',
- 'nextra-bleed',
  'nextra-menu-desktop',
- 'nextra-menu-mobile'
+ 'nextra-menu-mobile',
+ 'nextra-toc'
  ]
  }
  },
  rules: {
  ...TAILWIND_CONFIG.rules,
  'no-restricted-imports': [
  'error',
- {
- name: 'next/link',
- message: 'Use local <Anchor /> instead'
- }
+ { name: 'next/link', message: 'Use `<Anchor>` instead' }
  ]
  }
  },
@@ -175,9 +175,24 @@ module.exports = {
  files: 'packages/nextra-theme-blog/**',
  settings: {
  tailwindcss: {
- config: 'packages/nextra-theme-blog/tailwind.config.ts',
- whitelist: ['subheading-']
+ config: 'packages/nextra-theme-blog/tailwind.config.ts'
  }
+ },
+ rules: {
+ ...TAILWIND_CONFIG.rules,
+ 'no-restricted-imports': [
+ 'error',
+ {
+ name: 'next/link',
+ message: 'Use `<Link>` from `next-view-transitions` instead'
+ },
+ {
+ name: 'next/navigation',
+ importNames: ['useRouter'],
+ message:
+ 'Use `useTransitionRouter` from `next-view-transitions` instead'
+ }
+ ]
  }
  },
  // ⚙️ nextra
@@ -188,7 +203,12 @@ module.exports = {
  tailwindcss: {
  config: 'packages/nextra-theme-docs/tailwind.config.ts',
  callees: ['cn'],
- whitelist: ['nextra-code', 'nextra-filetree']
+ whitelist: [
+ 'nextra-code',
+ 'nextra-filetree',
+ 'nextra-bleed',
+ 'nextra-skip-nav'
+ ]
  }
  },
  rules: {

diff --git a/docs/app/_components/features/index.tsx b/docs/app/_components/features/index.tsx
@@ -40,7 +40,7 @@ export function Feature({
  {children}
  {href && (
  <Link
- className={cn('nextra-focus', styles.link)}
+ className={cn('focus-visible:nextra-focus', styles.link)}
  href={href}
  target="_blank"
  rel="noreferrer"

diff --git a/docs/app/docs/docs-theme/_meta.ts b/docs/app/docs/docs-theme/_meta.ts
@@ -2,6 +2,5 @@ export default {
  start: '',
  'page-configuration': '',
  'theme-configuration': '',
- 'built-ins': 'Built-ins',
  api: 'API'
 }
diff --git a/docs/app/docs/docs-theme/built-ins/page.mdx b/docs/app/docs/docs-theme/built-ins/page.mdx
diff --git a/docs/app/docs/docs-theme/theme-configuration/page.mdx b/docs/app/docs/docs-theme/theme-configuration/page.mdx
@@ -74,9 +74,9 @@ favicon, etc.
 
 <Table>
 
-| | |  |
-| ---- | ------------------------------ | --------------------------------------------- |
-| head | `React.ReactNode \| React.FC` | Component that renders the `<head />` content |
+| | | |
+| ---- | ------------------------------ | ------------------------------------------- |
+| head | `React.ReactNode \| React.FC` | Component that renders the `<head>` content |
 
 </Table>
 

diff --git a/docs/app/docs/guide/_meta.ts b/docs/app/docs/guide/_meta.ts
@@ -8,7 +8,6 @@ export default {
  i18n: '',
  'custom-css': '',
  search: '',
- twoslash: '',
- advanced: '',
- 'built-ins': ''
+ 'built-ins': '',
+ advanced: ''
 }
diff --git a/docs/app/docs/guide/advanced/playground/_demo.tsx b/docs/app/docs/guide/advanced/playground/_demo.tsx
@@ -59,7 +59,10 @@ Z --> G
 
  return (
  <div className="grid grid-cols-2 gap-2 mt-6">
- <Pre data-filename="MDX" icon={<MdxIcon className="_h-4 _shrink-0" />}>
+ <Pre
+ data-filename="MDX"
+ icon={<MdxIcon height="16" className="_shrink-0" />}
+ >
  <Code>
  <span
  ref={spanRef}

diff --git a/docs/app/docs/guide/twoslash/page.mdx → ...app/docs/guide/advanced/twoslash/page.mdx b/docs/app/docs/guide/twoslash/page.mdx → ...app/docs/guide/advanced/twoslash/page.mdx
diff --git a/.../docs/docs-theme/built-ins/bleed/page.mdx → docs/app/docs/guide/built-ins/bleed/page.mdx b/.../docs/docs-theme/built-ins/bleed/page.mdx → docs/app/docs/guide/built-ins/bleed/page.mdx
@@ -1,4 +1,4 @@
-import { Bleed } from 'nextra-theme-docs'
+import { Bleed } from 'nextra/components'
 
 # Bleed
 
@@ -37,7 +37,7 @@ You can even make it full-bleed using `<Bleed full>`:
 ## Usage
 
 ```mdx filename="MDX"
-import { Bleed } from 'nextra-theme-docs'
+import { Bleed } from 'nextra/components'
 
 <Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
 

diff --git a/docs/app/docs/guide/built-ins/page.mdx b/docs/app/docs/guide/built-ins/page.mdx
@@ -38,8 +38,9 @@ your content:
  href="/docs/guide/built-ins/steps"
  />
  <Cards.Card
- icon={<FolderTreeIcon className="size-5" />}
+ icon={<FolderTreeIcon />}
  title="FileTree"
  href="/docs/guide/built-ins/filetree"
  />
+ <Cards.Card title="Bleed" href="/docs/guide/built-ins/bleed" />
 </Cards>
diff --git a/docs/app/globals.css b/docs/app/globals.css
@@ -40,21 +40,3 @@ code.text-\[\.9em\] {
  display: none;
  }
 }
-
-.nextra-logo {
- mask-image: linear-gradient(
- 60deg,
- black 25%,
- rgba(0, 0, 0, 0.2) 50%,
- black 75%
- );
- mask-size: 400%;
- mask-position: 0;
-}
-
-.nextra-logo:hover {
- mask-position: 100%;
- transition:
- mask-position 1s ease,
- -webkit-mask-position 1s ease;
-}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,9 +1,10 @@
+import { NextraLogo, VercelLogo } from '@components/icons'
 import type { Metadata, Viewport } from 'next'
 import { Footer, Layout, Navbar } from 'nextra-theme-docs'
 import { Banner, Head } from 'nextra/components'
 import type { ReactNode } from 'react'
 import './globals.css'
-import { NextraLogo, VercelLogo } from '@components/icons'
+import cn from 'clsx'
 
 export const viewport: Viewport = Head.viewport
 
@@ -72,25 +73,33 @@ export default async function RootLayout({
  href="https://nextra.site"
  target="_blank"
  rel="noreferrer"
- className="nextra-focus"
+ className="focus-visible:nextra-focus"
  >
  🎉 Nextra 4.0 is released. Read more →
  </a>
  </Banner>
  <Navbar
- logo={<NextraLogo className="nextra-logo h-5" />}
+ logo={
+ <NextraLogo
+ height="20"
+ className={cn(
+ '[mask-position:0] [mask-size:400%] [mask-image:linear-gradient(60deg,#000_25%,rgba(0,0,0,.2)_50%,#000_75%)]',
+ 'hover:[mask-position:100%] hover:[transition:mask-position_1s_ease]'
+ )}
+ />
+ }
  projectLink="https://github.com/shuding/nextra"
  />
  {children}
- <Footer className="flex-col items-center sm:items-start">
+ <Footer className="flex-col items-center md:items-start">
  <a
- className="nextra-focus flex items-center gap-1"
+ className="focus-visible:nextra-focus flex items-center gap-1"
  target="_blank"
  rel="noreferrer"
  title="vercel.com homepage"
  href="https://vercel.com?utm_source=nextra.site"
  >
- <span>Powered by</span>
+ Powered by
  <VercelLogo height="20" />
  </a>
  <p className="mt-6 text-xs">

diff --git a/docs/app/not-found.ts b/docs/app/not-found.ts
@@ -1,3 +1 @@
-'use client'
-
 export { NotFoundPage as default } from 'nextra-theme-docs'
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -233,7 +233,7 @@ export default function IndexPage() {
  loop
  muted
  playsInline
- className="nextra-focus dark:hidden block"
+ className="focus-visible:nextra-focus dark:hidden block"
  >
  <source src="/assets/search.mp4" type="video/mp4" />
  </video>
@@ -242,7 +242,7 @@ export default function IndexPage() {
  loop
  muted
  playsInline
- className="nextra-focus dark:block hidden -translate-x-4"
+ className="focus-visible:nextra-focus dark:block hidden -translate-x-4"
  >
  <source src="/assets/search-dark.mp4" type="video/mp4" />
  </video>

diff --git a/docs/components/icons/cloud.svg b/docs/components/icons/cloud.svg
diff --git a/docs/components/icons/diagram.svg b/docs/components/icons/diagram.svg
diff --git a/docs/components/icons/formula.svg b/docs/components/icons/formula.svg
diff --git a/docs/components/icons/table.svg b/docs/components/icons/table.svg
diff --git a/docs/components/video/index.tsx b/docs/components/video/index.tsx
@@ -6,7 +6,7 @@ export function Video({ src }: { src: string }) {
  playsInline
  loop
  controls
- className="nextra-focus mt-6 rounded-xl border dark:border-zinc-800"
+ className="focus-visible:nextra-focus mt-6 rounded-xl border dark:border-zinc-800"
  >
  <source src={src} type="video/mp4" />
  </video>

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -32,9 +32,14 @@ export default withNextra({
  permanent: true
  },
  {
- source: '/docs/docs-theme/built-ins/:slug(callout|steps|tabs)',
+ source: '/docs/docs-theme/built-ins/:slug(callout|steps|tabs|bleed)',
  destination: '/docs/guide/built-ins/:slug',
  permanent: true
+ },
+ {
+ source: '/docs/docs-theme/built-ins',
+ destination: '/docs/guide/built-ins',
+ permanent: true
  }
  ],
  webpack(config) {
@@ -59,10 +64,6 @@ export default withNextra({
  return config
  },
  experimental: {
- optimizePackageImports: [
- '@components/icons',
- 'nextra/components',
- 'nextra/hooks'
- ]
+ optimizePackageImports: ['@components/icons', 'nextra/components']
  }
 })
diff --git a/docs/public/favicon-dark.svg b/docs/public/favicon-dark.svg