feat: increase height of the banner on the homepage

saicaca · Jul 27, 2024 · f28ad1b · f28ad1b
1 parent b0337a9
commit f28ad1b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 39 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -37,12 +37,16 @@ export default defineConfig({
     tailwind(),
     swup({
       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'],
       smoothScrolling: true,
       cache: true,
       preload: true,
       accessibility: true,
+      updateHead: true,
+      updateBodyClass: false,
       globalInstance: true,
     }),
     icon({

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

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,13 +5,12 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import ImageWrapper from "@components/misc/ImageWrapper.astro";
 
-import {pathsEqual} from "@utils/url-utils";
 import ConfigCarrier from "@components/ConfigCarrier.astro";
 import {profileConfig, siteConfig} from "@/config";
 import {type Favicon} from "../types/config";
 import {defaultFavicons} from "../constants/icon";
 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 {
 	title?: string;
@@ -21,7 +20,10 @@ interface 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
 // 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>
-<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>
 
 		<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}]}>
 		<ConfigCarrier></ConfigCarrier>
 		<GlobalStyles>
-		<div id="banner-wrapper" class="absolute w-full">
-			<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}
+		<div id="banner-wrapper" class="absolute w-full transition-all duration-700">
 			<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}
 			>
@@ -131,24 +131,16 @@ const siteLang = siteConfig.lang.replace('_', '-')
 @tailwind utilities;
 
 @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 {
 		@apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
 	}
-	*/
 	.enable-banner #banner-wrapper {
 		@apply h-[var(--banner-height)]
 	}
 
-	/*
 	.enable-banner.is-home #top-row {
 		@apply h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]
 	}
-	*/
 	.enable-banner #top-row {
 		@apply h-[calc(var(--banner-height)_-_4.5rem)]
 	}
@@ -163,6 +155,7 @@ import {
 	// ClickScrollPlugin
 } from 'overlayscrollbars';
 import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
+import {pathsEqual, url} from "../utils/url-utils";
 
 	/* Preload fonts */
 // (async function() {
@@ -236,18 +229,6 @@ function loadHue() {
 	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() {
 	const bodyElement = document.querySelector('body');
 	if (!bodyElement) return;
@@ -281,7 +262,6 @@ function initCustomScrollbar() {
 
 function init() {
 	// disableAnimation()()		// TODO
-	setBannerHeight();
 	loadTheme();
 	loadHue();
 	initCustomScrollbar();
@@ -312,6 +292,16 @@ const setup = () => {
 		document.documentElement.style.setProperty('--content-delay', '0ms')
 	})
 	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) {
 	setup()

diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
@@ -4,8 +4,6 @@ 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 {siteConfig} from "@/config";
-// import {pathsEqual} from "@utils/url-utils";
 
 interface Props {
     title?: string;
@@ -14,8 +12,6 @@ interface Props {
 }
 
 const { title, banner, description } = Astro.props
-// const isHomePage = pathsEqual(Astro.url.pathname, '/')
-// const enableBanner = siteConfig.banner.enable
 
 ---
 
@@ -24,15 +20,15 @@ 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="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 -->
         <Navbar></Navbar>
     </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>
 
     <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-->
-        <main id="swup" class="transition-fade">
+        <main id="swup" class="transition-swup-fade">
             <slot></slot>
         </main>