From 336290a92f497fabe07ac3151d988042372eb2c8 Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Sat, 27 Jul 2024 21:51:32 +0800
Subject: [PATCH] feat!: add credit configurations for banner image

BREAKING CHANGES: new mandatory fields added in `config.ts`
---
 src/components/GlobalStyles.astro |  5 +-
 src/components/Navbar.astro       | 83 ++++++++++++++++---------------
 src/config.ts                     |  5 ++
 src/layouts/MainGridLayout.astro  | 22 +++++++-
 src/types/config.ts               |  5 ++
 5 files changed, 77 insertions(+), 43 deletions(-)

diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 1201280..1129d81 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -281,7 +281,7 @@ color_set({
     animation: 300ms fade-in-up;
     animation-fill-mode: forwards;
 }
-#top-row {
+#navbar {
     animation-delay: 0ms
 }
 #sidebar {
@@ -293,6 +293,9 @@ color_set({
 #footer {
     animation-delay: 400ms;
 }
+#banner-credit {
+    animation-delay: 400ms;
+}
 
 
 </style>
\ No newline at end of file
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index cbac9fe..2fb47ee 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -18,49 +18,52 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
 });
 
 ---
-<div class:list={[
-    className,
-    "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
-    <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
-        <div class="flex flex-row text-[var(--primary)] items-center text-md">
-            <Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />
-            {siteConfig.title}
+<div id="navbar" class="sticky top-0 z-50 onload-animation">
+    <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
+    <div class:list={[
+        className,
+        "card-base overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
+        <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
+            <div class="flex flex-row text-[var(--primary)] items-center text-md">
+                <Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />
+                {siteConfig.title}
+            </div>
+        </a>
+        <div class="hidden md:flex">
+            {links.map((l) => {
+                return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null}
+                          class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
+                >
+                    <div class="flex items-center">
+                        {l.name}
+                        {l.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
+                    </div>
+                </a>;
+            })}
         </div>
-    </a>
-    <div class="hidden md:flex">
-        {links.map((l) => {
-            return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null}
-                      class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
-            >
-                <div class="flex items-center">
-                    {l.name}
-                    {l.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
-                </div>
-            </a>;
-        })}
-    </div>
-    <div class="flex">
-        <!--<SearchPanel client:load>-->
-        <Search client:load>
-            <Icon slot="search-icon" name="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
-            <!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" class="transition text-[1.25rem] my-auto text-[var(&#45;&#45;primary)]"></Icon>-->
-            <Icon slot="arrow-icon" name="fa6-solid:chevron-right" class="transition text=[0.75rem] translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
-            <Icon slot="search-switch" name="material-symbols:search" class="text-[1.25rem]"></Icon>
-        </Search>
-        {!siteConfig.themeColor.fixed && (
-            <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
-                <Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
+        <div class="flex">
+            <!--<SearchPanel client:load>-->
+            <Search client:load>
+                <Icon slot="search-icon" name="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
+                <!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" class="transition text-[1.25rem] my-auto text-[var(&#45;&#45;primary)]"></Icon>-->
+                <Icon slot="arrow-icon" name="fa6-solid:chevron-right" class="transition text=[0.75rem] translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
+                <Icon slot="search-switch" name="material-symbols:search" class="text-[1.25rem]"></Icon>
+            </Search>
+            {!siteConfig.themeColor.fixed && (
+                    <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
+                        <Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
+                    </button>
+            )}
+            <LightDarkSwitch client:load></LightDarkSwitch>
+            <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:hidden" id="nav-menu-switch">
+                <Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
             </button>
-        )}
-        <LightDarkSwitch client:load></LightDarkSwitch>
-        <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:hidden" id="nav-menu-switch">
-            <Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
-        </button>
+        </div>
+        <NavMenuPanel links={links}></NavMenuPanel>
+        <DisplaySettings client:only="svelte">
+            <Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
+        </DisplaySettings>
     </div>
-    <NavMenuPanel links={links}></NavMenuPanel>
-    <DisplaySettings client:only="svelte">
-        <Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
-    </DisplaySettings>
 </div>
 
 <style lang="stylus">
diff --git a/src/config.ts b/src/config.ts
index 49334ce..352506f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -18,6 +18,11 @@ export const siteConfig: SiteConfig = {
     enable: false,
     src: 'assets/images/demo-banner.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
     position: 'center', // Equivalent to object-position, defaults center
+    credit: {
+      enable: false,         // Display the credit text of the banner image
+      text: '',              // Credit text to be displayed
+      url: ''                // (Optional) URL link to the original artwork or artist's page
+    }
   },
   favicon: [    // Leave this array empty to use the default favicon
     // {
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 57b61c6..46b70d0 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -4,6 +4,8 @@ import Navbar from "@components/Navbar.astro";
 import SideBar from "@components/widget/SideBar.astro";
 import Footer from "@components/Footer.astro";
 import BackToTop from "@components/control/BackToTop.astro";
+import { Icon } from 'astro-icon/components';
+import { siteConfig } from "../config";
 
 interface Props {
     title?: string;
@@ -13,6 +15,9 @@ interface Props {
 
 const { title, banner, description } = Astro.props
 
+const hasBannerCredit = siteConfig.banner.enable && siteConfig.banner.credit.enable
+const hasBannerLink = !!(siteConfig.banner.credit.url)
+
 ---
 
 <Layout title={title} banner={banner} description={description}>
@@ -20,9 +25,22 @@ const { title, banner, description } = Astro.props
 <div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
     mx-auto gap-4 relative px-0 md:px-4"
 >
-    <div id="top-row" class="transition-all duration-700 col-span-2 grid-rows-1 z-50 onload-animation" class:list={[""]}>
-        <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
+    <div id="top-row" class="relative transition-all duration-700 col-span-2 grid-rows-1" class:list={[""]}>
         <Navbar></Navbar>
+
+        <!-- Banner image credit -->
+        {hasBannerCredit && <a href={siteConfig.banner.credit.url} 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-0 bottom-0 bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
+        >
+            <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
+            <div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
+            <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-2 text-[1.25rem] opacity-0",
+                {"group-hover:opacity-100": hasBannerLink}]}
+                  name="material-symbols:chevron-right-rounded">
+            </Icon>
+        </a>}
+
     </div>
     <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
 
diff --git a/src/types/config.ts b/src/types/config.ts
index 0e7aff9..3e54a7c 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -14,6 +14,11 @@ export type SiteConfig = {
     enable: boolean
     src: string
     position?: string
+    credit: {
+      enable: boolean
+      text: string
+      url?: string
+    }
   }
 
   favicon: Favicon[]