@anglefeint/astro-theme 0.1.17 → 0.1.19

package/README.md

@@ -59,4 +59,24 @@ In the starter/site project, map these aliases to `src/config/*` and `src/i18n/*
 - `anglefeint-new-post`
 - `anglefeint-new-page`
 
-Starter projects can invoke these directly (or wrap them in npm scripts).
+Examples:
+
+```bash
+# create one post slug in all default locales
+anglefeint-new-post my-first-post
+
+# create post only for selected locales
+anglefeint-new-post my-first-post --locales en,ja
+
+# or via environment variable
+ANGLEFEINT_LOCALES=en,ja anglefeint-new-post my-first-post
+
+# create a custom page with theme variant
+anglefeint-new-page projects --theme base
+anglefeint-new-page projects --theme ai
+anglefeint-new-page projects --theme cyber
+anglefeint-new-page projects --theme hacker
+anglefeint-new-page projects --theme matrix
+```
+
+Starter projects can invoke these directly (or wrap them in npm scripts). For most users, `#starter` is the recommended installation path.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [
@@ -26,6 +26,7 @@
     "src/scripts",
     "src/i18n",
     "src/styles",
+    "src/utils",
     "src/assets/theme",
     "src/cli-new-post.mjs",
     "src/cli-new-page.mjs"
@@ -42,6 +43,8 @@
     "./i18n/*": "./src/i18n/*",
     "./styles/*": "./src/styles/*",
     "./assets/*": "./src/assets/*",
+    "./utils/merge": "./src/utils/merge.ts",
+    "./utils/*": "./src/utils/*",
     "./content-schema": "./src/content-schema.ts",
     "./consts": "./src/consts.ts"
   },

package/src/cli-new-post.mjs

@@ -5,7 +5,9 @@ import { SUPPORTED_LOCALES } from './i18n/locales.mjs';
 import {
 	buildNewPostTemplate,
 	loadDefaultCovers,
+	parseNewPostArgs,
 	pickDefaultCoverBySlug,
+	resolveLocales,
 	usageNewPost,
 	validatePostSlug,
 } from './scaffold/new-post.mjs';
@@ -23,7 +25,7 @@ async function exists(filePath) {
 }
 
 async function main() {
-	const slug = process.argv[2];
+	const { slug, locales: cliLocales } = parseNewPostArgs(process.argv);
 	if (!slug) {
 		console.error(usageNewPost());
 		process.exit(1);
@@ -36,10 +38,15 @@ async function main() {
 
 	const pubDate = new Date().toISOString().slice(0, 10);
 	const defaultCovers = await loadDefaultCovers(DEFAULT_COVERS_ROOT);
+	const locales = resolveLocales({
+		cliLocales,
+		envLocales: process.env.ANGLEFEINT_LOCALES ?? '',
+		defaultLocales: SUPPORTED_LOCALES,
+	});
 	const created = [];
 	const skipped = [];
 
-	for (const locale of SUPPORTED_LOCALES) {
+	for (const locale of locales) {
 		const localeDir = path.join(CONTENT_ROOT, locale);
 		const filePath = path.join(localeDir, `${slug}.md`);
 		await mkdir(localeDir, { recursive: true });

package/src/config/theme.ts

@@ -8,4 +8,8 @@ export const THEME = {
 	HOME_LATEST_COUNT: 3,
 	/** Whether to enable the About page (disable to hide from nav/routes if needed) */
 	ENABLE_ABOUT_PAGE: true,
+	/** Optional visual effects switches */
+	EFFECTS: {
+		ENABLE_RED_QUEEN: true,
+	},
 } as const;

package/src/layouts/BlogPost.astro

@@ -7,6 +7,7 @@ import FormattedDate from '../components/FormattedDate.astro';
 import AiShell from './shells/AiShell.astro';
 import blogPostCssUrl from '../styles/blog-post.css?url';
 import { SITE_AUTHOR } from '@anglefeint/site-config/site';
+import { THEME } from '@anglefeint/site-config/theme';
 import { DEFAULT_LOCALE, type Locale, isLocale, localePath, blogIdToSlugAnyLocale } from '@anglefeint/site-i18n/config';
 import { getMessages } from '@anglefeint/site-i18n/messages';
 
@@ -49,6 +50,7 @@ const hasSystemMeta = Boolean(aiModel || aiMode || aiState);
 const hasResponseMeta = aiLatencyMs !== undefined || aiConfidence !== undefined;
 const hasStats = aiModel || wordCount !== undefined || tokenCount !== undefined;
 const confidenceText = aiConfidence !== undefined ? aiConfidence.toFixed(2) : undefined;
+const enableRedQueen = THEME.EFFECTS.ENABLE_RED_QUEEN;
 ---
 
 <AiShell
@@ -79,11 +81,13 @@ const confidenceText = aiConfidence !== undefined ? aiConfidence.toFixed(2) : un
 			</div>
 			<canvas class="ai-network-canvas" aria-hidden="true"></canvas>
 		</div>
-		<aside class="rq-tv rq-tv-collapsed">
-			<div class="rq-tv-stage" data-rq-src={themeRedqueen1.src} data-rq-src2={themeRedqueen2.src}></div>
-			<div class="rq-tv-badge">monitor feed<span class="rq-tv-dot"></span></div>
-			<button type="button" class="rq-tv-toggle" aria-label="Replay monitor feed" aria-expanded="false">▶</button>
-		</aside>
+		{enableRedQueen && (
+			<aside class="rq-tv rq-tv-collapsed">
+				<div class="rq-tv-stage" data-rq-src={themeRedqueen1.src} data-rq-src2={themeRedqueen2.src}></div>
+				<div class="rq-tv-badge">monitor feed<span class="rq-tv-dot"></span></div>
+				<button type="button" class="rq-tv-toggle" aria-label="Replay monitor feed" aria-expanded="false">▶</button>
+			</aside>
+		)}
 		<div class="ai-read-progress" aria-hidden="true"></div>
 		<button type="button" class="ai-back-to-top" aria-label="Back to top" title="Back to top">↑</button>
 		<div class="ai-stage-toast" aria-live="polite" aria-atomic="true"></div>

package/src/scripts/blogpost-effects.js

@@ -17,6 +17,8 @@ export function initBlogpostEffects() {
   initReadProgressAndBackToTop(prefersReducedMotion);
   initNetworkCanvas(prefersReducedMotion);
   initHeroCanvas(prefersReducedMotion);
-  initRedQueenTv(prefersReducedMotion);
+  if (document.querySelector('.rq-tv-stage')) {
+    initRedQueenTv(prefersReducedMotion);
+  }
   initPostInteractions(prefersReducedMotion);
 }

package/src/styles/about/background.css

@@ -0,0 +1,57 @@
+/* About background layer: terminal backdrop and scan/flicker ambience. */
+			/* ── terminal background ── */
+			.hacker-bg {
+				position: fixed;
+				inset: 0;
+				z-index: 0;
+				overflow: hidden;
+				pointer-events: none;
+			}
+			.hacker-bg-canvas {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+			}
+			.hacker-scanlines {
+				position: absolute;
+				inset: 0;
+				/* 浅色扫描线：在深色背景上可见，全屏 CRT 感 */
+				background: repeating-linear-gradient(
+					180deg,
+					transparent 0px,
+					transparent 2px,
+					rgba(255, 255, 255, 0.03) 2px,
+					rgba(255, 255, 255, 0.03) 3px
+				);
+				pointer-events: none;
+			}
+			.hacker-vignette {
+				position: absolute;
+				inset: 0;
+				background: radial-gradient(
+					ellipse at center,
+					transparent 50%,
+					rgba(0, 0, 0, 0.5) 80%,
+					rgba(0, 0, 0, 0.85) 100%
+				);
+				pointer-events: none;
+			}
+			.hacker-flicker {
+				position: absolute;
+				inset: 0;
+				background: transparent;
+				animation: hacker-flicker-anim 0.08s infinite;
+				pointer-events: none;
+			}
+			@keyframes hacker-flicker-anim {
+				0% { background: rgba(255, 255, 255, 0.012); }
+				50% { background: transparent; }
+				100% { background: rgba(255, 255, 255, 0.005); }
+			}
+			.hacker-glow {
+				position: absolute;
+				inset: 0;
+				box-shadow: inset 0 0 120px rgba(255, 255, 255, 0.03);
+				pointer-events: none;
+			}

package/src/styles/about/base.css

@@ -0,0 +1,58 @@
+/* About base layer: hacker-page chrome variables and shell baselines. */
+			body.hacker-page {
+				background: #000 !important;
+				background-image: none !important;
+				color: rgba(255, 255, 255, 0.88);
+				min-height: 100vh;
+				scrollbar-width: thin;
+				scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+				/* header: Anonymous 黑白灰 + 黄点缀 */
+				--chrome-bg: rgba(0, 0, 0, 0.42);
+				--chrome-border: rgba(255, 255, 255, 0.2);
+				--chrome-link: rgba(255, 255, 255, 0.9);
+				--chrome-link-hover: rgba(0, 255, 100, 0.95);
+				--chrome-active: rgba(255, 255, 255, 0.5);
+				--chrome-text-muted: rgba(255, 255, 255, 0.5);
+			}
+			body.hacker-page::-webkit-scrollbar { width: 6px; }
+			body.hacker-page::-webkit-scrollbar-track { background: transparent; }
+			body.hacker-page::-webkit-scrollbar-thumb {
+				background: rgba(255, 255, 255, 0.22);
+				border-radius: 3px;
+			}
+			/* fixed header + content offset (mirrors ai-page in global.css) */
+			body.hacker-page header {
+				position: fixed;
+				top: 0;
+				left: 0;
+				right: 0;
+				z-index: 100;
+				backdrop-filter: blur(3px);
+				-webkit-backdrop-filter: blur(3px);
+			}
+			body.hacker-page .hacker-content {
+				padding-top: calc(3em + 56px);
+			}
+			body.hacker-page .hacker-content,
+			body.hacker-page footer {
+				position: relative;
+				z-index: 10;
+			}
+			/* footer: Anonymous 灰白 */
+			body.hacker-page footer {
+				--chrome-bg: rgba(0, 0, 0, 0.85);
+				--chrome-border: rgba(255, 255, 255, 0.15);
+				border-top-color: rgba(255, 255, 255, 0.15) !important;
+				color: rgba(255, 255, 255, 0.55);
+			}
+			body.hacker-page footer a {
+				color: rgba(255, 255, 255, 0.7) !important;
+			}
+			body.hacker-page footer a:hover {
+				color: rgba(0, 255, 100, 0.9) !important;
+			}
+			@media (max-width: 720px) {
+				body.hacker-page .hacker-content {
+					padding-top: calc(1em + 56px);
+				}
+			}

package/src/styles/about/keyboard.css

@@ -0,0 +1,112 @@
+/* About keyboard layer: virtual keyboard and helper interaction visuals. */
+			/* Help: 虚拟键盘 */
+			.hacker-vkeyboard {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+				font-size: 0.7rem;
+			}
+			.hacker-vkeyboard-row {
+				display: flex;
+				justify-content: center;
+				gap: 3px;
+			}
+			.hacker-vkey {
+				min-width: 24px;
+				height: 28px;
+				padding: 0 6px;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				background: rgba(255, 255, 255, 0.08);
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				border-radius: 4px;
+				color: rgba(255, 255, 255, 0.9);
+				font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+				cursor: pointer;
+				transition: all 0.1s ease;
+				user-select: none;
+			}
+			.hacker-vkey:hover {
+				background: rgba(255, 255, 255, 0.15);
+				border-color: rgba(255, 255, 255, 0.35);
+			}
+			.hacker-vkey.highlight {
+				background: rgba(0, 255, 100, 0.35);
+				border-color: rgba(0, 255, 100, 0.7);
+				box-shadow: 0 0 12px rgba(0, 255, 100, 0.3);
+			}
+			.hacker-vkey.wide { min-width: 36px; }
+			.hacker-vkey.backspace { min-width: 72px; }
+			.hacker-vkey.space { min-width: 120px; }
+			.hacker-vkey.acc { background: rgba(255, 140, 0, 0.25); border-color: rgba(255, 140, 0, 0.5); }
+			.hacker-vkey.acc:hover { background: rgba(255, 140, 0, 0.35); }
+			.hacker-vkeyboard-wrap {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 2rem;
+				align-items: stretch;
+			}
+			.hacker-vkeyboard-main {
+				flex: 1;
+				min-width: 0;
+			}
+			.hacker-vkeyboard-side {
+				display: flex;
+				flex-direction: column;
+				gap: 6px;
+				flex-shrink: 0;
+				min-width: 140px;
+			}
+			.hacker-vkeyboard-side-block {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+				margin-bottom: 4px;
+			}
+			.hacker-vkeyboard-side-row {
+				display: flex;
+				gap: 3px;
+			}
+			.hacker-vkeyboard-side-block .hacker-vkey {
+				flex: 1;
+				min-width: 0;
+			}
+			.hacker-vkey.nav-home { background: rgba(66, 133, 244, 0.3); border-color: rgba(66, 133, 244, 0.5); }
+			.hacker-vkey.nav-home:hover { background: rgba(66, 133, 244, 0.4); }
+			.hacker-vkey.nav-end { background: rgba(234, 67, 53, 0.25); border-color: rgba(234, 67, 53, 0.5); }
+			.hacker-vkey.nav-end:hover { background: rgba(234, 67, 53, 0.35); }
+			.hacker-vkeyboard-arrows-wrap {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-top: 6px;
+			}
+			.hacker-vkeyboard-arrows {
+				display: grid;
+				grid-template: ". u ." 1fr "l d r" 1fr / 1fr 1fr 1fr;
+				gap: 2px;
+				height: 56px;
+			}
+			.hacker-vkeyboard-arrows .arr-u { grid-area: u; }
+			.hacker-vkeyboard-arrows .arr-l { grid-area: l; }
+			.hacker-vkeyboard-arrows .arr-r { grid-area: r; }
+			.hacker-vkeyboard-arrows .arr-d { grid-area: d; }
+			.hacker-vkeyboard-arrows .hacker-vkey { width: 50px; height: 22px; font-size: 0.65rem; padding: 0; }
+			.hacker-vkeyboard-stats {
+				width: 100%;
+				margin-top: 0.2rem;
+				font-size: 0.75em;
+				color: rgba(255, 255, 255, 0.6);
+			}
+			.hacker-vkeyboard-stats-label {
+				font-size: 0.65rem;
+				color: rgba(255, 255, 255, 0.5);
+				letter-spacing: 0.1em;
+			}
+			.hacker-modal-body.hacker-modal-keyboard {
+				overflow: visible;
+			}
+			@media (max-width: 900px) {
+				.hacker-sidebar { display: none; }
+			}

package/src/styles/about/modals.css

@@ -0,0 +1,159 @@
+/* About modal layer: dialog shells and script explorer surfaces. */
+			/* ── 弹窗 (Anonymous 窗口) ── */
+			.hacker-modal-overlay {
+				position: fixed;
+				inset: 0;
+				z-index: 200;
+				background: rgba(0, 0, 0, 0.7);
+				backdrop-filter: blur(4px);
+				display: none;
+				align-items: center;
+				justify-content: center;
+				padding: 2rem;
+			}
+			.hacker-modal-overlay.open {
+				display: flex;
+			}
+			.hacker-modal {
+				width: min(420px, 100%);
+				max-height: 80vh;
+			}
+			.hacker-modal.hacker-modal-wide {
+				width: min(900px, calc(100vw - 2rem));
+				overflow: visible;
+			}
+			.hacker-modal-header {
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+				padding: 0.5rem 0.9rem;
+				background: #fff;
+				border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+			}
+			.hacker-modal-dots {
+				display: flex;
+				gap: 6px;
+			}
+			.hacker-modal-dots span {
+				width: 10px;
+				height: 10px;
+				border-radius: 50%;
+			}
+			.hacker-modal-dots span:nth-child(1) { background: #ff5f57; }
+			.hacker-modal-dots span:nth-child(2) { background: #febc2e; }
+			.hacker-modal-dots span:nth-child(3) { background: #28c840; }
+			.hacker-modal-title {
+				font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+				font-size: 0.75em;
+				color: #000;
+				font-weight: 600;
+				letter-spacing: 0.1em;
+				text-transform: uppercase;
+			}
+			.hacker-modal-close {
+				margin-left: auto;
+				width: 66px;
+				height: 66px;
+				border: none;
+				background: rgba(0, 0, 0, 0.06);
+				color: #000;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				opacity: 0.9;
+				border-radius: 10px;
+			}
+			.hacker-modal-close .hacker-modal-close-icon {
+				flex-shrink: 0;
+			}
+			.hacker-modal-close:hover {
+				opacity: 1;
+				background: rgba(0, 0, 0, 0.14);
+			}
+			.hacker-modal-body {
+				padding: 1rem 0.9rem 1.2rem;
+				color: rgba(255, 255, 255, 0.88);
+				font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+				font-size: 0.82rem;
+				line-height: 1.6;
+				max-height: 60vh;
+				overflow-y: auto;
+			}
+			.hacker-modal-body pre {
+				margin: 0;
+				white-space: pre-wrap;
+				word-break: break-word;
+			}
+			/* DL Data: Downloading 进度条 (Anonymous 风格) */
+			.hacker-modal-body.hacker-modal-download .modal-subtitle {
+				font-size: 0.9em;
+				color: rgba(255, 255, 255, 0.7);
+				margin-bottom: 1rem;
+			}
+			.hacker-modal-progress {
+				display: flex;
+				gap: 2px;
+				flex-wrap: wrap;
+				margin-top: 0.5rem;
+			}
+			.hacker-modal-progress span {
+				width: 10px;
+				height: 12px;
+				background: rgba(255, 255, 255, 0.2);
+				transition: background 0.12s ease;
+			}
+			.hacker-modal-progress span.filled {
+				background: rgba(255, 255, 255, 0.6);
+			}
+			/* All Scripts: 文件夹网格 */
+			.hacker-modal-scripts {
+				padding: 0.5rem 0;
+			}
+			.hacker-modal-scripts-path {
+				font-size: 0.9em;
+				color: rgba(255, 255, 255, 0.9);
+				letter-spacing: 0.05em;
+				margin-bottom: 1rem;
+				border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+				padding-bottom: 0.5rem;
+			}
+			.hacker-modal-scripts-grid {
+				display: grid;
+				grid-template-columns: repeat(5, 1fr);
+				gap: 1rem;
+			}
+			.hacker-script-folder {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 0.5rem;
+				padding: 0.6rem 0.4rem;
+				background: rgba(255, 255, 255, 0.05);
+				border: 1px solid rgba(255, 255, 255, 0.12);
+				border-radius: 6px;
+				color: rgba(255, 255, 255, 0.9);
+				text-decoration: none;
+				transition: all 0.15s ease;
+			}
+			.hacker-script-folder:hover {
+				background: rgba(255, 255, 255, 0.12);
+				border-color: rgba(0, 255, 100, 0.4);
+				box-shadow: 0 0 12px rgba(0, 255, 100, 0.15);
+			}
+			.hacker-script-folder-icon {
+				width: 32px;
+				height: 28px;
+				color: rgba(255, 255, 255, 0.7);
+			}
+			.hacker-script-folder-label {
+				font-size: 0.72rem;
+				text-align: center;
+				word-break: break-word;
+				line-height: 1.3;
+			}
+			@media (max-width: 600px) {
+				.hacker-modal-scripts-grid {
+					grid-template-columns: repeat(3, 1fr);
+				}
+			}