Add a Blog page with card index and full-post view

New /blog.html: a card grid (hero image, date, title, 3-4 line summary)
that swaps to the full post when a card is clicked. Routing is driven by
location.hash in assets/js/blog.js, so post URLs are shareable and
Back/Forward work; an unknown slug falls back to the index. Posts live
inline in blog.html as hidden <article>s — adding one is a card plus an
article sharing a slug, no build step and no fetch.

Nav gets a Blog link on both pages. Since .nav-links is display:none
under 940px and there's no hamburger to replace it, Blog also appears in
.nav-cta at mobile widths so it stays reachable on phones.

Note for future styling: .blog-post deliberately sets no `display`, as a
class rule out-specifies the UA's [hidden] { display: none } and every
post would then render stacked on the index.

Seed content is three placeholder posts drawn from existing site copy —
replace before this is announced.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ten9876

.github/workflows/deploy.yml

@@ -34,7 +34,7 @@ jobs:
         if: ${{ env.CF_TOKEN != '' }}
         run: |
           mkdir -p _site
-          cp -R index.html 404.html styles.css assets _headers _site/
+          cp -R index.html blog.html 404.html styles.css assets _headers _site/
           [ -f _redirects ] && cp _redirects _site/ || true
           echo "Staged:" && find _site -maxdepth 2 -type f | sort
 

README.md

@@ -11,12 +11,35 @@ feature-forward, using AetherSDR's own palette (deep navy + electric cyan→teal
 
 ```
 index.html            The landing page (single page, no build step required)
+blog.html             The blog — card index + every post, routed client-side
 styles.css            All styling (design tokens at the top)
 assets/img/           Optimized screenshots, logo, and 3D-spectrum visuals
+assets/js/blog.js     Blog card-index <-> post routing
 serve.py              Tiny local static server (python3 serve.py → :4321)
 scripts/build.py      Bundles everything into dist/index.html (self-contained)
 ```
 
+## Adding a blog post
+
+Everything lives in `blog.html` — no build step, no separate post files. A post
+is two blocks that share a slug:
+
+1. **A card** in the `.blog-grid`, linking to `#your-slug`. The description is
+   clamped to four lines, so write 3–4 lines and don't worry about matching
+   neighbouring card heights.
+2. **An `<article class="blog-post" data-post="your-slug" ... hidden>`** further
+   down, holding the hero image and full body. Keep the `hidden` attribute — it
+   is what keeps the post off the index until it's routed to.
+
+`assets/js/blog.js` matches the two by slug: clicking a card sets the hash, which
+swaps the grid out for that post. Post URLs (`/blog.html#your-slug`) are
+shareable, and Back/Forward work. Body copy goes inside `.blog-body`, which
+styles headings, lists, links, quotes, and code blocks for you.
+
+> Note: don't add a `display` value to `.blog-post` in CSS — a class rule
+> out-specifies the browser's `[hidden] { display: none }` and every post would
+> render on the index at once.
+
 ## Local preview
 
 ```bash

assets/js/blog.js

@@ -0,0 +1,95 @@
+/* AetherSDR blog — card index <-> full post routing.
+ *
+ * The index grid and every post live in blog.html; posts start `hidden`.
+ * Clicking a card routes to #<slug>, which swaps the grid out for the
+ * matching <article data-post="<slug>">. Routing is driven entirely by
+ * location.hash, so a post URL is shareable and Back/Forward work.
+ *
+ * No JS -> the <noscript> rule in blog.html reveals every post stacked
+ * under the index, so the content is still readable.
+ */
+(function () {
+  var index = document.getElementById('blog-index');
+  var posts = document.querySelectorAll('.blog-post[data-post]');
+  var baseTitle = 'AetherSDR';
+  if (!index || !posts.length) return;
+
+  // Slug of the post we're leaving, so we can restore focus to its card.
+  var lastSlug = '';
+
+  // Build slug -> article map once.
+  var bySlug = {};
+  for (var i = 0; i < posts.length; i++) {
+    bySlug[posts[i].getAttribute('data-post')] = posts[i];
+  }
+
+  function currentSlug() {
+    // decodeURIComponent guards against slugs that arrive percent-encoded.
+    var raw = (location.hash || '').replace(/^#/, '');
+    try { raw = decodeURIComponent(raw); } catch (e) {}
+    return raw;
+  }
+
+  // Idempotent: safe to call from hashchange and popstate both.
+  function route(opts) {
+    var slug = currentSlug();
+    var post = Object.prototype.hasOwnProperty.call(bySlug, slug) ? bySlug[slug] : null;
+
+    for (var i = 0; i < posts.length; i++) {
+      posts[i].hidden = posts[i] !== post;
+    }
+    index.hidden = !!post;
+    document.body.classList.toggle('is-reading', !!post);
+
+    if (post) {
+      var h1 = post.querySelector('h1');
+      document.title = (h1 ? h1.textContent.trim() + ' — ' : '') + baseTitle + ' Blog';
+      // Move focus to the article so keyboard and screen-reader users land
+      // on the post rather than back at the top of the document.
+      if (opts && opts.focus) post.focus({ preventScroll: true });
+    } else {
+      document.title = 'Blog — ' + baseTitle;
+      // Returning to the index: put focus back on the card we came from,
+      // otherwise it would be stranded on the article we just hid.
+      if (lastSlug) {
+        var card = index.querySelector('.blog-card[href="#' + lastSlug + '"]');
+        if (card) card.focus({ preventScroll: true });
+      }
+    }
+    lastSlug = post ? slug : '';
+
+    if (!opts || opts.scroll !== false) scrollToContent();
+  }
+
+  // Land just below the sticky nav rather than at the very top, and skip the
+  // page's smooth-scroll so view swaps feel instant instead of animated.
+  function scrollToContent() {
+    var behavior = 'auto';
+    var root = document.documentElement;
+    var prev = root.style.scrollBehavior;
+    root.style.scrollBehavior = behavior;
+    window.scrollTo(0, 0);
+    // Restore on the next frame so in-page anchor links keep smooth scrolling.
+    requestAnimationFrame(function () { root.style.scrollBehavior = prev; });
+  }
+
+  // "Back to blog" — clear the hash without leaving a bare "#" in the URL.
+  document.addEventListener('click', function (e) {
+    var back = e.target.closest ? e.target.closest('[data-blog-back]') : null;
+    if (!back) return;
+    e.preventDefault();
+    if (history.pushState) {
+      history.pushState(null, '', location.pathname + location.search);
+      route({ focus: false });
+    } else {
+      location.hash = '';
+    }
+  });
+
+  window.addEventListener('hashchange', function () { route({ focus: true }); });
+  window.addEventListener('popstate', function () { route({ focus: false }); });
+
+  // Initial render: don't steal focus or scroll on a plain page load, but do
+  // honour a deep link like blog.html#signal-chain.
+  route({ focus: false, scroll: !!currentSlug() });
+})();