@anglefeint/astro-theme 0.1.2 → 0.1.4

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/config/about.ts

@@ -0,0 +1,85 @@
+/**
+ * About page content and runtime behavior configuration.
+ * Used by src/pages/[lang]/about.astro and public/scripts/about-effects.js.
+ */
+export const ABOUT_CONFIG = {
+	metaLine: '$ profile booted | mode: builder',
+	sections: {
+		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: [
+			'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: '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: 'voidtem@users.noreply.github.com',
+		githubUrl: 'https://github.com/voidtem',
+		githubLabel: 'GitHub',
+	},
+	sidebar: {
+		dlData: 'DL Data',
+		ai: 'AI',
+		decryptor: 'Decryptor',
+		help: 'Help',
+		allScripts: 'All Scripts',
+	},
+	scriptsPath: '/root/bash/scripts',
+	modals: {
+		dlData: {
+			title: 'Downloading...',
+			subtitle: 'Critical Data',
+		},
+		ai: {
+			title: 'AI',
+			lines: [
+				'~ $ model --status',
+				'',
+				'inference: stable',
+				'context: 8k tokens',
+				'latency: < 200ms',
+				'',
+				'>> system online',
+			],
+		},
+		decryptor: {
+			title: 'Password Decryptor',
+			header: 'Calculating Hashes',
+			keysLabel: 'keys tested',
+			currentPassphraseLabel: 'Current passphrase:',
+			masterKeyLabel: 'Master key',
+			transientKeyLabel: 'Transient key',
+		},
+		help: {
+			title: 'Help',
+			statsLabel: 'Stats & Achievements',
+			typedPrefix: 'You typed:',
+			typedSuffix: 'characters',
+		},
+		allScripts: {
+			title: '/root/bash/scripts',
+		},
+	},
+	effects: {
+		backgroundLines: [
+			'~ $ ls -la',
+			'total 42',
+			'drwxr-xr-x  12 void  staff   384  Jan 12  about  blog  projects',
+			'drwxr-xr-x   8 void  staff   256  Jan 11  .config  .ssh  keys',
+			'-rw-r--r--   1 void  staff  2048  Jan 10  README.md  .env.gpg',
+			'-rwxr-xr-x   1 void  staff   512  Jan  9  deploy.sh  hack',
+			'~ $ cat .motd',
+			'>> welcome to the void | access granted',
+		],
+		scrollToasts: {
+			p30: 'context parsed',
+			p60: 'inference stable',
+			p90: 'output finalized',
+		},
+	},
+} as const;

package/src/config/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Central config. Re-export all config modules for convenience.
+ */
+export * from './site';
+export * from './social';
+export * from './theme';
+export * from './about';

package/src/config/site.ts

@@ -0,0 +1,23 @@
+import type { Locale } from '../i18n/config';
+
+/**
+ * Site identity config. Override via environment variables:
+ *   PUBLIC_SITE_URL, PUBLIC_SITE_TITLE, PUBLIC_SITE_AUTHOR, PUBLIC_SITE_DESCRIPTION, PUBLIC_SITE_TAGLINE
+ */
+const env = import.meta.env;
+
+export const SITE_TITLE = (env.PUBLIC_SITE_TITLE as string | undefined) ?? 'My Blog';
+export const SITE_DESCRIPTION =
+	(env.PUBLIC_SITE_DESCRIPTION as string | undefined) ??
+	'Cinematic web interfaces, AI-era engineering notes, and system architecture essays.';
+export const SITE_URL = (env.PUBLIC_SITE_URL as string | undefined) ?? (env.SITE as string | undefined) ?? 'https://example.com';
+export const SITE_AUTHOR = (env.PUBLIC_SITE_AUTHOR as string | undefined) ?? 'Your Name';
+export const SITE_TAGLINE = (env.PUBLIC_SITE_TAGLINE as string | undefined) ?? 'Built with Astro.';
+
+export const SITE_HERO_BY_LOCALE: Record<Locale, string> = {
+	en: 'Write a short introduction for your site and what readers can expect from your posts.',
+	ja: 'このサイトの紹介文と、読者がどんな記事を期待できるかを書いてください。',
+	ko: '사이트 소개와 방문자가 어떤 글을 기대할 수 있는지 간단히 작성하세요.',
+	es: 'Escribe una breve presentación del sitio y qué tipo de contenido encontrarán tus lectores.',
+	zh: '在这里写一段站点简介，并告诉读者你将发布什么类型的内容。',
+};

package/src/config/social.ts

@@ -0,0 +1,15 @@
+/**
+ * Social links shown in Header + Footer. Set to [] to hide.
+ * Replace with your own links when using as a theme.
+ */
+export interface SocialLink {
+	href: string;
+	label: string;
+	/** Optional: 'mastodon' | 'twitter' | 'github' for built-in icons, or omit for text-only */
+	icon?: 'mastodon' | 'twitter' | 'github';
+}
+
+export const SOCIAL_LINKS: SocialLink[] = [
+	// Replace with your links when using as a theme.
+	// Keep empty to hide social icons by default.
+];

package/src/config/theme.ts

@@ -0,0 +1,11 @@
+/**
+ * Theme behavior config.
+ */
+export const THEME = {
+	/** Posts per page on blog list */
+	BLOG_PAGE_SIZE: 9,
+	/** Number of latest posts shown on home page */
+	HOME_LATEST_COUNT: 3,
+	/** Whether to enable the About page (disable to hide from nav/routes if needed) */
+	ENABLE_ABOUT_PAGE: true,
+} as const;