@anglefeint/astro-theme 0.1.39 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [

package/src/components/Giscus.astro

@@ -0,0 +1,48 @@
+---
+type GiscusComments = {
+  REPO: string;
+  REPO_ID: string;
+  CATEGORY: string;
+  CATEGORY_ID: string;
+  MAPPING: string;
+  TERM: string;
+  NUMBER: string;
+  STRICT: string;
+  REACTIONS_ENABLED: string;
+  EMIT_METADATA: string;
+  INPUT_POSITION: string;
+  THEME: string;
+  LANG: string;
+  LOADING: string;
+  CROSSORIGIN: string;
+};
+
+type Props = {
+  comments: GiscusComments;
+  resolvedLocale: string;
+};
+
+const { comments, resolvedLocale } = Astro.props;
+const normalizedCommentTerm = comments.TERM.trim();
+const normalizedCommentNumber = comments.NUMBER.trim();
+---
+
+<script
+  is:inline
+  src="https://giscus.app/client.js"
+  data-repo={comments.REPO}
+  data-repo-id={comments.REPO_ID}
+  data-category={comments.CATEGORY}
+  data-category-id={comments.CATEGORY_ID}
+  data-mapping={comments.MAPPING}
+  data-term={comments.MAPPING === 'specific' ? normalizedCommentTerm : undefined}
+  data-number={comments.MAPPING === 'number' ? normalizedCommentNumber : undefined}
+  data-strict={comments.STRICT}
+  data-reactions-enabled={comments.REACTIONS_ENABLED}
+  data-emit-metadata={comments.EMIT_METADATA}
+  data-input-position={comments.INPUT_POSITION}
+  data-theme={comments.THEME}
+  data-lang={comments.LANG || resolvedLocale}
+  data-loading={comments.LOADING}
+  crossorigin={comments.CROSSORIGIN}
+  async></script>

package/src/content-schema.ts

@@ -2,33 +2,58 @@ import { defineCollection } from 'astro:content';
 import { glob } from 'astro/loaders';
 import { z } from 'astro/zod';
 
+const ABSOLUTE_URL_SCHEME_REGEX = /^[a-z][a-z\d+.-]*:/i;
+
+function normalizeSourceLink(value: string): string {
+  const trimmed = value.trim();
+  return ABSOLUTE_URL_SCHEME_REGEX.test(trimmed) ? trimmed : `https://${trimmed}`;
+}
+
+function isValidSourceLink(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+const sourceLinkSchema = z
+  .string()
+  .trim()
+  .min(1)
+  .transform(normalizeSourceLink)
+  .refine(isValidSourceLink, {
+    message: 'sourceLinks entries must be valid HTTP(S) URLs or bare domains.',
+  });
+
 const blog = defineCollection({
-	// Load Markdown and MDX files in the `src/content/blog/` directory.
-	loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
-	// Type-check frontmatter using a schema
-		schema: ({ image }) =>
-			z.object({
-				title: z.string(),
-				subtitle: z.string().optional(),
-				description: z.string(),
-				// Transform string to Date object
-				pubDate: z.coerce.date(),
-				updatedDate: z.coerce.date().optional(),
-				heroImage: image().optional(),
-				context: z.string().optional(),
-				readMinutes: z.number().int().positive().optional(),
-				aiModel: z.string().optional(),
-				aiMode: z.string().optional(),
-				aiState: z.string().optional(),
-				aiLatencyMs: z.number().int().nonnegative().optional(),
-				aiConfidence: z.number().min(0).max(1).optional(),
-				wordCount: z.number().int().nonnegative().optional(),
-				tokenCount: z.number().int().nonnegative().optional(),
-				author: z.string().optional(),
-				tags: z.array(z.string()).optional(),
-				canonicalTopic: z.string().optional(),
-				sourceLinks: z.array(z.url()).optional(),
-			}),
+  // Load Markdown and MDX files in the `src/content/blog/` directory.
+  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
+  // Type-check frontmatter using a schema
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      subtitle: z.string().optional(),
+      description: z.string(),
+      // Transform string to Date object
+      pubDate: z.coerce.date(),
+      updatedDate: z.coerce.date().optional(),
+      heroImage: image().optional(),
+      context: z.string().optional(),
+      readMinutes: z.number().int().positive().optional(),
+      aiModel: z.string().optional(),
+      aiMode: z.string().optional(),
+      aiState: z.string().optional(),
+      aiLatencyMs: z.number().int().nonnegative().optional(),
+      aiConfidence: z.number().min(0).max(1).optional(),
+      wordCount: z.number().int().nonnegative().optional(),
+      tokenCount: z.number().int().nonnegative().optional(),
+      author: z.string().optional(),
+      tags: z.array(z.string()).optional(),
+      canonicalTopic: z.string().optional(),
+      sourceLinks: z.array(sourceLinkSchema).optional(),
+    }),
 });
 
 export const collections = { blog };

package/src/layouts/BlogPost.astro

@@ -4,6 +4,7 @@ import type { CollectionEntry } from 'astro:content';
 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 Giscus from '../components/Giscus.astro';
 import AiShell from './shells/AiShell.astro';
 import blogPostCssUrl from '../styles/blog-post.css?url';
 import { SITE_AUTHOR } from '@anglefeint/site-config/site';
@@ -335,25 +336,7 @@ const hasCommentsConfig = Boolean(
   {
     hasCommentsConfig && (
       <section class="prose ai-comments" aria-label={messages.blog.comments}>
-        <script
-          src="https://giscus.app/client.js"
-          data-repo={comments.REPO}
-          data-repo-id={comments.REPO_ID}
-          data-category={comments.CATEGORY}
-          data-category-id={comments.CATEGORY_ID}
-          data-mapping={comments.MAPPING}
-          data-term={comments.MAPPING === 'specific' ? normalizedCommentTerm : undefined}
-          data-number={comments.MAPPING === 'number' ? normalizedCommentNumber : undefined}
-          data-strict={comments.STRICT}
-          data-reactions-enabled={comments.REACTIONS_ENABLED}
-          data-emit-metadata={comments.EMIT_METADATA}
-          data-input-position={comments.INPUT_POSITION}
-          data-theme={comments.THEME}
-          data-lang={comments.LANG || resolvedLocale}
-          data-loading={comments.LOADING}
-          crossorigin={comments.CROSSORIGIN}
-          async
-        />
+        <Giscus comments={comments} resolvedLocale={resolvedLocale} />
       </section>
     )
   }

package/src/scripts/about/modals.js

@@ -2,13 +2,18 @@ import { createDecryptorController } from './modal-decryptor.js';
 import { mountHelpKeyboard } from './modal-keyboard.js';
 import { renderProgressModal } from './modal-progress.js';
 
+let cleanupAboutModals = null;
+
 export function initAboutModals(runtimeConfig, prefersReducedMotion) {
+  if (cleanupAboutModals) cleanupAboutModals();
+
   const modalOverlay = document.getElementById('hacker-modal');
   const modalBody = document.getElementById('hacker-modal-body');
   const modalTitle = document.querySelector('.hacker-modal-title');
   if (!modalOverlay || !modalBody || !modalTitle) return;
 
-  const decryptorKeysLabel = runtimeConfig.decryptorKeysLabel || 'keys tested';
+  const decryptorKeysLabel =
+    typeof runtimeConfig.decryptorKeysLabel === 'string' ? runtimeConfig.decryptorKeysLabel : '';
   const decryptor = createDecryptorController(
     modalOverlay,
     prefersReducedMotion,
@@ -17,26 +22,8 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
   let cleanupKeyboard = null;
 
   const scriptsTpl = document.getElementById('hacker-scripts-folders-tpl');
-  const fallbackModalContent = {
-    'dl-data': {
-      title: 'Downloading...',
-      body: '<div class="hacker-modal-download"><div class="modal-subtitle">Critical Data</div><div class="hacker-modal-progress" id="dl-progress"></div></div>',
-      type: 'progress',
-    },
-    ai: {
-      title: 'AI',
-      body: '<pre>~ $ ai --status --verbose\n\nmodel: runtime-default\nmode: standard\ncontext window: 32k\nlatency: 100-250ms\nsafety: enabled\n\n&gt;&gt; system online\n&gt;&gt; ready</pre>',
-      type: 'plain',
-    },
-    decryptor: {
-      title: 'Password Decryptor',
-      body: '<pre class="hacker-decryptor-pre">Calculating Hashes\n\n<span id="dec-keys">[00:00:01] 0 keys tested</span>\n\nCurrent passphrase: <span id="dec-pass">********</span>\n\nMaster key\n<span id="dec-master1"></span>\n<span id="dec-master2"></span>\n\nTransient key\n<span id="dec-trans1"></span>\n<span id="dec-trans2"></span>\n<span id="dec-trans3"></span>\n<span id="dec-trans4"></span></pre>',
-      type: 'decryptor',
-    },
-    help: { title: 'Help', body: '', type: 'keyboard' },
-    'all-scripts': { title: '/root/bash/scripts', body: '', type: 'scripts' },
-  };
-  const modalContent = runtimeConfig.modalContent || fallbackModalContent;
+  const modalContent = runtimeConfig.modalContent;
+  if (!modalContent || typeof modalContent !== 'object') return;
 
   const closeModal = () => {
     decryptor.stop();
@@ -99,22 +86,43 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
     modalOverlay.setAttribute('aria-hidden', 'false');
   };
 
-  document.querySelectorAll('.hacker-folder[data-modal]').forEach((button) => {
-    button.addEventListener('click', () => {
+  const folderButtons = Array.from(document.querySelectorAll('.hacker-folder[data-modal]'));
+  const buttonHandlers = folderButtons.map((button) => {
+    const onClick = () => {
       const id = button.getAttribute('data-modal');
       if (!id) return;
       openModal(modalContent[id]);
-    });
+    };
+    button.addEventListener('click', onClick);
+    return [button, onClick];
   });
 
   const closeButton = document.querySelector('.hacker-modal-close');
   if (closeButton) closeButton.addEventListener('click', closeModal);
 
-  modalOverlay.addEventListener('click', (event) => {
+  const onOverlayClick = (event) => {
     if (event.target === modalOverlay) closeModal();
-  });
+  };
+  modalOverlay.addEventListener('click', onOverlayClick);
 
-  document.addEventListener('keydown', (event) => {
+  const onDocumentKeydown = (event) => {
     if (event.key === 'Escape' && modalOverlay.classList.contains('open')) closeModal();
-  });
+  };
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  cleanupAboutModals = () => {
+    decryptor.stop();
+    if (cleanupKeyboard) {
+      cleanupKeyboard();
+      cleanupKeyboard = null;
+    }
+    if (closeButton) closeButton.removeEventListener('click', closeModal);
+    modalOverlay.removeEventListener('click', onOverlayClick);
+    document.removeEventListener('keydown', onDocumentKeydown);
+    buttonHandlers.forEach(([button, handler]) => {
+      button.removeEventListener('click', handler);
+    });
+  };
+
+  return cleanupAboutModals;
 }

package/src/scripts/blogpost/interactions.js

@@ -1,14 +1,15 @@
 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) {
+  const glow = document.querySelector('.ai-mouse-glow');
+  if (glow && window.__anglefeintPostGlowBound__ !== true) {
+    window.__anglefeintPostGlowBound__ = true;
+    let raf = 0;
+    let x = 0;
+    let y = 0;
+    document.addEventListener('mousemove', function (e) {
       x = e.clientX;
       y = e.clientY;
       if (!raf) {
-        raf = requestAnimationFrame(function() {
+        raf = requestAnimationFrame(function () {
           glow.style.setProperty('--mouse-x', x + 'px');
           glow.style.setProperty('--mouse-y', y + 'px');
           raf = 0;
@@ -17,42 +18,56 @@ export function initPostInteractions(prefersReducedMotion) {
     });
   }
 
-  document.querySelectorAll('.ai-prose-body a[href]').forEach(function(a) {
+  document.querySelectorAll('.ai-prose-body a[href]').forEach(function (a) {
+    if (a.dataset.aiLinkPreviewBound === 'true') return;
     var href = a.getAttribute('href') || '';
     if (!href || href.startsWith('#')) return;
+    a.dataset.aiLinkPreviewBound = 'true';
     a.classList.add('ai-link-preview');
     try {
-      a.setAttribute('data-preview', href.startsWith('http') ? new URL(href, location.origin).hostname : href);
+      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');
+  const 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 });
+    const 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) {
+    paras.forEach(function (p) {
+      if (p.dataset.aiRevealObserved === 'true') return;
+      p.dataset.aiRevealObserved = 'true';
       io.observe(p);
     });
   } else {
-    paras.forEach(function(p) {
+    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');
+  const regen = document.querySelector('.ai-regenerate');
+  const article = document.querySelector('.ai-article');
+  const scan = document.querySelector('.ai-load-scan');
   if (regen && article) {
-    regen.addEventListener('click', function() {
+    if (regen.dataset.aiRegenerateBound === 'true') return;
+    regen.dataset.aiRegenerateBound = 'true';
+    regen.addEventListener('click', function () {
       regen.disabled = true;
       regen.classList.add('ai-regenerating');
       article.classList.add('ai-regenerate-flash');
@@ -63,11 +78,14 @@ export function initPostInteractions(prefersReducedMotion) {
         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);
+      setTimeout(
+        function () {
+          article.classList.remove('ai-regenerate-flash');
+          regen.classList.remove('ai-regenerating');
+          regen.disabled = false;
+        },
+        prefersReducedMotion ? 120 : 1200
+      );
     });
   }
 }