From ec1aae20098f393d8f0cc6d178ea3b31cb34a21d Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:48:44 +0800
Subject: [PATCH 1/5] feat: transform html

---
 .../src/modules/discover/DiscoverFeedForm.tsx | 64 ++++++++++++++++---
 .../src/modules/discover/transform-form.tsx   | 59 +++++++++++++++++
 .../(layer)/(subview)/discover/index.tsx      |  6 ++
 locales/app/en.json                           |  1 +
 4 files changed, 121 insertions(+), 9 deletions(-)
 create mode 100644 apps/renderer/src/modules/discover/transform-form.tsx

diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
index aae1a90163..ce4ed5575a 100644
--- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
+++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
@@ -84,16 +84,20 @@ const FeedDescription = ({ description }: { description?: string }) => {
   )
 }
 
+const routeParamsKeyPrefix = "route-params-"
+
 export const DiscoverFeedForm = ({
   route,
   routePrefix,
   noDescription,
   submitButtonClassName,
+  routeParams,
 }: {
   route: RSSHubRoute
   routePrefix: string
   noDescription?: boolean
   submitButtonClassName?: string
+  routeParams?: Record<string, string>
 }) => {
   const { t } = useTranslation()
   const keys = useMemo(
@@ -121,13 +125,22 @@ export const DiscoverFeedForm = ({
     () =>
       z.object({
         ...Object.fromEntries(
-          keys.map((keyItem) => [
-            keyItem.name,
-            keyItem.optional ? z.string().optional().nullable() : z.string().min(1),
-          ]),
+          keys
+            .map((keyItem) => [
+              keyItem.name,
+              keyItem.optional ? z.string().optional().nullable() : z.string().min(1),
+            ])
+            .concat(
+              routeParams
+                ? Object.entries(routeParams).map(([key, _value]) => [
+                    `${routeParamsKeyPrefix}${key}`,
+                    z.string(),
+                  ])
+                : [],
+            ),
         ),
       }),
-    [keys],
+    [keys, routeParams],
   )
 
   const defaultValue = useMemo(() => {
@@ -150,10 +163,28 @@ export const DiscoverFeedForm = ({
   const { present, dismissAll } = useModalStack()
 
   const onSubmit = useCallback(
-    (data: Record<string, string>) => {
+    (_data: Record<string, string>) => {
+      const data = Object.fromEntries(
+        Object.entries(_data).filter(([key]) => !key.startsWith(routeParamsKeyPrefix)),
+      )
+
       try {
-        const fillRegexpPath = regexpPathToPath(route.path, data)
+        const routeParamsPath = encodeURIComponent(
+          Object.entries(_data)
+            .filter(([key, value]) => key.startsWith(routeParamsKeyPrefix) && value)
+            .map(([key, value]) => [key.slice(routeParamsKeyPrefix.length), value])
+            .map(([key, value]) => `${key}=${value}`)
+            .join("&"),
+        )
+
+        const fillRegexpPath = regexpPathToPath(
+          routeParamsPath ? route.path.slice(0, route.path.indexOf("/:routeParams")) : route.path,
+          data,
+        )
         const url = `rsshub://${routePrefix}${fillRegexpPath}`
+
+        const finalUrl = routeParamsPath ? `${url}/${routeParamsPath}` : url
+
         const defaultView = getViewFromRoute(route) || (getSidebarActiveView() as FeedViewType)
 
         present({
@@ -161,7 +192,7 @@ export const DiscoverFeedForm = ({
           content: () => (
             <FeedForm
               asWidget
-              url={url}
+              url={finalUrl}
               defaultValues={{
                 view: defaultView.toString(),
               }}
@@ -180,7 +211,7 @@ export const DiscoverFeedForm = ({
         }
       }
     },
-    [dismissAll, form, keys, present, route.path, routePrefix],
+    [dismissAll, form, keys, present, route, routePrefix],
   )
 
   const formElRef = useRef<HTMLFormElement>(null)
@@ -259,6 +290,21 @@ export const DiscoverFeedForm = ({
             </FormItem>
           )
         })}
+        {routeParams && (
+          <div className="grid grid-cols-2 gap-4">
+            {Object.entries(routeParams).map(([key, value]) => (
+              <FormItem key={`${routeParamsKeyPrefix}${key}`} className="flex flex-col space-y-2">
+                <FormLabel className="capitalize">{key}</FormLabel>
+                <Input {...form.register(`${routeParamsKeyPrefix}${key}`)} />
+                {!!value && (
+                  <Markdown className="line-clamp-1 text-xs text-theme-foreground/50">
+                    {value}
+                  </Markdown>
+                )}
+              </FormItem>
+            ))}
+          </div>
+        )}
         {!noDescription && (
           <>
             <FeedDescription description={route.description} />
diff --git a/apps/renderer/src/modules/discover/transform-form.tsx b/apps/renderer/src/modules/discover/transform-form.tsx
new file mode 100644
index 0000000000..2b96349db6
--- /dev/null
+++ b/apps/renderer/src/modules/discover/transform-form.tsx
@@ -0,0 +1,59 @@
+// routeParams
+
+import { LoadingCircle } from "~/components/ui/loading"
+import { TokenBrandedRss3 } from "~/components/ui/platform-icon/icons"
+import { useAuthQuery } from "~/hooks/common"
+import { Queries } from "~/queries"
+
+import { DiscoverFeedForm } from "./DiscoverFeedForm"
+
+const transformRouteParams = {
+  title: "The title of the RSS",
+  item: "The HTML elements as item using CSS selector",
+  itemTitle: "The HTML elements as title in item using CSS selector",
+  itemTitleAttr: "The attributes of title element as title",
+  itemLink: "The HTML elements as link in item using CSS selector",
+  itemLinkAttr: "The attributes of link element as link",
+  itemDesc: "The HTML elements as descrption in item using CSS selector",
+  itemDescAttr: "The attributes of descrption element as description",
+  itemPubDate: "The HTML elements as pubDate in item using CSS selector",
+  itemPubDateAttr: "The attributes of pubDate element as pubDate",
+}
+
+export function DiscoverTransform() {
+  const { data, isLoading } = useAuthQuery(
+    Queries.discover.rsshubNamespace({
+      namespace: "rsshub",
+    }),
+    {
+      meta: {
+        persist: true,
+      },
+    },
+  )
+
+  if (isLoading) {
+    return (
+      <div className="center mt-12 flex w-full flex-col gap-8">
+        <TokenBrandedRss3 className="size-[50px]" />
+        <LoadingCircle size="large" />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {data?.rsshub.routes && (
+        <div className="w-[512px]">
+          <DiscoverFeedForm
+            routePrefix="rsshub"
+            route={data?.rsshub.routes["/transform/html/:url/:routeParams"]}
+            routeParams={transformRouteParams}
+            noDescription
+            submitButtonClassName="justify-center"
+          />
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx b/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
index 086be0b6ec..aa345ec04c 100644
--- a/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
+++ b/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
@@ -8,6 +8,7 @@ import { DiscoverImport } from "~/modules/discover/import"
 import { DiscoverInboxList } from "~/modules/discover/inbox-list-form"
 import { Recommendations } from "~/modules/discover/recommendations"
 import { DiscoverRSS3 } from "~/modules/discover/rss3-form"
+import { DiscoverTransform } from "~/modules/discover/transform-form"
 import { DiscoverUser } from "~/modules/discover/user-form"
 import { Trend } from "~/modules/trending"
 
@@ -30,6 +31,10 @@ const tabs: {
     name: "words.rsshub",
     value: "rsshub",
   },
+  {
+    name: "words.transform",
+    value: "transform",
+  },
   {
     name: "words.inbox",
     value: "inbox",
@@ -93,4 +98,5 @@ const TabComponent: Record<string, React.FC<{ type?: string }>> = {
   inbox: DiscoverInboxList,
   user: DiscoverUser,
   default: DiscoverForm,
+  transform: DiscoverTransform,
 }
diff --git a/locales/app/en.json b/locales/app/en.json
index a34d7e520f..d6969931d7 100644
--- a/locales/app/en.json
+++ b/locales/app/en.json
@@ -284,6 +284,7 @@
   "words.search": "Search",
   "words.starred": "Starred",
   "words.title": "Title",
+  "words.transform": "Transform",
   "words.trending": "Trending",
   "words.undo": "Undo",
   "words.unread": "Unread",

From 06c1caa994c110d927c5aa45c272763f4cfba910 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:30:43 +0800
Subject: [PATCH 2/5] chore: use EllipsisHorizontalTextWithTooltip

---
 apps/renderer/src/modules/discover/DiscoverFeedForm.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
index ce4ed5575a..80b4d2f49a 100644
--- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
+++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select"
+import { EllipsisHorizontalTextWithTooltip } from "~/components/ui/typography"
 import { nextFrame } from "~/lib/dom"
 import type { FeedViewType } from "~/lib/enum"
 import {
@@ -297,9 +298,9 @@ export const DiscoverFeedForm = ({
                 <FormLabel className="capitalize">{key}</FormLabel>
                 <Input {...form.register(`${routeParamsKeyPrefix}${key}`)} />
                 {!!value && (
-                  <Markdown className="line-clamp-1 text-xs text-theme-foreground/50">
-                    {value}
-                  </Markdown>
+                  <EllipsisHorizontalTextWithTooltip>
+                    <Markdown className="text-xs text-theme-foreground/50">{value}</Markdown>
+                  </EllipsisHorizontalTextWithTooltip>
                 )}
               </FormItem>
             ))}

From cf3632af98a69bd78dafd4497c46cf513e8c45b5 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:39:43 +0800
Subject: [PATCH 3/5] default info

---
 .../src/modules/discover/DiscoverFeedForm.tsx | 21 +++++++---
 .../src/modules/discover/transform-form.tsx   | 41 ++++++++++++++-----
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
index 80b4d2f49a..150bf64d5f 100644
--- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
+++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
@@ -98,7 +98,13 @@ export const DiscoverFeedForm = ({
   routePrefix: string
   noDescription?: boolean
   submitButtonClassName?: string
-  routeParams?: Record<string, string>
+  routeParams?: Record<
+    string,
+    {
+      description: string
+      default?: string
+    }
+  >
 }) => {
   const { t } = useTranslation()
   const keys = useMemo(
@@ -292,14 +298,19 @@ export const DiscoverFeedForm = ({
           )
         })}
         {routeParams && (
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-2 gap-3">
             {Object.entries(routeParams).map(([key, value]) => (
               <FormItem key={`${routeParamsKeyPrefix}${key}`} className="flex flex-col space-y-2">
                 <FormLabel className="capitalize">{key}</FormLabel>
-                <Input {...form.register(`${routeParamsKeyPrefix}${key}`)} />
-                {!!value && (
+                <Input
+                  {...form.register(`${routeParamsKeyPrefix}${key}`)}
+                  placeholder={value.default}
+                />
+                {!!value.description && (
                   <EllipsisHorizontalTextWithTooltip>
-                    <Markdown className="text-xs text-theme-foreground/50">{value}</Markdown>
+                    <Markdown className="text-xs text-theme-foreground/50">
+                      {value.description}
+                    </Markdown>
                   </EllipsisHorizontalTextWithTooltip>
                 )}
               </FormItem>
diff --git a/apps/renderer/src/modules/discover/transform-form.tsx b/apps/renderer/src/modules/discover/transform-form.tsx
index 2b96349db6..afbacff33c 100644
--- a/apps/renderer/src/modules/discover/transform-form.tsx
+++ b/apps/renderer/src/modules/discover/transform-form.tsx
@@ -8,16 +8,37 @@ import { Queries } from "~/queries"
 import { DiscoverFeedForm } from "./DiscoverFeedForm"
 
 const transformRouteParams = {
-  title: "The title of the RSS",
-  item: "The HTML elements as item using CSS selector",
-  itemTitle: "The HTML elements as title in item using CSS selector",
-  itemTitleAttr: "The attributes of title element as title",
-  itemLink: "The HTML elements as link in item using CSS selector",
-  itemLinkAttr: "The attributes of link element as link",
-  itemDesc: "The HTML elements as descrption in item using CSS selector",
-  itemDescAttr: "The attributes of descrption element as description",
-  itemPubDate: "The HTML elements as pubDate in item using CSS selector",
-  itemPubDateAttr: "The attributes of pubDate element as pubDate",
+  title: { description: "The title of the RSS", default: "Extract from <title>" },
+  item: { description: "The HTML elements as item using CSS selector", default: "html" },
+  itemTitle: {
+    description: "The HTML elements as title in item using CSS selector",
+    default: "item element",
+  },
+  itemTitleAttr: {
+    description: "The attributes of title element as title",
+    default: "Element text",
+  },
+  itemLink: {
+    description: "The HTML elements as link in item using CSS selector",
+    default: "item element",
+  },
+  itemLinkAttr: { description: "The attributes of link element as link", default: "href" },
+  itemDesc: {
+    description: "The HTML elements as description in item using CSS selector",
+    default: "item element",
+  },
+  itemDescAttr: {
+    description: "The attributes of description element as description",
+    default: "Element html",
+  },
+  itemPubDate: {
+    description: "The HTML elements as pubDate in item using CSS selector",
+    default: "item element",
+  },
+  itemPubDateAttr: {
+    description: "The attributes of pubDate element as pubDate",
+    default: "Element html",
+  },
 }
 
 export function DiscoverTransform() {

From c36dbb33cd11f5200edf511071affd44fc16d87f Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 11 Oct 2024 17:33:38 +0800
Subject: [PATCH 4/5] update

---
 .../src/modules/discover/DiscoverFeedForm.tsx    | 16 +++++++++-------
 .../src/modules/discover/transform-form.tsx      |  7 ++-----
 .../(main)/(layer)/(subview)/discover/index.tsx  |  8 ++++----
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
index 150bf64d5f..a1383ad372 100644
--- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
+++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
@@ -87,6 +87,14 @@ const FeedDescription = ({ description }: { description?: string }) => {
 
 const routeParamsKeyPrefix = "route-params-"
 
+export type RouteParams = Record<
+  string,
+  {
+    description: string
+    default?: string
+  }
+>
+
 export const DiscoverFeedForm = ({
   route,
   routePrefix,
@@ -98,13 +106,7 @@ export const DiscoverFeedForm = ({
   routePrefix: string
   noDescription?: boolean
   submitButtonClassName?: string
-  routeParams?: Record<
-    string,
-    {
-      description: string
-      default?: string
-    }
-  >
+  routeParams?: RouteParams
 }) => {
   const { t } = useTranslation()
   const keys = useMemo(
diff --git a/apps/renderer/src/modules/discover/transform-form.tsx b/apps/renderer/src/modules/discover/transform-form.tsx
index afbacff33c..1c1f9ae995 100644
--- a/apps/renderer/src/modules/discover/transform-form.tsx
+++ b/apps/renderer/src/modules/discover/transform-form.tsx
@@ -1,13 +1,11 @@
-// routeParams
-
 import { LoadingCircle } from "~/components/ui/loading"
-import { TokenBrandedRss3 } from "~/components/ui/platform-icon/icons"
 import { useAuthQuery } from "~/hooks/common"
 import { Queries } from "~/queries"
 
+import type { RouteParams } from "./DiscoverFeedForm"
 import { DiscoverFeedForm } from "./DiscoverFeedForm"
 
-const transformRouteParams = {
+const transformRouteParams: RouteParams = {
   title: { description: "The title of the RSS", default: "Extract from <title>" },
   item: { description: "The HTML elements as item using CSS selector", default: "html" },
   itemTitle: {
@@ -56,7 +54,6 @@ export function DiscoverTransform() {
   if (isLoading) {
     return (
       <div className="center mt-12 flex w-full flex-col gap-8">
-        <TokenBrandedRss3 className="size-[50px]" />
         <LoadingCircle size="large" />
       </div>
     )
diff --git a/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx b/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
index aa345ec04c..e07c996c6b 100644
--- a/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
+++ b/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
@@ -31,10 +31,6 @@ const tabs: {
     name: "words.rsshub",
     value: "rsshub",
   },
-  {
-    name: "words.transform",
-    value: "transform",
-  },
   {
     name: "words.inbox",
     value: "inbox",
@@ -47,6 +43,10 @@ const tabs: {
     name: "words.user",
     value: "user",
   },
+  {
+    name: "words.transform",
+    value: "transform",
+  },
   {
     name: "words.import",
     value: "import",

From 46eba870170ee24936c498bd16b66ae431d8642f Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 11 Oct 2024 17:36:39 +0800
Subject: [PATCH 5/5] update

---
 .../renderer/src/modules/discover/DiscoverFeedForm.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
index a1383ad372..10d3fbae86 100644
--- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
+++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx
@@ -141,7 +141,7 @@ export const DiscoverFeedForm = ({
             ])
             .concat(
               routeParams
-                ? Object.entries(routeParams).map(([key, _value]) => [
+                ? Object.entries(routeParams).map(([key]) => [
                     `${routeParamsKeyPrefix}${key}`,
                     z.string(),
                   ])
@@ -187,12 +187,14 @@ export const DiscoverFeedForm = ({
         )
 
         const fillRegexpPath = regexpPathToPath(
-          routeParamsPath ? route.path.slice(0, route.path.indexOf("/:routeParams")) : route.path,
+          routeParams && routeParamsPath
+            ? route.path.slice(0, route.path.indexOf("/:routeParams"))
+            : route.path,
           data,
         )
         const url = `rsshub://${routePrefix}${fillRegexpPath}`
 
-        const finalUrl = routeParamsPath ? `${url}/${routeParamsPath}` : url
+        const finalUrl = routeParams && routeParamsPath ? `${url}/${routeParamsPath}` : url
 
         const defaultView = getViewFromRoute(route) || (getSidebarActiveView() as FeedViewType)
 
@@ -220,7 +222,7 @@ export const DiscoverFeedForm = ({
         }
       }
     },
-    [dismissAll, form, keys, present, route, routePrefix],
+    [dismissAll, form, keys, present, route, routeParams, routePrefix],
   )
 
   const formElRef = useRef<HTMLFormElement>(null)