docs: better route component styles

DIYgod · Dec 1, 2023 · 6ec4736 · 6ec4736
1 parent 1c12d6f
commit 6ec4736
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 56 deletions.
diff --git a/website/docs/faq.md b/website/docs/faq.md
@@ -8,7 +8,7 @@ import Translate from '@docusaurus/Translate';
 
 **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 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.
+**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="caution"><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/routes/multimedia.mdx b/website/docs/routes/multimedia.mdx
@@ -1831,12 +1831,6 @@ When `mediaType` is `movie`, `sheet` should be:
 
 ## 西瓜视频 {#xi-gua-shi-pin}
 
-:::tip Tiny Tiny RSS 用户请注意
-
-Tiny Tiny RSS 会给所有 iframe 元素添加 `sandbox="allow-scripts"` 属性，导致无法加载西瓜视频内嵌视频，如果需要使用内嵌视频请为 Tiny Tiny RSS 安装 [remove_iframe_sandbox](https://github.com/DIYgod/ttrss-plugin-remove-iframe-sandbox) 插件
-
-:::
-
 ### 用户视频投稿 {#xi-gua-shi-pin-yong-hu-shi-pin-tou-gao}
 
 <Route author="FlashWingShadow Fatpandac" example="/ixigua/user/video/4234740937" path="/ixigua/user/video/:uid/:disableEmbed?" paramsDesc={['用户 id, 可在用户主页中找到', '默认为开启内嵌视频, 任意值为关闭']}/>

diff --git a/website/docs/routes/social-media.mdx b/website/docs/routes/social-media.mdx
@@ -8,18 +8,6 @@
 
 ## bilibili {#bilibili}
 
-:::tip Tiny Tiny RSS 用户请注意
-
-Tiny Tiny RSS 会给所有 iframe 元素添加 `sandbox="allow-scripts"` 属性，导致无法加载 bilibili 内嵌视频，如果需要使用内嵌视频请为 Tiny Tiny RSS 安装 [remove_iframe_sandbox](https://github.com/DIYgod/ttrss-plugin-remove-iframe-sandbox) 插件
-
-:::
-
-:::tip 关于视频清晰度
-
-内嵌视频的默认清晰度为 480P，如需解锁更高清晰度，请[点此](https://www.bilibili.com/blackboard/html5player.html?cid=253377437&aid=885203421&page=&as_wide=1)在下方登录以设置 Cookie，仅对当前浏览器生效
-
-:::
-
 ### 番剧 {#bilibili-fan-ju}
 
 <Route author="DIYgod" example="/bilibili/bangumi/media/9192" path="/bilibili/bangumi/media/:mediaid" paramsDesc={['番剧媒体 id, 番剧主页 URL 中获取']}/>
@@ -1048,12 +1036,6 @@ Some of the categories contain slash like `3D/CG` , must change the slash `/` to
 
 ## YouTube {#youtube}
 
-:::tip Tiny Tiny RSS users please notice
-
-Tiny Tiny RSS will add `sandbox="allow-scripts"` to all iframe elements, as a result, YouTube embedded videos cannot be loaded. If you need to use embedded videos, please install plugin [remove_iframe_sandbox](https://github.com/DIYgod/ttrss-plugin-remove-iframe-sandbox) for Tiny Tiny RSS.
-
-:::
-
 ### User {#youtube-user}
 
 <Route author="DIYgod" path="/youtube/user/:username/:embed?" example="/youtube/user/JFlaMusic" paramsDesc={['YouTuber id', 'Default to embed the video, set to any value to disable embedding']} radar="1" rssbud="1"/>

diff --git a/website/i18n/en/code.json b/website/i18n/en/code.json
@@ -1,39 +1,39 @@
 {
   "badge.supportBT": {
-    "message": "Support BT"
+    "message": "🔄 Support BT"
   },
   "badge.supportPodcast": {
-    "message": "Support Podcast"
+    "message": "🎙️ Support Podcast"
   },
   "badge.supportSciHub": {
-    "message": "Support Sci-Hub"
+    "message": "🧪 Support Sci-Hub"
   },
   "badge.puppeteer": {
-    "message": "Rely on Puppeteer"
+    "message": "🎭 Rely on Puppeteer"
   },
   "badge.anticrawler": {
-    "message": "Strict anti-crawler policy"
+    "message": "🚨 Strict anti-crawling"
   },
   "badge.radar": {
-    "message": "Support browser extension"
+    "message": "🔍 Support Radar"
   },
   "badge.rssbud": {
-    "message": "Support RSSBud"
+    "message": "🔍 Support RSSBud"
   },
   "badge.configRequired": {
-    "message": "Config required"
+    "message": "⚙️ Config required"
   },
   "route.author": {
-    "message": "Author: "
+    "message": "👨‍💻 Author: "
   },
   "route.example": {
-    "message": "Example: "
+    "message": "💡 Example: "
   },
   "route.path": {
-    "message": "Route: "
+    "message": "🚏 Route: "
   },
   "route.parameter": {
-    "message": "Parameters: "
+    "message": "⚙️ Parameters: "
   },
   "route.parameter.optional": {
     "message": "optional"

diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json
@@ -1,39 +1,39 @@
 {
   "badge.supportBT": {
-    "message": "支持 BT"
+    "message": "🔄 支持 BT"
   },
   "badge.supportPodcast": {
-    "message": "支持播客"
+    "message": "🎙️ 支持播客"
   },
   "badge.supportSciHub": {
-    "message": "支持 Sci-Hub"
+    "message": "🧪 支持 Sci-Hub"
   },
   "badge.puppeteer": {
-    "message": "依赖 Puppeteer"
+    "message": "🎭 依赖 Puppeteer"
   },
   "badge.anticrawler": {
-    "message": "反爬严格"
+    "message": "🚨 反爬严格"
   },
   "badge.radar": {
-    "message": "支持浏览器扩展"
+    "message": "🔍 支持 Radar"
   },
   "badge.rssbud": {
-    "message": "支持 RSSBud"
+    "message": "🔍 支持 RSSBud"
   },
   "badge.configRequired": {
-    "message": "需要配置"
+    "message": "⚙️ 需要配置"
   },
   "route.author": {
-    "message": "作者："
+    "message": "👨‍💻 作者："
   },
   "route.example": {
-    "message": "举例："
+    "message": "💡 举例："
   },
   "route.path": {
-    "message": "路由："
+    "message": "🚏 路由："
   },
   "route.parameter": {
-    "message": "参数："
+    "message": "⚙️ 参数："
   },
   "route.parameter.optional": {
     "message": "可选"

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

diff --git a/website/src/components/Route.tsx b/website/src/components/Route.tsx
@@ -48,15 +48,15 @@ export default function Route({
                 {supportBT && <Badge type="tip"><Translate id="badge.supportBT" /></Badge>}
                 {supportPodcast && <Badge type="tip"><Translate id="badge.supportPodcast" /></Badge>}
                 {supportScihub && <Badge type="tip"><Translate id="badge.supportSciHub" /></Badge>}
-                {puppeteer && <Badge type="warn"><Translate id="badge.puppeteer" /></Badge>}
+                {puppeteer && <Badge type="warning"><Translate id="badge.puppeteer" /></Badge>}
                 {anticrawler && (
                     <Link to="/faq">
-                        <Badge type="warn"><Translate id="badge.anticrawler" /></Badge>
+                        <Badge type="caution"><Translate id="badge.anticrawler" /></Badge>
                     </Link>
                 )}
                 {configRequired && (
                     <Link to="/install/config#route-specific-configurations">
-                        <Badge type="warn"><Translate id="badge.configRequired" /></Badge>
+                        <Badge type="warning"><Translate id="badge.configRequired" /></Badge>
                     </Link>
                 )}
                 {radar && (
@@ -83,6 +83,7 @@ export default function Route({
                 <Link to={demoUrl}>
                     {demoUrl}
                 </Link>
+                <img loading="lazy" src={`https://img.shields.io/website.svg?label=&url=${demoUrl}&cacheSeconds=7200`} />
             </p>
             <p className="path">
                 <Translate id="route.path" /><code>{path}</code>

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -29,19 +29,27 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
-.badge.warn {
-  background-color: #ff774d;
+.badge.caution {
+  background-color: #ef4444;
+}
+
+.badge.warning {
+  background-color: #f59e0b;
 }
 
 .badge.tip {
-  background-color: #FFB74D;
+  background-color: #22c55e;
 }
 
 .badges {
   display: flex;
   gap: 10px;
 }
 
+.badges a {
+  display: flex;
+}
+
 .container .card > h2 {
   margin-bottom: 0;
 }
@@ -71,3 +79,12 @@
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+
+.example {
+  display: flex;
+  align-items: center;
+}
+
+.example * {
+  margin-right: 5px;
+}