feat(web): add rss feed url

yjl9903 · Oct 1, 2024 · f6f787b · f6f787b
1 parent 5ac7383
commit f6f787b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 21 deletions.
diff --git a/apps/frontend/web/app/layouts/Layout.tsx b/apps/frontend/web/app/layouts/Layout.tsx
@@ -11,12 +11,12 @@ const MaxPaddingTop = 152;
 const MaxPaddingBottom = 96;
 const SearchHeight = NavHeight;
 
-export default function Layout(props: { children?: React.ReactNode; rss?: string }) {
-  const { rss } = props;
+export default function Layout(props: { children?: React.ReactNode; feedURL?: string }) {
+  const { feedURL } = props;
 
   return (
     <div className="w-full" style={{ '--nav-height': `${NavHeight - 2}px` }}>
-      <Hero rss={rss}></Hero>
+      <Hero feedURL={feedURL}></Hero>
       <div
         className="flex"
         style={{ paddingTop: `${MaxPaddingTop + NavHeight + MaxPaddingBottom}px` }}
@@ -69,7 +69,7 @@ export const useHero = () => {
   };
 };
 
-function Hero(props: { rss?: string }) {
+function Hero(props: { feedURL?: string }) {
   const { height, paddingTop, paddingBottom, injectScript } = useHero();
 
   return (
@@ -79,7 +79,7 @@ function Hero(props: { rss?: string }) {
         suppressHydrationWarning={true}
         style={{ height: `${height}px` }}
       ></div>
-      <Header rss={props.rss}></Header>
+      <Header feedURL={props.feedURL}></Header>
       <div
         className="hero-top z-10 fixed w-full pt-5rem pb-3rem text-4xl font-quicksand font-bold text-center select-none outline-none pointer-events-none"
         suppressHydrationWarning={true}
@@ -119,8 +119,8 @@ function Hero(props: { rss?: string }) {
   );
 }
 
-function Header(props: { rss?: string }) {
-  const { rss } = props;
+function Header(props: { feedURL?: string }) {
+  const { feedURL } = props;
 
   return (
     <div className="z-11 bg-[#fef8f7] fixed pt-[1px] flex justify-center items-center w-full h-$nav-height">
@@ -129,27 +129,27 @@ function Header(props: { rss?: string }) {
           <NavLink to="/">🌸</NavLink>
         </div>
         <div>
-          <NavLink to="/" className="rounded-md p-2 hover:(bg-neutral-200)">
+          <NavLink to="/" className="rounded-md p-2 hover:(bg-zinc-100)">
             动画
           </NavLink>
         </div>
         <div>
-          <NavLink to="/resources" className="rounded-md p-2 hover:(bg-neutral-200)">
+          <NavLink to="/resources" className="rounded-md p-2 hover:(bg-zinc-100)">
             字幕组
           </NavLink>
         </div>
         <div>
-          <NavLink to="/resources" className="rounded-md p-2 hover:(bg-neutral-200)">
+          <NavLink to="/resources" className="rounded-md p-2 hover:(bg-zinc-100)">
             资源
           </NavLink>
         </div>
         <div className="flex-auto"></div>
         <div>
-          {rss && (
+          {feedURL && (
             <a
-              href={rss}
+              href={feedURL}
               target="_blank"
-              className="inline cursor-pointer rounded-md p-2 text-[#ee802f] hover:(!text-[#ff7800] !border-b-[#ff7800] bg-neutral-200)"
+              className="inline cursor-pointer rounded-md p-2 text-[#ee802f] hover:(!text-[#ff7800] !border-b-[#ff7800] bg-zinc-100)"
             >
               <span className="i-carbon-rss mr1" />
               <span>RSS</span>

diff --git a/apps/frontend/web/app/routes/_index/route.tsx b/apps/frontend/web/app/routes/_index/route.tsx
@@ -1,10 +1,12 @@
-import type { Resource } from 'animegarden';
-
-import { useLoaderData, useNavigate } from '@remix-run/react';
+import { useMemo } from 'react';
+import { useLoaderData, useLocation } from '@remix-run/react';
 import { type LoaderFunctionArgs, type MetaFunction, json } from '@remix-run/cloudflare';
 
+import type { Resource } from 'animegarden';
+
 import Layout from '~/layouts/Layout';
 import Resources from '~/components/Resources';
+import { generateFeed } from '~/utils/feed';
 import { fetchResources } from '~/utils';
 
 import { Error } from '../resources.($page)/Error';
@@ -26,10 +28,15 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const location = useLocation();
   const { ok, resources, timestamp } = useLoaderData<typeof loader>();
+  const feedURL = useMemo(
+    () => `/feed.xml?filter=${generateFeed(new URLSearchParams(location.search))}`,
+    [location]
+  );
 
   return (
-    <Layout>
+    <Layout feedURL={feedURL}>
       <div className="w-full pt-12 pb-24">
         {ok ? (
           <Resources

diff --git a/apps/frontend/web/app/routes/resources.($page)/route.tsx b/apps/frontend/web/app/routes/resources.($page)/route.tsx
@@ -1,11 +1,13 @@
+import { useMemo } from 'react';
 import { redirect, useLoaderData, useLocation } from '@remix-run/react';
 import { json, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/cloudflare';
 
 import { parseSearchURL, Resource } from 'animegarden';
 
-import Layout from '@/layouts/Layout';
-import Resources from '@/components/Resources';
-import { fetchResources } from '@/utils';
+import Layout from '~/layouts/Layout';
+import Resources from '~/components/Resources';
+import { generateFeed } from '~/utils/feed';
+import { fetchResources } from '~/utils';
 
 import { Error } from './Error';
 import { Filter } from './Filter';
@@ -50,9 +52,13 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 export default function ResourcesIndex() {
   const location = useLocation();
   const { ok, resources, complete, filter, page, timestamp } = useLoaderData<typeof loader>();
+  const feedURL = useMemo(
+    () => `/feed.xml?filter=${generateFeed(new URLSearchParams(location.search))}`,
+    [location]
+  );
 
   return (
-    <Layout>
+    <Layout feedURL={feedURL}>
       <div className="w-full pt-12 pb-24">
         {ok ? (
           <>

diff --git a/apps/frontend/web/app/utils/feed.ts b/apps/frontend/web/app/utils/feed.ts
@@ -0,0 +1,25 @@
+import { parseSearchURL, type ResolvedFilterOptions } from 'animegarden';
+
+import { removeQuote } from './string';
+
+export function generateFeed(...params: URLSearchParams[]) {
+  const filters: any[] = [];
+  for (const param of params) {
+    const filter: Partial<ResolvedFilterOptions> = parseSearchURL(param);
+    // Hack: manually remove duplicate
+    if (!filter.provider && filter.duplicate === false) {
+      delete filter['duplicate'];
+    }
+    if (filter.search) {
+      filter.search = removeQuote(filter.search);
+    }
+    if (filter.page) {
+      delete filter['page'];
+    }
+    if (filter.pageSize) {
+      delete filter['pageSize'];
+    }
+    filters.push({ ...filter });
+  }
+  return encodeURIComponent(JSON.stringify(filters));
+}
diff --git a/apps/frontend/web/uno.config.ts b/apps/frontend/web/uno.config.ts
@@ -75,6 +75,10 @@ export default defineConfig({
   },
   theme: {
     colors: {
+      zinc: {
+        '25': '#fbfbfc',
+        '50': '#f9f9fa'
+      },
       'main-50': '#fafafa',
       'main-100': '#f5f5f5',
       'main-200': '#e5e5e5',