Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat!: add credit configurations for banner image 

BREAKING CHANGES: new mandatory fields added in `config.ts`
This commit is contained in:
saicaca 2024-07-27 21:51:32 +08:00
parent f28ad1b8e6
commit 336290a92f
5 changed files with 77 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/GlobalStyles.astro
View File

@ -281,7 +281,7 @@ color_set({
animation: 300ms fade-in-up; animation: 300ms fade-in-up;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
#top-row { #navbar {
animation-delay: 0ms animation-delay: 0ms
} }
#sidebar { #sidebar {
@ -293,6 +293,9 @@ color_set({
#footer { #footer {
animation-delay: 400ms; animation-delay: 400ms;
} }
#banner-credit {
animation-delay: 400ms;
}
</style> </style>

83
src/components/Navbar.astro
View File

@ -18,49 +18,52 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
}); });
--- ---
<div class:list={[ <div id="navbar" class="sticky top-0 z-50 onload-animation">
className, <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
"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"]}> <div class:list={[
<a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"> className,
<div class="flex flex-row text-[var(--primary)] items-center text-md"> "card-base overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
<Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" /> <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
{siteConfig.title} <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> </div>
</a> <div class="flex">
<div class="hidden md:flex"> <!--<SearchPanel client:load>-->
{links.map((l) => { <Search client:load>
return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null} <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>
class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95" <!--<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>
<div class="flex items-center"> <Icon slot="search-switch" name="material-symbols:search" class="text-[1.25rem]"></Icon>
{l.name} </Search>
{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>} {!siteConfig.themeColor.fixed && (
</div> <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
</a>; <Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
})} </button>
</div> )}
<div class="flex"> <LightDarkSwitch client:load></LightDarkSwitch>
<!--<SearchPanel client:load>--> <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">
<Search client:load> <Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
<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> </button>
)} </div>
<LightDarkSwitch client:load></LightDarkSwitch> <NavMenuPanel links={links}></NavMenuPanel>
<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"> <DisplaySettings client:only="svelte">
<Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon> <Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
</button> </DisplaySettings>
</div> </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> </div>
<style lang="stylus"> <style lang="stylus">

5
src/config.ts
View File

@ -18,6 +18,11 @@ export const siteConfig: SiteConfig = {
enable: false, enable: false,
src: 'assets/images/demo-banner.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/' 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 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 favicon: [ // Leave this array empty to use the default favicon
// { // {

22
src/layouts/MainGridLayout.astro
View File

@ -4,6 +4,8 @@ import Navbar from "@components/Navbar.astro";
import SideBar from "@components/widget/SideBar.astro"; import SideBar from "@components/widget/SideBar.astro";
import Footer from "@components/Footer.astro"; import Footer from "@components/Footer.astro";
import BackToTop from "@components/control/BackToTop.astro"; import BackToTop from "@components/control/BackToTop.astro";
import { Icon } from 'astro-icon/components';
import { siteConfig } from "../config";
interface Props { interface Props {
title?: string; title?: string;
@ -13,6 +15,9 @@ interface Props {
const { title, banner, description } = Astro.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}> <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] <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" 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 id="top-row" class="relative transition-all duration-700 col-span-2 grid-rows-1" class:list={[""]}>
<div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
<Navbar></Navbar> <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> </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> <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>

5
src/types/config.ts
View File

@ -14,6 +14,11 @@ export type SiteConfig = {
enable: boolean enable: boolean
src: string src: string
position?: string position?: string
credit: {
enable: boolean
text: string
url?: string
}
} }
favicon: Favicon[] favicon: Favicon[]