fix: support native nextra compoents

Author: winverse

apps/book-server/books/base/package.json

@@ -13,7 +13,14 @@
     "next": "14.2.1",
     "nextra": "2.13.4",
     "nextra-theme-docs": "2.13.4",
+    "prettier": "3.2.5",
     "react": "18",
     "react-dom": "18"
+  },
+  "devDependencies": {
+    "@types/node": "20.12.5",
+    "@types/react": "18",
+    "@types/react-dom": "18",
+    "typescript": "5"
   }
 }

apps/book-server/src/common/errors/index.mts

@@ -2,6 +2,6 @@ export { BadRequestError } from './BadRequestErrors.mjs'
 export { ConfilctError } from './ConfilctError.mjs'
 export { ForbiddenError } from './ForbiddenError.mjs'
 export { HttpError, isHttpError } from './HttpError.mjs'
-export { NotFoundError } from './NotfoundError.mjs'
+export { NotFoundError } from './NotFoundError.mjs'
 export { UnauthorizedError } from './UnauthorizedError.mjs'
 export { InternalServerError } from './InternalServerError.mjs'

apps/book-server/src/common/plugins/global/errorHandlerPlugin.mts

@@ -5,7 +5,6 @@ import { FastifyPluginCallback } from 'fastify'
 import { container } from 'tsyringe'
 import fp from 'fastify-plugin'
 
-// TODO: apply fastify-plugin
 const errorHandlerPlugin: FastifyPluginCallback = (fastify, _, done) => {
   fastify.addHook('preHandler', function (request, reply, done) {
     if (request.body) {

apps/book-server/src/services/BookBuildService/index.mts

@@ -2,7 +2,7 @@ import path from 'node:path'
 import fs from 'fs-extra'
 import { exec as execCb } from 'node:child_process'
 import { promisify } from 'node:util'
-import { NotFoundError } from '@errors/NotfoundError.mjs'
+import { NotFoundError } from '@errors/NotFoundError.mjs'
 import { MongoService } from '@lib/mongo/MongoService.mjs'
 import { injectable, singleton } from 'tsyringe'
 import { ConfilctError } from '@errors/ConfilctError.mjs'
@@ -117,6 +117,7 @@ export class BookBuildService implements Service {
 
     fs.writeFileSync(`${dest}/theme.config.tsx`, themeConfigTemplate({ title: book.title }))
 
+    await exec('pnpm prettier -w .', { cwd: dest })
     const buildStdout = await this.buildTsToJs(dest)
     if (buildStdout) {
       this.mq.publish({
@@ -148,6 +149,7 @@ export class BookBuildService implements Service {
       const { stdout, stderr } = await exec('pnpm next build', { cwd: dest })
       if (stderr) {
         console.error(`stderr: ${stderr}`)
+        return stderr
       }
       return stdout
     } catch (error) {

apps/book-server/src/services/BookDeployService/index.mts

@@ -2,7 +2,7 @@ import path from 'node:path'
 import fs from 'fs-extra'
 import { injectable, singleton } from 'tsyringe'
 import { BookService } from '@services/BookService/index.mjs'
-import { NotFoundError } from '@errors/NotfoundError.mjs'
+import { NotFoundError } from '@errors/NotFoundError.mjs'
 import { WriterService } from '@services/WriterService/index.mjs'
 import { AwsS3Service } from '@lib/awsS3/AwsS3Service.mjs'
 import mime from 'mime'
@@ -34,12 +34,14 @@ export class BookDeployService implements Service {
     const writer = await this.writerService.findById(signedWriterId)
 
     if (!writer) {
+      console.log('Not found writer')
       throw new NotFoundError('Not found writer')
     }
 
     const book = await this.bookService.findByUrlSlug(url_slug)
 
     if (!book) {
+      console.log('Not found book')
       throw new NotFoundError('Not found book')
     }
 
@@ -52,6 +54,7 @@ export class BookDeployService implements Service {
     // find output
     const exists = fs.existsSync(output)
     if (!exists) {
+      console.log('Not found book output')
       throw new NotFoundError('Not found book output')
     }
 

apps/book-server/src/services/BookService/index.mts

@@ -1,4 +1,4 @@
-import { NotFoundError } from '@errors/NotfoundError.mjs'
+import { NotFoundError } from '@errors/NotFoundError.mjs'
 import { MongoService } from '@lib/mongo/MongoService.mjs'
 import { injectable, singleton } from 'tsyringe'
 import { BadRequestError } from '@errors/BadRequestErrors.mjs'

apps/book-server/src/services/PageService/index.mts

@@ -1,6 +1,6 @@
 import { BadRequestError } from '@errors/BadRequestErrors.mjs'
 import { ConfilctError } from '@errors/ConfilctError.mjs'
-import { NotFoundError } from '@errors/NotfoundError.mjs'
+import { NotFoundError } from '@errors/NotFoundError.mjs'
 import { UnauthorizedError } from '@errors/UnauthorizedError.mjs'
 import type {
   CreatePageInput,

apps/book-server/src/services/WriterService/index.mts

@@ -1,5 +1,5 @@
 import { Time } from '@constants/TimeConstants.mjs'
-import { NotFoundError } from '@errors/NotfoundError.mjs'
+import { NotFoundError } from '@errors/NotFoundError.mjs'
 import { Writer } from '@graphql/generated.js'
 import { GraphQLContext } from '@interfaces/graphql.mjs'
 import { JwtService } from '@lib/jwt/JwtService.mjs'

apps/book-server/src/templates/themeConfigTemplate.mts

@@ -6,8 +6,20 @@ export const themeConfigTemplate = ({ title }: Props) => {
   return `
   import { useRouter } from 'next/router'
   import type { DocsThemeConfig } from 'nextra-theme-docs'
-  import { useConfig } from 'nextra-theme-docs'
-  
+  import {
+  useConfig,
+  Callout,
+  Bleed,
+  Card,
+  Cards,
+  FileTree,
+  Tabs,
+  Tab,
+  Steps,
+} from 'nextra-theme-docs'
+
+  const components = { Callout, Bleed, Card, Cards, FileTree, Tabs, Tab, Steps } as any
+
   const config: DocsThemeConfig = {
     logo: <span>${title}</span>,
     editLink: {
@@ -73,6 +85,9 @@ export const themeConfigTemplate = ({ title }: Props) => {
         </>
       )
     },
+    components: {
+      ...components,
+    },
   }
   
   export default config

apps/book-web/src/layouts/MarkdownEditorLayout/MarkdownEditorLayout.tsx

@@ -165,6 +165,7 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
       }
       const { deploy } = await deployAsyncMutate({ input: { url_slug: bookUrlSlug } })
 
+      console.log('deploy', deploy)
       const event = new CustomEvent(nextraCustomEventName.deployEndEvent, {
         detail: { publishedUrl: deploy.published_url },
       })

apps/book-web/src/lib/graphqlFetch.ts

@@ -60,7 +60,6 @@ export default async function graphqlFetch<T>({
     throw new Error(message as any)
   }
 
-  
   const json = await res?.json()
   return json.data as T
 }

package.json

@@ -44,6 +44,6 @@
     "next": "14.2.3"
   },
   "dependencies": {
-    "turbo": "^2.0.4"
+    "turbo": "^2.0.6"
   }
 }

packages/markdown-editor/src/contexts/markdown-editor.tsx

@@ -34,8 +34,8 @@ type Props = {
 }
 
 export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Props) => {
-  const [isError, setIsError] = useState<boolean>(false)
   const [value, setValue] = useState<string>(editorValue)
+  const [isError, setIsError] = useState<boolean>(false)
   const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null)
   const [stat, setStat] = useState<Statistics | null>(null)
 
@@ -54,10 +54,12 @@ export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Pro
           onigHostUrl: process.env.NEXT_PUBLIC_CLIENT_HOST,
           isError,
         })
+
         if (!result) {
           setIsError(true)
           return
         }
+
         setMdxSource(result)
       } catch (_) {}
     }

packages/markdown-editor/src/mdx-compiler.ts

@@ -135,9 +135,10 @@ export const mdxCompiler = async (
     })
 
     return result
-  } catch (error) {
+  } catch (error: any) {
     if (process.env.NODE_ENV === 'development') {
       console.log('Failed to compile source', error)
+      throw new Error(error)
     }
     return null
   }