rsshub guide

apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps, FunctionComponentElement } from "react"
 import { createElement, useCallback, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
+import RSSHubIcon from "~/assets/rsshub-icon.png"
 import { Logo } from "~/components/icons/logo"
 import { Button } from "~/components/ui/button"
 import { mountLottie } from "~/components/ui/lottie-container"
@@ -17,6 +18,7 @@ import { AppearanceGuide } from "./steps/appearance"
 import { BehaviorGuide } from "./steps/behavior"
 import { TrendingFeeds } from "./steps/feeds"
 import { RookieCheck } from "./steps/rookie"
+import { RSSHubGuide } from "./steps/rsshub"
 
 const containerWidth = 600
 const variants = {
@@ -87,13 +89,18 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
           icon: tw`i-mingcute-cursor-3-line`,
         },
         {
-          title: "Popular Feeds",
+          title: t.app("new_user_guide.step.trending.title"),
           content: createElement(TrendingFeeds),
           icon: "i-mgc-trending-up-cute-re",
         },
+        {
+          title: t.app("new_user_guide.step.rsshub.title"),
+          content: createElement(RSSHubGuide),
+          icon: <img src={RSSHubIcon} className="size-[22px]" />,
+        },
       ].filter((i) => !!i) as {
         title: string
-        icon: string
+        icon: React.ReactNode
         content: FunctionComponentElement<object>
       }[],
     [haveUsedOtherRSSReader, t],
@@ -122,13 +129,17 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
       className="relative flex flex-col items-center justify-center overflow-hidden rounded-xl border bg-theme-background"
     >
       {!!title && (
-        <h1 className="absolute left-6 top-4 text-xl font-bold">
-          <i className={clsx(guideSteps[step - 1].icon, "mr-2 size-[22px] translate-y-1")} />
+        <h1 className="absolute left-6 top-4 flex items-center gap-2 text-xl font-bold">
+          {typeof guideSteps[step - 1].icon === "string" ? (
+            <i className={clsx(guideSteps[step - 1].icon, "size-[22px]")} />
+          ) : (
+            guideSteps[step - 1].icon
+          )}
           {title}
         </h1>
       )}
 
-      <div className="relative mx-auto flex w-full max-w-lg items-center">
+      <div className="relative mx-auto flex w-full max-w-2xl items-center">
         <AnimatePresence initial={false} custom={direction} mode="popLayout">
           <m.div
             key={step - 1}

apps/renderer/src/modules/new-user-guide/steps/rsshub.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from "react"
+
+import { useAuthQuery } from "~/hooks/common"
+import { isASCII } from "~/lib/utils"
+import { RecommendationCard } from "~/modules/discover/recommendations-card"
+import { Queries } from "~/queries"
+
+const pickedRoutes = new Set([
+  "weibo",
+  "bilibili",
+  "twitter",
+  "telegram",
+  "youtube",
+  "github",
+  "pixiv",
+  "jike",
+  "xiaoyuzhou",
+])
+
+export function RSSHubGuide() {
+  const rsshubPopular = useAuthQuery(
+    Queries.discover.rsshubCategory({
+      category: "popular",
+    }),
+    {
+      meta: {
+        persist: true,
+      },
+    },
+  )
+
+  const { data } = rsshubPopular
+
+  const keys = useMemo(() => {
+    if (data) {
+      return Object.keys(data).sort((a, b) => {
+        const aname = data[a].name
+        const bname = data[b].name
+
+        const aRouteName = data[a].routes[Object.keys(data[a].routes)[0]].name
+        const bRouteName = data[b].routes[Object.keys(data[b].routes)[0]].name
+
+        const ia = isASCII(aname) && isASCII(aRouteName)
+        const ib = isASCII(bname) && isASCII(bRouteName)
+
+        if (ia && ib) {
+          return aname.toLowerCase() < bname.toLowerCase() ? -1 : 1
+        } else if (ia || ib) {
+          return ia > ib ? -1 : 1
+        } else {
+          return 0
+        }
+      })
+    } else {
+      return []
+    }
+  }, [data])
+
+  if (rsshubPopular.isLoading) {
+    return null
+  }
+
+  if (!data) {
+    return null
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-3 px-6 py-16">
+      {keys
+        .filter((key) => pickedRoutes.has(key))
+        .map((key) => (
+          <RecommendationCard key={key} data={data[key]} routePrefix={key} />
+        ))}
+    </div>
+  )
+}

locales/app/en.json

@@ -173,6 +173,7 @@
   "new_user_guide.step.behavior.unread_question.content": "How to mark entry as read?",
   "new_user_guide.step.behavior.unread_question.option1": "I don't really care about unread.",
   "new_user_guide.step.behavior.unread_question.option2": "I want to completely control the unread status.",
+  "new_user_guide.step.rsshub.title": "RSSHub",
   "new_user_guide.step.start_question.content": "Have you used other RSS readers before?",
   "new_user_guide.step.start_question.option1": "Yes, I have used other RSS readers.",
   "new_user_guide.step.start_question.option2": "No, this is my first time using an RSS reader.",