feat(app): add weekday anime list

yjl9903 · Nov 7, 2023 · b7fd1be · b7fd1be
1 parent aaac78e
commit b7fd1be
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 51 deletions.
diff --git a/packages/app/src/components/Anime.astro b/packages/app/src/components/Anime.astro
@@ -1,55 +1,5 @@
 ---
-import type { FullBangumi } from 'bgmd/dist/types';
-import { calendar as rawCalendar } from 'bgmd/calendar';
-import { stringifySearchURL } from 'animegarden';
-
-import { APP_HOST } from '~build/meta';
-
-// Before 6:00
-const first = (new Date(new Date().getTime() - 6 * 60 * 60 * 1000).getDay() + 6) % 7;
-const calendar = rawCalendar.map((_, idx) => {
-  const index = (idx + first) % 7;
-  return {
-    index: index + 1,
-    text: ['一', '二', '三', '四', '五', '六', '日'][index],
-    bangumis: rawCalendar[index]
-      .filter((b) => !!getPosterImage(b))
-      .sort((lhs, rhs) => {
-        const getLanguage = (bgm: FullBangumi) => {
-          const cn = ['国创', '国产动画', '国漫', '中国'];
-          return bgm.bangumi?.tags.some((t) => cn.includes(t)) || bgm.bangumi?.name_cn === ''
-            ? 1
-            : 0;
-        };
-        const lang = getLanguage(lhs) - getLanguage(rhs);
-        if (lang !== 0) return lang;
-        return new Date(rhs.air_date).getTime() - new Date(lhs.air_date).getTime();
-      })
-  };
-});
-
-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}`;
-}
+import { calendar, getPosterImage, getDisplayName, getSearchURL } from '../logic/anime';
 ---
 
 <div class="space-y-4 w-full mb-8">

diff --git a/packages/app/src/logic/anime.ts b/packages/app/src/logic/anime.ts
@@ -0,0 +1,52 @@
+import type { FullBangumi } from 'bgmd/dist/types';
+import { calendar as rawCalendar } from 'bgmd/calendar';
+import { stringifySearchURL } from 'animegarden';
+
+import { APP_HOST } from '~build/meta';
+
+// Before 6:00
+export const Weekday = (new Date(new Date().getTime() - 6 * 60 * 60 * 1000).getDay() + 6) % 7;
+
+export const calendar = rawCalendar.map((_, idx) => {
+  const index = (idx + Weekday) % 7;
+  return {
+    index: index + 1,
+    text: ['一', '二', '三', '四', '五', '六', '日'][index],
+    bangumis: rawCalendar[index]
+      .filter((b) => !!getPosterImage(b))
+      .sort((lhs, rhs) => {
+        const getLanguage = (bgm: FullBangumi) => {
+          const cn = ['国创', '国产动画', '国漫', '中国'];
+          return bgm.bangumi?.tags.some((t) => cn.includes(t)) || bgm.bangumi?.name_cn === ''
+            ? 1
+            : 0;
+        };
+        const lang = getLanguage(lhs) - getLanguage(rhs);
+        if (lang !== 0) return lang;
+        return new Date(rhs.air_date).getTime() - new Date(lhs.air_date).getTime();
+      })
+  };
+});
+
+export 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;
+  }
+}
+
+export function getDisplayName(bgm: FullBangumi) {
+  if (bgm.bangumi) {
+    return bgm.bangumi.name_cn || bgm.name;
+  }
+  return bgm.name;
+}
+
+export 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}`;
+}
diff --git a/packages/app/src/pages/index.astro b/packages/app/src/pages/index.astro
@@ -7,6 +7,7 @@ import ErrorNotification from '../components/Error.astro';
 
 import { getRuntimeEnv } from '../utils';
 import { wfetch, fetchResources } from '../fetch';
+import { Weekday, calendar, getDisplayName, getSearchURL } from '../logic/anime';
 
 const env = getRuntimeEnv(Astro.locals);
 
@@ -18,6 +19,53 @@ const { ok, resources, timestamp } = await fetchResources(
 
 <Layout title="Anime Garden" timestamp={timestamp}>
   <div class="mt-4vh w-full">
+    <div class="border-b pb-2 mb-2">
+      <input type="radio" name="weekday" id="weekday-1" class="hidden" checked={Weekday === 0} />
+      <input type="radio" name="weekday" id="weekday-2" class="hidden" checked={Weekday === 1} />
+      <input type="radio" name="weekday" id="weekday-3" class="hidden" checked={Weekday === 2} />
+      <input type="radio" name="weekday" id="weekday-4" class="hidden" checked={Weekday === 3} />
+      <input type="radio" name="weekday" id="weekday-5" class="hidden" checked={Weekday === 4} />
+      <input type="radio" name="weekday" id="weekday-6" class="hidden" checked={Weekday === 5} />
+      <input type="radio" name="weekday" id="weekday-7" class="hidden" checked={Weekday === 6} />
+
+      <div
+        class="weekday-select
+          w-max max-w-full flex items-center gap-2 rounded-md p-2 bg-gray-200/50 select-none text-base-700
+          lt-sm:text-sm
+          lt-sm:[&>label]:(px-1)
+          [&>label]:(block px-3 py-1 rounded-md cursor-pointer font-bold outline-none)
+          [&>label:hover]:(bg-light-300)"
+      >
+        <label for="weekday-1">周一</label>
+        <label for="weekday-2">周二</label>
+        <label for="weekday-3">周三</label>
+        <label for="weekday-4">周四</label>
+        <label for="weekday-5">周五</label>
+        <label for="weekday-6">周六</label>
+        <label for="weekday-7">周日</label>
+      </div>
+
+      <div class="weekday-content mt-4 [&>div]:hidden">
+        {
+          calendar.map((cal) => (
+            <div id={`weekday-content-${cal.index}`} class="text-xs [&>a]:(mr-2 mb-2)">
+              {cal.bangumis.map((bgm) => (
+                <a
+                  href={getSearchURL(bgm)}
+                  class={`
+                    inline-flex items-center gap1
+                    rounded-md px-2 py-1 lt-sm:px-2 font-mono
+                    transition transition-colors
+                    text-base-800 bg-gray-200 hover:(bg-gray-300/80)`}
+                >
+                  {getDisplayName(bgm)}
+                </a>
+              ))}
+            </div>
+          ))
+        }
+      </div>
+    </div>
     {
       ok ? (
         <>
@@ -30,3 +78,43 @@ const { ok, resources, timestamp } = await fetchResources(
     }
   </div>
 </Layout>
+
+<style is:global>
+  #weekday-1:checked ~ .weekday-select > label:nth-child(1),
+  #weekday-2:checked ~ .weekday-select > label:nth-child(2),
+  #weekday-3:checked ~ .weekday-select > label:nth-child(3),
+  #weekday-4:checked ~ .weekday-select > label:nth-child(4),
+  #weekday-5:checked ~ .weekday-select > label:nth-child(5),
+  #weekday-6:checked ~ .weekday-select > label:nth-child(6),
+  #weekday-7:checked ~ .weekday-select > label:nth-child(7) {
+    --at-apply: rounded-md bg-light-200;
+  }
+
+  #weekday-1:checked ~ .weekday-content > #weekday-content-1 {
+    display: block;
+  }
+
+  #weekday-2:checked ~ .weekday-content > #weekday-content-2 {
+    display: block;
+  }
+
+  #weekday-3:checked ~ .weekday-content > #weekday-content-3 {
+    display: block;
+  }
+
+  #weekday-4:checked ~ .weekday-content > #weekday-content-4 {
+    display: block;
+  }
+
+  #weekday-5:checked ~ .weekday-content > #weekday-content-5 {
+    display: block;
+  }
+
+  #weekday-6:checked ~ .weekday-content > #weekday-content-6 {
+    display: block;
+  }
+
+  #weekday-7:checked ~ .weekday-content > #weekday-content-7 {
+    display: block;
+  }
+</style>