refactor: replace old banner image with new asset and update credit information for improved attribution

Author: AndyWang505

src/assets/banner/banner.webp

@@ -75,24 +75,6 @@ if (!isExternal && src) {
         />
       )}
 
-      <!-- 版權信息 -->
-      {showCredit && BANNER_CONFIG.credit.text && (
-        <a 
-          href={BANNER_CONFIG.credit.url} 
-          id="banner-credit" 
-          target="_blank" 
-          rel="noopener" 
-          aria-label="Visit image source"
-          class="group absolute flex justify-center items-center rounded-full px-3 right-4 -bottom-[3.25rem] bg-black/60 hover:bg-black/70 h-9 transition-all"
-        >
-          <div class="text-white/75 text-xs">{BANNER_CONFIG.credit.text}</div>
-          {BANNER_CONFIG.credit.url && (
-            <svg class="ml-1 w-3 h-3 text-white/75 opacity-0 group-hover:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
-            </svg>
-          )}
-        </a>
-      )}
     </div>
   </div>
 )}

src/assets/banner/banner_01.webp

@@ -19,7 +19,7 @@ export const MAIN_PANEL_OVERLAPS_BANNER_HEIGHT: number = BANNER_HEIGHTS.overlaps
 // Banner main configuration
 export const BANNER_CONFIG = {
   enable: true,
-  src: "/banner/banner_01.webp",
+  src: "/banner/banner.webp",
   position: "center" as const,
   showOnHomePage: true,
   showOnOtherPages: true,
@@ -30,8 +30,8 @@ export const BANNER_CONFIG = {
     other: BANNER_HEIGHT
   },
   credit: {
-    enable: false,
-    text: "",
-    url: ""
+    enable: true,
+    text: "夏生(なつお)@nathuo101102",
+    url: "https://x.com/nathuo101102"
   }
 } as const;

src/components/Banner.astro

@@ -117,6 +117,34 @@ const bannerOffset = (() => {
     <div class="absolute w-full z-30 pointer-events-none" style={`top: var(--main-panel-top)`}>
       <div id="main-grid" class="w-full px-0 grid grid-rows-[1fr_auto] min-h-[calc(100vh-var(--main-panel-top))]">
         <div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto w-full">
+
+          <!-- Banner credit -->
+          {BANNER_CONFIG.enable && BANNER_CONFIG.credit.enable && BANNER_CONFIG.credit.text && (
+            <a
+              href={BANNER_CONFIG.credit.url || undefined}
+              id="banner-credit"
+              target="_blank"
+              rel="noopener"
+              aria-label="Visit image source"
+              class:list={[
+                "group onload-animation transition-all absolute flex justify-center items-center rounded-full",
+                "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9 z-10 pointer-events-auto",
+                { "hover:pr-9 active:bg-black/80": !!BANNER_CONFIG.credit.url }
+              ]}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/75 mr-1 shrink-0">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M14.83 14.83a4 4 0 1 1 0-5.66"/>
+              </svg>
+              <div class="text-white/75 text-xs whitespace-nowrap">{BANNER_CONFIG.credit.text}</div>
+              {BANNER_CONFIG.credit.url && (
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="transition absolute right-4 opacity-0 group-hover:opacity-100 text-white/75">
+                  <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
+                </svg>
+              )}
+            </a>
+          )}
+
           {hasSidebar ? (
             <div class="w-full grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto] mx-auto gap-4">
               <Aside />
@@ -166,6 +194,9 @@ const bannerOffset = (() => {
 
   .enable-banner #banner {
     height: 100%;
+    transform: translateY(var(--banner-offset));
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
   #main-grid {
@@ -201,6 +232,10 @@ const bannerOffset = (() => {
       transform: translateY(var(--banner-height-extend));
     }
 
+    body.is-home.enable-banner #banner {
+      transform: translateY(0);
+    }
+
     body.is-home.enable-banner #main-grid {
       transform: translateY(var(--banner-height-extend));
     }