@anglefeint/astro-theme 0.1.18 → 0.1.20

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.18",
+  "version": "0.1.20",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [

package/src/scripts/blogpost/hero-canvas.js

@@ -4,13 +4,17 @@ export function initHeroCanvas(prefersReducedMotion) {
 
   var canvas = shell.querySelector('.hero-canvas');
   var wrap = shell.querySelector('.hero-canvas-wrap');
-  if (!canvas || !wrap) return;
+  var heroStack = shell.querySelector('.hero-stack');
+  if (!canvas || !wrap || !heroStack) return;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return;
 
   var src = canvas.getAttribute('data-hero-src');
   if (!src) return;
 
   var heroStart = 0;
   var heroRaf = 0;
+  var resizeTimer = 0;
   var baseCanvas = document.createElement('canvas');
   var baseCtx = baseCanvas.getContext('2d');
   var pixelCanvas = document.createElement('canvas');
@@ -19,14 +23,17 @@ export function initHeroCanvas(prefersReducedMotion) {
   var noiseCtx = noiseCanvas.getContext('2d');
   var edgeCanvas = document.createElement('canvas');
   var edgeCtx = edgeCanvas.getContext('2d');
+  var edgeWorkCanvas = document.createElement('canvas');
+  var edgeWorkCtx = edgeWorkCanvas.getContext('2d');
   var edgeReady = false;
+  var frameCount = 0;
 
   var EDGE_PHASE = 1.8;
   var REVEAL_PHASE = 2.5;
   var INTRO_END = EDGE_PHASE + REVEAL_PHASE;
 
   function sizeCanvas() {
-    var rect = shell.querySelector('.hero-stack').getBoundingClientRect();
+    var rect = heroStack.getBoundingClientRect();
     var dpr = Math.min(window.devicePixelRatio || 1, 2);
     canvas.width = Math.max(2, Math.round(rect.width * dpr));
     canvas.height = Math.max(2, Math.round(rect.height * dpr));
@@ -55,28 +62,44 @@ export function initHeroCanvas(prefersReducedMotion) {
     baseCanvas.width = w;
     baseCanvas.height = h;
     drawBase(baseCtx, img, w, h);
-    drawBase(edgeCtx, img, w, h);
+    var workW = Math.max(2, Math.round(w * 0.5));
+    var workH = Math.max(2, Math.round(h * 0.5));
+    edgeWorkCanvas.width = workW;
+    edgeWorkCanvas.height = workH;
+    drawBase(edgeWorkCtx, img, workW, workH);
 
-    var srcImage = edgeCtx.getImageData(0, 0, w, h);
+    var srcImage = edgeWorkCtx.getImageData(0, 0, workW, workH);
     var d = srcImage.data;
-    var out = edgeCtx.createImageData(w, h);
+    var out = edgeWorkCtx.createImageData(workW, workH);
     var od = out.data;
+    var rowStride = workW * 4;
 
-    for (var y = 1; y < h - 1; y++) {
-      for (var x = 1; x < w - 1; x++) {
-        var idx = function(px, py) {
-          return ((py * w) + px) * 4;
-        };
-        var i = idx(x, y);
-        function luma(px, py) {
-          var j = idx(px, py);
-          return d[j] * 0.299 + d[j + 1] * 0.587 + d[j + 2] * 0.114;
-        }
+    for (var y = 1; y < workH - 1; y++) {
+      var row = y * rowStride;
+      var rowAbove = row - rowStride;
+      var rowBelow = row + rowStride;
+      for (var x = 1; x < workW - 1; x++) {
+        var i = row + x * 4;
+        var iLeft = i - 4;
+        var iRight = i + 4;
+        var iAbove = rowAbove + x * 4;
+        var iAboveLeft = iAbove - 4;
+        var iAboveRight = iAbove + 4;
+        var iBelow = rowBelow + x * 4;
+        var iBelowLeft = iBelow - 4;
+        var iBelowRight = iBelow + 4;
+
+        var lumAboveLeft = d[iAboveLeft] * 0.299 + d[iAboveLeft + 1] * 0.587 + d[iAboveLeft + 2] * 0.114;
+        var lumAbove = d[iAbove] * 0.299 + d[iAbove + 1] * 0.587 + d[iAbove + 2] * 0.114;
+        var lumAboveRight = d[iAboveRight] * 0.299 + d[iAboveRight + 1] * 0.587 + d[iAboveRight + 2] * 0.114;
+        var lumLeft = d[iLeft] * 0.299 + d[iLeft + 1] * 0.587 + d[iLeft + 2] * 0.114;
+        var lumRight = d[iRight] * 0.299 + d[iRight + 1] * 0.587 + d[iRight + 2] * 0.114;
+        var lumBelowLeft = d[iBelowLeft] * 0.299 + d[iBelowLeft + 1] * 0.587 + d[iBelowLeft + 2] * 0.114;
+        var lumBelow = d[iBelow] * 0.299 + d[iBelow + 1] * 0.587 + d[iBelow + 2] * 0.114;
+        var lumBelowRight = d[iBelowRight] * 0.299 + d[iBelowRight + 1] * 0.587 + d[iBelowRight + 2] * 0.114;
 
-        var gx = -luma(x - 1, y - 1) - 2 * luma(x - 1, y) - luma(x - 1, y + 1)
-          + luma(x + 1, y - 1) + 2 * luma(x + 1, y) + luma(x + 1, y + 1);
-        var gy = -luma(x - 1, y - 1) - 2 * luma(x, y - 1) - luma(x + 1, y - 1)
-          + luma(x - 1, y + 1) + 2 * luma(x, y + 1) + luma(x + 1, y + 1);
+        var gx = -lumAboveLeft - 2 * lumLeft - lumBelowLeft + lumAboveRight + 2 * lumRight + lumBelowRight;
+        var gy = -lumAboveLeft - 2 * lumAbove - lumAboveRight + lumBelowLeft + 2 * lumBelow + lumBelowRight;
         var mag = Math.min(255, Math.sqrt(gx * gx + gy * gy));
 
         od[i] = Math.min(255, mag * 0.4);
@@ -86,15 +109,18 @@ export function initHeroCanvas(prefersReducedMotion) {
       }
     }
 
-    edgeCtx.putImageData(out, 0, 0);
+    edgeWorkCtx.putImageData(out, 0, 0);
+    edgeCtx.clearRect(0, 0, w, h);
+    edgeCtx.imageSmoothingEnabled = true;
+    edgeCtx.drawImage(edgeWorkCanvas, 0, 0, workW, workH, 0, 0, w, h);
     edgeReady = true;
   }
 
   function heroRender(t) {
     if (!heroStart) heroStart = t;
     var elapsed = (t - heroStart) * 0.001;
-    var ctx = canvas.getContext('2d');
-    if (!ctx || !canvas.img) {
+    frameCount++;
+    if (!canvas.img) {
       heroRaf = requestAnimationFrame(heroRender);
       return;
     }
@@ -161,7 +187,7 @@ export function initHeroCanvas(prefersReducedMotion) {
       ctx.fillStyle = barGrad;
       ctx.fillRect(0, scanPos - 30, w, 60);
 
-      if (Math.random() < 0.08) {
+      if ((frameCount % 2) === 0 && Math.random() < 0.08) {
         var glitchY = Math.random() * h;
         var glitchH = 2 + Math.random() * 12;
         var shiftX = (Math.random() - 0.5) * 12;
@@ -171,14 +197,14 @@ export function initHeroCanvas(prefersReducedMotion) {
         ctx.restore();
       }
 
-      if (elapsed >= 6 && Math.random() < 0.025) {
+      if ((frameCount % 3) === 0 && elapsed >= 6 && Math.random() < 0.025) {
         var dropoutY = Math.floor(Math.random() * h);
         var dropoutH = 2 + Math.floor(Math.random() * 2);
         ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
         ctx.fillRect(0, dropoutY, w, dropoutH);
       }
 
-      if (Math.random() < 0.03) {
+      if ((frameCount % 3) === 0 && Math.random() < 0.03) {
         var burstY = Math.random() * h * 0.8;
         var burstH = 4 + Math.random() * 20;
         if (noiseCanvas.width !== w) {
@@ -221,8 +247,7 @@ export function initHeroCanvas(prefersReducedMotion) {
     buildEdge(img);
     wrap.classList.add('ready');
     if (prefersReducedMotion) {
-      var staticCtx = canvas.getContext('2d');
-      if (staticCtx) staticCtx.drawImage(baseCanvas, 0, 0);
+      ctx.drawImage(baseCanvas, 0, 0);
       return;
     }
     heroRaf = requestAnimationFrame(heroRender);
@@ -230,10 +255,13 @@ export function initHeroCanvas(prefersReducedMotion) {
   img.src = new URL(src, window.location.href).href;
 
   window.addEventListener('resize', function() {
-    if (canvas.img) {
+    if (!canvas.img) return;
+    if (resizeTimer) clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function() {
+      resizeTimer = 0;
       sizeCanvas();
       buildEdge(canvas.img);
-    }
+    }, 180);
   }, { passive: true });
 
   function onHeroVisibilityChange() {
@@ -248,6 +276,7 @@ export function initHeroCanvas(prefersReducedMotion) {
 
   document.addEventListener('visibilitychange', onHeroVisibilityChange);
   window.addEventListener('beforeunload', function() {
+    if (resizeTimer) clearTimeout(resizeTimer);
     cancelAnimationFrame(heroRaf);
   }, { once: true });
 }

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);
+				}
+			}