feat: update MDX components and wrapper for improved server-side rendering and dynamic route handling

fix: adjust Giscus comment script attributes for better theme synchronization and error handling
chore: update primary and document site URLs in configuration

Author: Mile-Away

mdx-components.tsx

@@ -1,9 +1,12 @@
-import * as mdxComponents from '@/components/mdx'
+import * as mdxClientComponents from '@/components/mdx'
+import { wrapper as ServerWrapper } from '@/components/mdx-wrapper'
 import { type MDXComponents } from 'mdx/types'
 
 export function useMDXComponents(components: MDXComponents) {
   return {
     ...components,
-    ...mdxComponents,
+    ...mdxClientComponents,
+    // Override wrapper with server component to avoid passing dynamic route props
+    wrapper: ServerWrapper,
   }
 }

package.json

@@ -3,6 +3,9 @@
   "packageManager": "yarn@1.22.22",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=18.18 <25"
+  },
   "scripts": {
     "dev": "next dev -p 32235",
     "tsc": "tsc --noEmit",

src/app/(cn)/(studio)/layout.tsx

@@ -91,15 +91,4 @@ export default async function RootLayout({
       </Layout>
     </div>
   )
-}
-
-/**
- * 正则表达式解释：
- *
- * - `(` 和 `)`：这是一个捕获组的开始和结束。捕获组是一种用于将正则表达式的一部分括起来，以便对该部分进行操作（例如，使用 `|` 操作符实现“或”逻辑）的方式。在这个例子中，捕获组包含了两种可能的匹配：字符串开头 `^` 或 `/` 字符。
- * - `^`：这个符号表示字符串的开头。当它出现在正则表达式的开始位置时，它要求匹配只能发生在字符串的开头。在这个例子中，它表示我们希望在字符串开头处找到 `page.mdx`。
- * - `|`：这个符号表示“或”操作，在正则表达式中，它表示我们希望匹配两个或多个可能的选项中的任意一个。在这个例子中，我们希望匹配字符串开头 `^` 或 `/` 字符。
- * - `\/`：这里的 `/` 字符表示字面上的斜线字符。由于斜线 `/` 通常用于表示正则表达式的边界，因此在这里需要使用反斜线 `\` 对其进行转义，以表示我们实际上想要匹配的是斜线字符本身。
- *
- * 总结一下，`(^|\/)` 这个捕获组的意义是：我们希望建立一个捕获组，以便在字符串开头或斜线字符之后找到 `page.mdx`。这样，当我们使用 `replace` 函数时，我们可以删除匹配到的部分（即 `page.mdx` 以及可能存在的前导斜线），从而将文件名转换为对应的路由路径。
- */
+}

src/components/GiscusComment.tsx

@@ -38,21 +38,22 @@ export default function GiscusComment() {
       script.setAttribute('data-repo-id', 'R_kgDOOI9EFg')
       script.setAttribute('data-category', 'Announcements')
       script.setAttribute('data-category-id', 'DIC_kwDOOI9EFs4Cr9K0')
-      script.setAttribute('data-mapping', 'specific')
-      script.setAttribute('data-term', pathname)
-      script.setAttribute('data-strict', '1')
+      script.setAttribute('data-mapping', 'pathname')
+      script.setAttribute('data-strict', '0')
       script.setAttribute('data-reactions-enabled', '1')
       script.setAttribute('data-emit-metadata', '0')
       script.setAttribute('data-input-position', 'top')
-      script.setAttribute(
-        'data-theme',
-        resolvedTheme === 'dark' ? 'transparent_dark' : 'light',
-      )
+      script.setAttribute('data-theme', 'preferred_color_scheme')
       script.setAttribute('data-loading', 'lazy')
-      script.setAttribute('data-lang', 'zh-CN')
+      script.setAttribute('data-lang', 'en')
       script.crossOrigin = 'anonymous'
       script.async = true
 
+      // 错误处理
+      script.onerror = () => {
+        console.error('Failed to load Giscus script')
+      }
+
       // 找到Giscus容器并添加脚本
       const giscusContainer = document.querySelector('.giscus')
       if (giscusContainer) {
@@ -75,46 +76,29 @@ export default function GiscusComment() {
     } // 依赖 resolvedTheme 是正确的
   }, [pathname, resolvedTheme]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // 监听主题变化，实时更新Giscus主题
+  // 使用 preferred_color_scheme 后，Giscus 会自动根据系统主题切换
+  // 如果需要手动同步主题，可以保留以下代码
   useEffect(() => {
     if (!isGiscusLoaded) return
 
     const updateGiscusTheme = () => {
       const iframe = document.querySelector(
         'iframe.giscus-frame',
       ) as HTMLIFrameElement
-      if (iframe) {
-        const theme = resolvedTheme === 'dark' ? 'transparent_dark' : 'light'
-        iframe.contentWindow?.postMessage(
-          { giscus: { setConfig: { theme } } },
+      if (iframe && iframe.contentWindow) {
+        // 使用 preferred_color_scheme 让 giscus 自动跟随系统主题
+        iframe.contentWindow.postMessage(
+          { giscus: { setConfig: { theme: 'preferred_color_scheme' } } },
           'https://giscus.app',
         )
       }
     }
 
-    // 监听Giscus消息
-    const handleMessage = (event: MessageEvent) => {
-      if (
-        event.origin === 'https://giscus.app' &&
-        event.data?.giscus?.discussion
-      ) {
-        updateGiscusTheme()
-      }
-    }
-
-    window.addEventListener('message', handleMessage)
-
-    // 轮询尝试更新主题，确保iframe加载后应用正确主题
-    let attempts = 0
-    const interval = setInterval(() => {
-      updateGiscusTheme()
-      attempts++
-      if (attempts >= 10) clearInterval(interval)
-    }, 500)
+    // 给 iframe 一些时间加载
+    const timer = setTimeout(updateGiscusTheme, 1000)
 
     return () => {
-      window.removeEventListener('message', handleMessage)
-      clearInterval(interval)
+      clearTimeout(timer)
     }
   }, [resolvedTheme, isGiscusLoaded])
 

src/components/mdx-wrapper.tsx

@@ -0,0 +1,16 @@
+import { Feedback } from '@/components/Feedback'
+import { Prose } from '@/components/Prose'
+
+// Server Component wrapper for MDX pages to avoid passing dynamic route props
+// like `searchParams` across a client boundary, which triggers Next.js 15
+// sync dynamic API errors when MDX spreads page props by default.
+export function wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <article className="flex h-full flex-col pb-10 pt-16">
+      <Prose className="flex-auto">{children}</Prose>
+      <footer className="mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl">
+        <Feedback />
+      </footer>
+    </article>
+  )
+}

src/config.ts

@@ -15,9 +15,9 @@ export const MEDIA_URL = ''
 export const WS_URL = process.env.NEXT_PUBLIC_WS_URL
 
 export const PrimarySite =
-  process.env.NEXT_PUBLIC_PRIMARY_SITE || 'https://cloudocs.netlify.app/'
+  process.env.NEXT_PUBLIC_PRIMARY_SITE || 'https://docs.sciol.ac.cn/'
 
 export const DocumentSite =
-  process.env.NEXT_PUBLIC_DOCUMENT_SITE || 'https://cloudocs.netlify.app/'
+  process.env.NEXT_PUBLIC_DOCUMENT_SITE || 'https://docs.sciol.ac.cn/'
 
 export const WorkflowSite = process.env.NEXT_PUBLIC_WORKFLOW_SITE || ''