@anglefeint/astro-theme 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [
@@ -25,8 +25,7 @@
     "src/styles",
     "src/assets/theme",
     "src/cli-new-post.mjs",
-    "src/cli-new-page.mjs",
-    "public"
+    "src/cli-new-page.mjs"
   ],
   "bin": {
     "anglefeint-new-post": "src/cli-new-post.mjs",
@@ -40,7 +39,6 @@
     "./i18n/*": "./src/i18n/*",
     "./styles/*": "./src/styles/*",
     "./assets/*": "./src/assets/*",
-    "./public/*": "./public/*",
     "./content-schema": "./src/content-schema.ts",
     "./consts": "./src/consts.ts"
   },

package/src/layouts/BlogPost.astro

@@ -5,6 +5,7 @@ import themeRedqueen1 from '../assets/theme/red-queen/theme-redqueen1.webp';
 import themeRedqueen2 from '../assets/theme/red-queen/theme-redqueen2.gif';
 import FormattedDate from '../components/FormattedDate.astro';
 import AiShell from './shells/AiShell.astro';
+import blogPostCssUrl from '../styles/blog-post.css?url';
 import { SITE_AUTHOR } from '@anglefeint/site-config/site';
 import { DEFAULT_LOCALE, type Locale, isLocale, localePath, blogIdToSlugAnyLocale } from '@anglefeint/site-i18n/config';
 import { getMessages } from '@anglefeint/site-i18n/messages';
@@ -62,7 +63,7 @@ const confidenceText = aiConfidence !== undefined ? aiConfidence.toFixed(2) : un
 	tags={tags}
 	localeHrefs={localeHrefs}
 >
-	<link slot="head" rel="stylesheet" href="/styles/blog-post.css" />
+	<link slot="head" rel="stylesheet" href={blogPostCssUrl} />
 	<Fragment slot="body-start">
 		<div class="ai-bg" aria-hidden="true">
 			<div class="ai-glow ai-glow-shift"></div>

package/src/layouts/shells/AiShell.astro

@@ -2,6 +2,7 @@
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
 import type { ImageMetadata } from 'astro';
+import themeAiCssUrl from '../../styles/theme-ai.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -51,7 +52,7 @@ const {
 	scanlines
 	localeHrefs={localeHrefs}
 >
-	<link slot="head" rel="stylesheet" href="/styles/theme-ai.css" />
+	<link slot="head" rel="stylesheet" href={themeAiCssUrl} />
 	<slot name="head" slot="head" />
 	<slot name="body-start" slot="body-start" />
 	<slot />

package/src/layouts/shells/CyberShell.astro

@@ -1,6 +1,8 @@
 ---
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
+import themeCyberCssUrl from '../../styles/theme-cyber.css?url';
+import blogListCssUrl from '../../styles/blog-list.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -13,7 +15,8 @@ const { locale, title, description, localeHrefs } = Astro.props as Props;
 ---
 
 <ThemeFrame locale={locale} title={title} description={description} bodyClass="cyber-page" mainClass="page-main cyber-content" localeHrefs={localeHrefs}>
-	<link slot="head" rel="stylesheet" href="/styles/theme-cyber.css" />
+	<link slot="head" rel="stylesheet" href={themeCyberCssUrl} />
+	<link slot="head" rel="stylesheet" href={blogListCssUrl} />
 	<Fragment slot="body-start">
 		<div class="cyber-load-glitch" aria-hidden="true"></div>
 		<div class="cyber-spotlight" aria-hidden="true">

package/src/layouts/shells/HackerShell.astro

@@ -1,6 +1,7 @@
 ---
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
+import aboutPageCssUrl from '../../styles/about-page.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -13,7 +14,7 @@ const { locale, title, description, bodyClass = 'hacker-page' } = Astro.props as
 ---
 
 <ThemeFrame locale={locale} title={title} description={description} bodyClass={bodyClass} mainClass="page-main hacker-content">
-	<link slot="head" rel="stylesheet" href="/styles/about-page.css" />
+	<link slot="head" rel="stylesheet" href={aboutPageCssUrl} />
 	<slot name="head" slot="head" />
 	<slot name="body-start" slot="body-start" />
 	<slot />

package/src/layouts/shells/MatrixShell.astro

@@ -1,6 +1,7 @@
 ---
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
+import homePageCssUrl from '../../styles/home-page.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -12,7 +13,7 @@ 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" />
+	<link slot="head" rel="stylesheet" href={homePageCssUrl} />
 	<canvas slot="body-start" id="matrix-bg" aria-hidden="true"></canvas>
 	<Fragment slot="body-end">
 		<script>

package/src/scripts/about/background.js

@@ -0,0 +1,150 @@
+export function initTerminalBackground(runtimeConfig, prefersReducedMotion) {
+  var bgCanvas = document.querySelector('.hacker-bg-canvas');
+  if (!bgCanvas) return;
+
+  var bgCtx = bgCanvas.getContext('2d');
+  var fontSize = 13;
+  var lineHeight = 18;
+  var bgAnimationId = 0;
+  var fallbackDirLines = [
+    '~ $ 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',
+  ];
+  var dirLines = runtimeConfig.effects && Array.isArray(runtimeConfig.effects.backgroundLines) && runtimeConfig.effects.backgroundLines.length > 0
+    ? runtimeConfig.effects.backgroundLines
+    : fallbackDirLines;
+  var hackerFocused = false;
+  var hackerInput = '';
+  var hackerHistory = [];
+
+  function sizeBackground() {
+    var dpr = Math.min(window.devicePixelRatio || 1, 2);
+    bgCanvas.width = window.innerWidth * dpr;
+    bgCanvas.height = window.innerHeight * dpr;
+    bgCanvas.style.width = window.innerWidth + 'px';
+    bgCanvas.style.height = window.innerHeight + 'px';
+    bgCtx.scale(dpr, dpr);
+  }
+
+  function renderBg(t) {
+    var w = window.innerWidth;
+    var h = window.innerHeight;
+    var dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+    bgCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    bgCtx.clearRect(0, 0, w, h);
+    bgCtx.fillStyle = '#0a0a0a';
+    bgCtx.fillRect(0, 0, w, h);
+
+    bgCtx.font = fontSize + 'px ui-monospace, SFMono-Regular, Menlo, monospace';
+    var padX = 24;
+    var baseY = 22;
+
+    for (var i = 0; i < dirLines.length; i++) {
+      var line = dirLines[i];
+      if (line.indexOf('~ $') === 0) {
+        bgCtx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+      } else if (line.indexOf('>>') === 0) {
+        bgCtx.fillStyle = 'rgba(255, 255, 255, 0.75)';
+      } else if (line.indexOf('total') === 0 || line.indexOf('drwx') === 0 || line.indexOf('-rw') === 0) {
+        bgCtx.fillStyle = 'rgba(255, 255, 255, 0.55)';
+      } else {
+        bgCtx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+      }
+      bgCtx.fillText(line, padX, baseY + i * lineHeight);
+    }
+
+    var promptY = baseY + dirLines.length * lineHeight + 10;
+
+    for (var j = 0; j < hackerHistory.length; j++) {
+      bgCtx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+      bgCtx.fillText('~ $ ' + hackerHistory[j], padX, promptY + j * lineHeight);
+    }
+
+    var currentY = promptY + hackerHistory.length * lineHeight;
+    bgCtx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+    bgCtx.fillText('~ $ ', padX, currentY);
+    var promptW = bgCtx.measureText('~ $ ').width;
+    bgCtx.fillText(hackerInput, padX + promptW, currentY);
+    var inputW = bgCtx.measureText(hackerInput).width;
+    var blink = Math.floor(t / 530) % 2;
+    if (blink && hackerFocused) {
+      bgCtx.fillStyle = 'rgba(0, 255, 100, 0.9)';
+      bgCtx.fillRect(padX + promptW + inputW, currentY - fontSize + 4, 8, fontSize - 2);
+    } else if (!hackerFocused && blink) {
+      bgCtx.fillStyle = 'rgba(0, 255, 100, 0.9)';
+      bgCtx.fillRect(padX + promptW + inputW, currentY - fontSize + 4, 8, fontSize - 2);
+    }
+
+    bgAnimationId = requestAnimationFrame(renderBg);
+  }
+
+  function startBackgroundLoop() {
+    if (bgAnimationId || document.hidden) return;
+    bgAnimationId = requestAnimationFrame(renderBg);
+  }
+
+  function stopBackgroundLoop() {
+    if (!bgAnimationId) return;
+    cancelAnimationFrame(bgAnimationId);
+    bgAnimationId = 0;
+  }
+
+  sizeBackground();
+
+  if (prefersReducedMotion) {
+    renderBg(performance.now());
+    stopBackgroundLoop();
+  } else {
+    startBackgroundLoop();
+    document.addEventListener('visibilitychange', function() {
+      if (document.hidden) {
+        stopBackgroundLoop();
+        return;
+      }
+      startBackgroundLoop();
+    });
+  }
+
+  document.addEventListener('click', function(e) {
+    var content = document.querySelector('.about-shell');
+    var header = document.querySelector('header');
+    var footer = document.querySelector('footer');
+    if (content && content.contains(e.target)) {
+      hackerFocused = false;
+    } else if (header && header.contains(e.target)) {
+      hackerFocused = false;
+    } else if (footer && footer.contains(e.target)) {
+      hackerFocused = false;
+    } else if (e.target.closest('.hacker-back-to-top, .hacker-regenerate')) {
+      hackerFocused = false;
+    } else {
+      hackerFocused = true;
+    }
+  });
+
+  document.addEventListener('keydown', function(e) {
+    if (!hackerFocused) return;
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+    e.preventDefault();
+    if (e.key === 'Enter') {
+      hackerHistory.push(hackerInput);
+      hackerInput = '';
+      if (hackerHistory.length > 8) hackerHistory.shift();
+    } else if (e.key === 'Backspace') {
+      hackerInput = hackerInput.slice(0, -1);
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && hackerInput.length < 80) {
+      hackerInput += e.key;
+    }
+  });
+
+  window.addEventListener('resize', function() {
+    sizeBackground();
+  }, { passive: true });
+}

package/src/scripts/about/interactions.js

@@ -0,0 +1,101 @@
+export function initAboutInteractions(prefersReducedMotion) {
+  var glow = document.querySelector('.hacker-mouse-glow');
+  if (glow && !prefersReducedMotion) {
+    var glowRaf;
+    var mx = 0;
+    var my = 0;
+    document.addEventListener('mousemove', function(e) {
+      mx = e.clientX;
+      my = e.clientY;
+      if (!glowRaf) {
+        glowRaf = requestAnimationFrame(function() {
+          glow.style.setProperty('--mouse-x', mx + 'px');
+          glow.style.setProperty('--mouse-y', my + 'px');
+          glowRaf = 0;
+        });
+      }
+    });
+  }
+
+  var paras = document.querySelectorAll('.hacker-body p, .hacker-body h2, .hacker-body blockquote, .about-manifest');
+  if (window.IntersectionObserver) {
+    var io = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('hacker-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('hacker-visible'); });
+  }
+
+  var titles = document.querySelectorAll('.about-section-title');
+  if (prefersReducedMotion && titles.length) {
+    titles.forEach(function(el) {
+      var fullText = el.textContent || '';
+      el.setAttribute('data-full-text', fullText);
+      el.textContent = fullText;
+      el.style.minHeight = '1.2em';
+    });
+  } else if (window.IntersectionObserver && titles.length) {
+    titles.forEach(function(el) {
+      var fullText = el.textContent || '';
+      el.setAttribute('data-full-text', fullText);
+      el.textContent = '';
+      el.style.minHeight = '1.2em';
+    });
+
+    var tio = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          tio.unobserve(entry.target);
+          var text = entry.target.getAttribute('data-full-text') || '';
+          var i = 0;
+          entry.target.textContent = '';
+          function type() {
+            if (i <= text.length) {
+              entry.target.textContent = text.slice(0, i);
+              i++;
+              setTimeout(type, 32);
+            }
+          }
+          type();
+        }
+      });
+    }, { rootMargin: '0px 0px -40px 0px', threshold: 0.1 });
+
+    titles.forEach(function(el) { tio.observe(el); });
+  }
+
+  var regen = document.querySelector('.hacker-regenerate');
+  var article = document.querySelector('.about-shell');
+  var scan = document.querySelector('.hacker-load-scan');
+  if (regen && article) {
+    regen.addEventListener('click', function() {
+      if (prefersReducedMotion) {
+        article.classList.add('hacker-flash');
+        setTimeout(function() {
+          article.classList.remove('hacker-flash');
+        }, 120);
+        return;
+      }
+
+      regen.disabled = true;
+      article.classList.add('hacker-flash');
+      if (scan) {
+        scan.style.animation = 'none';
+        scan.offsetHeight;
+        scan.style.animation = 'hacker-scan 0.8s ease-out forwards';
+        scan.style.top = '0';
+        scan.style.opacity = '1';
+      }
+      setTimeout(function() {
+        article.classList.remove('hacker-flash');
+        regen.disabled = false;
+      }, 1200);
+    });
+  }
+}