[v3] rename primaryHue and primarySaturation theme options to color.hue and color.saturation (#2336)

Author: Dimitri POSTOLOV

.changeset/twenty-geese-return.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': major
+---
+
+rename `primaryHue` and `primarySaturation` theme options to `color.hue` and `color.saturation`

.eslintrc.cjs

@@ -199,7 +199,11 @@ module.exports = {
       files: 'examples/swr-site/**',
       settings: {
         tailwindcss: {
-          config: 'examples/swr-site/tailwind.config.js'
+          config: 'examples/swr-site/tailwind.config.js',
+          cssFiles: [
+            'examples/swr-site/styles.css',
+            'packages/nextra-theme-docs/dist/style.css'
+          ]
         },
         next: { rootDir: 'examples/swr-site' }
       }

.gitignore

@@ -5,8 +5,6 @@ node_modules/
 dist/
 .turbo/
 out/
-# Theme styles
-packages/nextra-theme-*/style.css
 
 # Stork related
 */**/public/*.st

docs/pages/docs/docs-theme/theme-configuration.mdx

@@ -199,12 +199,12 @@ saturation values for light and dark themes.
 <OptionTable
   options={[
     [
-      'primaryHue',
+      'color.hue',
       'number | { dark: number; light: number }',
       'The hue of the primary theme color.'
     ],
     [
-      'primarySaturation',
+      'color.saturation',
       'number | { dark: number; light: number }',
       'The saturation of the primary theme color.'
     ]
@@ -233,7 +233,7 @@ export const hue = (
         )
       }}
     />
-    <code className="w-14 text-sm text-gray-500" />
+    <label className="text-sm text-gray-500 w-14" />
   </div>
 )
 
@@ -253,7 +253,7 @@ export const saturation = (
         )
       }}
     />
-    <code className="text-sm text-gray-500 w-14" />
+    <label className="text-sm text-gray-500 w-14" />
   </div>
 )
 

examples/swr-site/components/blog.tsx

@@ -17,7 +17,7 @@ export function Blog() {
         {page.frontMatter?.description}
         <Link
           href={page.route}
-          className="block nx-text-primary-600 underline underline-offset-2 decoration-from-font"
+          className="block _text-primary-600 underline underline-offset-2 decoration-from-font"
         >
           Read more →
         </Link>

examples/swr-site/styles.css

@@ -1,18 +1,5 @@
 @tailwind utilities;
 
-.docs-search > span {
-  width: 100%;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header span {
-  display: inline-block;
-}
-.algolia-autocomplete .ds-dropdown-menu {
-  width: 500px;
-  min-width: 300px;
-  max-width: calc(100vw - 50px);
-}
-
 .dark .invert-on-dark {
   filter: invert(1) brightness(1.8);
 }

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

@@ -14,7 +14,7 @@ export function Head(): ReactElement {
   // `head` can be either FC or ReactNode. We have to directly call it if it's an
   // FC because hooks like Next.js' `useRouter` aren't allowed inside NextHead.
   const head = typeof config.head === 'function' ? config.head({}) : config.head
-  const { primaryHue: hue, primarySaturation: saturation } = config
+  const { hue, saturation } = config.color
   const { dark: darkHue, light: lightHue } =
     typeof hue === 'number' ? { dark: hue, light: hue } : hue
   const { dark: darkSaturation, light: lightSaturation } =

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

@@ -49,6 +49,13 @@ export const DEFAULT_THEME: DocsThemeConfig = {
       </>
     )
   },
+  color: {
+    hue: {
+      dark: 204,
+      light: 212
+    },
+    saturation: 100
+  },
   darkMode: true,
   direction: 'ltr',
   docsRepositoryBase: 'https://github.com/shuding/nextra',
@@ -120,14 +127,6 @@ export const DEFAULT_THEME: DocsThemeConfig = {
     content: 'Submit an issue about broken link →',
     labels: 'bug'
   },
-  primaryHue: {
-    dark: 204,
-    light: 212
-  },
-  primarySaturation: {
-    dark: 100,
-    light: 100
-  },
   project: {
     icon: (
       <>

packages/nextra-theme-docs/src/schemas.ts

@@ -100,18 +100,20 @@ export const themeSchema = /* @__PURE__ */ (() =>
       content: z.custom<ReactNode | FC>(...reactNode),
       labels: z.string()
     }),
-    primaryHue: z.number().or(
-      z.strictObject({
-        dark: z.number(),
-        light: z.number()
-      })
-    ),
-    primarySaturation: z.number().or(
-      z.strictObject({
-        dark: z.number(),
-        light: z.number()
-      })
-    ),
+    color: z.strictObject({
+      hue: z.number().or(
+        z.strictObject({
+          dark: z.number(),
+          light: z.number()
+        })
+      ),
+      saturation: z.number().or(
+        z.strictObject({
+          dark: z.number(),
+          light: z.number()
+        })
+      )
+    }),
     project: z.strictObject({
       icon: z.custom<ReactNode | FC>(...reactNode),
       link: z.string().startsWith('https://').optional()

packages/nextra/src/server/index.ts

@@ -97,6 +97,18 @@ const nextra: Nextra = nextraConfig => {
           }
         }
 
+        // Fixes https://github.com/vercel/next.js/issues/55872
+        if (config.watchOptions.ignored instanceof RegExp) {
+          const ignored = config.watchOptions.ignored.source
+
+          config.watchOptions = {
+            ...config.watchOptions,
+            ignored: new RegExp(
+              ignored.replace('(\\.(git|next)|node_modules)', '\\.(git|next)')
+            )
+          }
+        }
+
         const defaultESMAppPath = require.resolve('next/dist/esm/pages/_app.js')
         const defaultCJSAppPath = require.resolve('next/dist/pages/_app.js')