@anglefeint/astro-theme 0.1.3 → 0.1.5

package/public/styles/theme-cyber.css

@@ -0,0 +1,575 @@
+/* Cyber theme styles extracted from global.css */
+/* ========== Blade Runner 博客列表页 (body.cyber-page) ========== */
+body.cyber-page {
+  background: #090b12 !important;
+	background-image: none !important;
+	background-size: auto !important;
+	min-height: 100vh !important;
+  --chrome-bg: rgba(7, 13, 24, 0.72);
+  --chrome-border: rgba(112, 196, 255, 0.2);
+  --chrome-link: rgba(196, 226, 255, 0.92);
+  --chrome-link-hover: rgba(232, 206, 245, 0.98);
+  --chrome-active: rgba(228, 158, 224, 0.9);
+  --chrome-text-muted: rgba(156, 188, 224, 0.76);
+}
+body.cyber-page::before {
+  content: "";
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+  background: linear-gradient(
+    180deg,
+    #05070b 0%,
+    #090c14 20%,
+    #111a2d 52%,
+    #090c14 80%,
+    #05070b 100%
+  );
+}
+body.cyber-page::after {
+  content: "";
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+  background:
+    radial-gradient(
+      ellipse 82% 52% at 50% 18%,
+      rgba(110, 186, 255, 0.14) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 62% 42% at 82% 78%,
+      rgba(255, 132, 88, 0.06) 0%,
+      transparent 40%
+    ),
+    radial-gradient(
+      ellipse 52% 37% at 20% 62%,
+      rgba(226, 150, 214, 0.06) 0%,
+      transparent 45%
+    );
+  animation: cyber-fog-drift 20s ease-in-out infinite alternate;
+	pointer-events: none;
+}
+@keyframes cyber-fog-drift {
+  0% {
+    opacity: 0.7;
+    transform: translate(-2%, -1%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(2%, 1%);
+  }
+}
+body.cyber-page .cyber-rain {
+	position: fixed;
+	inset: 0;
+	pointer-events: none;
+  z-index: 6;
+	overflow: hidden;
+  contain: layout paint;
+}
+/* Blade Runner: 雨滴 - 白色中脏脏的感觉，非琥珀也非冷青 */
+body.cyber-page .cyber-rain-drop {
+	position: absolute;
+	top: -20px;
+  width: 6px;
+  height: 38px;
+  clip-path: polygon(1.5px 0, 4.5px 0, 6px 100%, 0 100%);
+  will-change: transform;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(210, 208, 198, 0.38) 40%,
+    rgba(195, 190, 182, 0.52) 70%,
+    transparent 100%
+  );
+	animation: cyber-rain-fall linear infinite;
+}
+@keyframes cyber-rain-fall {
+  to {
+    transform: translateY(100vh);
+  }
+}
+/* AI page: scanlines only on header and footer; fade on hover */
+body.cyber-page .cyber-spotlight {
+	position: fixed;
+  top: 0;
+  left: 0;
+  width: calc(hypot(100vw, 100vh) * 1.3 / 1.41421356);
+  height: calc(hypot(100vw, 100vh) * 1.3 / 1.41421356);
+  pointer-events: none;
+  z-index: 5;
+  contain: layout paint;
+}
+body.cyber-page .cyber-spotlight-tl {
+  position: absolute;
+	inset: 0;
+  transform-origin: 0 0;
+  background: conic-gradient(
+    from 180deg at 0 0,
+    transparent 0deg 302deg,
+    rgba(120, 192, 255, 0.18) 304deg,
+    rgba(96, 182, 255, 0.32) 307deg,
+    rgba(206, 234, 255, 0.92) 310deg,
+    rgba(96, 182, 255, 0.32) 313deg,
+    rgba(120, 192, 255, 0.18) 316deg,
+    transparent 319deg 360deg
+  );
+  animation: cyber-spotlight-sweep-tl 12s ease-in-out infinite;
+}
+body.cyber-page .cyber-spotlight-tr {
+  position: absolute;
+  inset: 0;
+  transform-origin: 100% 0;
+  background: conic-gradient(
+    from 180deg at 100% 0,
+    transparent 0deg 33deg,
+    rgba(120, 192, 255, 0.18) 35deg,
+    rgba(96, 182, 255, 0.32) 38deg,
+    rgba(206, 234, 255, 0.92) 41deg,
+    rgba(96, 182, 255, 0.32) 44deg,
+    rgba(120, 192, 255, 0.18) 47deg,
+    transparent 50deg 360deg
+  );
+  animation: cyber-spotlight-sweep-tr 24s ease-in-out infinite;
+  animation-delay: -1.5s;
+}
+@keyframes cyber-spotlight-sweep-tl {
+  0% {
+    transform: rotate(50deg);
+  }
+  50% {
+    transform: rotate(-50deg);
+  }
+  100% {
+    transform: rotate(50deg);
+  }
+}
+@keyframes cyber-spotlight-sweep-tr {
+  0%,
+  100% {
+    transform: rotate(-60deg);
+  }
+  50% {
+    transform: rotate(60deg);
+  }
+}
+body.cyber-page .cyber-flicker {
+  position: fixed;
+  inset: 0;
+  contain: layout paint;
+  background:
+    radial-gradient(
+      ellipse 25% 30% at 85% 20%,
+      rgba(255, 146, 96, 0.18) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 20% 24% at 20% 68%,
+      rgba(96, 182, 255, 0.28) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 28% 35% at 70% 85%,
+      rgba(224, 146, 212, 0.2) 0%,
+      transparent 55%
+    );
+  animation: cyber-neon-flicker-glow 6s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+@keyframes cyber-neon-flicker-glow {
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  75% {
+    opacity: 0.95;
+  }
+}
+body.cyber-page .cyber-haze {
+  position: fixed;
+  inset: 0;
+  contain: layout paint;
+  background:
+    radial-gradient(
+      ellipse 100% 80% at 50% 50%,
+      rgba(52, 84, 128, 0.08) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 40% 30% at 30% 30%,
+      rgba(224, 144, 208, 0.05) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 35% 25% at 70% 70%,
+      rgba(255, 134, 92, 0.04) 0%,
+      transparent 50%
+    );
+  animation: cyber-haze-drift 20s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+@keyframes cyber-haze-drift {
+  0% {
+    opacity: 0.5;
+    transform: translate(3%, 2%) scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-3%, -2%) scale(0.95);
+  }
+}
+body.cyber-page .cyber-vignette {
+  position: fixed;
+  inset: 0;
+  contain: layout paint;
+  background: radial-gradient(
+    ellipse 80% 80% at 50% 50%,
+    transparent 40%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+	pointer-events: none;
+	z-index: 3;
+}
+body.cyber-page .cyber-rain-drop--thin {
+  width: 4px;
+  height: 28px;
+  clip-path: polygon(0.5px 0, 3.5px 0, 4px 100%, 0 100%);
+}
+body.cyber-page .cyber-rain-drop--fog {
+  opacity: 0.15;
+  filter: blur(0.5px);
+}
+body.cyber-page .cyber-rain-drop--skew {
+  animation-name: cyber-rain-fall-skew;
+}
+@keyframes cyber-rain-fall-skew {
+  to {
+    transform: skewX(-3deg) translateY(100vh);
+  }
+}
+body.cyber-page .cyber-dust {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  overflow: hidden;
+  contain: layout paint;
+}
+body.cyber-page .cyber-dust-particle {
+  position: absolute;
+  border-radius: 50%;
+  will-change: transform;
+  background: rgba(176, 216, 248, 0.68);
+  box-shadow:
+    0 0 10px rgba(126, 196, 255, 0.35),
+    0 0 20px rgba(214, 146, 210, 0.16);
+  animation: cyber-dust-float linear infinite;
+}
+@keyframes cyber-dust-float {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.7;
+  }
+  25% {
+    transform: translate(15px, -8px) scale(1.1);
+    opacity: 0.95;
+  }
+  50% {
+    transform: translate(-10px, -20px) scale(0.9);
+    opacity: 0.8;
+  }
+  75% {
+    transform: translate(8px, -15px) scale(1.05);
+    opacity: 0.9;
+  }
+  100% {
+    transform: translate(0, -30px) scale(1);
+    opacity: 0.7;
+  }
+}
+body.cyber-page header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 6;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+body.cyber-page main {
+	position: relative;
+  z-index: 5;
+	width: 960px;
+	padding-top: calc(3em + 56px);
+}
+body.cyber-page .title,
+body.cyber-page .date {
+  color: rgba(202, 228, 255, 0.93);
+}
+body.cyber-page .date {
+  color: rgba(150, 186, 228, 0.68);
+}
+body.cyber-page ul {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2rem;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+body.cyber-page ul li {
+	width: calc(50% - 1rem);
+}
+body.cyber-page ul li * {
+	text-decoration: none;
+}
+body.cyber-page ul li:first-child {
+	width: 100%;
+	margin-bottom: 1rem;
+	text-align: center;
+}
+body.cyber-page ul li:first-child img {
+  width: 100%;
+}
+body.cyber-page ul li:first-child .title {
+  font-size: 2.369rem;
+}
+body.cyber-page ul li a {
+	display: block;
+	position: relative;
+	padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid rgba(116, 194, 255, 0.24);
+  box-shadow:
+    0 0 6px rgba(100, 182, 255, 0.1),
+    0 0 16px rgba(88, 164, 240, 0.07),
+    inset 0 0 8px rgba(224, 146, 210, 0.03);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.3s;
+}
+body.cyber-page ul li a:hover {
+  border-color: rgba(124, 204, 255, 0.62);
+  box-shadow:
+    0 0 10px rgba(112, 196, 255, 0.3),
+    0 0 24px rgba(214, 146, 210, 0.2),
+    inset 0 0 18px rgba(136, 204, 255, 0.08);
+  animation: cyber-neon-flicker 0.45s ease-in-out infinite;
+}
+@keyframes cyber-neon-flicker {
+  0%,
+  100% {
+    box-shadow:
+      0 0 10px rgba(112, 196, 255, 0.3),
+      0 0 24px rgba(214, 146, 210, 0.2),
+      inset 0 0 18px rgba(136, 204, 255, 0.08);
+  }
+  50% {
+    box-shadow:
+      0 0 7px rgba(112, 196, 255, 0.22),
+      0 0 15px rgba(214, 146, 210, 0.14),
+      inset 0 0 10px rgba(136, 204, 255, 0.06);
+  }
+}
+body.cyber-page ul li a:hover .title {
+  animation: cyber-glitch 0.3s ease-in-out;
+  color: rgb(212, 236, 255);
+  text-shadow:
+    0 0 10px rgba(120, 200, 255, 0.62),
+    0 0 22px rgba(222, 150, 214, 0.3),
+    0 0 34px rgba(90, 170, 240, 0.2);
+}
+@keyframes cyber-glitch {
+  0% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(120, 200, 255, 0.55);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+    text-shadow:
+      2px 0 rgba(224, 150, 214, 0.55),
+      -2px 0 rgba(120, 202, 255, 0.5);
+  }
+  40% {
+    transform: translate(2px, -2px);
+    text-shadow:
+      -2px 0 rgba(120, 202, 255, 0.5),
+      2px 0 rgba(224, 150, 214, 0.55);
+  }
+  60% {
+    transform: translate(-1px, 1px);
+  }
+  80% {
+    transform: translate(1px, -1px);
+  }
+  100% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(120, 200, 255, 0.55);
+  }
+}
+body.cyber-page ul li a:hover .date {
+  color: rgba(196, 226, 255, 0.95);
+  text-shadow:
+    0 0 10px rgba(120, 194, 255, 0.45),
+    0 0 20px rgba(218, 148, 210, 0.26);
+}
+body.cyber-page .img-wrapper {
+	position: relative;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+	overflow: hidden;
+}
+/* 水平扫线 - 日式樱花+赛博蓝 */
+body.cyber-page .img-wrapper::before {
+  content: "";
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: -20px;
+  height: 10px;
+  z-index: 3;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 182, 228, 0.74),
+    rgba(234, 148, 214, 0.88),
+    rgba(170, 200, 255, 0.9),
+    rgba(234, 148, 214, 0.88),
+    rgba(255, 182, 228, 0.74),
+    transparent
+  );
+  box-shadow:
+    0 0 24px rgba(232, 150, 214, 0.62),
+    0 0 48px rgba(110, 182, 255, 0.32);
+  pointer-events: none;
+  transition: top 1.2s linear;
+}
+body.cyber-page ul li a:hover .img-wrapper::before {
+  top: 100%;
+}
+body.cyber-page .img-wrapper::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+	z-index: 2;
+  box-shadow:
+    inset 0 0 25px rgba(108, 190, 255, 0.16),
+    inset 0 0 50px rgba(224, 148, 212, 0.1);
+	pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+body.cyber-page ul li a:hover .img-wrapper::after {
+  opacity: 1;
+}
+body.cyber-page ul li img {
+	display: block;
+	width: 100%;
+	height: auto;
+  filter: saturate(0.75) contrast(1.05) brightness(0.88) sepia(0.15)
+    hue-rotate(-2deg);
+  transition:
+    filter 0.3s,
+    box-shadow 0.3s;
+}
+body.cyber-page ul li a:hover img {
+  filter: saturate(0.88) contrast(1.11) brightness(0.94) sepia(0.08)
+    hue-rotate(-6deg);
+  box-shadow:
+    0 0 15px rgba(116, 194, 255, 0.22),
+    0 0 30px rgba(224, 148, 212, 0.2);
+}
+body.cyber-page .title {
+  margin: 0;
+  line-height: 1;
+  transition:
+    color 0.2s,
+    text-shadow 0.2s;
+}
+body.cyber-page .date {
+  margin: 0;
+  transition:
+    color 0.2s,
+    text-shadow 0.2s;
+}
+/* BR2049: Las Vegas/baseline 橙色光晕点缀 */
+body.cyber-page footer {
+  box-shadow:
+    0 -4px 42px rgba(104, 182, 255, 0.14),
+    0 -4px 36px rgba(224, 146, 210, 0.16);
+}
+/* BR2049: 页面加载时轻微 glitch，可察觉但不抢眼 */
+body.cyber-page .cyber-load-glitch {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    rgba(226, 146, 210, 0.1) 0%,
+    transparent 45%,
+    transparent 55%,
+    rgba(104, 182, 255, 0.12) 100%
+  );
+  mix-blend-mode: screen;
+  opacity: 0;
+  animation: cyber-load-glitch 12s ease-out 0.5s infinite;
+}
+@keyframes cyber-load-glitch {
+  /* 每 8 秒一周期：前 6.5s 静默，后 1.5s 执行 glitch */
+  0%,
+  81%,
+  100% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  83% {
+    opacity: 1;
+    transform: translateX(-3px);
+  }
+  86% {
+    opacity: 0.9;
+    transform: translateX(3px);
+  }
+  90% {
+    opacity: 0.5;
+    transform: translateX(-2px);
+  }
+}
+@media (max-width: 720px) {
+  body.cyber-page main {
+    padding-top: calc(1em + 56px);
+  }
+  body.cyber-page ul {
+    gap: 0.5em;
+  }
+  body.cyber-page ul li {
+    width: 100%;
+    text-align: center;
+  }
+  body.cyber-page ul li:first-child {
+    margin-bottom: 0;
+  }
+  body.cyber-page ul li:first-child .title {
+    font-size: 1.563em;
+  }
+  /* 移动端减少特效，减轻 GPU 压力 */
+  body.cyber-page .cyber-rain-drop:nth-child(2n) {
+    display: none;
+  }
+  body.cyber-page .cyber-dust-particle:nth-child(2n) {
+    display: none;
+  }
+  body.cyber-page .cyber-flicker {
+    animation-duration: 8s;
+  }
+}

package/src/cli-new-page.mjs

@@ -65,7 +65,7 @@ function templateFor({ slug, theme }) {
 	return `---
 import type { GetStaticPaths } from 'astro';
 import ${layoutName} from '@anglefeint/astro-theme/layouts/${layoutName}.astro';
-import { SUPPORTED_LOCALES } from '../../i18n/config';
+import { SUPPORTED_LOCALES } from '@anglefeint/astro-theme/i18n/config';
 
 export const getStaticPaths = (() => SUPPORTED_LOCALES.map((lang) => ({ params: { lang } }))) satisfies GetStaticPaths;
 

package/src/cli-new-post.mjs

@@ -1,8 +1,8 @@
 import { mkdir, writeFile, access, readdir } from 'node:fs/promises';
 import { constants } from 'node:fs';
 import path from 'node:path';
+import { SUPPORTED_LOCALES } from './i18n/locales.mjs';
 
-const SUPPORTED_LOCALES = ['en', 'ja', 'ko', 'es', 'zh'];
 const CONTENT_ROOT = path.resolve(process.cwd(), 'src/content/blog');
 const DEFAULT_COVERS_ROOT = path.resolve(process.cwd(), 'src/assets/blog/default-covers');
 

package/src/config/about.ts

@@ -5,21 +5,21 @@
 export const ABOUT_CONFIG = {
 	metaLine: '$ profile booted | mode: builder',
 	sections: {
-		who: 'Write a short introduction about yourself, your background, and what you care about.',
-		what: 'Describe what you build, your core skills, and the kind of projects you want to be known for.',
+		who: 'I build digital products that balance visual narrative, writing clarity, and engineering reliability.',
+		what: 'I focus on frontend architecture, content systems, and multilingual publishing workflows for modern web teams.',
 		ethos: [
-			'Add 3-4 principles that guide how you work.',
-			'Use concise lines that are easy to scan.',
-			'Focus on practical values your readers can understand quickly.',
-			'Keep wording personal, clear, and honest.',
+			'Design for clarity first, then add style with purpose.',
+			'Prefer maintainable systems over one-off visual hacks.',
+			'Ship in small iterations and improve from real feedback.',
+			'Keep communication direct, specific, and accountable.',
 		],
-		now: 'Share what you are currently building or learning.',
-		contactLead: 'Add a short collaboration note (for example: open to freelance, consulting, or full-time roles).',
-		signature: '> replace with your own signature',
+		now: 'Currently exploring AI-assisted content workflows and performance-aware visual systems for static-first sites.',
+		contactLead: 'Open to collaboration on design-heavy developer tools, documentation systems, and publication platforms.',
+		signature: '> Signal received.',
 	},
 	contact: {
-		email: 'hello@example.com',
-		githubUrl: 'https://github.com',
+		email: 'voidtem@users.noreply.github.com',
+		githubUrl: 'https://github.com/voidtem',
 		githubLabel: 'GitHub',
 	},
 	sidebar: {

package/src/i18n/config.ts

@@ -1,7 +1,11 @@
-export const SUPPORTED_LOCALES = ['en', 'ja', 'ko', 'es', 'zh'] as const;
-export type Locale = (typeof SUPPORTED_LOCALES)[number];
-
-export const DEFAULT_LOCALE: Locale = 'en';
+import {
+	SUPPORTED_LOCALES as SUPPORTED_LOCALES_RUNTIME,
+	DEFAULT_LOCALE as DEFAULT_LOCALE_RUNTIME,
+} from './locales.mjs';
+
+export type Locale = 'en' | 'ja' | 'ko' | 'es' | 'zh';
+export const SUPPORTED_LOCALES = SUPPORTED_LOCALES_RUNTIME as readonly Locale[];
+export const DEFAULT_LOCALE: Locale = DEFAULT_LOCALE_RUNTIME as Locale;
 
 export const LOCALE_LABELS: Record<Locale, string> = {
 	en: 'English',

package/src/i18n/locales.mjs

@@ -0,0 +1,3 @@
+export const SUPPORTED_LOCALES = ['en', 'ja', 'ko', 'es', 'zh'];
+export const DEFAULT_LOCALE = 'en';
+

package/src/layouts/shells/AiShell.astro

@@ -51,6 +51,7 @@ const {
 	scanlines
 	localeHrefs={localeHrefs}
 >
+	<link slot="head" rel="stylesheet" href="/styles/theme-ai.css" />
 	<slot name="head" slot="head" />
 	<slot name="body-start" slot="body-start" />
 	<slot />

package/src/layouts/shells/CyberShell.astro

@@ -13,6 +13,7 @@ const { locale, title, description, localeHrefs } = Astro.props as Props;
 ---
 
 <ThemeFrame locale={locale} title={title} description={description} bodyClass="cyber-page" mainClass="page-main cyber-content" localeHrefs={localeHrefs}>
+	<link slot="head" rel="stylesheet" href="/styles/theme-cyber.css" />
 	<Fragment slot="body-start">
 		<div class="cyber-load-glitch" aria-hidden="true"></div>
 		<div class="cyber-spotlight" aria-hidden="true">