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

feat: increase height of the banner on the homepage

This commit is contained in:
saicaca 2024-07-27 15:20:35 +08:00
parent b0337a997e
commit f28ad1b8e6
4 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
astro.config.mjs
View File

@ -37,12 +37,16 @@ export default defineConfig({
tailwind(), tailwind(),
swup({ swup({
theme: false, theme: false,
animationClass: 'transition-', animationClass: 'transition-swup-', // see https://swup.js.org/options/#animationselector
// the default value `transition-` cause transition delay
// when the Tailwind class `transition-all` is used
containers: ['main'], containers: ['main'],
smoothScrolling: true, smoothScrolling: true,
cache: true, cache: true,
preload: true, preload: true,
accessibility: true, accessibility: true,
updateHead: true,
updateBodyClass: false,
globalInstance: true, globalInstance: true,
}), }),
icon({ icon({

8
src/components/GlobalStyles.astro
View File

@ -49,8 +49,8 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
:root :root
--radius-large 1rem --radius-large 1rem
--banner-height-home 60vh --banner-height-home 65vh
--banner-height 40vh --banner-height 35vh
--content-delay 150ms --content-delay 150ms
@ -258,10 +258,10 @@ color_set({
@apply text-black/25 dark:text-white/25 @apply text-black/25 dark:text-white/25
} }
html.is-changing .transition-fade { html.is-changing .transition-swup-fade {
@apply transition-all duration-200 @apply transition-all duration-200
} }
html.is-animating .transition-fade { html.is-animating .transition-swup-fade {
@apply opacity-0 translate-y-4 @apply opacity-0 translate-y-4
} }
} }

46
src/layouts/Layout.astro
View File

@ -5,13 +5,12 @@ import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css'; import '@fontsource/roboto/700.css';
import ImageWrapper from "@components/misc/ImageWrapper.astro"; import ImageWrapper from "@components/misc/ImageWrapper.astro";
import {pathsEqual} from "@utils/url-utils";
import ConfigCarrier from "@components/ConfigCarrier.astro"; import ConfigCarrier from "@components/ConfigCarrier.astro";
import {profileConfig, siteConfig} from "@/config"; import {profileConfig, siteConfig} from "@/config";
import {type Favicon} from "../types/config"; import {type Favicon} from "../types/config";
import {defaultFavicons} from "../constants/icon"; import {defaultFavicons} from "../constants/icon";
import {LIGHT_MODE, DARK_MODE, AUTO_MODE, DEFAULT_THEME} from "../constants/constants"; import {LIGHT_MODE, DARK_MODE, AUTO_MODE, DEFAULT_THEME} from "../constants/constants";
import {url} from "../utils/url-utils"; import {pathsEqual, url} from "../utils/url-utils";
interface Props { interface Props {
title?: string; title?: string;
@ -21,7 +20,10 @@ interface Props {
let { title, banner, description } = Astro.props; let { title, banner, description } = Astro.props;
const isHomePage = pathsEqual(Astro.url.pathname, '/'); // apply a class to the body element to decide the height of the banner, only used for initial page load
// Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change
// so use Swup hooks instead to change the height immediately when a link is clicked
const isHomePage = pathsEqual(Astro.url.pathname, url('/'));
// defines global css variables // defines global css variables
// why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757 // why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
@ -49,7 +51,7 @@ const siteLang = siteConfig.lang.replace('_', '-')
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang={siteLang} data-isHome={String(isHomePage)} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]"> <html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
<head> <head>
<title>{pageTitle}</title> <title>{pageTitle}</title>
@ -108,9 +110,7 @@ const siteLang = siteConfig.lang.replace('_', '-')
<body class=" min-h-screen transition " class:list={[{"is-home": isHomePage, "enable-banner": enableBanner}]}> <body class=" min-h-screen transition " class:list={[{"is-home": isHomePage, "enable-banner": enableBanner}]}>
<ConfigCarrier></ConfigCarrier> <ConfigCarrier></ConfigCarrier>
<GlobalStyles> <GlobalStyles>
<div id="banner-wrapper" class="absolute w-full"> <div id="banner-wrapper" class="absolute w-full transition-all duration-700">
<ImageWrapper id="boxtest" alt="Banner image of the blog" class:list={["object-center object-cover h-full", {"hidden": !siteConfig.banner.enable}]}
src={siteConfig.banner.src}
<ImageWrapper id="boxtest" alt="Banner image of the blog" class:list={["object-cover h-full", {"hidden": !siteConfig.banner.enable}]} <ImageWrapper id="boxtest" alt="Banner image of the blog" class:list={["object-cover h-full", {"hidden": !siteConfig.banner.enable}]}
src={siteConfig.banner.src} position={siteConfig.banner.position} src={siteConfig.banner.src} position={siteConfig.banner.position}
> >
@ -131,24 +131,16 @@ const siteLang = siteConfig.lang.replace('_', '-')
@tailwind utilities; @tailwind utilities;
@layer components { @layer components {
/* TODO: temporarily make banner height same for all pages since I cannot make the transition feel good
I want to make the height transition parallel with the content transition instead of blocking it
*/
/*
.enable-banner.is-home #banner-wrapper { .enable-banner.is-home #banner-wrapper {
@apply h-[var(--banner-height)] md:h-[var(--banner-height-home)] @apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
} }
*/
.enable-banner #banner-wrapper { .enable-banner #banner-wrapper {
@apply h-[var(--banner-height)] @apply h-[var(--banner-height)]
} }
/*
.enable-banner.is-home #top-row { .enable-banner.is-home #top-row {
@apply h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)] @apply h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]
} }
*/
.enable-banner #top-row { .enable-banner #top-row {
@apply h-[calc(var(--banner-height)_-_4.5rem)] @apply h-[calc(var(--banner-height)_-_4.5rem)]
} }
@ -163,6 +155,7 @@ import {
// ClickScrollPlugin // ClickScrollPlugin
} from 'overlayscrollbars'; } from 'overlayscrollbars';
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils"; import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
import {pathsEqual, url} from "../utils/url-utils";
/* Preload fonts */ /* Preload fonts */
// (async function() { // (async function() {
@ -236,18 +229,6 @@ function loadHue() {
setHue(getHue()) setHue(getHue())
} }
function setBannerHeight() {
const banner = document.getElementById('banner-wrapper');
if (!banner) return
if (document.documentElement.dataset.isHome === "true") {
banner.classList.remove('banner-else');
banner.classList.add('banner-home');
} else {
banner.classList.remove('banner-home');
banner.classList.add('banner-else');
}
}
function initCustomScrollbar() { function initCustomScrollbar() {
const bodyElement = document.querySelector('body'); const bodyElement = document.querySelector('body');
if (!bodyElement) return; if (!bodyElement) return;
@ -281,7 +262,6 @@ function initCustomScrollbar() {
function init() { function init() {
// disableAnimation()() // TODO // disableAnimation()() // TODO
setBannerHeight();
loadTheme(); loadTheme();
loadHue(); loadHue();
initCustomScrollbar(); initCustomScrollbar();
@ -312,6 +292,16 @@ const setup = () => {
document.documentElement.style.setProperty('--content-delay', '0ms') document.documentElement.style.setProperty('--content-delay', '0ms')
}) })
window.swup.hooks.on('content:replace', initCustomScrollbar) window.swup.hooks.on('content:replace', initCustomScrollbar)
window.swup.hooks.on('visit:start', (visit) => {
// change banner height immediately when a link is clicked
const bodyElement = document.querySelector('body')
if (pathsEqual(visit.to.url, url('/'))) {
bodyElement!.classList.add('is-home');
} else {
bodyElement!.classList.remove('is-home');
}
});
} }
if (window.swup.hooks) { if (window.swup.hooks) {
setup() setup()

8
src/layouts/MainGridLayout.astro
View File

@ -4,8 +4,6 @@ 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 {siteConfig} from "@/config";
// import {pathsEqual} from "@utils/url-utils";
interface Props { interface Props {
title?: string; title?: string;
@ -14,8 +12,6 @@ interface Props {
} }
const { title, banner, description } = Astro.props const { title, banner, description } = Astro.props
// const isHomePage = pathsEqual(Astro.url.pathname, '/')
// const enableBanner = siteConfig.banner.enable
--- ---
@ -24,7 +20,7 @@ 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="col-span-2 grid-rows-1 z-50 onload-animation" class:list={[""]}> <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 class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
<Navbar></Navbar> <Navbar></Navbar>
</div> </div>
@ -32,7 +28,7 @@ const { title, banner, description } = Astro.props
<div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation"> <div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation">
<!-- the overflow-hidden here prevent long text break the layout--> <!-- the overflow-hidden here prevent long text break the layout-->
<main id="swup" class="transition-fade"> <main id="swup" class="transition-swup-fade">
<slot></slot> <slot></slot>
</main> </main>