@anglefeint/astro-theme 0.1.0-alpha.0 → 0.1.0-alpha.1

package/public/styles/blog-post.css

@@ -1,4 +1,4 @@
-			body.mesh-page main {
+			body.ai-page main {
 				width: calc(100% - 2em);
 				max-width: 100%;
 				margin: 0;
@@ -117,14 +117,14 @@
 					letter-spacing: 0.08em;
 				}
 			}
-			body.mesh-page .prose {
+			body.ai-page .prose {
 				width: 720px;
 				max-width: calc(100% - 2em);
 				margin: auto;
 				padding: 1em;
 				color: rgb(var(--text));
 			}
-			body.mesh-page .hero-shell + .prose {
+			body.ai-page .hero-shell + .prose {
 				margin-top: 1.1rem;
 			}
 			.rq-tv {
@@ -284,30 +284,30 @@
 					to { transform: rotate(360deg); }
 				}
 			@media (max-width: 720px) {
-				body.mesh-page .hero-shell + .prose {
+				body.ai-page .hero-shell + .prose {
 					margin-top: 0.85rem;
 				}
 			}
 			@media (max-width: 1300px) {
 				.rq-tv { display: none; }
 			}
-			body.mesh-page .title {
+			body.ai-page .title {
 				margin-bottom: 1em;
 				padding: 1em 0;
 				text-align: center;
 				line-height: 1;
 			}
-			body.mesh-page .title h1 {
+			body.ai-page .title h1 {
 				margin: 0 0 0.5em 0;
 			}
-			.mesh-subtitle-text {
+			.ai-subtitle-text {
 				margin: -0.15rem 0 0.85rem;
 				font-size: 1rem;
 				line-height: 1.5;
 				color: rgba(210, 240, 255, 0.86);
 				text-wrap: balance;
 			}
-			.mesh-title-flow {
+			.ai-title-flow {
 				position: relative;
 				height: 3px;
 				margin: 0.75rem 0 0.1rem;
@@ -323,7 +323,7 @@
 					0 0 0 1px rgba(148, 216, 244, 0.08),
 					0 0 14px rgba(124, 206, 246, 0.24);
 			}
-			.mesh-title-flow::before {
+			.ai-title-flow::before {
 				content: "";
 				position: absolute;
 				inset: 0;
@@ -333,7 +333,7 @@
 					rgba(162, 224, 250, 0) 9px 16px
 				);
 			}
-			.mesh-title-flow::after {
+			.ai-title-flow::after {
 				content: "";
 				position: absolute;
 				top: 0;
@@ -346,14 +346,14 @@
 					rgba(164, 228, 255, 0.88),
 					rgba(132, 214, 255, 0)
 				);
-				animation: mesh-title-flow-run 3.8s linear infinite;
+				animation: ai-title-flow-run 3.8s linear infinite;
 			}
-			@keyframes mesh-title-flow-run {
+			@keyframes ai-title-flow-run {
 				to {
 					left: 100%;
 				}
 			}
-			.mesh-stage-toast {
+			.ai-stage-toast {
 				position: fixed;
 				right: 1rem;
 				bottom: 1rem;
@@ -377,14 +377,14 @@
 					opacity 0.18s ease,
 					transform 0.18s ease;
 			}
-			.mesh-stage-toast.visible {
+			.ai-stage-toast.visible {
 				opacity: 1;
 				transform: translateY(0);
 			}
-			body.mesh-page .date {
+			body.ai-page .date {
 				margin-bottom: 0.5em;
 				color: rgb(var(--text-muted));
 			}
-			body.mesh-page .last-updated-on {
+			body.ai-page .last-updated-on {
 				font-style: italic;
 			}

package/src/cli-new-page.mjs

@@ -4,6 +4,13 @@ import path from 'node:path';
 
 const THEMES = ['base', 'cyber', 'ai', 'hacker', 'matrix'];
 const PAGES_ROOT = path.resolve(process.cwd(), 'src/pages/[lang]');
+const LAYOUT_BY_THEME = {
+	base: 'BasePageLayout',
+	ai: 'AiPageLayout',
+	cyber: 'CyberPageLayout',
+	hacker: 'HackerPageLayout',
+	matrix: 'MatrixPageLayout',
+};
 
 function usage() {
 	console.error('Usage: npm run new-page -- <slug> [--theme <base|cyber|ai|hacker|matrix>]');
@@ -54,12 +61,11 @@ async function exists(filePath) {
 
 function templateFor({ slug, theme }) {
 	const title = toTitleFromSlug(slug) || 'New Page';
+	const layoutName = LAYOUT_BY_THEME[theme];
 	return `---
 import type { GetStaticPaths } from 'astro';
-import BasePageLayout from '@anglefeint/astro-theme/layouts/BasePageLayout.astro';
-import { SUPPORTED_LOCALES } from '@anglefeint/astro-theme/i18n/config';
-
-const PAGE_THEME = '${theme}';
+import ${layoutName} from '@anglefeint/astro-theme/layouts/${layoutName}.astro';
+import { SUPPORTED_LOCALES } from '../../i18n/config';
 
 export const getStaticPaths = (() => SUPPORTED_LOCALES.map((lang) => ({ params: { lang } }))) satisfies GetStaticPaths;
 
@@ -68,10 +74,10 @@ const pageTitle = '${title}';
 const pageDescription = 'A custom page built from the ${theme} theme shell.';
 ---
 
-<BasePageLayout locale={locale} title={pageTitle} description={pageDescription} theme={PAGE_THEME}>
+<${layoutName} locale={locale} title={pageTitle} description={pageDescription}>
 \t<h1>${title}</h1>
 \t<p>Replace this content with your own page content.</p>
-</BasePageLayout>
+</${layoutName}>
 `;
 }
 

package/src/components/Footer.astro

@@ -1,74 +1,5 @@
 ---
-import { SITE_TAGLINE, SITE_TITLE } from '@anglefeint/site-config/site';
-import { SOCIAL_LINKS } from '@anglefeint/site-config/social';
-
-const today = new Date();
-interface Props {
-	tagline?: string;
-	/** Show Blade Runner scanlines overlay on mesh-page (header/footer only) */
-	scanlines?: boolean;
-}
-
-const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
+import CommonFooter from './shared/CommonFooter.astro';
 ---
 
-<footer>
-	&copy; {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>
-			))}
-		</div>
-	)}
-	{scanlines && <div class="mesh-scanlines" aria-hidden="true"></div>}
-</footer>
-<style>
-	footer {
-		padding: 2em 1em 3em 1em;
-		background: var(--chrome-bg, var(--bg));
-		border-top: 1px solid var(--chrome-border, rgb(var(--border)));
-		color: var(--chrome-text-muted, rgb(var(--text-muted)));
-		text-align: center;
-	}
-	.social-links {
-		display: flex;
-		justify-content: center;
-		gap: 1em;
-		margin-top: 1em;
-	}
-	.social-links a {
-		text-decoration: none;
-		color: var(--chrome-text-muted, rgb(var(--text-muted)));
-	}
-	.social-links a:hover {
-		color: var(--chrome-link-hover, var(--chrome-link, rgb(var(--text))));
-	}
-</style>
+<CommonFooter {...Astro.props} />

package/src/components/Header.astro

@@ -1,328 +1,5 @@
 ---
-import { SITE_TITLE } from '../consts';
-import { SOCIAL_LINKS } from '@anglefeint/site-config/social';
-import { THEME } from '@anglefeint/site-config/theme';
-import HeaderLink from './HeaderLink.astro';
-import {
-	DEFAULT_LOCALE,
-	LOCALE_LABELS,
-	type Locale,
-	SUPPORTED_LOCALES,
-	alternatePathForLocale,
-	isLocale,
-	stripLocaleFromPath,
-} from '../i18n/config';
-
-interface Props {
-	locale?: Locale;
-	homeHref?: string;
-	/** Optional per-locale overrides (used for existence-aware language fallback on some routes). */
-	localeHrefs?: Partial<Record<Locale, string>>;
-	/** Show Blade Runner scanlines overlay on mesh-page (header/footer only) */
-	scanlines?: boolean;
-	labels?: {
-		home: string;
-		blog: string;
-		about: string;
-		status: string;
-		language: string;
-	};
-}
-
-const props = Astro.props as Props;
-const locale: Locale = props.locale && isLocale(props.locale) ? props.locale : DEFAULT_LOCALE;
-const labels = {
-	home: props.labels?.home ?? 'Home',
-	blog: props.labels?.blog ?? 'Blog',
-	about: props.labels?.about ?? 'About',
-	status: props.labels?.status ?? 'system: online',
-	language: props.labels?.language ?? 'Language',
-};
-const showAbout = THEME.ENABLE_ABOUT_PAGE;
-const currentSubpath = stripLocaleFromPath(Astro.url.pathname, locale);
-const homeHref = props.homeHref ?? alternatePathForLocale(locale, '/');
-const buildLocaleHref = (targetLocale: Locale) => {
-	// Language switcher: preserve current route when switching locales.
-	// Only fall back for About when the feature is disabled.
-	const sectionSubpath =
-		currentSubpath.startsWith('/about') && !showAbout ? '/' : currentSubpath || '/';
-	return alternatePathForLocale(targetLocale, sectionSubpath);
-};
-const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
-	locale: targetLocale,
-	label: LOCALE_LABELS[targetLocale],
-	href: props.localeHrefs?.[targetLocale] ?? buildLocaleHref(targetLocale),
-}));
+import CommonHeader from './shared/CommonHeader.astro';
 ---
 
-<header>
-	<nav>
-		<div class="nav-left">
-			<h2><a href={homeHref}>{SITE_TITLE}</a></h2>
-		</div>
-		<div class="internal-links">
-			<HeaderLink href={homeHref}>{labels.home}</HeaderLink>
-			<HeaderLink href={alternatePathForLocale(locale, '/blog/')}>{labels.blog}</HeaderLink>
-			{showAbout && <HeaderLink href={alternatePathForLocale(locale, '/about/')}>{labels.about}</HeaderLink>}
-		</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>
-				<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>
-					))
-				}
-			</div>
-		</div>
-	</nav>
-	{props.scanlines && <div class="mesh-scanlines" aria-hidden="true"></div>}
-</header>
-<style>
-	header {
-		margin: 0;
-		padding: 0 1em;
-		background: var(--chrome-bg, var(--bg));
-		border-bottom: 1px solid var(--chrome-border, rgb(var(--border)));
-	}
-	h2 {
-		margin: 0;
-		font-size: 1em;
-	}
-
-	h2 a,
-	h2 a.active {
-		text-decoration: none;
-		color: var(--chrome-link, rgb(var(--text)));
-		border-bottom: none;
-	}
-	nav {
-		display: grid;
-		grid-template-columns: 1fr auto 1fr;
-		align-items: center;
-		gap: 0.6rem;
-		min-height: 56px;
-		width: 100%;
-	}
-	.nav-left {
-		justify-self: start;
-	}
-	.internal-links {
-		justify-self: center;
-		display: flex;
-		align-items: center;
-		gap: 0.1rem;
-	}
-	.nav-right {
-		justify-self: end;
-		display: flex;
-		align-items: center;
-		gap: 0.35rem;
-		min-width: max-content;
-	}
-	.internal-links :global(a) {
-		padding: 1em 0.5em;
-		color: var(--chrome-link, rgb(var(--text)));
-		border-bottom: 4px solid transparent;
-		text-decoration: none;
-	}
-	.internal-links :global(a.active) {
-		text-decoration: none;
-		border-bottom-color: var(--chrome-active, var(--accent));
-	}
-	.social-links a {
-		color: var(--chrome-link, rgb(var(--text)));
-		align-items: center;
-		justify-content: center;
-		padding: 0.6rem 0.35rem;
-		border-bottom: none;
-	}
-	.social-links a:hover {
-		color: var(--chrome-link-hover, var(--chrome-link, rgb(var(--text))));
-	}
-	.social-links,
-	.social-links a {
-		display: flex;
-	}
-	.social-links {
-		align-items: center;
-		gap: 0.4rem;
-		position: relative;
-		flex-wrap: nowrap;
-	}
-	.lang-switcher {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.2rem 0.4rem;
-		margin-right: 0.1rem;
-		border: 1px solid rgba(132, 214, 255, 0.2);
-		border-radius: 999px;
-		background: rgba(6, 16, 30, 0.35);
-		flex-shrink: 0;
-	}
-	.lang-label {
-		display: inline-block;
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		font-size: 0.6rem;
-		text-transform: uppercase;
-		letter-spacing: 0.12em;
-		color: rgba(190, 226, 248, 0.78);
-		white-space: nowrap;
-	}
-	.lang-select {
-		appearance: none;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		background:
-			linear-gradient(45deg, transparent 50%, rgba(204, 236, 252, 0.82) 50%) calc(100% - 0.9rem) 50% / 0.35rem 0.35rem no-repeat,
-			linear-gradient(135deg, rgba(204, 236, 252, 0.82) 50%, transparent 50%) calc(100% - 0.7rem) 50% / 0.35rem 0.35rem no-repeat,
-			rgba(9, 22, 40, 0.68);
-		border: 1px solid rgba(132, 214, 255, 0.2);
-		border-radius: 999px;
-		padding: 0.2rem 1.45rem 0.2rem 0.55rem;
-		min-width: 6rem;
-		font-size: 0.62rem;
-		line-height: 1;
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		color: rgba(204, 236, 252, 0.86);
-		cursor: pointer;
-	}
-	.lang-select:focus {
-		outline: none;
-		border-color: rgba(132, 214, 255, 0.5);
-		box-shadow: 0 0 0 2px rgba(98, 180, 228, 0.18);
-	}
-	.lang-select option {
-		color: #ccecfb;
-		background: #0b1c32;
-	}
-	.nav-status {
-		display: none;
-		align-items: center;
-		gap: 0.45rem;
-		padding: 0.24rem 0.5rem;
-		border-radius: 999px;
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		font-size: 0.62rem;
-		letter-spacing: 0.12em;
-		text-transform: uppercase;
-		color: rgba(186, 232, 252, 0.86);
-		background: rgba(6, 16, 30, 0.52);
-		border: 1px solid rgba(132, 214, 255, 0.22);
-		box-shadow:
-			0 0 0 1px rgba(132, 214, 255, 0.08),
-			0 0 16px rgba(90, 180, 255, 0.16);
-		white-space: nowrap;
-		position: absolute;
-		right: calc(100% + 0.5rem);
-		top: 50%;
-		transform: translateY(-50%);
-		pointer-events: none;
-	}
-	.nav-status-dot {
-		width: 0.44rem;
-		height: 0.44rem;
-		border-radius: 50%;
-		background: rgba(150, 226, 255, 0.96);
-		box-shadow: 0 0 10px rgba(122, 210, 255, 0.72);
-		animation: nav-status-pulse 1.8s steps(1, end) infinite;
-	}
-	@keyframes nav-status-pulse {
-		0%,
-		78%,
-		100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		82% {
-			opacity: 0.2;
-			transform: scale(0.7);
-		}
-		86% {
-			opacity: 1;
-			transform: scale(1.05);
-		}
-		90% {
-			opacity: 0.28;
-			transform: scale(0.78);
-		}
-	}
-	body.mesh-page .nav-status {
-		display: inline-flex;
-	}
-	body.about-page .nav-status {
-		display: none;
-	}
-	@media (max-width: 720px) {
-		nav {
-			grid-template-columns: 1fr;
-			gap: 0;
-		}
-		.nav-left {
-			display: none;
-		}
-		.internal-links {
-			justify-self: start;
-		}
-		.nav-right {
-			justify-self: end;
-		}
-		.nav-status {
-			display: none !important;
-		}
-		.social-links {
-			display: none;
-		}
-		.lang-switcher {
-			margin-right: 0;
-		}
-	}
-</style>
+<CommonHeader {...Astro.props} />

package/src/components/shared/CommonFooter.astro

@@ -0,0 +1,74 @@
+---
+import { SITE_TAGLINE, SITE_TITLE } from '@anglefeint/site-config/site';
+import { SOCIAL_LINKS } from '@anglefeint/site-config/social';
+
+const today = new Date();
+interface Props {
+	tagline?: string;
+	/** Show Blade Runner scanlines overlay on ai-page (header/footer only) */
+	scanlines?: boolean;
+}
+
+const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
+---
+
+<footer>
+	&copy; {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>
+			))}
+		</div>
+	)}
+	{scanlines && <div class="ai-scanlines" aria-hidden="true"></div>}
+</footer>
+<style>
+	footer {
+		padding: 2em 1em 3em 1em;
+		background: var(--chrome-bg, var(--bg));
+		border-top: 1px solid var(--chrome-border, rgb(var(--border)));
+		color: var(--chrome-text-muted, rgb(var(--text-muted)));
+		text-align: center;
+	}
+	.social-links {
+		display: flex;
+		justify-content: center;
+		gap: 1em;
+		margin-top: 1em;
+	}
+	.social-links a {
+		text-decoration: none;
+		color: var(--chrome-text-muted, rgb(var(--text-muted)));
+	}
+	.social-links a:hover {
+		color: var(--chrome-link-hover, var(--chrome-link, rgb(var(--text))));
+	}
+</style>