@anglefeint/astro-theme 0.1.11 → 0.1.13

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
+  "keywords": [
+    "astro",
+    "astro-theme",
+    "blog",
+    "portfolio",
+    "cyberpunk",
+    "hacker",
+    "matrix"
+  ],
   "license": "MIT",
   "files": [
     "src/index.ts",

package/public/styles/theme-ai.css

@@ -216,12 +216,13 @@ body.ai-page::-webkit-scrollbar-thumb {
     opacity: 0.7;
   }
 }
-.ai-network {
+.ai-network-canvas {
   position: absolute;
   inset: -8%;
   width: 116%;
   height: 116%;
   opacity: 1;
+  pointer-events: none;
   filter: brightness(1.28) saturate(1.08);
   animation: ai-drift 25s ease-in-out infinite;
 }
@@ -240,57 +241,6 @@ body.ai-page::-webkit-scrollbar-thumb {
     transform: translate(0.5%, -0.8%) scale(1.005);
   }
 }
-.ai-network .ai-dots circle {
-  transform-origin: center;
-  animation:
-    ai-dot-float 8s ease-in-out infinite,
-    ai-dot-breathe 5s ease-in-out infinite;
-}
-.ai-network .ai-dots circle:nth-child(odd) {
-  animation-delay: -3s;
-}
-.ai-network .ai-dots circle:nth-child(3n) {
-  animation-delay: -5s;
-}
-.ai-network .ai-dots circle:nth-child(5n) {
-  animation-duration: 10s;
-}
-.ai-network .ai-dots circle:nth-child(4n) {
-  animation-delay: -1s;
-}
-.ai-network .ai-lines line {
-  stroke-dasharray: 6 12;
-  animation: ai-line-pulse 4s linear infinite;
-}
-.ai-network .ai-lines line:nth-child(odd) {
-  animation-delay: -2s;
-}
-@keyframes ai-line-pulse {
-  to {
-    stroke-dashoffset: -18;
-  }
-}
-@keyframes ai-dot-float {
-  0%,
-  100% {
-    transform: translate(0, 0);
-  }
-  33% {
-    transform: translate(1.5px, -2px);
-  }
-  66% {
-    transform: translate(-1px, 1.5px);
-  }
-}
-@keyframes ai-dot-breathe {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.75;
-  }
-}
 body.ai-page .ai-content,
 body.ai-page footer {
   position: relative;

package/src/components/shared/CommonFooter.astro

@@ -15,10 +15,11 @@ 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">
-			<SocialMenu links={SOCIAL_LINKS} />
-		</div>
+	<div class="social-links">
+		<SocialMenu links={SOCIAL_LINKS} />
+	</div>
+	{import.meta.env.DEV && SOCIAL_LINKS.length === 0 && (
+		<p class="social-hint">Configure social links in <code>src/site.config.ts</code></p>
 	)}
 	{scanlines && <div class="ai-scanlines" aria-hidden="true"></div>}
 </footer>
@@ -36,6 +37,16 @@ const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
 		gap: 1em;
 		margin-top: 1em;
 	}
+	.social-hint {
+		margin: 0.6rem 0 0;
+		font-size: 0.78rem;
+		color: var(--chrome-text-muted, rgb(var(--text-muted)));
+		opacity: 0.82;
+	}
+	.social-hint code {
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.75rem;
+	}
 	.social-links a {
 		text-decoration: none;
 		color: var(--chrome-text-muted, rgb(var(--text-muted)));

package/src/components/shared/CommonHeader.astro

@@ -151,53 +151,17 @@ const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
 		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;
+		--lang-switcher-border: rgba(132, 214, 255, 0.2);
+		--lang-switcher-bg: rgba(6, 16, 30, 0.35);
+		--lang-label-color: rgba(190, 226, 248, 0.78);
+		--lang-select-arrow: rgba(204, 236, 252, 0.82);
+		--lang-select-bg: rgba(9, 22, 40, 0.68);
+		--lang-select-border: rgba(132, 214, 255, 0.2);
+		--lang-select-text: rgba(204, 236, 252, 0.86);
+		--lang-select-focus-border: rgba(132, 214, 255, 0.5);
+		--lang-select-focus-ring: rgba(98, 180, 228, 0.18);
+		--lang-select-option-text: #ccecfb;
+		--lang-select-option-bg: #0b1c32;
 	}
 	.nav-status {
 		display: none;

package/src/components/shared/LangSwitcher.astro

@@ -33,3 +33,60 @@ const { label, currentLocale, options } = Astro.props as Props;
 		}
 	</select>
 </div>
+
+<style>
+	.lang-switcher {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.2rem 0.4rem;
+		margin-right: 0.1rem;
+		border: 1px solid var(--lang-switcher-border, rgba(132, 214, 255, 0.2));
+		border-radius: 999px;
+		background: var(--lang-switcher-bg, 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: var(--lang-label-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%, var(--lang-select-arrow, rgba(204, 236, 252, 0.82)) 50%) calc(100% - 0.9rem) 50% /
+				0.35rem 0.35rem no-repeat,
+			linear-gradient(135deg, var(--lang-select-arrow, rgba(204, 236, 252, 0.82)) 50%, transparent 50%) calc(100% - 0.7rem) 50% /
+				0.35rem 0.35rem no-repeat,
+			var(--lang-select-bg, rgba(9, 22, 40, 0.68));
+		border: 1px solid var(--lang-select-border, 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: var(--lang-select-text, rgba(204, 236, 252, 0.86));
+		cursor: pointer;
+	}
+	.lang-select:focus {
+		outline: none;
+		border-color: var(--lang-select-focus-border, rgba(132, 214, 255, 0.5));
+		box-shadow: 0 0 0 2px var(--lang-select-focus-ring, rgba(98, 180, 228, 0.18));
+	}
+	.lang-select option {
+		color: var(--lang-select-option-text, #ccecfb);
+		background: var(--lang-select-option-bg, #0b1c32);
+	}
+	@media (max-width: 720px) {
+		.lang-switcher {
+			margin-right: 0;
+		}
+	}
+</style>

package/src/components/shared/SocialMenu.astro

@@ -5,16 +5,44 @@ import Icon from './Icon.astro';
 interface Props {
 	links?: SocialLink[];
 	iconSize?: number;
+	showPlaceholdersWhenEmpty?: boolean;
 }
 
-const { links = SOCIAL_LINKS, iconSize = 32 } = Astro.props as Props;
+const {
+	links = SOCIAL_LINKS,
+	iconSize = 32,
+	showPlaceholdersWhenEmpty = true,
+} = Astro.props as Props;
+const placeholderLinks: SocialLink[] = [
+	{ href: '', label: 'Mastodon', icon: 'mastodon' },
+	{ href: '', label: 'Twitter', icon: 'twitter' },
+	{ href: '', label: 'GitHub', icon: 'github' },
+];
+const resolvedLinks = links.length > 0 || !showPlaceholdersWhenEmpty ? links : placeholderLinks;
 ---
 
 {
-	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>
+	resolvedLinks.map((link) => (
+		links.length > 0 ? (
+			<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>
+		) : (
+			<span class="social-placeholder" aria-hidden="true" title="Configure social links in src/site.config.ts">
+				{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
+			</span>
+		)
 	))
 }
+
+<style>
+	.social-placeholder {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.45;
+		filter: saturate(0.7);
+		cursor: default;
+	}
+</style>

package/src/layouts/BlogPost.astro

@@ -48,29 +48,6 @@ 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 w = 1200; const h = 800;
-const pts: { x: number; y: number; r: number; depth: number }[] = [];
-const pad = 50;
-for (let i = 0; i < 58; i++) {
-	const x = pad + Math.random() * (w - pad * 2);
-	const y = pad + Math.random() * (h - pad * 2);
-	const depth = Math.random();
-	pts.push({
-		x, y,
-		r: 1.1 + depth * 1.3,
-		depth,
-	});
-}
-const connectDist = 138;
-const edges: [number, number][] = [];
-for (let i = 0; i < pts.length; i++) {
-	for (let j = i + 1; j < pts.length; j++) {
-		const d = Math.hypot(pts[i].x - pts[j].x, pts[i].y - pts[j].y);
-		if (d < connectDist) edges.push([i, j]);
-	}
-}
 ---
 
 <AiShell
@@ -99,45 +76,7 @@ for (let i = 0; i < pts.length; i++) {
 					<span class="ai-particle" style={`--x: ${20 + (i * 7) % 60}%; --y: ${10 + (i * 11) % 70}%; --d: ${3 + (i % 4)}s`}></span>
 				))}
 			</div>
-			<svg class="ai-network" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
-					<defs>
-						<linearGradient id="ai-line-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-							<stop offset="0%" stop-color="rgba(180,235,255,0.26)" />
-							<stop offset="50%" stop-color="rgba(236,252,255,0.74)" />
-							<stop offset="100%" stop-color="rgba(180,235,255,0.26)" />
-						</linearGradient>
-						<filter id="ai-dot-glow">
-							<feGaussianBlur stdDeviation="2.2" result="blur" />
-							<feMerge>
-								<feMergeNode in="blur" />
-								<feMergeNode in="SourceGraphic" />
-						</feMerge>
-					</filter>
-				</defs>
-				<g class="ai-lines">
-					{edges.map(([i, j]) => (
-						<line
-							x1={pts[i].x}
-							y1={pts[i].y}
-							x2={pts[j].x}
-							y2={pts[j].y}
-							stroke="url(#ai-line-grad)"
-							stroke-width="0.4"
-						/>
-					))}
-				</g>
-				<g class="ai-dots">
-					{pts.map((p) => (
-						<circle
-								cx={p.x}
-								cy={p.y}
-								r={p.r}
-								fill={`rgba(232,255,255,${0.72 + p.depth * 0.48})`}
-								filter="url(#ai-dot-glow)"
-							/>
-						))}
-				</g>
-			</svg>
+			<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>

package/src/scripts/blogpost-effects.js

@@ -53,6 +53,118 @@ export function initBlogpostEffects() {
 							window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
 						});
 					}
+					function initNetworkCanvas() {
+						var canvas = document.querySelector('.ai-network-canvas');
+						if (!canvas) return;
+						var ctx = canvas.getContext('2d');
+						if (!ctx) return;
+						var MAX_DPR = 2;
+						var rafId = 0;
+						var start = 0;
+						var last = 0;
+						var fps = prefersReducedMotion ? 1 : 30;
+						var frameMs = 1000 / fps;
+						var points = [];
+						var edges = [];
+
+						function seededRandom(seed) {
+							var s = seed >>> 0;
+							return function() {
+								s = (1664525 * s + 1013904223) >>> 0;
+								return s / 4294967296;
+							};
+						}
+
+						function resize() {
+							var rect = canvas.getBoundingClientRect();
+							var dpr = Math.min(MAX_DPR, window.devicePixelRatio || 1);
+							canvas.width = Math.max(2, Math.round(rect.width * dpr));
+							canvas.height = Math.max(2, Math.round(rect.height * dpr));
+							ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+							var w = rect.width;
+							var h = rect.height;
+							var rand = seededRandom(0xA13F09);
+							var count = Math.max(20, Math.min(36, Math.round((w * h) / 32000)));
+							var connectDist = Math.min(160, Math.max(90, Math.min(w, h) * 0.18));
+							var maxEdges = 120;
+							points = [];
+							for (var i = 0; i < count; i++) {
+								points.push({
+									x: 20 + rand() * Math.max(20, w - 40),
+									y: 20 + rand() * Math.max(20, h - 40),
+									r: 1 + rand() * 1.6,
+									p: rand() * Math.PI * 2,
+									a: 0.5 + rand() * 0.5,
+								});
+							}
+							edges = [];
+							for (var a = 0; a < points.length; a++) {
+								for (var b = a + 1; b < points.length; b++) {
+									if (edges.length >= maxEdges) break;
+									var dx = points[a].x - points[b].x;
+									var dy = points[a].y - points[b].y;
+									var d = Math.sqrt(dx * dx + dy * dy);
+									if (d < connectDist) edges.push([a, b, d / connectDist]);
+								}
+								if (edges.length >= maxEdges) break;
+							}
+						}
+
+						function render(ts) {
+							if (!start) start = ts;
+							if (!prefersReducedMotion && ts - last < frameMs) {
+								rafId = requestAnimationFrame(render);
+								return;
+							}
+							last = ts;
+							var t = (ts - start) * 0.001;
+							var w = canvas.clientWidth;
+							var h = canvas.clientHeight;
+							ctx.clearRect(0, 0, w, h);
+
+							for (var i = 0; i < edges.length; i++) {
+								var e = edges[i];
+								var p1 = points[e[0]];
+								var p2 = points[e[1]];
+								var alpha = (1 - e[2]) * (prefersReducedMotion ? 0.2 : (0.18 + 0.06 * Math.sin(t * 0.9 + i)));
+								ctx.strokeStyle = 'rgba(190, 236, 255,' + Math.max(0.06, alpha).toFixed(3) + ')';
+								ctx.lineWidth = 0.6;
+								ctx.beginPath();
+								ctx.moveTo(p1.x, p1.y);
+								ctx.lineTo(p2.x, p2.y);
+								ctx.stroke();
+							}
+
+							for (var j = 0; j < points.length; j++) {
+								var p = points[j];
+								var pulse = prefersReducedMotion ? 1 : (1 + 0.18 * Math.sin(t * 1.5 + p.p));
+								ctx.fillStyle = 'rgba(228, 251, 255,' + (0.58 * p.a).toFixed(3) + ')';
+								ctx.beginPath();
+								ctx.arc(p.x, p.y, p.r * pulse, 0, Math.PI * 2);
+								ctx.fill();
+							}
+
+							if (!prefersReducedMotion) rafId = requestAnimationFrame(render);
+						}
+
+						function stop() {
+							if (!rafId) return;
+							cancelAnimationFrame(rafId);
+							rafId = 0;
+						}
+
+						resize();
+						render(performance.now());
+						window.addEventListener('resize', resize, { passive: true });
+						document.addEventListener('visibilitychange', function() {
+							if (prefersReducedMotion) return;
+							if (document.hidden) stop();
+							else if (!rafId) rafId = requestAnimationFrame(render);
+						});
+						window.addEventListener('beforeunload', stop, { once: true });
+					}
+					initNetworkCanvas();
 					function initHeroCanvas() {
 					var shell = document.querySelector('.hero-shell');
 					if (!shell) return;