Merge branch 'dev' of code.2ha.me:dev.2ha.me/dev.2ha.me into dev

Reviewed-on: #3

package.json

@@ -86,5 +86,8 @@
         }
       }
     ]
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
   }
 }

src/components/custom/Music163Player.tsx

@@ -13,7 +13,7 @@ interface Track {
   outerurl: string
 }
 
-const SpotifyPresence = () => {
+const Music163Player = () => {
   const [displayData, setDisplayData] = useState<Track | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [isPlaying, setIsPlaying] = useState(false);
@@ -47,7 +47,7 @@ const SpotifyPresence = () => {
           album: {
             '#text': lastweekFirstSong.al.name
           },
-          image: [{'#text': lastweekFirstSong.al.picUrl}],
+          image: [{'#text': lastweekFirstSong.al.picUrl.replace('http:', 'https:')}],
           url: 'https://music.163.com/song?id=' + lastweekFirstSong.id,
           outerurl: "https://music.163.com/song/media/outer/url?id=" + lastweekFirstSong.id + ".mp3"
         }
@@ -160,4 +160,4 @@ const SpotifyPresence = () => {
   )
 }
 
-export default SpotifyPresence
+export default Music163Player

src/components/custom/RandomAnimeBackgrounds.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+
+export const videoBackgrounds: string[] = [
+    '225.mp4',
+    '830.mp4',
+    'guduyaogun.mp4',
+    'guduyaogun1.mp4',
+    'guduyaogun2.mp4',
+    'lige.mp4',
+    'maoliang.mp4',
+    // 'miku.mp4',
+    'miku2.mp4',
+    'sanlian.mp4',
+    'lycoris2.mp4',
+]
+
+
+const RandomAnimeBackground = () => {
+  const [index, setIndex] = useState<number>(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [bindEvent, setBindEvent] = useState<boolean>(true);
+
+  const handleVideoEnded = () => {
+    setIsLoading(true)
+    setIndex(getRandomIndex())
+    if (bindEvent && videoRef.current) {
+      videoRef.current.addEventListener('canplay', handleCanPlayThrough);
+      setBindEvent(false)
+    }
+  };
+
+  const handleCanPlayThrough = () => {
+    setTimeout(() => {
+      setIsLoading(false) 
+    }, 200);   
+  }
+
+  const getRandomIndex = () => {
+    return Math.floor(Math.random() * videoBackgrounds.length);  
+  };
+
+  useEffect(() => {
+    setIndex(getRandomIndex())
+    // setTimeout(() => {
+      setIsLoading(false) 
+    // }, 100); 
+  }, [])
+
+  // if (isLoading) {
+  //   return (
+  //     <video className="no-repeat relative w-full justify-center rounded-[1.4em] object-cover"
+  //       src='/static/anime-bg/loading.mp4'
+  //       autoPlay muted loop>
+  //         Your browser does not support the video tag.
+  //     </video>
+  //   );
+  // }
+
+  return (
+    <>
+    {
+      isLoading ? 
+      <video className="no-repeat relative w-full justify-center rounded-[1.4em] object-cover"
+        src='/static/anime-bg/loading.mp4'
+        autoPlay muted loop>
+          Your browser does not support the video tag.
+      </video> 
+      : 
+      <video ref={videoRef} className="no-repeat relative w-full justify-center rounded-[1.4em] object-cover"
+        src={'/static/anime-bg/' + videoBackgrounds[index]}
+        onEnded={handleVideoEnded}
+        autoPlay muted>
+          Your browser does not support the video tag.
+      </video>
+    }
+    </>
+  )
+}
+
+export default RandomAnimeBackground

src/pages/authors/index.astro

@@ -40,7 +40,7 @@ const authors = await getCollection('authors')
         <TableHeader>
           <TableRow>
             <TableHead className="max-w-[80px]">Path</TableHead>
-            <TableHead className="max-w-[80px] flex items-center">Illustrator</TableHead>
+            <TableHead className="max-w-[80px] flex items-center">Author</TableHead>
             <TableHead className="text-right">Resources</TableHead>
           </TableRow>
         </TableHeader>
@@ -134,6 +134,19 @@ const authors = await getCollection('authors')
               </Link>
             </TableCell>
           </TableRow>
+          <TableRow>
+            <TableCell className="font-medium">Background</TableCell>
+            <TableCell className="flex items-center">
+              <Link class="contents" href="https://mall.bilibili.com/neul-next/index.html?page=mall-up_itemDetail&noTitleBar=1&itemsId=1107984035&from=items_share&msource=items_share" target="_blank">
+                @小猫女仆降临 <svg class="size-8" style="filter: invert(100%);" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Bilibili</title><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/></svg>
+              </Link>
+            </TableCell>
+            <TableCell className="text-right">
+              <Link href="https://www.bilibili.com/video/BV1462uY8Eo4" target="_blank">
+                <img class="h-12 w-25" src="/static/images/maoliang.gif" />
+              </Link>
+            </TableCell>
+          </TableRow>
         </TableBody>
       </Table>
     </div>

src/pages/index.astro

@@ -2,7 +2,7 @@
 import AuthorPresence from '@/components/bento/AuthorPresence'
 import WakatimeGraph from '@/components/bento/WakatimeGraph.tsx'
 import Link from '@/components/Link.astro'
-import FuzzyText from '@/components/magicui/fuzzy-text'
+// import FuzzyText from '@/components/magicui/fuzzy-text'
 import GradientText from '@/components/magicui/gradint-text'
 import LetterGlitch from '@/components/magicui/letter-glitch'
 import ShortCuts from '@/components/ShortCuts.astro'
@@ -10,8 +10,9 @@ import { SITE, SOCIAL_LINKS } from '@/consts'
 import Layout from '@/layouts/Layout.astro'
 import { Icon } from 'astro-icon/components'
 import { getCollection } from 'astro:content'
-import GiteaCalendar from '@/components/bento/GiteaCalendar'
-import Music163Player from '@/components/bento/Music163Player'
+import GiteaCalendar from '@/components/custom/GiteaCalendar'
+import Music163Player from '@/components/custom/Music163Player'
+import RandomAnimeBackground from '@/components/custom/RandomAnimeBackgrounds'
 
 const latestPost = await getCollection('blog').then((posts: any[]) =>
   posts
@@ -22,47 +23,20 @@ const latestPost = await getCollection('blog').then((posts: any[]) =>
     .filter((post) => !post.data.hidden && !post.data.draft)
     .at(0),
 )
+
 ---
 
 <Layout title="主页" description={SITE.DESCRIPTION}>
   <section
     class="mx-auto grid max-w-[375px] grid-cols-2 gap-4 px-4 [grid-template-areas:'a_a'_'a_a'_'b_b'_'b_b'_'e_e'_'h_i'_'h_c'_'k_c'_'d_d'_'d_d'_'g_g'_'g_g'_'f_f'_'j_j'_'j_j'] *:rounded-3xl *:border *:bg-secondary/25 *:bg-cover *:bg-center *:bg-no-repeat sm:max-w-screen-sm sm:[grid-template-areas:'a_a'_'b_d'_'e_e'_'j_g'_'h_i'_'h_c'_'k_c'_'f_f'] xl:max-w-screen-xl xl:grid-cols-4 xl:[grid-template-areas:'a_a_b_c'_'d_e_e_c'_'h_f_f_g'_'h_i_j_k'] xl:[&:hover:has(>.has-overlay:hover)>.first>.overlay]:opacity-100 xl:[&:hover>*:not(.first):hover_.overlay]:opacity-100"
     aria-label="Personal information and activity grid"
-  >
+  > 
     <div
-      class="first flex flex-row justify-center aspect-square rounded-3xl border bg-[url('/static/images/tou.gif')] bg-cover bg-color bg-center bg-position-inherit bg-no-repeat [grid-area:a] sm:aspect-[2.1/1] sm:bg-[url('/static/images/tou.gif')] xl:aspect-auto"
+      class="first flex flex-row xl:max-h-[298px] grow-[0] justify-center aspect-square rounded-3xl border bg-cover bg-center bg-position-inherit bg-no-repeat [grid-area:a] sm:aspect-[2.1/1] xl:aspect-auto"
       role="img"
       aria-label="Introduction"
-      style="filter: contrast(2) saturate(0) invert(100) sepia(100); border-color: #afafaf;"
     >
-      <!-- <div
-        class="overlay size-full rounded-3xl bg-[url('/static/404.webp')] bg-cover bg-center bg-no-repeat opacity-0 transition-opacity duration-200"
-      >
-      </div> -->
-    <!-- class="first relative flex aspect-square justify-center rounded-3xl border [grid-area:a] sm:aspect-[2.1/1] xl:aspect-auto" -->
-      <!-- <img
-        class="no-repeat relative w-full max-w-fit justify-center rounded-3xl object-cover"
-        src="/static/404_white_mask.webp"
-      /> -->
-      <!-- <div class="absolute self-end p-2 justify-center">
-        <FuzzyText
-          client:load
-          baseIntensity={0.04}
-          hoverIntensity={0.24}
-          fontSize={96}
-          color="#fbb229"
-          ,>4O4</FuzzyText
-        >
-        <div class="mb-3 mt-3"></div>
-        <FuzzyText
-          client:load
-          baseIntensity={0.04}
-          hoverIntensity={0.24}
-          fontSize={36}
-          color="#f95038">Not Found</FuzzyText
-        >
-      </div> -->
-
+     <RandomAnimeBackground client:load/>
     </div>
 
     <div