add typescript twoslash

Author: undefined-moe

app/global.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
+@import 'fumadocs-twoslash/twoslash.css';
 
 @source '../node_modules/fumadocs-ui/dist/**/*.js';

content/docs/Hydro/dev/typescript.md

@@ -10,7 +10,7 @@ title: 使用 TypeScript 编写插件
 - 修改代码后，尝试更新系统时，自己的修改被新版本覆盖，需要手动合并（或是直接丢失了更改），极大幅度增加维护成本；  
 - 第三方社区出现的大量修改分支无法直接按需求进行组合/拼装，或是功能间存在冲突；  
 
-基于以上痛点，Hydro 开创性的使用了插件系统，提供了一套完整的开发 API 供开发者使用，开发者基于提供的较稳定的 API 进行功能的编写，而无需过多关心内部实现，在多个版本间达到一致性，同时提供热重载功能，提升开发效率。
+基于以上痛点，Hydro 开创性的使用了插件系统，提供了一套完整的开发 API 供开发者使用，开发者基于提供的较稳定的 API 进行功能的编写，而无需过多关心内部实现，将功能拆分成多个最小的单元，允许用户根据需要进行自由组合，并在多个版本间达到一致性，同时提供热重载功能，提升开发效率。
 
 此教程将以编写剪贴板插件为例进行插件开发的说明。
 
@@ -85,12 +85,12 @@ args 为传入的参数集合（包括 QueryString, Body, Path）中的全部参
 
 # Step3 index.ts
 
-```ts
+```ts twoslash
 // @noErrors
 // @module: esnext
 // @filename: index.ts
 import {
-    db, definePlugin, Handler, NotFoundError, param, PermissionError, PRIV, Types,
+    db, definePlugin, Handler, NotFoundError, randomstring, param, PermissionError, PRIV, Types,
 } from 'hydrooj';
 
 const coll = db.collection('paste');
@@ -112,7 +112,7 @@ declare module 'hydrooj' {
 }
 
 async function add(userId: number, content: string, isPrivate: boolean): Promise<string> {
-    const pasteId = String.random(16); // Hydro 提供了此方法，创建一个长度为16的随机字符串
+    const pasteId = randomstring(16);
     // 使用 mongodb 为数据库驱动，相关操作参照其文档
     const result = await coll.insertOne({
         _id: pasteId,

content/docs/Hydro/install/compiler.mdx

@@ -13,14 +13,13 @@ title: 编译器
 以下是常用编译器的示例：
 
 ```sh
-nix-env -iA nixpkgs.busybox nixpkgs.bash nixpkgs.diffutils nixpkgs.unzip # 基础组件，已预装，不建议删除
+nix-env -iA nixpkgs.coreutils nixpkgs.bash nixpkgs.gawk nixpkgs.unzip # 基础组件，已预装，不建议删除
 nix-env -iA nixpkgs.gcc nixpkgs.fpc # C/C++ 和 Pascal，已预装，不建议删除
 nix-env -iA nixpkgs.ghc # Haskell 
 nix-env -iA nixpkgs.rustc # Rust
-nix-env -iA nixpkgs.python2 # Python2
-nix-env -iA nixpkgs.pythonPackages.numpy # Python2 Numpy 库
 nix-env -iA nixpkgs.python3Minimal
 nix-env -iA nixpkgs.python3Packages.numpy
+nix-env -iA nixpkgs.pypy3
 nix-env -iA nixpkgs.php # PHP
 nix-env -iA nixpkgs.go # Golang
 nix-env -iA nixpkgs.nodejs # NodeJS

content/docs/Hydro/install/proxy.mdx

@@ -19,7 +19,7 @@ Hydro 支持使用 Caddy, HaProxy 等工具进行反向代理，[此处](https:/
 Hydro 推荐您使用 [Caddy](https://caddyserver.com/)。以下为样例 Caddyfile。
 提示：如果您的服务器位于国内，则需要进行备案后才能使用 80 和 443 端口。
 
-```Caddyfile
+```
 hydro.ac {
   log {
     output file /data/access.log {

content/docs/Hydro/install/riscv.mdx

@@ -35,7 +35,7 @@ bash get-sources.sh
 
 给同目录的 `gen-config.sh` 添加 RISC-V 支持：
 
-```patch
+```diff
 diff --git a/src/third_party/mozjs/gen-config.sh b/src/third_party/mozjs/gen-config.sh
 index 9144a461..141e089b 100755
 --- a/src/third_party/mozjs/gen-config.sh
@@ -58,7 +58,7 @@ index 9144a461..141e089b 100755
 bash gen-config.sh riscv64 linux
 ```
 
-```patch
+```diff
 diff --git a/src/third_party/mozjs/platform/riscv64/linux/build/Unified_cpp_js_src0.cpp b/src/third_party/mozjs/platform/riscv64/linux/build/Unified_cpp_js_src0.cpp
 new file mode 100644
 index 00000000..624b0d97
@@ -77,7 +77,7 @@ index 00000000..624b0d97
 
 修改 MongoDB 的 `platform/pause.h` ，添加 RISC-V 支持：
 
-```patch
+```diff
 diff --git a/src/mongo/platform/pause.h b/src/mongo/platform/pause.h
 index 67fe3d94..b3f50efb 100644
 --- a/src/mongo/platform/pause.h
@@ -95,7 +95,7 @@ index 67fe3d94..b3f50efb 100644
 
 将上述 patch 传入 nixpkgs：
 
-```patch
+```diff
 diff --git a/pkgs/servers/nosql/mongodb/7.0.nix b/pkgs/servers/nosql/mongodb/7.0.nix
 index cb4bbf53279f..0526976d4e8b 100644
 --- a/pkgs/servers/nosql/mongodb/7.0.nix

mdx-components.tsx

@@ -0,0 +1,11 @@
+import * as Twoslash from 'fumadocs-twoslash/ui';
+import defaultComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+  return {
+    ...defaultComponents,
+    ...Twoslash,
+    ...components,
+  };
+}

next.config.mjs

@@ -6,7 +6,7 @@ const withMDX = createMDX();
 const config = {
   output: 'export',
   reactStrictMode: true,
-  serverExternalPackages: ['twoslash'],
+  serverExternalPackages: ['twoslash', 'typescript'],
   images: {
     unoptimized: true,
     dangerouslyAllowSVG: true,

package.json

@@ -11,31 +11,33 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
-    "@orama/stopwords": "^3.1.1",
-    "@orama/tokenizers": "patch:@orama/tokenizers@npm%3A3.1.1#~/.yarn/patches/@orama-tokenizers-npm-3.1.1-d353c0f792.patch",
-    "embla-carousel-react": "^8.5.2",
-    "fumadocs-core": "15.0.15",
-    "fumadocs-mdx": "11.5.6",
-    "fumadocs-twoslash": "^3.1.0",
-    "fumadocs-ui": "15.0.15",
-    "katex": "^0.16.21",
-    "lucide-react": "^0.477.0",
-    "next": "15.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@orama/stopwords": "^3.1.13",
+    "@orama/tokenizers": "^3.1.13",
+    "embla-carousel-react": "^8.6.0",
+    "fumadocs-core": "15.7.11",
+    "fumadocs-mdx": "11.9.1",
+    "fumadocs-twoslash": "^3.1.7",
+    "fumadocs-ui": "15.7.11",
+    "katex": "^0.16.22",
+    "lucide-react": "^0.544.0",
+    "next": "15.5.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rehype-katex": "^7.0.1",
-    "remark-math": "^6.0.0"
+    "remark-math": "^6.0.0",
+    "twoslash": "^0.3.4"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/postcss": "^4.1.13",
     "@types/mdx": "^2.0.13",
     "@types/node": "22.13.8",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "eslint": "^8",
-    "eslint-config-next": "15.2.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.0.9",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "15.5.3",
+    "hydrooj": "^5.0.0-beta.9",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.8.2"
   },
   "packageManager": "[email protected]"

source.config.ts

@@ -3,6 +3,7 @@ import rehypeKatex from 'rehype-katex';
 import remarkMath from 'remark-math';
 import { transformerTwoslash } from 'fumadocs-twoslash';
 import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
+import { createFileSystemTypesCache } from 'fumadocs-twoslash/cache-fs';
 
 export const docs = defineDocs({
   dir: 'content/docs',
@@ -19,7 +20,9 @@ export default defineConfig({
       },
       transformers: [
         ...(rehypeCodeDefaultOptions.transformers ?? []),
-        transformerTwoslash(),
+        transformerTwoslash({
+          typesCache: createFileSystemTypesCache(),
+        }),
       ],
     },
   },