From c018d560ace24ea34a0a4b2d3c562b9e17475bba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?wifi=E6=AD=AAf?= <1402772884@qq.com> Date: Mon, 17 Feb 2025 22:00:00 +0800 Subject: [PATCH] =?UTF-8?q?feat(mini-markdown-docs):=20=E6=96=B0=E5=A2=9E"?= =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E5=B0=9D=E8=AF=95"=E5=8A=9F=E8=83=BD,=20?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89loader=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=BA=90=E4=BF=A1=E6=81=AF=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/example/Layout.tsx | 4 ---- docs/docs/example/data.raw.txt | 17 +++++++++++--- docs/docs/example/editor.preview.jsx | 5 +++-- docs/docs/example/index.mdx | 1 + docs/loader/init-value-loader.js | 33 ++++++++++++++++++++++++++++ docs/package.json | 2 +- docs/rspress.config.ts | 5 +++-- 7 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 docs/loader/init-value-loader.js diff --git a/docs/docs/example/Layout.tsx b/docs/docs/example/Layout.tsx index 617642b..a125b7a 100644 --- a/docs/docs/example/Layout.tsx +++ b/docs/docs/example/Layout.tsx @@ -1,13 +1,9 @@ import React, { FC } from "react"; import "highlight.js/styles/atom-one-dark.css"; -// @ts-ignore -import initVal from "./data.raw.txt"; const Layout: FC<{ children: React.ReactNode; }> = ({ children }) => { - console.log(initVal); - return (
diff --git a/docs/docs/example/data.raw.txt b/docs/docs/example/data.raw.txt index b213ee8..d2cfe82 100644 --- a/docs/docs/example/data.raw.txt +++ b/docs/docs/example/data.raw.txt @@ -1,6 +1,6 @@ -# 介绍 +# Mini Markdown Editor -## 背景 +## 介绍 Mini Markdown Editor 是 2025年寒假字节青训营「前端」的一个开源项目。 @@ -9,32 +9,43 @@ Mini Markdown Editor 是 2025年寒假字节青训营「前端」的一个开源 该项目采用 `pnpm` + `monorepo` 进行管理，包含两个核心子项目： - `@mini-markdown-rc/ast-parser`：核心库，实现 Markdown 语法的 AST 解析器，用于解析 Markdown 文本，生成 AST、HTML。 + - `@mini-markdown-rc/editor`：一款 React 的 Markdown 编辑器。 ## 优点 简单易用、轻量、性能高，十万➕内容依然流畅。 - # 快速开始 ## 安装 ```bash + # npm + npm install @mini-markdown-rc/editor + # yarn + yarn add install @mini-markdown-rc/editor + # pnpm + pnpm add install @mini-markdown-rc/editor + ``` ## 使用 ```tsx + import { Editor } from "@mini-markdown-rc/editor"; export default function App() { + return ; + } + ``` diff --git a/docs/docs/example/editor.preview.jsx b/docs/docs/example/editor.preview.jsx index 1f30c93..0513e96 100644 --- a/docs/docs/example/editor.preview.jsx +++ b/docs/docs/example/editor.preview.jsx @@ -1,13 +1,14 @@ import { Editor } from "@mini-markdown-rc/editor"; -import { useDark } from "rspress/runtime"; +import { useDark, usePageData } from "rspress/runtime"; export default function () { const dark = useDark(); const theme = dark ? "dark" : "light"; + const pageData = usePageData(); return ( <> - + ); } diff --git a/docs/docs/example/index.mdx b/docs/docs/example/index.mdx index 4b276dc..580e2e6 100644 --- a/docs/docs/example/index.mdx +++ b/docs/docs/example/index.mdx @@ -1,6 +1,7 @@ --- pageType: custom title: 在线尝试 +initVal: './data.raw.txt' --- import Layout from "./Layout.tsx"; diff --git a/docs/loader/init-value-loader.js b/docs/loader/init-value-loader.js new file mode 100644 index 0000000..4a326d2 --- /dev/null +++ b/docs/loader/init-value-loader.js @@ -0,0 +1,33 @@ +const path = require("path"); +const fs = require("fs"); + +/** + * 自定义loader，用于将 mdx 文件中自定义源数据（ initVal 的值转为某个文件的内容） + * 例如： + * --- + * pageType: custom + * initVal: './data.raw.txt' + * --- + * + * 使用： + * import { usePageData } from "rspress/runtime"; + * const pageData = usePageData() + * pageData.page.frontmatter.initVal + */ +module.exports = function (source) { + // 使用正则表达式匹配 initVal 后的内容 + const initValMatch = source.match(/initVal:\s*['"]([^'"]+)['"]/); + if (initValMatch && initValMatch[1]) { + const initVal = initValMatch[1].trim(); + // 获取当前文件的绝对路径 resourcePath(webpack内置的) + const currentFilePath = this.resourcePath; + // 将相对路径转换为绝对路径 + const absolutePath = path.resolve(path.dirname(currentFilePath), initVal); + + // 读取文件内容 + const fileContent = fs.readFileSync(absolutePath, "utf-8"); + const newSource = source.replace(initValMatch[0], `initVal: '${fileContent}'`); + return newSource; + } + return source; +}; diff --git a/docs/package.json b/docs/package.json index 227c2e4..5782248 100644 --- a/docs/package.json +++ b/docs/package.json @@ -16,7 +16,7 @@ "tailwindcss": "^3.4.17" }, "dependencies": { - "@mini-markdown-rc/editor": "latest", + "@mini-markdown-rc/editor": "1.0.9", "antd": "^5.23.2", "highlight.js": "^11.11.1" } diff --git a/docs/rspress.config.ts b/docs/rspress.config.ts index 9f11027..2872ffd 100644 --- a/docs/rspress.config.ts +++ b/docs/rspress.config.ts @@ -15,8 +15,9 @@ export default defineConfig({ module: { rules: [ { - test: /\.raw.txt$/, - type: "asset/source", + enforce: "pre", + test: /\.mdx$/, + loader: "./loader/init-value-loader.js", }, ], }, -- Gitee