@anglefeint/astro-theme 0.1.13 → 0.1.15

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

@@ -0,0 +1,253 @@
+export function initHeroCanvas(prefersReducedMotion) {
+  var shell = document.querySelector('.hero-shell');
+  if (!shell) return;
+
+  var canvas = shell.querySelector('.hero-canvas');
+  var wrap = shell.querySelector('.hero-canvas-wrap');
+  if (!canvas || !wrap) return;
+
+  var src = canvas.getAttribute('data-hero-src');
+  if (!src) return;
+
+  var heroStart = 0;
+  var heroRaf = 0;
+  var baseCanvas = document.createElement('canvas');
+  var baseCtx = baseCanvas.getContext('2d');
+  var pixelCanvas = document.createElement('canvas');
+  var pixelCtx = pixelCanvas.getContext('2d');
+  var noiseCanvas = document.createElement('canvas');
+  var noiseCtx = noiseCanvas.getContext('2d');
+  var edgeCanvas = document.createElement('canvas');
+  var edgeCtx = edgeCanvas.getContext('2d');
+  var edgeReady = false;
+
+  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 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));
+    canvas.style.width = rect.width + 'px';
+    canvas.style.height = rect.height + 'px';
+    noiseCanvas.width = canvas.width;
+    noiseCanvas.height = 64;
+  }
+
+  function drawBase(ctx, img, w, h) {
+    var iw = img.width;
+    var ih = img.height;
+    var scale = Math.max(w / iw, h / ih);
+    var sw = w / scale;
+    var sh = h / scale;
+    var sx = (iw - sw) / 2;
+    var sy = (ih - sh) / 2;
+    ctx.drawImage(img, sx, sy, sw, sh, 0, 0, w, h);
+  }
+
+  function buildEdge(img) {
+    var w = canvas.width;
+    var h = canvas.height;
+    edgeCanvas.width = w;
+    edgeCanvas.height = h;
+    baseCanvas.width = w;
+    baseCanvas.height = h;
+    drawBase(baseCtx, img, w, h);
+    drawBase(edgeCtx, img, w, h);
+
+    var srcImage = edgeCtx.getImageData(0, 0, w, h);
+    var d = srcImage.data;
+    var out = edgeCtx.createImageData(w, h);
+    var od = out.data;
+
+    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;
+        }
+
+        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 mag = Math.min(255, Math.sqrt(gx * gx + gy * gy));
+
+        od[i] = Math.min(255, mag * 0.4);
+        od[i + 1] = Math.min(255, mag * 0.85);
+        od[i + 2] = Math.min(255, mag * 1.0);
+        od[i + 3] = mag > 20 ? Math.min(255, mag * 1.5) : 0;
+      }
+    }
+
+    edgeCtx.putImageData(out, 0, 0);
+    edgeReady = true;
+  }
+
+  function heroRender(t) {
+    if (!heroStart) heroStart = t;
+    var elapsed = (t - heroStart) * 0.001;
+    var ctx = canvas.getContext('2d');
+    if (!ctx || !canvas.img) {
+      heroRaf = requestAnimationFrame(heroRender);
+      return;
+    }
+
+    var w = canvas.width;
+    var h = canvas.height;
+    ctx.clearRect(0, 0, w, h);
+
+    if (elapsed < EDGE_PHASE && edgeReady) {
+      var edgeFade = Math.min(1, elapsed / 0.5);
+      ctx.fillStyle = 'rgba(8, 16, 28, 1)';
+      ctx.fillRect(0, 0, w, h);
+      ctx.globalAlpha = edgeFade;
+      ctx.drawImage(edgeCanvas, 0, 0);
+      ctx.globalAlpha = 1;
+
+      var scanY = (elapsed / EDGE_PHASE) * h;
+      ctx.fillStyle = 'rgba(120, 220, 255, 0.3)';
+      ctx.fillRect(0, scanY - 1, w, 2);
+      var scanGlow = ctx.createLinearGradient(0, scanY - 30, 0, scanY + 30);
+      scanGlow.addColorStop(0, 'rgba(120, 220, 255, 0)');
+      scanGlow.addColorStop(0.5, 'rgba(120, 220, 255, 0.15)');
+      scanGlow.addColorStop(1, 'rgba(120, 220, 255, 0)');
+      ctx.fillStyle = scanGlow;
+      ctx.fillRect(0, scanY - 30, w, 60);
+    } else if (elapsed < INTRO_END) {
+      var revealT = (elapsed - EDGE_PHASE) / REVEAL_PHASE;
+      var maxBlock = 32;
+      var blockSize = Math.max(1, Math.round(maxBlock * (1 - revealT * revealT)));
+
+      if (blockSize > 1) {
+        var smallW = Math.max(1, Math.ceil(w / blockSize));
+        var smallH = Math.max(1, Math.ceil(h / blockSize));
+        if (pixelCanvas.width !== smallW || pixelCanvas.height !== smallH) {
+          pixelCanvas.width = smallW;
+          pixelCanvas.height = smallH;
+        }
+        pixelCtx.clearRect(0, 0, smallW, smallH);
+        pixelCtx.drawImage(baseCanvas, 0, 0, smallW, smallH);
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(pixelCanvas, 0, 0, smallW, smallH, 0, 0, w, h);
+        ctx.imageSmoothingEnabled = true;
+      } else {
+        ctx.drawImage(baseCanvas, 0, 0);
+      }
+
+      var tintAlpha = 0.18 * (1 - revealT);
+      ctx.globalCompositeOperation = 'screen';
+      ctx.fillStyle = 'rgba(100, 200, 255, ' + tintAlpha + ')';
+      ctx.fillRect(0, 0, w, h);
+      ctx.globalCompositeOperation = 'source-over';
+    } else {
+      ctx.drawImage(baseCanvas, 0, 0);
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.03)';
+      for (var i = 0; i < h; i += 3) {
+        ctx.fillRect(0, i, w, 1);
+      }
+
+      var scanPos = ((elapsed * 40) % (h + 60)) - 30;
+      var barGrad = ctx.createLinearGradient(0, scanPos - 30, 0, scanPos + 30);
+      barGrad.addColorStop(0, 'rgba(120, 220, 255, 0)');
+      barGrad.addColorStop(0.5, 'rgba(120, 220, 255, 0.06)');
+      barGrad.addColorStop(1, 'rgba(120, 220, 255, 0)');
+      ctx.fillStyle = barGrad;
+      ctx.fillRect(0, scanPos - 30, w, 60);
+
+      if (Math.random() < 0.08) {
+        var glitchY = Math.random() * h;
+        var glitchH = 2 + Math.random() * 12;
+        var shiftX = (Math.random() - 0.5) * 12;
+        ctx.save();
+        ctx.globalAlpha = 0.22;
+        ctx.drawImage(baseCanvas, 0, Math.floor(glitchY), w, Math.ceil(glitchH), Math.round(shiftX), Math.floor(glitchY), w, Math.ceil(glitchH));
+        ctx.restore();
+      }
+
+      if (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) {
+        var burstY = Math.random() * h * 0.8;
+        var burstH = 4 + Math.random() * 20;
+        if (noiseCanvas.width !== w) {
+          noiseCanvas.width = w;
+          noiseCanvas.height = 64;
+        }
+
+        noiseCtx.clearRect(0, 0, noiseCanvas.width, noiseCanvas.height);
+        for (var n = 0; n < 180; n++) {
+          var nx = Math.random() * noiseCanvas.width;
+          var ny = Math.random() * noiseCanvas.height;
+          var nw = 1 + Math.random() * 3;
+          var nh = 1 + Math.random() * 2;
+          var alpha = 0.08 + Math.random() * 0.18;
+          noiseCtx.fillStyle = 'rgba(160,220,255,' + alpha.toFixed(3) + ')';
+          noiseCtx.fillRect(nx, ny, nw, nh);
+        }
+
+        ctx.drawImage(
+          noiseCanvas,
+          0,
+          0,
+          w,
+          Math.ceil(Math.min(burstH, noiseCanvas.height)),
+          0,
+          Math.floor(burstY),
+          w,
+          Math.ceil(burstH)
+        );
+      }
+    }
+
+    heroRaf = requestAnimationFrame(heroRender);
+  }
+
+  var img = new Image();
+  img.onload = function() {
+    canvas.img = img;
+    sizeCanvas();
+    buildEdge(img);
+    wrap.classList.add('ready');
+    if (prefersReducedMotion) {
+      var staticCtx = canvas.getContext('2d');
+      if (staticCtx) staticCtx.drawImage(baseCanvas, 0, 0);
+      return;
+    }
+    heroRaf = requestAnimationFrame(heroRender);
+  };
+  img.src = new URL(src, window.location.href).href;
+
+  window.addEventListener('resize', function() {
+    if (canvas.img) {
+      sizeCanvas();
+      buildEdge(canvas.img);
+    }
+  }, { passive: true });
+
+  function onHeroVisibilityChange() {
+    if (prefersReducedMotion) return;
+    if (document.hidden) {
+      if (heroRaf) cancelAnimationFrame(heroRaf);
+      heroRaf = 0;
+    } else if (canvas.img && !heroRaf) {
+      heroRaf = requestAnimationFrame(heroRender);
+    }
+  }
+
+  document.addEventListener('visibilitychange', onHeroVisibilityChange);
+  window.addEventListener('beforeunload', function() {
+    cancelAnimationFrame(heroRaf);
+  }, { once: true });
+}

package/src/scripts/blogpost/interactions.js

@@ -0,0 +1,73 @@
+export function initPostInteractions(prefersReducedMotion) {
+  var glow = document.querySelector('.ai-mouse-glow');
+  if (glow) {
+    var raf;
+    var x = 0;
+    var y = 0;
+    document.addEventListener('mousemove', function(e) {
+      x = e.clientX;
+      y = e.clientY;
+      if (!raf) {
+        raf = requestAnimationFrame(function() {
+          glow.style.setProperty('--mouse-x', x + 'px');
+          glow.style.setProperty('--mouse-y', y + 'px');
+          raf = 0;
+        });
+      }
+    });
+  }
+
+  document.querySelectorAll('.ai-prose-body a[href]').forEach(function(a) {
+    var href = a.getAttribute('href') || '';
+    if (!href || href.startsWith('#')) return;
+    a.classList.add('ai-link-preview');
+    try {
+      a.setAttribute('data-preview', href.startsWith('http') ? new URL(href, location.origin).hostname : href);
+    } catch (_err) {
+      a.setAttribute('data-preview', href);
+    }
+  });
+
+  var paras = document.querySelectorAll('.ai-prose-body p, .ai-prose-body h2, .ai-prose-body h3, .ai-prose-body pre, .ai-prose-body blockquote, .ai-prose-body ul, .ai-prose-body ol');
+  if (window.IntersectionObserver) {
+    var io = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('ai-para-visible');
+          io.unobserve(entry.target);
+        }
+      });
+    }, { rootMargin: '0px 0px -60px 0px', threshold: 0.1 });
+
+    paras.forEach(function(p) {
+      io.observe(p);
+    });
+  } else {
+    paras.forEach(function(p) {
+      p.classList.add('ai-para-visible');
+    });
+  }
+
+  var regen = document.querySelector('.ai-regenerate');
+  var article = document.querySelector('.ai-article');
+  var scan = document.querySelector('.ai-load-scan');
+  if (regen && article) {
+    regen.addEventListener('click', function() {
+      regen.disabled = true;
+      regen.classList.add('ai-regenerating');
+      article.classList.add('ai-regenerate-flash');
+      if (scan) {
+        scan.style.animation = 'none';
+        scan.offsetHeight;
+        scan.style.animation = 'ai-scan 0.8s ease-out forwards';
+        scan.style.top = '0';
+        scan.style.opacity = '1';
+      }
+      setTimeout(function() {
+        article.classList.remove('ai-regenerate-flash');
+        regen.classList.remove('ai-regenerating');
+        regen.disabled = false;
+      }, prefersReducedMotion ? 120 : 1200);
+    });
+  }
+}

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

@@ -0,0 +1,117 @@
+export function initNetworkCanvas(prefersReducedMotion) {
+  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 });
+}

package/src/scripts/blogpost/read-progress.js

@@ -0,0 +1,52 @@
+export function initReadProgressAndBackToTop(prefersReducedMotion) {
+  var progress = document.querySelector('.ai-read-progress');
+  var toast = document.querySelector('.ai-stage-toast');
+  var stageSeen = { p30: false, p60: false, p90: false };
+  var toastTimer = 0;
+  var hasScrolled = false;
+
+  function showStageToast(msg) {
+    if (!toast) return;
+    toast.textContent = msg;
+    toast.classList.add('visible');
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function() {
+      toast.classList.remove('visible');
+    }, 900);
+  }
+
+  if (progress) {
+    function onScroll() {
+      var scrollTop = window.scrollY || document.documentElement.scrollTop;
+      var scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+      var p = scrollHeight > 0 ? Math.min(1, scrollTop / scrollHeight) : 1;
+      progress.style.setProperty('--read-progress', String(p));
+      var btn = document.querySelector('.ai-back-to-top');
+      if (btn) btn.classList.toggle('visible', scrollTop > 400);
+      if (!hasScrolled && scrollTop > 6) hasScrolled = true;
+      if (!hasScrolled) return;
+      if (!stageSeen.p30 && p >= 0.3) {
+        stageSeen.p30 = true;
+        showStageToast('context parsed');
+      }
+      if (!stageSeen.p60 && p >= 0.6) {
+        stageSeen.p60 = true;
+        showStageToast('inference stable');
+      }
+      if (!stageSeen.p90 && p >= 0.9) {
+        stageSeen.p90 = true;
+        showStageToast('output finalized');
+      }
+    }
+
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+  }
+
+  var backTop = document.querySelector('.ai-back-to-top');
+  if (backTop) {
+    backTop.addEventListener('click', function() {
+      window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
+    });
+  }
+}