feat: tags for help pages

localization/locales/en/translation.json

@@ -467,6 +467,11 @@
     "Alternatives": "Alternatives",
     "Description": "Clicking the \"Open\" button will open the page in a new window. The page needs to be loaded from the Internet for the first time (5s - 1min), so it is not available when the network is disconnected. \nYou can modify the content of the opened page at will as a sandbox playground to try out the learned features. If you want to save the modified results, you can click Tiddlywiki's save button to save it as a single-page wiki in HTML format.",
     "List": "Helps List",
-    "Contribute": "Contribute to this site"
+    "Contribute": "Contribute to this site",
+    "Tags": {
+      "Docs": "Docs",
+      "FAQ": "FAQ",
+      "Intro": "Intro"
+    }
   }
 }

localization/locales/zh_CN/translation.json

@@ -467,6 +467,11 @@
     "Alternatives": "其它源",
     "Description": "点击「打开」按钮会在新窗口打开页面，页面初次打开需要5秒到1分钟时间从互联网加载，断网不可用。你可以随意修改打开的页面的内容，作为沙箱游乐场随意尝试学到的功能，如果想保存修改的结果，可以点击太微的保存按钮，保存为HTML格式的单页面维基。",
     "List": "帮助列表",
-    "Contribute": "向此网站贡献内容"
+    "Contribute": "向此网站贡献内容",
+    "Tags": {
+      "Intro": "入门",
+      "FAQ": "答疑",
+      "Docs": "文档"
+    }
   }
 }

src/pages/Help/HelpWebsiteItem.tsx

@@ -4,7 +4,7 @@ import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew';
 import AltRouteIcon from '@mui/icons-material/AltRoute';
 import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import { Button, Card, CardActions, CardContent, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import { Button, Card, CardActions, CardContent, Chip, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@mui/material';
 import { WindowNames } from '@services/windows/WindowProperties';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,8 +46,9 @@ export const HelpWebsiteItem: React.FC<HelpWebsiteItemProps> = ({ item }) => {
   return (
     <StyledCard>
       <CardContent>
-        <h3>{item.title}</h3>
-        <p>{item.description}</p>
+        <Typography variant='h5' component='div'>{item.title}</Typography>
+        <Typography variant='body2'>{item.description}</Typography>
+        {item.tags.map((tag) => <Chip key={tag} label={t(`Help.Tags.${tag}`)} style={{ marginRight: 10, marginTop: 5 }} />)}
       </CardContent>
       <CardActions>
         <Button

src/pages/Help/helpPages.json

@@ -41,7 +41,7 @@
     {
       "title": "太微中文教程",
       "description": "中文社区共建的TiddlyWiki教程，体验从入门到知识管理大师之路",
-      "tags": "Intro",
+      "tags": "Intro FAQ",
       "url": "https://tw-cn.netlify.app/",
       "contribute": "https://github.com/tiddly-gittly/TiddlyWiki-Chinese-Tutorial",
       "fallbackUrls": "https://tw-cn.cpolar.top/ https://tiddly-wiki-chinese-tutorial.vercel.app/ https://tiddly-gittly.github.io/TiddlyWiki-Chinese-Tutorial/",
@@ -50,7 +50,7 @@
     {
       "title": "太微官方文档（中文版）",
       "description": "TiddlyWiki 舞 - 基础文档简体中文版",
-      "tags": "Doc",
+      "tags": "Docs",
       "url": "https://tw-cn-doc.cpolar.top/",
       "contribute": "https://github.com/BramChen/tw5-docs",
       "fallbackUrls": "https://bramchen.github.io/tw5-docs/zh_CN/",
@@ -59,7 +59,7 @@
     {
       "title": "TiddlyWiki",
       "description": "Official Document",
-      "tags": "Doc",
+      "tags": "Docs",
       "url": "https://tiddlywiki.com/",
       "contribute": "https://github.com/Jermolene/TiddlyWiki5/tree/master/editions/tw5.com",
       "language": "en"

src/pages/Help/useLoadHelpPagesList.ts

@@ -6,8 +6,8 @@ import helpPages from './helpPages.json';
 
 function makeFallbackUrlsArray(
   item: LastArrayElement<typeof helpPages.default>,
-): Omit<LastArrayElement<typeof helpPages.default>, 'fallbackUrls' | 'language'> & { fallbackUrls: string[]; language: string[] } {
-  return { ...item, fallbackUrls: item?.fallbackUrls?.split(' ') ?? [], language: item?.language?.split(' ') ?? [] };
+): Omit<LastArrayElement<typeof helpPages.default>, 'fallbackUrls' | 'language' | 'tags'> & { fallbackUrls: string[]; language: string[]; tags: string[] } {
+  return { ...item, fallbackUrls: item?.fallbackUrls?.split(' ') ?? [], language: item?.language?.split(' ') ?? [], tags: item?.tags?.split(' ') ?? [] };
 }
 
 export function useLoadHelpPagesList(language = 'en-GB') {