add: nextra Layout

Author: winverse

apps/web/src/app/books/page.tsx

@@ -1,11 +1,5 @@
-import Aside from '@/features/bookEdit/components/Aside'
-
 function page() {
-  return (
-    <>
-      <Aside />
-    </>
-  )
+  return <></>
 }
 
 export default page

apps/web/src/components/Layouts/NextraLayout/NextraLayout.module.css

@@ -0,0 +1,2 @@
+.block {
+}

apps/web/src/components/Layouts/NextraLayout/NextraLayout.test.tsx

@@ -0,0 +1,8 @@
+import NextraLayout from './NextraLayout'
+import { render } from '@testing-library/react'
+
+describe('NextraLayout', () => {
+  it('renders successfully', () => {
+    render(<NextraLayout />)
+  })
+})

apps/web/src/components/Layouts/NextraLayout/NextraLayout.tsx

@@ -0,0 +1,22 @@
+import { useInternals } from '@packages/nextra-theme-docs'
+import styles from './NextraLayout.module.css'
+import { bindClassNames } from '@/lib/styles/bindClassNames'
+
+const cx = bindClassNames(styles)
+
+type Props = {
+  children: React.ReactNode
+}
+
+function NextraLayout({ children }: Props) {
+  console.log('useInternals', useInternals)
+
+  return (
+    <div className={cx('block')}>
+      Nextral
+      {children}
+    </div>
+  )
+}
+
+export default NextraLayout

apps/web/src/components/Layouts/NextraLayout/index.tsx

@@ -0,0 +1 @@
+export { default } from './NextraLayout'

apps/web/src/features/bookEdit/components/Aside/Aside.tsx

@@ -1,17 +1,12 @@
-'use client'
-
 import styles from './Aside.module.css'
 import { bindClassNames } from '@/lib/styles/bindClassNames'
-import { Navbar } from '@packages/nextra-theme-docs'
-import { navbarFlatDirectories } from '../test/mock'
 
 const cx = bindClassNames(styles)
 
 function Aside() {
   return (
     <div className={cx('block')}>
       <div>books</div>
-      <Navbar flatDirectories={navbarFlatDirectories} items={[]} />
     </div>
   )
 }

apps/web/src/features/bookEdit/layout/BookEditLayout/BookEditLayout.tsx

@@ -2,6 +2,7 @@
 
 import styles from './BookEditLayout.module.css'
 import { bindClassNames } from '@/lib/styles/bindClassNames'
+import NextraLayout from '@/components/Layouts/NextraLayout'
 
 const cx = bindClassNames(styles)
 
@@ -10,7 +11,11 @@ type Props = {
 }
 
 function BookEditLayout({ children }: Props) {
-  return <div className={cx('block')}>{children}</div>
+  return (
+    <NextraLayout>
+      <div className={cx('block')}>{children}</div>
+    </NextraLayout>
+  )
 }
 
 export default BookEditLayout

apps/web/src/hooks/useCFUpload.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 
 import { UploadImageArgs, uploadImage } from '@/lib/api/files'

apps/web/src/hooks/useCurrentPath.ts

@@ -8,7 +8,7 @@ export default function useCurrentPath() {
   const search = useSearchParams()
 
   const currentPath = useMemo(() => {
-    const query = search.toString()
+    const query = search?.toString()
     return `${pathname === '/' ? '' : pathname}${query ? `?${query}` : ''}`
   }, [pathname, search])
 

apps/web/src/hooks/useInputs.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useReducer, useCallback, useMemo } from 'react'
 
 type UseInputsAction = {

apps/web/src/hooks/useSearchPosts.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Post,
   SearchPostsDocument,

apps/web/src/pages/books/edit/index.tsx

@@ -0,0 +1,12 @@
+import Aside from '@/features/bookEdit/components/Aside'
+import BookEditLayout from '@/features/bookEdit/layout/BookEditLayout'
+
+const BookEditPage = () => {
+  return (
+    <BookEditLayout>
+      <Aside />
+    </BookEditLayout>
+  )
+}
+
+export default BookEditPage

apps/web/tsconfig.json

@@ -3,7 +3,11 @@
   "compilerOptions": {
     "baseUrl": "./",
     "rootDir": "./",
-    "typeRoots": ["node_modules/@types/", "./src/types/", "./node_modules/@packages/**/**/*.d.ts"],
+    "typeRoots": [
+      "node_modules/@types/",
+      "./src/types/",
+      "./node_modules/@packages/**/**/*.d.ts"
+    ],
     "plugins": [
       {
         "name": "next"
@@ -13,9 +17,14 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-      "@/public/*": ["./public/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ],
+      "@/public/*": [
+        "./public/*"
+      ]
+    },
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
@@ -28,5 +37,8 @@
     "eslint.config.js",
     ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "dist"]
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }

packages/nextra-theme-docs/package.json

@@ -34,8 +34,8 @@
     "lint": "eslint --fix"
   },
   "peerDependencies": {
-    "next": ">=14.2.1",
-    "nextra": "^2.13.4",
+    "next": ">=9.5.3",
+    "nextra": "2.13.4",
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1"
   },
@@ -67,7 +67,7 @@
     "eslint": "^9.0.0",
     "jsdom": "^23.0.0",
     "next": "^14.2.1",
-    "nextra": "^2.13.4",
+    "nextra": "2.13.4",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
@@ -81,4 +81,5 @@
   "sideEffects": [
     "./src/polyfill.ts"
   ]
+  
 }

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

@@ -339,3 +339,5 @@ export const DEEP_OBJECT_KEYS = Object.entries(DEFAULT_THEME)
     }
   })
   .filter(Boolean)
+
+export const NEXTRA_INTERNAL = Symbol.for('__nextra_internal__')

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

@@ -211,7 +211,10 @@ const InnerLayout = ({
   )
 }
 
-export default function Layout({ children, ...context }: NextraThemeLayoutProps): ReactElement {
+export default function NextraDocLayout({
+  children,
+  ...context
+}: NextraThemeLayoutProps): ReactElement {
   return (
     <ConfigProvider value={context}>
       <InnerLayout {...context.pageOpts}>{children}</InnerLayout>
@@ -222,6 +225,7 @@ export default function Layout({ children, ...context }: NextraThemeLayoutProps)
 export { useConfig, PartialDocsThemeConfig as DocsThemeConfig }
 export { useMDXComponents } from 'nextra/mdx'
 export { Callout, Steps, Tabs, Tab, Cards, Card, FileTree } from 'nextra/components'
+
 export { useTheme } from 'next-themes'
 export { Link } from './mdx-components'
 export {

packages/nextra-theme-docs/src/type.d.ts

@@ -0,0 +1,21 @@
+import { a as PageOpts } from 'nextra/dist/types-2e9b0ab5.js'
+import * as react from 'react'
+import 'gray-matter'
+import 'mdast'
+
+/**
+ * This hook is used to access the internal state of Nextra, you should never
+ * use this hook in your application.
+ */
+declare function useInternals(): {
+  context: {
+    Content: react.FC
+    pageOpts: PageOpts<{
+      [key: string]: any
+    }>
+    themeConfig: any
+  }
+  Layout: react.FC<any>
+}
+
+export { useInternals }