some fixes

Author: KSemenenko

src/components/Hero.astro

@@ -72,6 +72,7 @@ const mottoHalf = Array.from({ length: 4 })
         </div>
         <pre
           class="crest__status terminal__body font-mono"
+          style={`--terminal-lines:${hero.terminalLines.length}`}
           aria-hidden="true"><code set:html={terminalHtml} /></pre>
       </aside>
     </div>
@@ -228,6 +229,7 @@ const mottoHalf = Array.from({ length: 4 })
   /* ── The hero emblem — the GitHub octocat mark on a soft gold halo, with a
      slim 3-line mono "mission status" caption below it. */
   .hero__crest {
+    --reveal-y: 0px;
     align-self: center;
     width: 100%;
     padding-top: 0;
@@ -285,6 +287,7 @@ const mottoHalf = Array.from({ length: 4 })
     font-size: clamp(0.66rem, 0.6rem + 0.28vw, 0.78rem);
     line-height: 1.75;
     letter-spacing: 0.01em;
+    min-block-size: calc(var(--terminal-lines, 4) * 1.75em);
     white-space: pre-wrap;
     word-break: break-word;
     color: var(--fg-faint);

src/scripts/app.ts

@@ -280,6 +280,50 @@ function initTerminal() {
   const spans = Array.from(code.querySelectorAll<HTMLElement>('span'));
   if (spans.length === 0) return;
   const lines = spans.map((el) => ({ el, text: el.textContent ?? '' }));
+  const terminal = code.closest<HTMLElement>('.terminal__body');
+  let terminalPrepared = false;
+  const reserveTerminalHeight = () => {
+    if (!terminal) return;
+    const width = terminal.getBoundingClientRect().width;
+    const clone = terminal.cloneNode(true) as HTMLElement;
+    clone.querySelectorAll<HTMLElement>('span').forEach((span, i) => {
+      span.textContent = lines[i]?.text ?? '';
+    });
+    clone.style.position = 'absolute';
+    clone.style.visibility = 'hidden';
+    clone.style.pointerEvents = 'none';
+    clone.style.left = '-9999px';
+    clone.style.top = '0';
+    clone.style.width = `${width}px`;
+    clone.style.blockSize = 'auto';
+    clone.style.minBlockSize = '0';
+    terminal.after(clone);
+    const height = clone.getBoundingClientRect().height;
+    clone.remove();
+    if (height > 0) terminal.style.minBlockSize = `${height}px`;
+  };
+  const prepareTerminal = () => {
+    if (terminalPrepared) return Promise.resolve();
+    const markPrepared = () => {
+      reserveTerminalHeight();
+      terminalPrepared = true;
+    };
+    if ('fonts' in document) {
+      return Promise.race([
+        document.fonts.ready,
+        new Promise<void>((resolve) => window.setTimeout(resolve, 700)),
+      ]).then(
+        () => markPrepared(),
+        () => markPrepared()
+      );
+    }
+    markPrepared();
+    return Promise.resolve();
+  };
+  reserveTerminalHeight();
+  if ('fonts' in document) {
+    void document.fonts.ready.then(reserveTerminalHeight);
+  }
   const lastEl = spans[spans.length - 1];
   const setCaret = (el: HTMLElement) => {
     spans.forEach((s) => s.classList.remove('caret'));
@@ -298,7 +342,10 @@ function initTerminal() {
   };
   (window as Window & { __finishTerminal?: () => void }).__finishTerminal = finish;
 
-  if (reduceMotion) return; // keep the static, fully-typed terminal
+  if (reduceMotion) {
+    void prepareTerminal();
+    return; // keep the static, fully-typed terminal
+  }
 
   const typeAll = () => {
     if (done) return;
@@ -331,16 +378,19 @@ function initTerminal() {
     };
     typeLine();
   };
+  const startTypeAll = () => {
+    void prepareTerminal().then(typeAll);
+  };
 
   if (!('IntersectionObserver' in window)) {
-    typeAll();
+    startTypeAll();
     return;
   }
   const io = new IntersectionObserver(
     (entries, obs) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          typeAll();
+          startTypeAll();
           obs.unobserve(entry.target);
         }
       });

src/styles/global.css

@@ -645,7 +645,7 @@ p {
    for crawlers / a fast no-JS first paint — everything is visible immediately. */
 :root.js [data-reveal] {
   opacity: 0;
-  transform: translateY(18px);
+  transform: translateY(var(--reveal-y, 18px));
   transition:
     opacity 0.7s var(--ease-out),
     transform 0.7s var(--ease-out);

tests/functional.spec.ts

@@ -143,6 +143,80 @@ test.describe('Home page · structure & SEO', () => {
     await expect(page.locator('#hero-heading')).toBeVisible();
   });
 
+  test('hero terminal keeps its anchor when the typewriter clears text @desktop', async ({
+    page,
+  }) => {
+    await page.goto('/');
+    await prepareForResponsiveAudit(page);
+    await page.locator('.crest__status').waitFor({ state: 'visible' });
+    await page.waitForFunction(() =>
+      document.querySelector<HTMLElement>('.crest__status')?.style.minBlockSize.endsWith('px')
+    );
+
+    const samples = await page.evaluate(async () => {
+      (window as Window & { __finishTerminal?: () => void }).__finishTerminal?.();
+      const crest = document.querySelector<HTMLElement>('.hero__crest');
+      const status = document.querySelector<HTMLElement>('.crest__status');
+      const code = document.querySelector<HTMLElement>('.terminal__body code');
+      if (!crest || !status || !code) return null;
+
+      const spans = Array.from(code.querySelectorAll<HTMLElement>('span'));
+      const originalText = spans.map((span) => span.textContent ?? '');
+      const measure = () => {
+        const crestRect = crest.getBoundingClientRect();
+        const statusRect = status.getBoundingClientRect();
+        return {
+          crestTop: crestRect.top,
+          statusTop: statusRect.top,
+          statusHeight: statusRect.height,
+        };
+      };
+
+      const frames: Array<ReturnType<typeof measure> & { textLength: number }> = [];
+      frames.push({ ...measure(), textLength: code.textContent?.length ?? 0 });
+
+      spans.forEach((span) => {
+        span.textContent = '';
+        span.classList.remove('caret');
+      });
+      spans[0]?.classList.add('caret');
+      await new Promise((resolve) => window.requestAnimationFrame(resolve));
+      frames.push({ ...measure(), textLength: code.textContent?.length ?? 0 });
+
+      if (spans[0]) spans[0].textContent = originalText[0]?.slice(0, 8) ?? '';
+      await new Promise((resolve) => window.requestAnimationFrame(resolve));
+      frames.push({ ...measure(), textLength: code.textContent?.length ?? 0 });
+
+      spans.forEach((span, i) => {
+        span.textContent = originalText[i] ?? '';
+      });
+      await new Promise((resolve) => window.requestAnimationFrame(resolve));
+      frames.push({ ...measure(), textLength: code.textContent?.length ?? 0 });
+
+      return frames;
+    });
+
+    expect(samples).not.toBeNull();
+    const frames = samples ?? [];
+    const heightDelta =
+      Math.max(...frames.map((frame) => frame.statusHeight)) -
+      Math.min(...frames.map((frame) => frame.statusHeight));
+    const crestTopDelta =
+      Math.max(...frames.map((frame) => frame.crestTop)) -
+      Math.min(...frames.map((frame) => frame.crestTop));
+    const statusTopDelta =
+      Math.max(...frames.map((frame) => frame.statusTop)) -
+      Math.min(...frames.map((frame) => frame.statusTop));
+    const typedDelta =
+      Math.max(...frames.map((frame) => frame.textLength)) -
+      Math.min(...frames.map((frame) => frame.textLength));
+
+    expect(heightDelta).toBeLessThanOrEqual(1);
+    expect(crestTopDelta).toBeLessThanOrEqual(1);
+    expect(statusTopDelta).toBeLessThanOrEqual(1);
+    expect(typedDelta).toBeGreaterThan(10);
+  });
+
   test('tab-away title is human-readable and restores the SEO title', async ({ page }) => {
     await page.addInitScript(() => {
       Object.defineProperty(navigator, 'webdriver', { configurable: true, get: () => false });