feat: transform html

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 {
@@ -84,16 +85,28 @@ const FeedDescription = ({ description }: { description?: string }) => {
   )
 }
 
+const routeParamsKeyPrefix = "route-params-"
+
+export type RouteParams = Record<
+  string,
+  {
+    description: string
+    default?: string
+  }
+>
+
 export const DiscoverFeedForm = ({
   route,
   routePrefix,
   noDescription,
   submitButtonClassName,
+  routeParams,
 }: {
   route: RSSHubRoute
   routePrefix: string
   noDescription?: boolean
   submitButtonClassName?: string
+  routeParams?: RouteParams
 }) => {
   const { t } = useTranslation()
   const keys = useMemo(
@@ -121,13 +134,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]) => [
+                    `${routeParamsKeyPrefix}${key}`,
+                    z.string(),
+                  ])
+                : [],
+            ),
         ),
       }),
-    [keys],
+    [keys, routeParams],
   )
 
   const defaultValue = useMemo(() => {
@@ -150,18 +172,38 @@ 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(
+          routeParams && routeParamsPath
+            ? route.path.slice(0, route.path.indexOf("/:routeParams"))
+            : route.path,
+          data,
+        )
         const url = `rsshub://${routePrefix}${fillRegexpPath}`
+
+        const finalUrl = routeParams && routeParamsPath ? `${url}/${routeParamsPath}` : url
+
         const defaultView = getViewFromRoute(route) || (getSidebarActiveView() as FeedViewType)
 
         present({
           title: "Add Feed",
           content: () => (
             <FeedForm
               asWidget
-              url={url}
+              url={finalUrl}
               defaultValues={{
                 view: defaultView.toString(),
               }}
@@ -180,7 +222,7 @@ export const DiscoverFeedForm = ({
         }
       }
     },
-    [dismissAll, form, keys, present, route.path, routePrefix],
+    [dismissAll, form, keys, present, route, routeParams, routePrefix],
   )
 
   const formElRef = useRef<HTMLFormElement>(null)
@@ -259,6 +301,26 @@ export const DiscoverFeedForm = ({
             </FormItem>
           )
         })}
+        {routeParams && (
+          <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}`)}
+                  placeholder={value.default}
+                />
+                {!!value.description && (
+                  <EllipsisHorizontalTextWithTooltip>
+                    <Markdown className="text-xs text-theme-foreground/50">
+                      {value.description}
+                    </Markdown>
+                  </EllipsisHorizontalTextWithTooltip>
+                )}
+              </FormItem>
+            ))}
+          </div>
+        )}
         {!noDescription && (
           <>
             <FeedDescription description={route.description} />

apps/renderer/src/modules/discover/transform-form.tsx

@@ -0,0 +1,77 @@
+import { LoadingCircle } from "~/components/ui/loading"
+import { useAuthQuery } from "~/hooks/common"
+import { Queries } from "~/queries"
+
+import type { RouteParams } from "./DiscoverFeedForm"
+import { DiscoverFeedForm } from "./DiscoverFeedForm"
+
+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: {
+    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() {
+  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">
+        <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>
+      )}
+    </>
+  )
+}

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"
 
@@ -42,6 +43,10 @@ const tabs: {
     name: "words.user",
     value: "user",
   },
+  {
+    name: "words.transform",
+    value: "transform",
+  },
   {
     name: "words.import",
     value: "import",
@@ -93,4 +98,5 @@ const TabComponent: Record<string, React.FC<{ type?: string }>> = {
   inbox: DiscoverInboxList,
   user: DiscoverUser,
   default: DiscoverForm,
+  transform: DiscoverTransform,
 }

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",