feat!: add credit configurations for banner image
BREAKING CHANGES: new mandatory fields added in `config.ts`
This commit is contained in:
saicaca
parent
f28ad1b8e6
commit
336290a92f
|
|
@ -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>
|
||||
|
|
@ -18,9 +18,11 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
|
|||
});
|
||||
|
||||
---
|
||||
<div class:list={[
|
||||
<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 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"]}>
|
||||
"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" />
|
||||
|
|
@ -61,6 +63,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
|
|||
<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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,11 @@ export type SiteConfig = {
|
|||
enable: boolean
|
||||
src: string
|
||||
position?: string
|
||||
credit: {
|
||||
enable: boolean
|
||||
text: string
|
||||
url?: string
|
||||
}
|
||||
}
|
||||
|
||||
favicon: Favicon[]
|
||||
|
|
|
|||
Loading…
Reference in New Issue