feat(app): split pages

yjl9903 · Oct 19, 2023 · c6b8c01 · c6b8c01
1 parent 88bf574
commit c6b8c01
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 72 deletions.
diff --git a/packages/app/src/components/Anime.astro b/packages/app/src/components/Anime.astro
@@ -0,0 +1,71 @@
+---
+import type { FullBangumi } from 'bgmd/dist/types';
+import { calendar as rawCalendar } from 'bgmd/calendar';
+import { stringifySearchURL } from 'animegarden';
+
+import { APP_HOST } from '~build/meta';
+
+const first = (new Date().getDay() + 6) % 7;
+const calendar = rawCalendar.map((_, idx) => {
+  const index = (idx + first) % 7;
+  return {
+    index: index + 1,
+    text: ['一', '二', '三', '四', '五', '六', '日'][index],
+    bangumis: rawCalendar[index]
+  };
+});
+
+function getPosterImage(bgm: FullBangumi) {
+  if (bgm.tmdb?.poster_path) {
+    return `https://www.themoviedb.org/t/p/w300_and_h450_bestv2${bgm.tmdb.poster_path}`;
+  } else if (bgm.bangumi?.images) {
+    return bgm.bangumi.images.large;
+  }
+}
+
+function getDisplayName(bgm: FullBangumi) {
+  if (bgm.bangumi) {
+    return bgm.bangumi.name_cn || bgm.name;
+  }
+  return bgm.name;
+}
+
+function getSearchURL(bgm: FullBangumi) {
+  const url = stringifySearchURL('https://' + APP_HOST, {
+    include: [[bgm.name, ...bgm.alias]],
+    after: new Date(new Date(bgm.air_date).getTime() - 7 * 24 * 60 * 60 * 1000)
+  });
+  return `${url.pathname}${url.search}`;
+}
+---
+
+<div class="space-y-4 w-full mb-8">
+  {
+    calendar.map((cal) => (
+      <div class="w-full pt-4 bg-gray-100 rounded-md" id={`星期${cal.text}`}>
+        <a
+          class="block px-6 text-xl font-bold mb-4 select-none border-l-[4px] border-[#0ca]"
+          href={`#星期${cal.text}`}
+        >
+          星期{cal.text}
+        </a>
+        <div class="px-6 pb-2 flex w-full space-x-6 overflow-x-auto">
+          {cal.bangumis.map((bgm) => (
+            <a href={getSearchURL(bgm)} class="block w-max">
+              <div class="w-150px h-225px flex items-center select-none">
+                <img
+                  src={getPosterImage(bgm)}
+                  alt=""
+                  class="rounded-md max-h-225px hover:(shadow-box)"
+                />
+              </div>
+              <div class="w-150px truncate py-2">
+                <span class="font-bold text-sm text-link-active">{getDisplayName(bgm)}</span>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    ))
+  }
+</div>
diff --git a/packages/app/src/layouts/Layout.astro b/packages/app/src/layouts/Layout.astro
@@ -33,7 +33,13 @@ const timestamp =
 
 const hasTypeSearch = search.has('type');
 const hasFansubSearch = search.has('fansubId');
-const active = hasFansubSearch ? 'fansub' : hasTypeSearch ? 'type' : '';
+const active = url.startsWith('/anime')
+  ? 'anime'
+  : hasFansubSearch
+  ? 'fansub'
+  : hasTypeSearch
+  ? 'type'
+  : '';
 
 function generateFeed(params: URLSearchParams) {
   const filter = parseSearchURL(params);
@@ -77,11 +83,11 @@ function followSearch(params: Record<string, string>) {
       <div class="main flex gap6 hide-scrollbar justify-between select-none text-base-500">
         <div class="flex gap6 justify-start">
           <a href="/" class="header-item block" x-active={url === '/'}>首页</a>
+          <a href="/anime" class="header-item block" x-active={active === 'anime'}>动画</a>
           <a
             href="/resources/1"
             class="header-item block"
-            x-active={url.startsWith('/resources/') && active === ''}
-            >所有资源</a
+            x-active={url.startsWith('/resources/') && active === ''}>所有资源</a
           >
           <div class="header-item cursor-pointer" x-active={active === 'type'}>
             <Dropdown>

diff --git a/packages/app/src/pages/anime.astro b/packages/app/src/pages/anime.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+import AnimePanel from '../components/Anime.astro';
+---
+
+<Layout title="Anime Garden">
+  <div class="mt-4vh w-full">
+    <AnimePanel />
+  </div>
+</Layout>
diff --git a/packages/app/src/pages/index.astro b/packages/app/src/pages/index.astro
@@ -1,10 +1,4 @@
 ---
-import type { FullBangumi } from 'bgmd/dist/types';
-import { calendar as rawCalendar } from 'bgmd/calendar';
-import { stringifySearchURL } from 'animegarden';
-
-import { APP_HOST } from '~build/meta';
-
 import Layout from '../layouts/Layout.astro';
 
 import Pagination from '../components/Pagination.astro';
@@ -14,39 +8,6 @@ import ErrorNotification from '../components/Error.astro';
 import { getRuntimeEnv } from '../utils';
 import { wfetch, fetchResources } from '../fetch';
 
-const first = (new Date().getDay() + 6) % 7;
-const calendar = rawCalendar.map((_, idx) => {
-  const index = (idx + first) % 7;
-  return {
-    index: index + 1,
-    text: ['一', '二', '三', '四', '五', '六', '日'][index],
-    bangumis: rawCalendar[index]
-  };
-});
-
-function getPosterImage(bgm: FullBangumi) {
-  if (bgm.tmdb?.poster_path) {
-    return `https://www.themoviedb.org/t/p/w300_and_h450_bestv2${bgm.tmdb.poster_path}`;
-  } else if (bgm.bangumi?.images) {
-    return bgm.bangumi.images.large;
-  }
-}
-
-function getDisplayName(bgm: FullBangumi) {
-  if (bgm.bangumi) {
-    return bgm.bangumi.name_cn || bgm.name;
-  }
-  return bgm.name;
-}
-
-function getSearchURL(bgm: FullBangumi) {
-  const url = stringifySearchURL('https://' + APP_HOST, {
-    include: [[bgm.name, ...bgm.alias]],
-    after: new Date(new Date(bgm.air_date).getTime() - 7 * 24 * 60 * 60 * 1000)
-  });
-  return `${url.pathname}${url.search}`;
-}
-
 const env = getRuntimeEnv(Astro.locals);
 
 const { ok, resources, timestamp } = await fetchResources(
@@ -57,36 +18,6 @@ const { ok, resources, timestamp } = await fetchResources(
 
 <Layout title="Anime Garden" timestamp={timestamp}>
   <div class="mt-4vh w-full">
-    <div class="space-y-4 w-full mb-8">
-      {
-        calendar.map((cal) => (
-          <div class="w-full pt-4 bg-gray-100 rounded-md" id={`星期${cal.text}`}>
-            <a
-              class="block px-6 text-xl font-bold mb-4 select-none border-l-[4px] border-[#0ca]"
-              href={`#星期${cal.text}`}
-            >
-              星期{cal.text}
-            </a>
-            <div class="px-6 pb-2 flex w-full space-x-6 overflow-x-auto">
-              {cal.bangumis.map((bgm) => (
-                <a href={getSearchURL(bgm)} class="block w-max">
-                  <div class="w-150px h-225px flex items-center select-none">
-                    <img
-                      src={getPosterImage(bgm)}
-                      alt=""
-                      class="rounded-md max-h-225px hover:(shadow-box)"
-                    />
-                  </div>
-                  <div class="w-150px truncate py-2">
-                    <span class="font-bold text-sm text-link-active">{getDisplayName(bgm)}</span>
-                  </div>
-                </a>
-              ))}
-            </div>
-          </div>
-        ))
-      }
-    </div>
     {
       ok ? (
         <>