chore(nextra-theme-docs): provide type for `DocsThemeConfig.nextTheme…

…s` instead of `object` (#541) * chore(nextra-theme-docs): provide type for DocsThemeConfig.nextThemes * fix * Update packages/nextra-theme-docs/src/index.tsx * add changeset * fix * fix
shuding · Jul 23, 2022 · af72f85 · af72f85
1 parent 3ef42cb
commit af72f85
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 34 deletions.
diff --git a/.changeset/eight-carpets-pretend.md b/.changeset/eight-carpets-pretend.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+chore(nextra-theme-docs): provide type for `DocsThemeConfig.nextThemes` instead of `object`
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
@@ -173,15 +173,14 @@ const Content: React.FC<LayoutProps> = ({
 
   const headingArr = headings ?? []
   return (
-    <React.Fragment>
-      <Head title={title} locale={locale} meta={meta} />
       <MenuContext.Provider
         value={{
           menu,
           setMenu,
           defaultMenuCollapsed: !!config.defaultMenuCollapsed
         }}
       >
+        <Head title={title} locale={locale} meta={meta} />
         <div
           className={cn('nextra-container main-container flex flex-col', {
             rtl: isRTL,
@@ -223,12 +222,12 @@ const Content: React.FC<LayoutProps> = ({
                 <Body
                   themeContext={themeContext}
                   breadcrumb={
-                    activeType === 'page' ? null : themeContext.breadcrumb ? (
+                    activeType !== 'page' && themeContext.breadcrumb ? (
                       <Breadcrumb activePath={activePath} />
                     ) : null
                   }
                   navLinks={
-                    activeType === 'page' ? null : themeContext.pagination ? (
+                    activeType !== 'page' && themeContext.pagination ? (
                       <NavLinks
                         flatDirectories={flatDocsDirectories}
                         currentIndex={activeIndex}
@@ -248,27 +247,24 @@ const Content: React.FC<LayoutProps> = ({
           ) : null}
         </div>
       </MenuContext.Provider>
-    </React.Fragment>
   )
 }
 interface DocsLayoutProps extends PageOpt {
   meta: Meta
 }
-const createLayout = (opts: DocsLayoutProps, _config: DocsThemeConfig) => {
-  const extendedConfig = Object.assign({}, defaultConfig, _config, opts)
-
+const createLayout = (opts: DocsLayoutProps, config: DocsThemeConfig) => {
+  const extendedConfig = Object.assign({}, defaultConfig, config, opts)
+  const nextThemes = extendedConfig.nextThemes || {}
   const Page = ({ children }: { children: React.ReactChildren }) => children
 
   Page.getLayout = (page: any) => (
       <ThemeConfigContext.Provider value={extendedConfig}>
         <ThemeProvider
           attribute="class"
-          disableTransitionOnChange={true}
-          {...{
-            defaultTheme: extendedConfig.nextThemes.defaultTheme,
-            storageKey: extendedConfig.nextThemes.storageKey,
-            forcedTheme: extendedConfig.nextThemes.forcedTheme
-          }}
+          disableTransitionOnChange
+          defaultTheme={nextThemes.defaultTheme}
+          storageKey={nextThemes.storageKey}
+          forcedTheme={nextThemes.forcedTheme}
         >
           <Content {...opts}>{page}</Content>
         </ThemeProvider>

diff --git a/packages/nextra-theme-docs/src/misc/default.config.tsx b/packages/nextra-theme-docs/src/misc/default.config.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
+import { DocsThemeConfig } from '../types'
 
-const defaultTheme = {
+const defaultTheme: DocsThemeConfig = {
   projectLink: 'https://github.com/shuding/nextra',
   docsRepositoryBase: 'https://github.com/shuding/nextra',
   titleSuffix: ' – Nextra',
@@ -11,7 +12,6 @@ const defaultTheme = {
   nextThemes: {
     defaultTheme: 'system',
     storageKey: 'theme',
-    forcedTheme: undefined
   },
   defaultMenuCollapsed: false,
   // @TODO: Can probably introduce a set of options to use Google Fonts directly
@@ -21,15 +21,15 @@ const defaultTheme = {
   footerEditLink: 'Edit this page',
   gitTimestamp: 'Last updated on',
   logo: (
-    <React.Fragment>
+    <>
       <span className="mr-2 font-extrabold hidden md:inline">Nextra</span>
       <span className="text-gray-600 font-normal hidden md:inline">
         The Next Docs Builder
       </span>
-    </React.Fragment>
+    </>
   ),
   head: (
-    <React.Fragment>
+    <>
       <meta name="msapplication-TileColor" content="#ffffff" />
       <meta httpEquiv="Content-Language" content="en" />
       <meta name="description" content="Nextra: the next docs builder" />
@@ -38,9 +38,9 @@ const defaultTheme = {
       <meta property="og:title" content="Nextra: the next docs builder" />
       <meta property="og:description" content="Nextra: the next docs builder" />
       <meta name="apple-mobile-web-app-title" content="Nextra" />
-    </React.Fragment>
+    </>
   ),
-  searchPlaceholder: ({ locale }: { locale?: string }) => {
+  searchPlaceholder({ locale }: { locale?: string }) {
     if (locale === 'zh-CN') return '搜索文档...'
     return 'Search documentation...'
   },

diff --git a/packages/nextra-theme-docs/src/types.ts b/packages/nextra-theme-docs/src/types.ts
@@ -1,4 +1,5 @@
 import React from 'react'
+import { ThemeProviderProps } from 'next-themes/dist/types'
 
 export interface DocsThemeConfig {
   projectLink?: string
@@ -17,13 +18,10 @@ export interface DocsThemeConfig {
   prevLinks?: boolean
   search?: boolean
   darkMode?: boolean
-  /**
-   * A subset of configurations for https://github.com/pacocoursey/next-themes#themeprovider
-   * - defaultTheme
-   * - storageKey
-   * - forcedTheme
-   */
-  nextThemes?: object
+  nextThemes?: Pick<
+    ThemeProviderProps,
+    'defaultTheme' | 'storageKey' | 'forcedTheme'
+  >
   defaultMenuCollapsed?: boolean
   font?: boolean
   footer?: boolean
@@ -77,14 +75,14 @@ export interface DocsThemeConfig {
 }
 
 export type PageTheme = {
-  navbar: Boolean
-  sidebar: Boolean
-  toc: Boolean
-  pagination: Boolean
-  footer: Boolean
+  navbar: boolean
+  sidebar: boolean
+  toc: boolean
+  pagination: boolean
+  footer: boolean
   layout: 'default' | 'full' | 'raw'
   typesetting: 'default' | 'article'
-  breadcrumb: Boolean
+  breadcrumb: boolean
 }
 export interface Meta extends PageTheme {
   title: string