refactor: 💡 mdx editor renamed to mdx notes

data/blog/Next.js 全栈开发微信公众号 Markdown 排版编辑器.md

@@ -22,10 +22,10 @@ layout: PostLayout
 
 ## 前言
 
-其实应该叫微信公众号 MDX 排版编辑器，因为知道 markdown 的人很多，而知道 MDX 的人却很少，之前也写过一篇文章[《[MDX Editor] 微信排版工具新选择》](https://juejin.cn/post/7081948276169113631)，介绍了我开发这款编辑器的初衷，以及它的功能，阅读量那是相当的低，今天，我们将从技术实现的角度，来记录它的实现过程，没体验过的朋友可以先体验下。
+其实应该叫微信公众号 MDX 排版编辑器，因为知道 markdown 的人很多，而知道 MDX 的人却很少，之前也写过一篇文章[《[MDX Notes] 微信排版工具新选择》](https://juejin.cn/post/7081948276169113631)，介绍了我开发这款编辑器的初衷，以及它的功能，阅读量那是相当的低，今天，我们将从技术实现的角度，来记录它的实现过程，没体验过的朋友可以先体验下。
 
-- [在线地址](https://editor.runjs.cool/)
-- [Github 地址](https://github.com/maqi1520/mdx-editor)
+- [在线地址](https://mdxnotes.com/)
+- [Github 地址](https://github.com/maqi1520/mdx-notes)
 
 那标题为什么要叫 “Markdown 排版编辑器呢”？ 因为 MDX 是 markdown 和 JSX 的结合，它让我们的文档即可以写 markdown 也可以写 React 组件，于是我想用 MDX 的强大功能来扩展微信公众号编辑器的不足。其实编辑器部分可以是纯 React 实现，而我选择使用 Next.js + 云开发，让它从单纯的编辑器晋升为我的写作工具，拥有了云端保存数据能力，本文收录在[《 Next.js 全栈开发实战》](https://juejin.cn/column/7140121965360054308) 专栏中。
 
@@ -106,7 +106,7 @@ require(['vs/editor/editor.main'], function () {
 
 ### monaco-editor 实现多文件编辑
 
-在 mdx editor 中，除了 markdown 编辑器，还需要有 css 和 js，因此，我们将初始的 value 改成一个对象
+在 MDX Notes 中，除了 markdown 编辑器，还需要有 css 和 js，因此，我们将初始的 value 改成一个对象
 
 ```js
 const [value, setValue] = useState({

data/blog/codepen-5-free-database.md

@@ -24,7 +24,7 @@ layout: PostLayout
 
 ![uniCloud web 控制台](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1936f89da56946efa15b3adc4675140a~tplv-k3u1fbpfcp-zoom-1.image)
 
-并且关联好云服务空间，一个项目中可以有 50 个云函数，由于我之前的项目没几个云函数，所以我这里关联的是另外一个项目 [mdx-editor](https://editor.runjs.cool/ 'mdx-editor')
+并且关联好云服务空间，一个项目中可以有 50 个云函数，由于我之前的项目没几个云函数，所以我这里关联的是另外一个项目 mdx-notes
 
 选择 uniCloud 目录右键，可以打开 uniCloud web 控制台。
 

data/blog/mid-2022-summary.md

@@ -51,7 +51,7 @@ layout: PostLayout
 
 不过通过技术更文，我也开源了：
 
-- [MDX Editor](https://github.com/maqi1520/mdx-editor 'https://github.com/maqi1520/mdx-editor') —— 一个微信排版编辑器，获得了 129 个 star
+- [MDX Notes](https://github.com/maqi1520/mdx-notes 'https://github.com/maqi1520/mdx-notes') —— 一个微信排版编辑器，获得了 129 个 star
 - [next-resume](https://github.com/maqi1520/next-resume 'https://github.com/maqi1520/next-resume') —— 在线简历生成器
 - [next-code-pen](https://github.com/maqi1520/next-code-pen 'https://github.com/maqi1520/next-code-pen') —— 一个纯前端的在线代码实时预览工具，支持 Less、Scss、JavaScript、Typescript
 
@@ -63,9 +63,9 @@ layout: PostLayout
 
 感兴趣的朋友可以查看，都有相关文章介绍，下半年继续努力吧！
 
-![MDX Editor 首页](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0fbf1b7e4bd4b41bf1ebc165b2f201d~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?)
+![MDX Notes 首页](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0fbf1b7e4bd4b41bf1ebc165b2f201d~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?)
 
-个人比较满意的是这个 MDX Editor 的首页，模仿的是 tailwind css 和 slidev 的首页效果。
+个人比较满意的是这个 MDX Notes 的首页，模仿的是 tailwind css 和 slidev 的首页效果。
 
 ## 关于工作
 

data/blog/phaser3-game.md

@@ -801,7 +801,7 @@ this.scene.start("ui-scene");
 
 同理我还部署了以下应用
 
-https://editor.runjs.cool/ MDX 排版编辑器
+https://mdxnotes.com/ MDX 排版编辑器
 https://cv.runjs.cool/ 在线简历生成器
 https://low-code.runjs.cool/ 简易版低代码平台
 并且都是开源的，若对你有帮助记得点个 star，感谢！

data/blog/prism-react-renderer.md

@@ -12,7 +12,7 @@ layout: PostLayout
 
 ## 前言
 
-通常我们在开发博客网站或者技术社区（类似掘金）这类网站的时候，就会有需求“对代码进行语法高亮”，我在开发 [mdx editor](https://editor.runjs.cool/ '微信排版编辑器')（微信排版编辑器） 的时候，也有这个功能。
+通常我们在开发博客网站或者技术社区（类似掘金）这类网站的时候，就会有需求“对代码进行语法高亮”，我在开发 [MDX Notes](https://mdxnotes.com/ '微信排版编辑器')（微信排版编辑器） 的时候，也有这个功能。
 
 社区对应语法高亮比较流行的有 `highlight.js` 和 `Prism.js`。`Prism.js` 使用非常简单，只需要引一行`<script>`就可以对文档中的代码进行高亮， 然而，它有一个比较严重的问题。文档虽然简单，而我的项目是 React 项目，当想要增加一种语法高亮就会变得有些麻烦了，下面介绍下我的实现方式。
 
@@ -208,7 +208,7 @@ render((
 
 ## 代码行高亮
 
-我在[mdx editor](https://editor.runjs.cool/) 中也使用了 prism-react-renderer，当我把代码开源后，本以为完成了这个功能， 在这里感谢`@蓝色的秋风` 提的 [issues](https://github.com/maqi1520/mdx-editor/issues/5)，就是要支持代码行高亮。
+我在[MDX Notes](https://mdxnotes.com/) 中也使用了 prism-react-renderer，当我把代码开源后，本以为完成了这个功能， 在这里感谢`@蓝色的秋风` 提的 [issues](https://github.com/maqi1520/mdx-notes/issues/5)，就是要支持代码行高亮。
 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e625a117b4f1405fb2150bef8fe1b741~tplv-k3u1fbpfcp-zoom-1.image)
 
 其实 Prism.js 本来就支持[diff-highlight](https://prismjs.com/plugins/diff-highlight/)， 但我使用的 prism-react-renderer，还没支持，官方还有个 [issues](https://github.com/FormidableLabs/prism-react-renderer/issues/90) 没有 close，总不能等官方实现这个功能在来实现吧？接下来就得自己实现了。
@@ -247,13 +247,13 @@ if (isDiff) {
 
 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c433188baaa4834a294347b758268c0~tplv-k3u1fbpfcp-zoom-1.image)
 
-这里我就不贴代码了，感兴趣的小伙伴可以移步 github [查看源码](https://github.com/maqi1520/mdx-editor/blob/main/src/components/MDX/CodeBlock.jsx 'github 源码')
+这里我就不贴代码了，感兴趣的小伙伴可以移步 github [查看源码](https://github.com/maqi1520/mdx-notes/blob/main/src/components/MDX/CodeBlock.jsx 'github 源码')
 
 ---
 
 推荐下我的开源程序
 
-- https://editor.runjs.cool/ MDX 排版编辑器
+- https://mdxnotes.com/ MDX 排版编辑器
 
 若对你有帮助记得点个 star，感谢！
 

data/blog/svg-404.md

@@ -58,7 +58,7 @@ layout: PostLayout
 
 推荐下我的开源程序
 
-- https://editor.runjs.cool/ MDX 排版编辑器
+- https://mdxnotes.com/ MDX 排版编辑器
 - https://cv.runjs.cool/ 在线简历生成器
 - https://low-code.runjs.cool/ 简易版低代码平台
 

data/blog/the-new-wechat-editor.md

@@ -13,7 +13,7 @@ authors: ['default']
 layout: PostLayout
 ---
 
-> MDX Editor 一个好用的排版编辑器
+> MDX Notes 一个好用的排版编辑器
 
 ## 前言
 
@@ -37,7 +37,7 @@ Markdown 适合写技术文档，但 Markdown 已不再适合当下的写作场
 然后再切换到 [mdnice](https://www.mdnice.com/) 再切换微信后台，
 这样来回切换，然后之前编辑好的往期推荐又得重新编辑。。。
 
-![https://editor.runjs.cool/](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91416780afb745aaaaa738e680f54ac1~tplv-k3u1fbpfcp-zoom-1.image)
+![https://mdxnotes.com/](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91416780afb745aaaaa738e680f54ac1~tplv-k3u1fbpfcp-zoom-1.image)
 
 ## 实现一个编辑器
 
@@ -173,20 +173,20 @@ export default {
 
 - 数据存储
 
-MDX Editor 不会存储数据，只使用`localStorage`存储到本地，
+MDX Notes 不会存储数据，只使用`localStorage`存储到本地，
 如你想分享你的文章，可以点击左上角的分享按钮，同时文章将存储到云数据库中，但不保证永久存储。建议下载 MDX 存储在本地。
 
-mdx 的功能远不止于此，甚至我们可以根据它写一个[简历模板](https://editor.runjs.cool/624688ccb6fe2900015728ac)，然后我们就可以使用 markdown 来排版简历了！
+mdx 的功能远不止于此，甚至我们可以根据它写一个[简历模板](https://mdxnotes.com/624688ccb6fe2900015728ac)，然后我们就可以使用 markdown 来排版简历了！
 
 ![打印简历效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a81c7a71dd74e929934640daefac16a~tplv-k3u1fbpfcp-zoom-1.image)
 
 ## 体验地址
 
-https://editor.runjs.cool/
+https://mdxnotes.com/
 
 ## 开源
 
-目前代码已经开源在我的 [Github](https://github.com/maqi1520/mdx-editor)，点击右上角链接直达！
+目前代码已经开源在我的 [Github](https://github.com/maqi1520/mdx-notes)，点击右上角链接直达！
 
 若这个小工具对你有帮助，欢迎点个 star ✨。
 

data/blog/web-typing.md

@@ -320,10 +320,10 @@ watch([code, paused], () => {
 
 ## 学以致用
 
-我之前使用 MDX 写了一个微信排版编辑器 [MDX Editor](https://editor.runjs.cool/ 'https://editor.runjs.cool/')，正好少了一个首页，能否加上打字机效果呢？
+我之前使用 MDX 写了一个微信排版编辑器 [MDX Notes](https://mdxnotes.com/ 'https://mdxnotes.com/')，正好少了一个首页，能否加上打字机效果呢？
 
-![mdx-editor](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d5a02e1e5574d0382ebed74f23c2c2a~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp)
+![mdx-notes](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d5a02e1e5574d0382ebed74f23c2c2a~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp)
 
-可自定义组件、样式、生成二维码、代码 diff 高亮，一键拷贝到微信，可导出 markdown 和 PDF。 关于代码和原理就就不贴了，大致和 Sildev 差不多，只不过我使用的是 react 来实现，代码已经[开源](https://github.com/maqi1520/mdx-editor 'https://github.com/maqi1520/mdx-editor')，若对你有帮助， 可以点个 star，感谢您的支持！
+可自定义组件、样式、生成二维码、代码 diff 高亮，一键拷贝到微信，可导出 markdown 和 PDF。 关于代码和原理就就不贴了，大致和 Sildev 差不多，只不过我使用的是 react 来实现，代码已经[开源](https://github.com/maqi1520/mdx-notes 'https://github.com/maqi1520/mdx-notes')，若对你有帮助， 可以点个 star，感谢您的支持！
 
 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

data/blog/基于 Tauri， 我写了一个 Markdown 桌面 App.md

@@ -4,7 +4,7 @@ date: 2023/7/13 18:23:59
 lastmod: 2023/7/20 09:10:14
 tags: [JavaScript]
 draft: false
-summary: 本文视频地址 前言 大家好，我是小马。 去年，我开发了一款微信排版编辑器 MDX Editor。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功
+summary: 本文视频地址 前言 大家好，我是小马。 去年，我开发了一款微信排版编辑器 MDX Notes。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功
 images: https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/213c0d296112436cae85c4c9c88d6f59~tplv-k3u1fbpfcp-watermark.image?
 authors: ['default']
 layout: PostLayout
@@ -14,15 +14,15 @@ layout: PostLayout
 
 大家好，我是小马。
 
-去年，我开发了一款微信排版编辑器 MDX Editor。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功能。然而，作为一个微信排版编辑器，它的受众面比较有限，并不适用于每个人。因此，我基于该编辑器开发了 MDX Editor 桌面版，它支持 Mac、Windows 和 Linux，并且非常轻量，整个应用的大小只有 7M。现在，MDX Editor 桌面版已经成为我的创作工具。如果你对它感兴趣，可以在文末获取。
+去年，我开发了一款微信排版编辑器 MDX Notes。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功能。然而，作为一个微信排版编辑器，它的受众面比较有限，并不适用于每个人。因此，我基于该编辑器开发了 MDX Notes 桌面版，它支持 Mac、Windows 和 Linux，并且非常轻量，整个应用的大小只有 7M。现在，MDX Notes 桌面版已经成为我的创作工具。如果你对它感兴趣，可以在文末获取。
 
 ## 演示
 
 <Video src="//player.bilibili.com/player.html?aid=315719909&bvid=BV1fP411C7YC&cid=1190726045&page=1" />
 
 ## 技术选型
 
-开发 MDX Editor 桌面 App，我使用了如下核心技术栈:
+开发 MDX Notes 桌面 App，我使用了如下核心技术栈:
 
 - React (Next.js)
 
@@ -52,7 +52,7 @@ function Gallery({ children }) {
 
 ### 2. 深色皮肤
 
-对于笔记软件来说，深色皮肤已经成为一个不可或缺的部分。MDX Editor 使用 `Tailwind CSS` 实现了深色皮肤。
+对于笔记软件来说，深色皮肤已经成为一个不可或缺的部分。MDX Notes 使用 `Tailwind CSS` 实现了深色皮肤。
 
 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61bac318e79d4e698c96b98424625590~tplv-k3u1fbpfcp-zoom-1.image)
 
@@ -82,10 +82,10 @@ const contents = await readTextFile('app.conf', { dir: BaseDirectory.AppConfig }
 
 ### 5. 文档格式化
 
-在文档写作的过程中，格式往往会打断你的创作思路。虽然 Markdown 已经完全舍弃了格式操作，但有时你仍然需要注意中英文之间的空格、段落之间的空行等细节。MDX Editor 使用了 [prettier](https://prettier.io/ 'prettier') 来格式化文档，只需按下 `command+s` 就能自动格式化文档。
+在文档写作的过程中，格式往往会打断你的创作思路。虽然 Markdown 已经完全舍弃了格式操作，但有时你仍然需要注意中英文之间的空格、段落之间的空行等细节。MDX Notes 使用了 [prettier](https://prettier.io/ 'prettier') 来格式化文档，只需按下 `command+s` 就能自动格式化文档。
 
 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/333d527b57194ebda5d246e15cc54ab1~tplv-k3u1fbpfcp-zoom-1.image)
 
 ## 最后
 
-如果你对这个编辑器感兴趣，可以在 [Github](https://github.com/maqi1520/mdx-editor 'Github') 下载桌面版体验。如果你对实现过程感兴趣，也可以直接查看源码。如果您有任何好的建议，可以在上面提出 Issues，或者关注微信公众号 "JS 酷" 并留言反馈。
+如果你对这个编辑器感兴趣，可以在 [Github](https://github.com/maqi1520/mdx-notes 'Github') 下载桌面版体验。如果你对实现过程感兴趣，也可以直接查看源码。如果您有任何好的建议，可以在上面提出 Issues，或者关注微信公众号 "JS 酷" 并留言反馈。

data/blog/普通程序员要如何技术写作变现.md

@@ -83,7 +83,7 @@ layout: PostLayout
 
 也就是从文字到 PPT 分享的过程。有了文字稿，分享的过程也会得心应手。
 
-最简单快捷的的方式就是使用 Markdown 制作 PPT，可以使用 [MDX Editor](https://editor.runjs.cool/ 'MDX Editor')、[revealjs](https://revealjs.com/markdown/ 'revealjs')、[sli.dev](https://sli.dev/ 'sli.dev')等工具，文章内容大纲使用`---` 分割，就会成为一张一张的幻灯片。
+最简单快捷的的方式就是使用 Markdown 制作 PPT，可以使用 [MDX Notes](https://mdxnotes.com/ 'MDX Notes')、[revealjs](https://revealjs.com/markdown/ 'revealjs')、[sli.dev](https://sli.dev/ 'sli.dev')等工具，文章内容大纲使用`---` 分割，就会成为一张一张的幻灯片。
 
 这样，同一主题的内容以文字、课件的形式在公司内外传播，对内外的影响力都会增加。由于知识内容是相同的，只是形式不同，因此创作所需的时间远少于独立创作。
 

data/projectsData.ts

@@ -6,10 +6,10 @@ const projectsData = [
     href: 'https://code.runjs.cool/',
   },
   {
-    title: 'MDX-Editor',
+    title: 'MDX-Notes',
     description: `微信排版编辑器，使用MDX，可自定义组件、样式、生成二维码、代码 diff 高亮，可导出 markdown 和 PDF。`,
-    imgSrc: '/static/images/mdx-editor.png',
-    href: 'https://editor.runjs.cool/',
+    imgSrc: '/static/images/mdx-notes.jpg',
+    href: 'https://mdxnotes.com/',
   },
   {
     title: '在线简历生成器',

src/lib/search.json

@@ -18,9 +18,9 @@
           "play": 213,
           "pic": "http://i1.hdslb.com/bfs/archive/c1e724fedfbfc04473ee1790c4bec805c00627e6.jpg",
           "subtitle": "",
-          "description": "https://editor.runjs.cool/\n本视频采用 ChatTTS 配音",
+          "description": "https://mdxnotes.com/\n本视频采用 ChatTTS 配音",
           "copyright": "1",
-          "title": "MDX Editor 微信公众号排版客户端更新",
+          "title": "MDX Notes 微信公众号排版客户端更新",
           "review": 0,
           "author": "狂奔滴小馬",
           "mid": 43664526,
@@ -90,7 +90,7 @@
           "play": 3118,
           "pic": "http://i2.hdslb.com/bfs/archive/363cbdca0632f318b510a145564e0a2b23429754.jpg",
           "subtitle": "",
-          "description": "网站：https://editor.runjs.cool/",
+          "description": "网站：https://mdxnotes.com/",
           "copyright": "1",
           "title": "自研笔记软件更新",
           "review": 0,
@@ -198,9 +198,9 @@
           "play": 11950,
           "pic": "http://i0.hdslb.com/bfs/archive/01f54af1022ab71d20a485a6911740f90626e60e.jpg",
           "subtitle": "",
-          "description": "网页地址：https://editor.runjs.cool/",
+          "description": "网页地址：https://mdxnotes.com/",
           "copyright": "1",
-          "title": "我开发的 MDX Editor 桌面 App",
+          "title": "我开发的 MDX Notes 桌面 App",
           "review": 0,
           "author": "狂奔滴小馬",
           "mid": 43664526,
@@ -918,9 +918,9 @@
           "play": 390,
           "pic": "http://i0.hdslb.com/bfs/archive/69ebeda9482bbd4cf2e7b7bfeabe48883e98290c.jpg",
           "subtitle": "",
-          "description": "欢迎关注前端微信公众号“JS酷”\n我开发了一个微信排版工具 editor.runjs.cool \n使用 mdx 来排版，欢迎大家体验和使用。",
+          "description": "欢迎关注前端微信公众号“JS酷”\n我开发了一个微信排版工具 mdxnotes.com \n使用 mdx 来排版，欢迎大家体验和使用。",
           "copyright": "1",
-          "title": "【MDX editor】微信排版工具新选择",
+          "title": "【MDX Notes】微信排版工具新选择",
           "review": 0,
           "author": "狂奔滴小馬",
           "mid": 43664526,