Merge branch 'saicaca-main'

README.md

@@ -9,7 +9,7 @@ A static blog template built with [Astro](https://astro.build).
 [**🌏 한국어**](https://github.com/saicaca/fuwari/blob/main/README.ko.md)   /   
 [**🌏 Español**](https://github.com/saicaca/fuwari/blob/main/README.es.md)
 
-> README version: `2024-04-07`
+> README version: `2024-09-10`
 
 ![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
 
@@ -40,10 +40,11 @@ A static blog template built with [Astro](https://astro.build).
 title: My First Blog Post
 published: 2023-09-09
 description: This is the first post of my new Astro blog.
-image: /images/cover.jpg
+image: ./cover.jpg
 tags: [Foo, Bar]
 category: Front-end
 draft: false
+lang: jp      # Set only if the post's language differs from the site's language in `config.ts`
 ---
 ```
 

README.zh-CN.md

@@ -5,7 +5,7 @@
 [**🖥️在线预览（Vercel）**](https://fuwari.vercel.app)   /   
 [**📦旧 Hexo 版本**](https://github.com/saicaca/hexo-theme-vivia)
 
-> README 版本：`2024-04-07`
+> README 版本：`2024-09-10`
 
 ![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
 
@@ -36,10 +36,11 @@
 title: My First Blog Post
 published: 2023-09-09
 description: This is the first post of my new Astro blog.
-image: /images/cover.jpg
+image: ./cover.jpg
 tags: [Foo, Bar]
 category: Front-end
 draft: false
+lang: jp      # 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
 ---
 ```
 

scripts/new-post.js

@@ -44,7 +44,7 @@ image: ''
 tags: []
 category: ''
 draft: false 
-language: ''
+lang: ''
 ---
 `
 

src/components/Footer.astro

@@ -4,7 +4,10 @@ import { profileConfig } from '../config'
 import { url } from '../utils/url-utils'
 ---
 
-<div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6">
+<!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">-->
+<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
+<!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">-->
+<div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6">
     <div class="transition text-50 text-sm">
         © 2024 MisakaAkio. /
         <a class="link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
@@ -13,5 +16,13 @@ import { url } from '../utils/url-utils'
         Powered by
         <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
         <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
+
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
+    </div>
+    <div class="transition text-50 text-sm">
+        Powered by
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
     </div>
-</div>
+</div>

src/components/GlobalStyles.astro

@@ -307,8 +307,8 @@ color_set({
 #content-wrapper {
     animation-delay: var(--content-delay);
 }
-#footer {
-    animation-delay: 400ms;
+.footer {
+    animation-delay: 250ms;
 }
 #banner-credit {
     animation-delay: 400ms;

src/components/Navbar.astro

@@ -19,7 +19,7 @@ let links: NavBarLink[] = navBarConfig.links.map(
   },
 )
 ---
-<div id="navbar" class="sticky top-0 z-50 onload-animation">
+<div id="navbar" class="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,

src/components/control/BackToTop.astro

@@ -44,14 +44,4 @@ import { Icon } from 'astro-icon/components'
 function backToTop() {
     window.scroll({ top: 0, behavior: 'smooth' });
 }
-
-function scrollFunction() {
-    let btn = document.getElementById('back-to-top-btn');
-    if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
-        btn.classList.remove('hide')
-    } else {
-        btn.classList.add('hide')
-    }
-}
-window.onscroll = scrollFunction
 </script>

src/components/misc/ImageWrapper.astro

@@ -32,10 +32,11 @@ if (isLocal) {
   let normalizedPath = path
     .normalize(path.join('../../', basePath, src))
     .replace(/\\/g, '/')
-  img = await files[normalizedPath]()
-  if (!img) {
-    console.error(`No image found for path ${normalizedPath}`)
+  const file = files[normalizedPath]
+  if (!file) {
+    console.error(`\n[ERROR] Image file not found: ${normalizedPath.replace('../../', 'src/')}`)
   }
+  img = await file()
 }
 
 const imageClass = 'w-full h-full object-cover'

src/components/widget/SideBar.astro

@@ -9,7 +9,7 @@ const className = Astro.props.class
     <div class="flex flex-col w-full gap-4 mb-4">
         <Profile></Profile>
     </div>
-    <div class="flex flex-col w-full gap-4 top-4 sticky top-4">
+    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
         <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
         <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
     </div>

src/content/config.ts

@@ -9,7 +9,7 @@ const postsCollection = defineCollection({
     image: z.string().optional().default(''),
     tags: z.array(z.string()).optional().default([]),
     category: z.string().optional().default(''),
-    language: z.string().optional().default(''),
+    lang: z.string().optional().default(''),
 
     /* For internal use */
     prevTitle: z.string().default(''),

src/layouts/Layout.astro

@@ -22,9 +22,10 @@ interface Props {
   banner?: string
   description?: string
   lang?: string
+  setOGTypeArticle?: boolean
 }
 
-let { title, banner, description, lang } = Astro.props
+let { title, banner, description, lang, setOGTypeArticle } = Astro.props
 
 // 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
@@ -58,10 +59,20 @@ if (!lang) {
   lang = `${siteConfig.lang}`
 }
 const siteLang = lang.replace('_', '-')
+
+const bannerOffsetByPosition = {
+	'top': '30vh',
+	'center': '15vh',
+	'bottom': '0'
+}
+const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'center']
+
 ---
 
 <!DOCTYPE html>
-<html lang={siteLang} 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]"
+	  data-overlayscrollbars-initialize
+>
 	<head>
 
 		<title>{pageTitle}</title>
@@ -74,6 +85,11 @@ const siteLang = lang.replace('_', '-')
 		<meta property="og:url" content={Astro.url}>
 		<meta property="og:title" content={pageTitle}>
 		<meta property="og:description" content={description || pageTitle}>
+		{setOGTypeArticle ? (
+        <meta property="og:type" content="article" />
+        ) : (
+        <meta property="og:type" content="website" />
+        )}
 
 		<meta name="twitter:card" content="summary_large_image">
 		<meta property="twitter:url" content={Astro.url}>
@@ -117,17 +133,22 @@ const siteLang = lang.replace('_', '-')
 		<style define:vars={{ configHue }}></style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
 
 	</head>
-	<body class=" min-h-screen transition " class:list={[{"is-home": isHomePage, "enable-banner": enableBanner}]}>
+	<body class=" min-h-screen transition " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
+		  data-overlayscrollbars-initialize
+	>
 		<ConfigCarrier></ConfigCarrier>
 		<GlobalStyles>
-		<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}
+		{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute -top-[30vh] w-full transition duration-700 overflow-hidden">
+			<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
+						  src={siteConfig.banner.src} position={siteConfig.banner.position}
 			>
 			</ImageWrapper>
-		</div>
+		</div>}
 		<slot />
 		</GlobalStyles>
+
+		<!-- increase the page height during page transition to prevent the scrolling animation from jumping -->
+		<div id="page-height-extend" class="hidden h-[300vh]"></div>
 	</body>
 </html>
 <style is:global>
@@ -136,23 +157,35 @@ const siteLang = lang.replace('_', '-')
 		--page-width: 75rem;
 	}
 </style>
-<style is:global>
+<style is:global define:vars={{ bannerOffset }}>
 @tailwind components;
 @tailwind utilities;
 
 @layer components {
 	.enable-banner.is-home #banner-wrapper {
-		@apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
+		@apply h-[var(--banner-height-home)] translate-y-[30vh]
 	}
 	.enable-banner #banner-wrapper {
-		@apply h-[var(--banner-height)]
+		@apply h-[var(--banner-height-home)]
 	}
 
-	.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.is-home #banner {
+		@apply h-[var(--banner-height-home)] translate-y-0
+	}
+	.enable-banner #banner {
+		@apply h-[var(--banner-height-home)] translate-y-[var(--bannerOffset)]
+	}
+	.enable-banner.is-home #main-grid {
+		@apply translate-y-[30vh];
 	}
 	.enable-banner #top-row {
-		@apply h-[calc(var(--banner-height)_-_4.5rem)]
+		@apply h-[calc(var(--banner-height-home)_-_4.5rem)] transition-all duration-300
+	}
+	.enable-banner.is-home #sidebar-sticky {
+		@apply top-[calc(-30vh_+_1rem)]
+	}
+	.navbar-hidden {
+		@apply opacity-0 -translate-y-16
 	}
 }
 </style>
@@ -211,6 +244,8 @@ function disableAnimation() {
 }
 */
 
+const bannerEnabled = !!document.getElementById('banner-wrapper')
+
 function setClickOutsideToClose(panel: string, ignores: string[]) {
 	document.addEventListener("click", event => {
 		let panelDom = document.getElementById(panel);
@@ -270,11 +305,21 @@ function initCustomScrollbar() {
 	});
 }
 
+function showBanner() {
+	const banner = document.getElementById('banner')
+	if (!banner) {
+		console.error('Failed to find the banner element')
+		return
+	}
+	banner.classList.remove('opacity-0', 'scale-105')
+}
+
 function init() {
 	// disableAnimation()()		// TODO
 	loadTheme();
 	loadHue();
 	initCustomScrollbar();
+	showBanner();
 }
 
 /* Load settings when entering the site */
@@ -300,25 +345,83 @@ const setup = () => {
 	// Remove the delay for the first time page load
 	window.swup.hooks.on('link:click', () => {
 		document.documentElement.style.setProperty('--content-delay', '0ms')
+
+		// prevent elements from overlapping the navbar
+		if (!bannerEnabled) {
+			return
+		}
+		let threshold = window.innerHeight * 0.30 - 72 - 16
+		let navbar = document.getElementById('navbar-wrapper')
+		if (!navbar || !document.body.classList.contains('lg:is-home')) {
+			return
+		}
+		if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
+			navbar.classList.add('navbar-hidden')
+		}
 	})
 	window.swup.hooks.on('content:replace', initCustomScrollbar)
 	window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => {
 		// 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');
+			bodyElement!.classList.add('lg:is-home');
 		} else {
-			bodyElement!.classList.remove('is-home');
+			bodyElement!.classList.remove('lg:is-home');
 		}
-	});
 
+		// increase the page height during page transition to prevent the scrolling animation from jumping
+		const heightExtend = document.getElementById('page-height-extend')
+		if (heightExtend) {
+			heightExtend.classList.remove('hidden')
+		}
+	});
+	window.swup.hooks.on('page:view', () => {
+		// hide the temp high element when the transition is done
+		const heightExtend = document.getElementById('page-height-extend')
+		if (heightExtend) {
+			heightExtend.classList.remove('hidden')
+		}
+	});
+	window.swup.hooks.on('visit:end', (visit: {to: {url: string}}) => {
+		// execute 1s later
+		const heightExtend = document.getElementById('page-height-extend')
+		if (heightExtend) {
+			heightExtend.classList.add('hidden')
+		}
+	});
 }
 if (window?.swup?.hooks) {
 	setup()
 } else {
 	document.addEventListener('swup:enable', setup)
 }
 
+let backToTopBtn = document.getElementById('back-to-top-btn');
+let navbar = document.getElementById('navbar-wrapper')
+function scrollFunction() {
+	if (backToTopBtn) {
+		if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
+			backToTopBtn.classList.remove('hide')
+		} else {
+			backToTopBtn.classList.add('hide')
+		}
+	}
+
+	if (!bannerEnabled) return
+	if (navbar) {
+		let threshold = window.innerHeight * 0.30 - 72 - 16
+		if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) {
+			threshold = window.innerHeight * 0.60 - 72 - 16
+		}
+		if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
+			navbar.classList.add('navbar-hidden')
+		} else {
+			navbar.classList.remove('navbar-hidden')
+		}
+	}
+}
+window.onscroll = scrollFunction
+
 </script>
 
 <script>
@@ -382,14 +485,3 @@ if (window.swup) {
 	document.addEventListener("swup:enable", setup)
 }
 </script>
-
-
-<style is:global lang="stylus">
-#banner-wrapper
-	top: 0
-	opacity: 1
-.banner-closed
-	#banner-wrapper
-		top: -120px
-		opacity: 0
-</style>