@anglefeint/astro-theme 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "license": "MIT",

package/public/scripts/about-effects.js

@@ -9,6 +9,12 @@
 						runtimeConfig = {};
 					}
 				}
+				var prefersReducedMotion = false;
+				try {
+					prefersReducedMotion = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+				} catch (_e) {
+					prefersReducedMotion = false;
+				}
 				// ── Terminal background: dir + 可输入 (点击背景聚焦，回车仅换行) ──
 				var bgCanvas = document.querySelector('.hacker-bg-canvas');
 				if (bgCanvas) {
@@ -107,14 +113,19 @@
 						cancelAnimationFrame(bgAnimationId);
 						bgAnimationId = 0;
 					}
-					startBackgroundLoop();
-					document.addEventListener('visibilitychange', function() {
-						if (document.hidden) {
+						if (prefersReducedMotion) {
+							renderBg(performance.now());
 							stopBackgroundLoop();
-							return;
+						} else {
+							startBackgroundLoop();
+							document.addEventListener('visibilitychange', function() {
+								if (document.hidden) {
+									stopBackgroundLoop();
+									return;
+								}
+								startBackgroundLoop();
+							});
 						}
-						startBackgroundLoop();
-					});
 
 					// 点击背景聚焦，点击内容失焦
 					document.addEventListener('click', function(e) {
@@ -207,7 +218,7 @@
 				var backTop = document.querySelector('.hacker-back-to-top');
 				if (backTop) {
 					backTop.addEventListener('click', function() {
-						window.scrollTo({ top: 0, behavior: 'smooth' });
+						window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
 					});
 				}
 
@@ -235,6 +246,7 @@
 					return s;
 				}
 				function startDecryptorFlash() {
+					if (prefersReducedMotion) return;
 					if (decryptorInterval) clearInterval(decryptorInterval);
 					var keys = 0, sec = 1;
 					decryptorInterval = setInterval(function() {
@@ -444,7 +456,7 @@
 
 				// ── Mouse glow ──
 				var glow = document.querySelector('.hacker-mouse-glow');
-				if (glow) {
+				if (glow && !prefersReducedMotion) {
 					var glowRaf;
 					var mx = 0, my = 0;
 					document.addEventListener('mousemove', function(e) {
@@ -476,7 +488,14 @@
 
 				// ── Typewriter section titles ──
 				var titles = document.querySelectorAll('.about-section-title');
-				if (window.IntersectionObserver && titles.length) {
+				if (prefersReducedMotion && titles.length) {
+					titles.forEach(function(el) {
+						var fullText = el.textContent || '';
+						el.setAttribute('data-full-text', fullText);
+						el.textContent = fullText;
+						el.style.minHeight = '1.2em';
+					});
+				} else if (window.IntersectionObserver && titles.length) {
 					titles.forEach(function(el) {
 						var fullText = el.textContent || '';
 						el.setAttribute('data-full-text', fullText);
@@ -510,6 +529,13 @@
 				var scan = document.querySelector('.hacker-load-scan');
 				if (regen && article) {
 					regen.addEventListener('click', function() {
+						if (prefersReducedMotion) {
+							article.classList.add('hacker-flash');
+							setTimeout(function() {
+								article.classList.remove('hacker-flash');
+							}, 120);
+							return;
+						}
 						regen.disabled = true;
 						article.classList.add('hacker-flash');
 						if (scan) {

package/public/scripts/blogpost-effects.js

@@ -1,6 +1,12 @@
-			(function() {
-				function init() {
-				// 阅读进度条
+				(function() {
+					function init() {
+					var prefersReducedMotion = false;
+					try {
+						prefersReducedMotion = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+					} catch (_e) {
+						prefersReducedMotion = false;
+					}
+					// 阅读进度条
 				var progress = document.querySelector('.ai-read-progress');
 				var article = document.querySelector('.ai-article');
 				var toast = document.querySelector('.ai-stage-toast');
@@ -42,13 +48,13 @@
 					onScroll();
 					window.addEventListener('scroll', onScroll, { passive: true });
 				}
-				var backTop = document.querySelector('.ai-back-to-top');
-				if (backTop) {
-					backTop.addEventListener('click', function() {
-						window.scrollTo({ top: 0, behavior: 'smooth' });
-					});
-				}
-				function initHeroCanvas() {
+					var backTop = document.querySelector('.ai-back-to-top');
+					if (backTop) {
+						backTop.addEventListener('click', function() {
+							window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
+						});
+					}
+					function initHeroCanvas() {
 					var shell = document.querySelector('.hero-shell');
 					if (!shell) return;
 					var canvas = shell.querySelector('.hero-canvas');
@@ -283,6 +289,11 @@
 						sizeCanvas();
 						buildEdge(img);
 						wrap.classList.add('ready');
+						if (prefersReducedMotion) {
+							var staticCtx = canvas.getContext('2d');
+							if (staticCtx) staticCtx.drawImage(baseCanvas, 0, 0);
+							return;
+						}
 						heroRaf = requestAnimationFrame(heroRender);
 					};
 					img.src = new URL(src, window.location.href).href;
@@ -294,6 +305,7 @@
 						}
 					}, { passive: true });
 					function onHeroVisibilityChange() {
+						if (prefersReducedMotion) return;
 						if (document.hidden) {
 							if (heroRaf) cancelAnimationFrame(heroRaf);
 							heroRaf = 0;
@@ -305,7 +317,7 @@
 					window.addEventListener('beforeunload', function() { cancelAnimationFrame(heroRaf); }, { once: true });
 				}
 				initHeroCanvas();
-			function initRedQueenTv() {
+				function initRedQueenTv() {
 				var shell = document.querySelector('.rq-tv');
 				var stage = document.querySelector('.rq-tv-stage');
 				var toggle = document.querySelector('.rq-tv-toggle');
@@ -361,8 +373,22 @@
 					return new URL(item.url, window.location.href).href;
 				}
 
-				var playlist = [{ url: source, type: guessImageType(source), holdLast: 360 }];
-				if (source2) playlist.push({ url: source2, type: guessImageType(source2), holdLast: 500 });
+					var playlist = [{ url: source, type: guessImageType(source), holdLast: 360 }];
+					if (source2) playlist.push({ url: source2, type: guessImageType(source2), holdLast: 500 });
+					if (prefersReducedMotion) {
+						setCollapsed(false);
+						var staticImg = new Image();
+						staticImg.className = 'rq-tv-screen';
+						staticImg.alt = '';
+						staticImg.decoding = 'async';
+						staticImg.loading = 'lazy';
+						staticImg.src = resolveItemUrl(playlist[0]);
+						stage.innerHTML = '';
+						stage.appendChild(staticImg);
+						toggle.hidden = true;
+						toggle.setAttribute('aria-hidden', 'true');
+						return;
+					}
 
 				function setCollapsed(collapsed) {
 					shell.classList.toggle('rq-tv-collapsed', collapsed);

package/public/styles/blog-list.css

@@ -0,0 +1,35 @@
+/* Pagination styles for cyber blog list pages */
+body.cyber-page .pagination {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5rem;
+	margin-top: 2.5rem;
+	padding: 1.5rem 0;
+}
+
+body.cyber-page .pagination a {
+	padding: 0.5rem 1rem;
+	color: rgb(212, 196, 232);
+	text-decoration: none;
+	border: 1px solid rgba(198, 156, 224, 0.42);
+	border-radius: 4px;
+	transition: 0.25s ease;
+	text-shadow: 0 0 10px rgba(214, 152, 226, 0.2);
+}
+
+body.cyber-page .pagination a:hover {
+	border-color: rgba(226, 166, 236, 0.88);
+	text-shadow: 0 0 15px rgba(232, 174, 242, 0.5);
+	box-shadow: 0 0 15px rgba(222, 154, 228, 0.26);
+}
+
+body.cyber-page .pagination a.current {
+	background: rgba(188, 122, 214, 0.2);
+	border-color: rgb(224, 170, 236);
+	color: rgb(244, 224, 252);
+	text-shadow: 0 0 15px rgba(232, 174, 242, 0.48);
+	box-shadow:
+		0 0 20px rgba(118, 198, 255, 0.24),
+		0 0 12px rgba(220, 152, 230, 0.22);
+}

package/src/components/FormattedDate.astro

@@ -1,14 +1,15 @@
 ---
 interface Props {
 	date: Date;
+	locale?: string;
 }
 
-const { date } = Astro.props;
+const { date, locale = 'en-US' } = Astro.props as Props;
 ---
 
 <time datetime={date.toISOString()}>
 	{
-		date.toLocaleDateString('en-us', {
+		date.toLocaleDateString(locale, {
 			year: 'numeric',
 			month: 'short',
 			day: 'numeric',

package/src/components/shared/CommonFooter.astro

@@ -1,6 +1,7 @@
 ---
 import { SITE_TAGLINE, SITE_TITLE } from '@anglefeint/site-config/site';
 import { SOCIAL_LINKS } from '@anglefeint/site-config/social';
+import SocialMenu from './SocialMenu.astro';
 
 const today = new Date();
 interface Props {
@@ -16,36 +17,7 @@ const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
 	© {today.getFullYear()} {SITE_TITLE}. {tagline}
 	{SOCIAL_LINKS.length > 0 && (
 		<div class="social-links">
-			{SOCIAL_LINKS.map((link) => (
-				<a href={link.href} target="_blank" rel="noopener noreferrer">
-					<span class="sr-only">{link.label}</span>
-					{link.icon === 'mastodon' && (
-						<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-							<path
-								fill="currentColor"
-								d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-							/>
-						</svg>
-					)}
-					{link.icon === 'twitter' && (
-						<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-							<path
-								fill="currentColor"
-								d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-							/>
-						</svg>
-					)}
-					{link.icon === 'github' && (
-						<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-							<path
-								fill="currentColor"
-								d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-							/>
-						</svg>
-					)}
-					{!link.icon && <span>{link.label}</span>}
-				</a>
-			))}
+			<SocialMenu links={SOCIAL_LINKS} />
 		</div>
 	)}
 	{scanlines && <div class="ai-scanlines" aria-hidden="true"></div>}

package/src/components/shared/CommonHeader.astro

@@ -3,6 +3,8 @@ import { SITE_TITLE } from '@anglefeint/site-config/site';
 import { SOCIAL_LINKS } from '@anglefeint/site-config/social';
 import { THEME } from '@anglefeint/site-config/theme';
 import HeaderLink from '../HeaderLink.astro';
+import LangSwitcher from './LangSwitcher.astro';
+import SocialMenu from './SocialMenu.astro';
 import {
 	DEFAULT_LOCALE,
 	LOCALE_LABELS,
@@ -67,59 +69,12 @@ const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
 		</div>
 		<div class="nav-right">
 			<div class="social-links">
-				<div class="lang-switcher" aria-label={labels.language}>
-					<label class="lang-label" for="lang-select">{labels.language}</label>
-					<select
-						id="lang-select"
-						class="lang-select"
-						aria-label={labels.language}
-						onchange="if (this.value) window.location.href = this.value;"
-					>
-						{
-							localeOptions.map((option) => (
-								<option value={option.href} selected={option.locale === locale}>
-									{option.label}
-								</option>
-							))
-						}
-					</select>
-				</div>
+				<LangSwitcher label={labels.language} currentLocale={locale} options={localeOptions} />
 				<div class="nav-status" aria-label="System status">
 					<span class="nav-status-dot" aria-hidden="true"></span>
 					<span class="nav-status-text">{labels.status}</span>
 				</div>
-				{
-					SOCIAL_LINKS.map((link) => (
-						<a href={link.href} target="_blank" rel="noopener noreferrer">
-							<span class="sr-only">{link.label}</span>
-							{link.icon === 'mastodon' && (
-								<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-									<path
-										fill="currentColor"
-										d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-									/>
-								</svg>
-							)}
-							{link.icon === 'twitter' && (
-								<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-									<path
-										fill="currentColor"
-										d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-									/>
-								</svg>
-							)}
-							{link.icon === 'github' && (
-								<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
-									<path
-										fill="currentColor"
-										d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-									/>
-								</svg>
-							)}
-							{!link.icon && <span>{link.label}</span>}
-						</a>
-					))
-				}
+				<SocialMenu links={SOCIAL_LINKS} />
 			</div>
 		</div>
 	</nav>

package/src/components/shared/Icon.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+	name?: 'mastodon' | 'twitter' | 'github';
+	size?: number;
+}
+
+const { name, size = 32 } = Astro.props as Props;
+---
+
+{
+	name === 'mastodon' && (
+		<svg viewBox="0 0 16 16" aria-hidden="true" width={size} height={size}>
+			<path
+				fill="currentColor"
+				d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
+			/>
+		</svg>
+	)
+}
+{
+	name === 'twitter' && (
+		<svg viewBox="0 0 16 16" aria-hidden="true" width={size} height={size}>
+			<path
+				fill="currentColor"
+				d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
+			/>
+		</svg>
+	)
+}
+{
+	name === 'github' && (
+		<svg viewBox="0 0 16 16" aria-hidden="true" width={size} height={size}>
+			<path
+				fill="currentColor"
+				d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+			/>
+		</svg>
+	)
+}

package/src/components/shared/LangSwitcher.astro

@@ -0,0 +1,35 @@
+---
+import type { Locale } from '@anglefeint/site-i18n/config';
+
+interface LocaleOption {
+	locale: Locale;
+	label: string;
+	href: string;
+}
+
+interface Props {
+	label: string;
+	currentLocale: Locale;
+	options: LocaleOption[];
+}
+
+const { label, currentLocale, options } = Astro.props as Props;
+---
+
+<div class="lang-switcher" aria-label={label}>
+	<label class="lang-label" for="lang-select">{label}</label>
+	<select
+		id="lang-select"
+		class="lang-select"
+		aria-label={label}
+		onchange="if (this.value) window.location.href = this.value;"
+	>
+		{
+			options.map((option) => (
+				<option value={option.href} selected={option.locale === currentLocale}>
+					{option.label}
+				</option>
+			))
+		}
+	</select>
+</div>

package/src/components/shared/SocialMenu.astro

@@ -0,0 +1,20 @@
+---
+import { SOCIAL_LINKS, type SocialLink } from '@anglefeint/site-config/social';
+import Icon from './Icon.astro';
+
+interface Props {
+	links?: SocialLink[];
+	iconSize?: number;
+}
+
+const { links = SOCIAL_LINKS, iconSize = 32 } = Astro.props as Props;
+---
+
+{
+	links.map((link) => (
+		<a href={link.href} target="_blank" rel="noopener noreferrer">
+			<span class="sr-only">{link.label}</span>
+			{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
+		</a>
+	))
+}

package/src/i18n/messages.ts

@@ -75,7 +75,7 @@ const MESSAGES: Record<Locale, Messages> = {
 			related: 'Related',
 			regenerate: 'Regenerate',
 		},
-		footer: { tagline: 'Built with Astro.' },
+		footer: { tagline: '由 Astro 构建。' },
 	},
 	ja: {
 		siteTitle: 'Angle Feint',

package/src/layouts/BlogPost.astro

@@ -243,7 +243,7 @@ for (let i = 0; i < pts.length; i++) {
 								)}
 								<h3 class="ai-related-card-title">{p.data.title}</h3>
 								<p class="ai-related-card-date">
-									<FormattedDate date={p.data.pubDate} />
+									<FormattedDate date={p.data.pubDate} locale={resolvedLocale} />
 								</p>
 							</a>
 						))}

package/src/layouts/HomePage.astro

@@ -32,7 +32,7 @@ const heroText = SITE_HERO_BY_LOCALE[locale] ?? messages.home.hero;
 								{post.data.title}
 							</a>
 							<div class="home-post-meta">
-								<FormattedDate date={post.data.pubDate} />
+								<FormattedDate date={post.data.pubDate} locale={locale} />
 								{post.data.description && <> · {post.data.description}</>}
 							</div>
 						</li>