docs: fix rendering (#13382)

* docs: fix faq badge * docs: no md within jsx tag refs: https://docusaurus.io/docs/markdown-features/react#markdown-and-jsx-interoperability * docs: use link component * docs: route use link component * fix: remove invalid attr * docs: more a to link component * fix: remove invalid attr * fix: provide link in global scope
DIYgod · Sep 24, 2023 · 6309afc · 6309afc
1 parent c7649fb
commit 6309afc
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 36 deletions.
diff --git a/website/docs/README.md b/website/docs/README.md
@@ -28,7 +28,7 @@ RSSHub can be used with browser extension [RSSHub Radar](https://github.com/DIYg
 ### Special Sponsors
 
 <p>
-<a href="https://xlog.app/" target="_blank"><img style={{height: "100px"}} src="https://i.imgur.com/JuhHTKD.png" /></a>
+<Link to="https://xlog.app/"><img style={{height: "100px"}} src="https://i.imgur.com/JuhHTKD.png" /></Link>
 </p>
 
 [![](https://opencollective.com/static/images/become_sponsor.svg)](https://docs.rsshub.app/support/)
@@ -41,7 +41,7 @@ Logo designer [sheldonrrr](https://dribbble.com/sheldonrrr)
 
 ### Backers
 
-<a href="https://www.cloudflare.com" target="_blank"><img style={{height: "50px"}} src="https://i.imgur.com/7Ph27Fq.png" /></a><a href="https://www.netlify.com" target="_blank" style={{marginLeft: "60px"}}><img style={{height: "40px"}} src="https://i.imgur.com/cU01915.png" /></a>
+<Link to="https://www.cloudflare.com"><img style={{height: "50px"}} src="https://i.imgur.com/7Ph27Fq.png" /></Link><Link to="https://www.netlify.com" style={{marginLeft: "60px"}}><img style={{height: "40px"}} src="https://i.imgur.com/cU01915.png" /></Link>
 
 ## Related Projects
 

diff --git a/website/docs/faq.md b/website/docs/faq.md
@@ -1,12 +1,14 @@
 # FAQs
 
+import Translate from '@docusaurus/Translate';
+
 **Q: How does RSSHub work？**
 
 **A:** When a request is received, RSSHub fetches the corresponding data from the original site, the resulting contents will be outputted in RSS format. Caching is implemented to avoid requesting original sites for content. And of course, we throw in a little magic 🎩.
 
 **Q: Can I use the demo instance？**
 
-**A:** [rsshub.app](https://rsshub.app) is the demo instance provided, running the latest build of RSSHub from master branch, the cache is set 120 minutes and it's free to use. However, if you see an badge <Badge text="strict anti-crawler policy" vertical="middle" type="warn"/> for route, this means popular websites such as Facebook etc. may pose a request quota on individual IP address, which means it can get unreliable from time to time for the demo instance. You are encouraged to [host your own RSSHub instance](/install/) to get a better usability.
+**A:** [rsshub.app](https://rsshub.app) is the demo instance provided, running the latest build of RSSHub from master branch, the cache is set 120 minutes and it's free to use. However, if you see an badge <Badge vertical="middle" type="warn"><Translate id="badge.anticrawler" /></Badge> for route, this means popular websites such as Facebook etc. may pose a request quota on individual IP address, which means it can get unreliable from time to time for the demo instance. You are encouraged to [host your own RSSHub instance](/install/) to get a better usability.
 
 **Q: Why are images/videos not loading in some RSSHub routes？**
 

diff --git a/website/docs/joinus/new-rss/add-docs.md b/website/docs/joinus/new-rss/add-docs.md
@@ -4,7 +4,7 @@ sidebar_position: 4
 
 # Add documentation
 
-Now that we have completed the code, it's time to add the documentation for your route. Open the appropriate file in the [document (/website/docs)](https://github.com/DIYgod/RSSHub/blob/master/website/docs), which in this example is `/website/i18n/en/docusaurus-plugin-content-docs/current/routes/programming.md`.
+Now that we have completed the code, it's time to add the documentation for your route. Open the appropriate file in the [document (/website/docs)](https://github.com/DIYgod/RSSHub/blob/master/website/docs), which in this example is `website/docs/routes/programming.md`.
 
 In order to preview the documentation in real-time, you need to install the dependencies for the documentation. Run the following command in the **`website` directory**:
 

diff --git a/website/docs/joinus/quick-start.md b/website/docs/joinus/quick-start.md
@@ -46,7 +46,7 @@ Once you have installed RSSHub Radar, open the settings and switch to the "List
 
 [Let's start!](/joinus/new-radar)
 
-<a href="https://chrome.google.com/webstore/detail/rsshub-radar/kefjpfngnndepjbopdmoebkipbgkggaa" target="_blank" rel="noopener noreferrer"><img src="https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png" alt="Get RSSHub Radar for Chromium" style={{height: "58px"}} /></a>
-<a href="https://addons.mozilla.org/firefox/addon/rsshub-radar/" target="_blank" rel="noopener noreferrer"><img src="https://blog.mozilla.org/addons/files/2020/04/get-the-addon-fx-apr-2020.svg" alt="Get Get RSSHub Radar for Firefox" style={{height: "58px"}} /></a>
-<a href="https://microsoftedge.microsoft.com/addons/detail/rsshub-radar/gangkeiaobmjcjokiofpkfpcobpbmnln" target="_blank" rel="noopener noreferrer"><img src="https://wsrv.nl/?url=https://upload.wikimedia.org/wikipedia/commons/f/f7/Get_it_from_Microsoft_Badge.svg" alt="Get RSSHub Radar for Edge" style={{height: "58px"}} /></a>
-<a href="https://apps.apple.com/us/app/rsshub-radar/id1610744717" target="_blank" rel="noopener noreferrer"><img src="https://developer.apple.com/news/images/download-on-the-app-store-badge.png" alt="Get RSSHub Radar for Safari" style={{height: "58px"}} /></a>
+<Link to="https://chrome.google.com/webstore/detail/rsshub-radar/kefjpfngnndepjbopdmoebkipbgkggaa" target="_blank" rel="noopener noreferrer"><img src="https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png" alt="Get RSSHub Radar for Chromium" style={{height: "58px"}} /></Link>
+<Link to="https://addons.mozilla.org/firefox/addon/rsshub-radar/" target="_blank" rel="noopener noreferrer"><img src="https://blog.mozilla.org/addons/files/2020/04/get-the-addon-fx-apr-2020.svg" alt="Get Get RSSHub Radar for Firefox" style={{height: "58px"}} /></Link>
+<Link to="https://microsoftedge.microsoft.com/addons/detail/rsshub-radar/gangkeiaobmjcjokiofpkfpcobpbmnln" target="_blank" rel="noopener noreferrer"><img src="https://wsrv.nl/?url=https://upload.wikimedia.org/wikipedia/commons/f/f7/Get_it_from_Microsoft_Badge.svg" alt="Get RSSHub Radar for Edge" style={{height: "58px"}} /></Link>
+<Link to="https://apps.apple.com/us/app/rsshub-radar/id1610744717" target="_blank" rel="noopener noreferrer"><img src="https://developer.apple.com/news/images/download-on-the-app-store-badge.png" alt="Get RSSHub Radar for Safari" style={{height: "58px"}} /></Link>
diff --git a/website/docs/parameter.md b/website/docs/parameter.md
@@ -4,17 +4,17 @@
 
 Parameters here are actually URI query and can be linked together with `&` to generate a complex feed.
 
-Parameters here need to be placed after the route path. Some routes may have <span style={{color: "green"}}>**custom route parameters**</span> and <span style={{color: "violet"}}>**parameters here**</span> need to be placed after them.
+Parameters here need to be placed after the route path. Some routes may have <b><span style={{color: "green"}}>custom route parameters</span></b> and <b><span style={{color: "violet"}}>parameters here</span></b> need to be placed after them.
 
 E.g.
 
-<a href="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0?brief=100&limit=5">https://rsshub.app/twitter/user/durov/<span style={{color: "green"}}><b>readable=1&includeRts=0</b></span>?<span style={{color: "violet"}}><b>brief=100&limit=5</b></span></a>
+<Link to="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0?brief=100&limit=5">https://rsshub.app/twitter/user/durov/<span style={{color: "green"}}><b>readable=1&includeRts=0</b></span>?<span style={{color: "violet"}}><b>brief=100&limit=5</b></span></Link>
 
-If a <span style={{color: "magenta"}}>**output format**</span> (`.atom`, `.rss`, `.json`, `.debug.json`) is set, it needs to be placed between the route path (including <span style={{color: "green"}}>**custom route parameters**</span>) and <span style={{color: "violet"}}>**other parameters**</span>.
+If a <b><span style={{color: "magenta"}}>output format</span></b> (`.atom`, `.rss`, `.json`, `.debug.json`) is set, it needs to be placed between the route path (including <b><span style={{color: "green"}}>custom route parameters</span></b>) and <b><span style={{color: "violet"}}>other parameters</span></b>.
 
 E.g.
 
-<a href="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0.atom?brief=100&limit=5">https://rsshub.app/twitter/user/durov/<span style={{color: "green"}}><b>readable=1&includeRts=0</b></span><span style={{color: "magenta"}}><b>.atom</b></span>?<span style={{color: "violet"}}><b>brief=100&limit=5</b></span></a>
+<Link to="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0.atom?brief=100&limit=5">https://rsshub.app/twitter/user/durov/<span style={{color: "green"}}><b>readable=1&includeRts=0</b></span><span style={{color: "magenta"}}><b>.atom</b></span>?<span style={{color: "violet"}}><b>brief=100&limit=5</b></span></Link>
 
 :::
 

diff --git a/website/docs/routes/other.md b/website/docs/routes/other.md
@@ -354,7 +354,7 @@ For example:
 1.  If we want to search software engineer jobs of all levels and all job types, use `/linkedin/jobs/all/all/software engineer`
 2.  If we want to search all entry level contractor/part time software engineer jobs, use `/linkedin/jobs/P-C/2/software engineer`
 
-**To make it easier, the recommended way is to start a search on <a href="https://www.linkedin.com/jobs/search">LinkedIn</a> and use <a href="https://github.com/DIYgod/RSSHub-Radar">RSSHub Radar</a> to load the specific feed.**
+**To make it easier, the recommended way is to start a search on [LinkedIn](https://www.linkedin.com/jobs/search) and use [RSSHub Radar](https://github.com/DIYgod/RSSHub-Radar) to load the specific feed.**
 
 </Route>
 

diff --git a/website/i18n/zh/docusaurus-plugin-content-docs/current/README.md b/website/i18n/zh/docusaurus-plugin-content-docs/current/README.md
@@ -30,7 +30,7 @@ RSSHub 是一个开源、简单易用、易于扩展的 RSS 生成器，可以
 ### 赞助商
 
 <p>
-<a href="https://xlog.app/" target="_blank"><img style={{height: "100px"}} src="https://i.imgur.com/2B9pXBg.png" /></a>
+<Link to="https://xlog.app/"><img style={{height: "100px"}} src="https://i.imgur.com/2B9pXBg.png" /></Link>
 </p>
 
 [![](https://opencollective.com/static/images/become_sponsor.svg)](/zh/support/)
@@ -43,7 +43,7 @@ Logo designer [sheldonrrr](https://dribbble.com/sheldonrrr)
 
 ### Backers
 
-<a href="https://www.cloudflare.com" target="_blank"><img style={{height: "50px"}} src="https://cn-south-17-rsshub-16857749.oss.dogecdn.com/cloudflare.png" /></a><a href="https://www.netlify.com" target="_blank" style={{marginLeft: "60px"}}><img style={{height: "40px"}} src="https://cn-south-17-rsshub-16857749.oss.dogecdn.com/netlify.png" /></a>
+<Link to="https://www.cloudflare.com"><img style={{height: "50px"}} src="https://cn-south-17-rsshub-16857749.oss.dogecdn.com/cloudflare.png" /></Link><Link to="https://www.netlify.com" style={{marginLeft: "60px"}}><img style={{height: "40px"}} src="https://cn-south-17-rsshub-16857749.oss.dogecdn.com/netlify.png" /></Link>
 
 ## 相关项目
 

diff --git a/website/i18n/zh/docusaurus-plugin-content-docs/current/faq.md b/website/i18n/zh/docusaurus-plugin-content-docs/current/faq.md
@@ -1,5 +1,7 @@
 # 常见问题
 
+import Translate from '@docusaurus/Translate';
+
 **Q: RSS 是什么？RSS 如何使用？可以推荐一下好用的 RSS 阅读器么？**
 
 **A:** [我有特别的 RSS 使用技巧](https://diygod.cc/ohmyrss/)
@@ -14,7 +16,7 @@
 
 **Q: 演示地址可以用么？**
 
-**A:** 演示地址为 [rsshub.app](https://rsshub.app), 缓存时间 120 分钟，可以随意使用。但如果你看到路由有 <Badge text="反爬严格" vertical="middle" type="warn"/> 标记，如微博、知乎等，意味着目标网站有严重的反爬策略，demo 无法确保可用性，建议自建来提高稳定性。
+**A:** 演示地址为 [rsshub.app](https://rsshub.app), 缓存时间 120 分钟，可以随意使用。但如果你看到路由有 <Badge vertical="middle" type="warn"><Translate id="badge.anticrawler" /></Badge> 标记，如微博、知乎等，意味着目标网站有严重的反爬策略，demo 无法确保可用性，建议自建来提高稳定性。
 
 **Q: 为什么 RSSHub 里的图片 / 视频加载不出来？**
 

diff --git a/website/i18n/zh/docusaurus-plugin-content-docs/current/joinus/quick-start.md b/website/i18n/zh/docusaurus-plugin-content-docs/current/joinus/quick-start.md
@@ -2,7 +2,6 @@
 sidebar_position: 1
 ---
 
-
 # 快速开始
 
 如果您在使用 RSSHub 过程中遇到了问题或者有建议改进，我们很乐意听取您的意见！您可以通过 Pull Request 来提交您的修改。无论您对 Pull Request 的使用是否熟悉，我们都欢迎不同经验水平的开发者参与贡献。如果您不懂编程，也可以通过 [报告错误](https://github.com/DIYgod/RSSHub/issues) 的方式来帮助我们。
@@ -47,4 +46,7 @@ sidebar_position: 1
 
 [开始吧！](/zh/joinus/new-radar)
 
-<a href="https://chrome.google.com/webstore/detail/rsshub-radar/kefjpfngnndepjbopdmoebkipbgkggaa" target="_blank" rel="noopener noreferrer"><img src="https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png" alt="为 Chromium 安装 RSSHub Radar" style={{height: "58px"}} /></a> <a href="https://addons.mozilla.org/firefox/addon/rsshub-radar/" target="_blank" rel="noopener noreferrer"><img src="https://blog.mozilla.org/addons/files/2020/04/get-the-addon-fx-apr-2020.svg" alt="为 Firefox 安装 RSSHub Radar for " style={{height: "58px"}} /></a> <a href="https://microsoftedge.microsoft.com/addons/detail/rsshub-radar/gangkeiaobmjcjokiofpkfpcobpbmnln" target="_blank" rel="noopener noreferrer"><img src="https://wsrv.nl/?url=https://upload.wikimedia.org/wikipedia/commons/f/f7/Get_it_from_Microsoft_Badge.svg" alt="为 Edge 安装 RSSHub Radar" style={{height: "58px"}} /></a> <a href="https://apps.apple.com/us/app/rsshub-radar/id1610744717" target="_blank" rel="noopener noreferrer"><img src="https://developer.apple.com/news/images/download-on-the-app-store-badge.png" alt="为 Safari 安装 RSSHub Radar" style={{height: "58px"}} /></a>
+<Link to="https://chrome.google.com/webstore/detail/rsshub-radar/kefjpfngnndepjbopdmoebkipbgkggaa" target="_blank" rel="noopener noreferrer"><img src="https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png" alt="为 Chromium 安装 RSSHub Radar" style={{height: "58px"}} /></Link>
+<Link to="https://addons.mozilla.org/firefox/addon/rsshub-radar/" target="_blank" rel="noopener noreferrer"><img src="https://blog.mozilla.org/addons/files/2020/04/get-the-addon-fx-apr-2020.svg" alt="为 Firefox 安装 RSSHub Radar for " style={{height: "58px"}} /></Link>
+<Link to="https://microsoftedge.microsoft.com/addons/detail/rsshub-radar/gangkeiaobmjcjokiofpkfpcobpbmnln" target="_blank" rel="noopener noreferrer"><img src="https://wsrv.nl/?url=https://upload.wikimedia.org/wikipedia/commons/f/f7/Get_it_from_Microsoft_Badge.svg" alt="为 Edge 安装 RSSHub Radar" style={{height: "58px"}} /></Link>
+<Link to="https://apps.apple.com/us/app/rsshub-radar/id1610744717" target="_blank" rel="noopener noreferrer"><img src="https://developer.apple.com/news/images/download-on-the-app-store-badge.png" alt="为 Safari 安装 RSSHub Radar" style={{height: "58px"}} /></Link>
diff --git a/website/i18n/zh/docusaurus-plugin-content-docs/current/parameter.md b/website/i18n/zh/docusaurus-plugin-content-docs/current/parameter.md
@@ -4,11 +4,11 @@
 
 通用参数实际上是 URI 中的 query，可以使用 `&` 连接组合使用，效果叠加。
 
-通用参数需要置于路由路径的最后。有些路由在路由路径（route path）的最后引入了<span style={{color: "green"}}>**自定义参数**</span>，<span style={{color: "violet"}}>**通用参数**</span>也需要置于它们之后。
+通用参数需要置于路由路径的最后。有些路由在路由路径（route path）的最后引入了<b><span style={{color: "green"}}>自定义参数</span></b>，<b><span style={{color: "violet"}}>通用参数</span></b>也需要置于它们之后。
 
 举例:
 
-<a href="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0?brief=100&limit=5">
+<Link to="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0?brief=100&limit=5">
 https://rsshub.app/twitter/user/durov/
 <span style={{color: "green"}}>
     <b>readable=1&includeRts=0</b>
@@ -17,13 +17,13 @@ https://rsshub.app/twitter/user/durov/
 <span style={{color: "violet"}}>
     <b>brief=100&limit=5</b>
 </span>
-</a>
+</Link>
 
-如果设置了<span style={{color: "magenta"}}>**输出格式**</span>（`.atom`, `.rss`, `.json`, `.debug.json`），则需要置于路由路径（含<span style={{color: "green"}}>**自定义参数**</span>）与<span style={{color: "violet"}}>**其它通用参数**</span>之间。
+如果设置了<b><span style={{color: "magenta"}}>输出格式</span></b>（`.atom`, `.rss`, `.json`, `.debug.json`），则需要置于路由路径（含<b><span style={{color: "green"}}>自定义参数</span></b>）与<b><span style={{color: "violet"}}>其它通用参数</span></b>之间。
 
 举例:
 
-<a href="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0.atom?brief=100&limit=5">
+<Link to="https://rsshub.app/twitter/user/durov/readable=1&includeRts=0.atom?brief=100&limit=5">
 https://rsshub.app/twitter/user/durov/
 <span style={{color: "green"}}>
     <b>readable=1&includeRts=0</b>
@@ -35,7 +35,7 @@ https://rsshub.app/twitter/user/durov/
 <span style={{color: "violet"}}>
     <b>brief=100&limit=5</b>
 </span>
-</a>
+</Link>
 
 :::
 

diff --git a/website/src/components/Route.tsx b/website/src/components/Route.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import MarkdownIt from 'markdown-it';
 import Badge from './Badge';
 import Translate from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
 
 export default function Route({
   author = 'DIYgod',
@@ -50,39 +51,39 @@ export default function Route({
                 {supportScihub && <Badge type="tip"><Translate id="badge.supportSciHub" /></Badge>}
                 {puppeteer && <Badge type="warn"><Translate id="badge.puppeteer" /></Badge>}
                 {anticrawler && (
-                    <a target="_blank" href="/faq.html">
+                    <Link to="/faq">
                         <Badge type="warn"><Translate id="badge.anticrawler" /></Badge>
-                    </a>
+                    </Link>
                 )}
                 {selfhost && (
-                    <a target="_blank" href="/install/">
+                    <Link to="/install">
                         <Badge type="warn"><Translate id="badge.selfhost" /></Badge>
-                    </a>
+                    </Link>
                 )}
                 {radar && (
-                    <a target="_blank" href="https://github.com/DIYgod/RSSHub-Radar">
+                    <Link to="https://github.com/DIYgod/RSSHub-Radar">
                         <Badge type="tip"><Translate id="badge.radar" /></Badge>
-                    </a>
+                    </Link>
                 )}
                 {rssbud && (
-                    <a target="_blank" href="https://github.com/Cay-Zhang/RSSBud">
+                    <Link to="https://github.com/Cay-Zhang/RSSBud">
                         <Badge type="tip"><Translate id="badge.rssbud" /></Badge>
-                    </a>
+                    </Link>
                 )}
             </p>
             <p className="author">
                 <Translate id="route.author" />
                 {author.split(' ').map((uid) => (
-                    <a href={`https://github.com/${uid}`} target="_blank" key={uid}>
+                    <Link to={`https://github.com/${uid}`} key={uid}>
                         @{uid}{' '}
-                    </a>
+                    </Link>
                 ))}
             </p>
             <p className="example">
                 <span><Translate id="route.example" /></span>
-                <a href={demoUrl} target="_blank">
+                <Link to={demoUrl}>
                     {demoUrl}
-                </a>
+                </Link>
             </p>
             <p className="path">
                 <Translate id="route.path" /><code>{path}</code>

diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js
@@ -1,6 +1,7 @@
 import MDXComponents from '@theme-original/MDXComponents';
 import Badge from '@site/src/components/Badge';
 import Route from '@site/src/components/Route';
+import Link from '@docusaurus/Link';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -9,6 +10,7 @@ export default {
     ...MDXComponents,
     Badge,
     Route,
+    Link,
     Tabs,
     TabItem,
 };