@anglefeint/astro-theme 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "license": "MIT",
@@ -11,6 +11,7 @@
     "src/config",
     "src/components",
     "src/layouts",
+    "src/scripts",
     "src/i18n",
     "src/styles",
     "src/assets/theme",
@@ -26,6 +27,7 @@
     ".": "./src/index.ts",
     "./components/*": "./src/components/*",
     "./layouts/*": "./src/layouts/*",
+    "./scripts/*": "./src/scripts/*",
     "./i18n/*": "./src/i18n/*",
     "./styles/*": "./src/styles/*",
     "./assets/*": "./src/assets/*",

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

@@ -1,6 +1,6 @@
 /**
  * About page content and runtime behavior configuration.
- * Used by src/pages/[lang]/about.astro and public/scripts/about-effects.js.
+ * Used by src/pages/[lang]/about.astro and packages/theme/src/scripts/about-effects.js.
  */
 export const ABOUT_CONFIG = {
 	metaLine: '$ profile booted | mode: builder',

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>
@@ -257,6 +196,9 @@ for (let i = 0; i < pts.length; i++) {
 				</a>
 			</nav>
 	<Fragment slot="body-end">
-		<script is:inline src="/scripts/blogpost-effects.js" defer></script>
+		<script>
+			import { initBlogpostEffects } from '../scripts/blogpost-effects.js';
+			initBlogpostEffects();
+		</script>
 	</Fragment>
 </AiShell>

package/src/layouts/shells/MatrixShell.astro

@@ -14,6 +14,11 @@ const { locale, title, description } = Astro.props as Props;
 <ThemeFrame locale={locale} title={title} description={description} bodyClass="page-home" mainClass="page-main home-content">
 	<link slot="head" rel="stylesheet" href="/styles/home-page.css" />
 	<canvas slot="body-start" id="matrix-bg" aria-hidden="true"></canvas>
-	<script slot="body-end" is:inline src="/scripts/home-matrix.js" defer></script>
+	<Fragment slot="body-end">
+		<script>
+			import { initHomeMatrix } from '../../scripts/home-matrix.js';
+			initHomeMatrix();
+		</script>
+	</Fragment>
 	<slot />
 </ThemeFrame>

package/{public → src}/scripts/about-effects.js

@@ -1,5 +1,4 @@
-			(function() {
-				function init() {
+export function initAboutEffects() {
 				var runtimeConfig = {};
 				var runtimeConfigEl = document.getElementById('hacker-runtime-config');
 				if (runtimeConfigEl && runtimeConfigEl.textContent) {
@@ -551,11 +550,4 @@
 						}, 1200);
 					});
 				}
-			}
-
-			if (document.readyState === 'loading') {
-				document.addEventListener('DOMContentLoaded', init);
-			} else {
-				init();
-			}
-		})();
+}

package/{public → src}/scripts/blogpost-effects.js

@@ -1,5 +1,4 @@
-				(function() {
-					function init() {
+export function initBlogpostEffects() {
 					var prefersReducedMotion = false;
 					try {
 						prefersReducedMotion = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
@@ -54,6 +53,118 @@
 							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;
@@ -972,11 +1083,4 @@
 						}, 1200);
 					});
 				}
-			}
-
-			if (document.readyState === 'loading') {
-				document.addEventListener('DOMContentLoaded', init);
-			} else {
-				init();
-			}
-		})();
+}

package/{public → src}/scripts/home-matrix.js

@@ -1,4 +1,4 @@
-(() => {
+export function initHomeMatrix() {
 	const chars =
 		'!"#$%&\'()*+,-./:;<=>?[\\]^_{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 	const matrixFont =
@@ -114,4 +114,4 @@
 		document.body.style.setProperty('--matrix-mx', `${event.clientX}px`);
 		document.body.style.setProperty('--matrix-my', `${event.clientY}px`);
 	});
-})();
+}