Bump unist-util-visit from 5.0.0 to 5.1.0

astro.config.mjs

@@ -1,5 +1,6 @@
 import svelte from "@astrojs/svelte";
 import tailwind from "@astrojs/tailwind";
+import vercel from "@astrojs/vercel";
 import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
 import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
 import swup from "@swup/astro";
@@ -27,6 +28,8 @@ import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
 export default defineConfig({
 	site: "https://boospace.tech/",
 	base: "/",
+	output: "server",
+	adapter: vercel(),
 	trailingSlash: "always",
 	integrations: [
 		tailwind({

package.json

@@ -6,7 +6,7 @@
 		"dev": "astro dev",
 		"start": "astro dev",
 		"check": "astro check",
-		"build": "astro build && pagefind --site dist",
+		"build": "astro build && node scripts/run-pagefind.mjs",
 		"preview": "astro preview",
 		"astro": "astro",
 		"type-check": "tsc --noEmit --isolatedDeclarations",
@@ -22,6 +22,7 @@
 		"@astrojs/rss": "^4.0.12",
 		"@astrojs/svelte": "7.1.0",
 		"@astrojs/tailwind": "^6.0.2",
+		"@astrojs/vercel": "^8.2.11",
 		"@expressive-code/core": "^0.41.3",
 		"@expressive-code/plugin-collapsible-sections": "^0.41.3",
 		"@expressive-code/plugin-line-numbers": "^0.41.3",
@@ -64,7 +65,7 @@
 		"svelte": "^5.38.2",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.9.2",
-		"unist-util-visit": "^5.0.0"
+		"unist-util-visit": "^5.1.0"
 	},
 	"devDependencies": {
 		"@astrojs/ts-plugin": "^1.10.4",

scripts/run-pagefind.mjs

@@ -0,0 +1,9 @@
+import { execSync } from "node:child_process";
+import { existsSync } from "node:fs";
+
+/**
+ * SSR + Vercel adapter writes prerendered HTML under `dist/client/`.
+ * Pure static builds use `dist/`.
+ */
+const site = existsSync("dist/client") ? "dist/client" : "dist";
+execSync(`pagefind --site ${site}`, { stdio: "inherit" });

src/components/ArchivePanel.svelte

@@ -3,6 +3,7 @@ import { onMount } from "svelte";
 
 import I18nKey from "../i18n/i18nKey";
 import { i18n } from "../i18n/translation";
+import { formatDateToYYYYMMDD, getCalendarYear } from "../utils/date-utils";
 import type { SiteLocale } from "../utils/locale-utils";
 import { getPostUrlBySlug } from "../utils/url-utils";
 
@@ -45,12 +46,6 @@ interface Group {
 
 let groups: Group[] = [];
 
-function formatDate(date: Date) {
-	const month = (date.getMonth() + 1).toString().padStart(2, "0");
-	const day = date.getDate().toString().padStart(2, "0");
-	return `${month}-${day}`;
-}
-
 function formatTag(tagList: string[]) {
 	return tagList.map((t) => `#${t}`).join(" ");
 }
@@ -79,7 +74,7 @@ onMount(async () => {
 
 	const grouped = filteredPosts.reduce(
 		(acc, post) => {
-			const year = post.data.published.getFullYear();
+			const year = getCalendarYear(post.data.published);
 			if (!acc[year]) {
 				acc[year] = [];
 			}
@@ -133,7 +128,7 @@ onMount(async () => {
                     <div class="flex flex-row justify-start items-center h-full">
                         <!-- date -->
                         <div class="w-[15%] md:w-[10%] transition text-sm text-right text-50">
-                            {formatDate(post.data.published)}
+                            {formatDateToYYYYMMDD(post.data.published)}
                         </div>
 
                         <!-- dot and line -->

src/components/Footer.astro

@@ -17,9 +17,7 @@ const locale = getLocaleFromPathname(Astro.url.pathname);
     <div class="transition text-50 text-sm text-center">
         &copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. {i18n(locale, I18nKey.allRightsReserved)} /
         <a class="transition link text-[var(--primary)] font-medium" href={url("/privacy-policy/", locale)}>{i18n(locale, I18nKey.privacyPolicy)}</a> /
-        <a class="transition link text-[var(--primary)] font-medium" href={url("/terms-of-service/", locale)}>{i18n(locale, I18nKey.termsOfService)}</a> /
-        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="/rss.xml">RSS</a> /
-        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="/sitemap-index.xml">{i18n(locale, I18nKey.sitemap)}</a><br>
+        <a class="transition link text-[var(--primary)] font-medium" href={url("/terms-of-service/", locale)}>{i18n(locale, I18nKey.termsOfService)}</a><br>
         <!-- Powered by -->
         <!-- <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> & -->
     </div>

src/components/LanguageSwitcher.astro

@@ -1,15 +1,16 @@
 ---
+import { LOCALE_COOKIE } from "../constants/locale-preference";
 import I18nKey from "@i18n/i18nKey";
 import { i18n } from "@i18n/translation";
 import { getTranslatedPostSlug } from "@utils/content-utils";
 import {
 	getLocaleFromPathname,
 	normalizePathname,
 	type SiteLocale,
 	stripLocaleFromPathname,
 	withLocale,
 } from "@utils/locale-utils";
 import { getPostUrlBySlug } from "@utils/url-utils";
 
 interface Props {
 	locale?: SiteLocale;
@@ -74,6 +75,7 @@
 >
 	<a
 		href={viHref}
+		data-boospace-locale="vi"
 		class:list={[
 			"rounded-xl px-3.5 h-9 inline-flex items-center justify-center text-sm font-semibold tracking-[0.08em] transition active:scale-95",
 			locale === "vi"
@@ -86,6 +88,7 @@
 	</a>
 	<a
 		href={enHref}
+		data-boospace-locale="en"
 		class:list={[
 			"rounded-xl px-3.5 h-9 inline-flex items-center justify-center text-sm font-semibold tracking-[0.08em] transition active:scale-95",
 			locale === "en"
@@ -97,3 +100,18 @@
 		{i18n(locale, I18nKey.languageEnglish)}
 	</a>
 </div>
+
+<script is:inline define:vars={{ cookieName: LOCALE_COOKIE }}>
+	(function () {
+		const maxAge = 60 * 60 * 24 * 365;
+		const secure = typeof window !== "undefined" && window.location.protocol === "https:";
+		const suffix = "; Path=/; Max-Age=" + maxAge + "; SameSite=Lax" + (secure ? "; Secure" : "");
+		document.querySelectorAll("[data-boospace-locale]").forEach(function (el) {
+			el.addEventListener("click", function () {
+				const v = el.getAttribute("data-boospace-locale");
+				if (v !== "vi" && v !== "en") return;
+				document.cookie = cookieName + "=" + v + suffix;
+			});
+		});
+	})();
+</script>

src/components/PostCard.astro

@@ -61,7 +61,7 @@ const { remarkPluginFrontmatter } = await entry.render();
         </a>
 
         <!-- metadata -->
-        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>
+        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={false} maxTags={2} class="mb-4"></PostMetadata>
 
         <!-- description -->
         <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}]}>

src/components/PostMeta.astro

@@ -1,4 +1,4 @@
 ---
 import { Icon } from "astro-icon/components";
 import I18nKey from "../i18n/i18nKey";
 import { i18n } from "../i18n/translation";
@@ -14,6 +14,8 @@
 	category: string | null;
 	hideTagsForMobile?: boolean;
 	hideUpdateDate?: boolean;
+	/** If set, only this many tags are shown; remainder as +N. */
+	maxTags?: number;
 }
 const {
 	published,
@@ -22,9 +24,16 @@
 	category,
 	hideTagsForMobile = false,
 	hideUpdateDate = false,
+	maxTags,
 } = Astro.props;
 const className = Astro.props.class;
 const locale = getLocaleFromPathname(Astro.url.pathname);
+
+const tagList = Array.isArray(tags) ? tags : [];
+const visibleTags =
+	typeof maxTags === "number" && maxTags > 0 ? tagList.slice(0, maxTags) : tagList;
+const tagOverflow =
+	typeof maxTags === "number" && maxTags > 0 ? Math.max(0, tagList.length - maxTags) : 0;
 ---
 
 <div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
@@ -69,16 +78,19 @@
         >
             <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
         </div>
-        <div class="flex flex-row flex-nowrap items-center">
-            {(tags && tags.length > 0) && tags.map((tag, i) => (
-                <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
+        <div class="flex flex-row flex-nowrap items-center min-w-0">
+            {visibleTags.length > 0 && visibleTags.map((tag, i) => (
+                <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm flex-shrink-0"]}>/</div>
                 <a href={getTagUrl(tag, locale)} aria-label={`View all posts with the ${tag.trim()} tag`}
                    class="link-lg transition text-50 text-sm font-medium
-                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
+                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap flex-shrink-0">
                     {tag.trim()}
                 </a>
             ))}
-            {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(locale, I18nKey.noTags)}</div>}
+            {tagOverflow > 0 && (
+                <span class="text-50 text-sm font-medium ml-1.5 flex-shrink-0" title={tagList.slice(maxTags ?? 0).join(", ")}>+{tagOverflow}</span>
+            )}
+            {visibleTags.length === 0 && <div class="transition text-50 text-sm font-medium">{i18n(locale, I18nKey.noTags)}</div>}
         </div>
     </div>
 </div>

src/components/misc/ImageWrapper.astro

@@ -13,7 +13,7 @@ interface Props {
 import { Image } from "astro:assets";
 import { url } from "../../utils/url-utils";
 
-const { id, src, alt, position = "center", basePath = "/" } = Astro.props;
+const { id, src, alt, position = "center", basePath = "" } = Astro.props;
 const className = Astro.props.class;
 
 const isLocal = !(
@@ -24,6 +24,11 @@ const isLocal = !(
 );
 const isPublic = src.startsWith("/");
 
+const safeBase =
+	basePath === "/" || basePath === undefined || basePath === null
+		? ""
+		: basePath;
+
 // TODO temporary workaround for images dynamic import
 // https://github.com/withastro/astro/issues/3373
 // biome-ignore lint/suspicious/noImplicitAnyLet: <check later>
@@ -33,14 +38,19 @@ if (isLocal) {
 		import: "default",
 	});
 	let normalizedPath = path
-		.normalize(path.join("../../", basePath, src))
+		.normalize(path.join("../../", safeBase, src))
+		.replace(/\\/g, "/");
+	const fallbackPath = path
+		.normalize(path.join("../../", "assets/images/banner_default.png"))
 		.replace(/\\/g, "/");
-	const file = files[normalizedPath];
+	let file = files[normalizedPath];
 	if (!file) {
 		console.error(
 			`\n[ERROR] Image file not found: ${normalizedPath.replace("../../", "src/")}`,
 		);
-	} else {
+		file = files[fallbackPath];
+	}
+	if (file) {
 		img = await file();
 	}
 }

src/constants/locale-preference.ts

@@ -0,0 +1,4 @@
+/** Cookie set when user picks VI/EN or when `/` infers locale (middleware). */
+export const LOCALE_COOKIE = "boospace_locale";
+
+export type StoredLocale = "vi" | "en";

src/layouts/Layout.astro

@@ -3,27 +3,28 @@
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 
 import ConfigCarrier from "@components/ConfigCarrier.astro";
 import { getSiteSubtitle } from "@i18n/site-copy";
 import { profileConfig, siteConfig } from "@/config";
+import { resolveSiteAssetOgImageUrl } from "../utils/og-image";
 import {
 	AUTO_MODE,
 	BANNER_HEIGHT,
 	BANNER_HEIGHT_EXTEND,
 	BANNER_HEIGHT_HOME,
 	DARK_MODE,
 	DEFAULT_THEME,
 	LIGHT_MODE,
 	PAGE_WIDTH,
 } from "../constants/constants";
 import { defaultFavicons } from "../constants/icon";
 import type { Favicon } from "../types/config";
 import {
 	getLocaleFromPathname,
 	type SiteLocale,
 	stripLocaleFromPathname,
 	withLocale,
 } from "../utils/locale-utils";
 import { url } from "../utils/url-utils";
 import "katex/dist/katex.css";
 
@@ -39,6 +40,10 @@
 	setOGTypeArticle?: boolean;
 	canonicalPath?: string;
 	alternates?: Partial<Record<SiteLocale, string>>;
+	/** Open Graph / Twitter image (absolute URL). */
+	ogImage?: string;
+	/** Prefer raw article title for `og:title` (e.g. without site suffix). */
+	socialTitle?: string;
 }
 
 let {
@@ -49,6 +54,8 @@
 	setOGTypeArticle,
 	canonicalPath,
 	alternates,
+	ogImage,
+	socialTitle,
 } = Astro.props;
 const locale = getLocaleFromPathname(Astro.url.pathname);
 
@@ -75,6 +82,7 @@
 } else {
 	pageTitle = `${siteConfig.title} - ${getSiteSubtitle(locale)}`;
 }
+const ogTitle = socialTitle?.trim() ? socialTitle.trim() : pageTitle;
 
 const favicons: Favicon[] =
 	siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons;
@@ -107,6 +115,13 @@
 const bannerOffset =
 	bannerOffsetByPosition[siteConfig.banner.position || "center"];
 
+let resolvedOgImage = ogImage;
+if (!resolvedOgImage && Astro.site) {
+	resolvedOgImage =
+		(await resolveSiteAssetOgImageUrl(Astro.site, siteConfig.banner.src)) ??
+		undefined;
+}
+
 // Inject Vercel scripts for Astro
 inject();
 injectSpeedInsights();
@@ -204,8 +219,9 @@
 
 		<meta property="og:site_name" content={siteConfig.title}>
 		<meta property="og:url" content={Astro.url}>
-		<meta property="og:title" content={pageTitle}>
+		<meta property="og:title" content={ogTitle}>
 		<meta property="og:description" content={description || pageTitle}>
+		{resolvedOgImage && <meta property="og:image" content={resolvedOgImage} />}
 		{setOGTypeArticle ? (
         <meta property="og:type" content="article" />
         ) : (
@@ -214,8 +230,9 @@
 
 		<meta name="twitter:card" content="summary_large_image">
 		<meta property="twitter:url" content={Astro.url}>
-		<meta name="twitter:title" content={pageTitle}>
+		<meta name="twitter:title" content={ogTitle}>
 		<meta name="twitter:description" content={description || pageTitle}>
+		{resolvedOgImage && <meta name="twitter:image" content={resolvedOgImage} />}
 
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
@@ -266,7 +283,7 @@
 		<link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/>
 
 	</head>
-	<body class=" min-h-screen transition " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
+	<body class=" min-h-screen transition " class:list={[{"is-home": isHomePage, "enable-banner": enableBanner}]}
 		  data-overlayscrollbars-initialize
 	>
 		{/* Google Tag Manager (noscript) */}
@@ -492,10 +509,10 @@
 
 function init() {
 	// disableAnimation()()		// TODO
+	showBanner();
 	loadTheme();
 	loadHue();
 	initCustomScrollbar();
-	showBanner();
 }
 
 /* Load settings when entering the site */
@@ -524,7 +541,7 @@
 		}
 		let threshold = window.innerHeight * (BANNER_HEIGHT / 100) - 72 - 16
 		let navbar = document.getElementById('navbar-wrapper')
-		if (!navbar || !document.body.classList.contains('lg:is-home')) {
+		if (!navbar || !document.body.classList.contains('is-home')) {
 			return
 		}
 		if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
@@ -536,9 +553,9 @@
 		// change banner height immediately when a link is clicked
 		const bodyElement = document.querySelector('body')
 		if (stripLocaleFromPathname(new URL(visit.to.url, window.location.origin).pathname) === '/') {
-			bodyElement!.classList.add('lg:is-home');
+			bodyElement!.classList.add('is-home');
 		} else {
-			bodyElement!.classList.remove('lg:is-home');
+			bodyElement!.classList.remove('is-home');
 		}
 
 		// increase the page height during page transition to prevent the scrolling animation from jumping
@@ -609,7 +626,7 @@
 		const MAIN_PANEL_EXCESS_HEIGHT = MAIN_PANEL_OVERLAPS_BANNER_HEIGHT * 16			// The height the main panel overlaps the banner
 
 		let bannerHeight = BANNER_HEIGHT
-		if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) {
+		if (document.body.classList.contains('is-home') && window.innerWidth >= 1024) {
 			bannerHeight = BANNER_HEIGHT_HOME
 		}
 		let threshold = window.innerHeight * (bannerHeight / 100) - NAVBAR_HEIGHT - MAIN_PANEL_EXCESS_HEIGHT - 16