From 34ae85b2b51a3f999a6bce69cf7a8cb74eb6ea60 Mon Sep 17 00:00:00 2001
From: Viktor Vaczi <viktor.vaczi@emergence-engineering.com>
Date: Sun, 7 Jun 2026 18:15:02 +0200
Subject: [PATCH] fix(site): mobile waitlist input height, "Demo coming soon"
 panel, blog cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- WaitlistForm: reset the input's flex when the form stacks — the 16rem
  flex-basis was applying to the height in column layout (256px-tall input).
- DemoVideo: add a comingSoon mode that shows a big "Demo coming soon" panel
  instead of the internal PRODUCE placeholder; enable it in the hero and the
  multiplayer section.
- Blog: retitle the post to "Porting KiCad's Graphics to WebGL with Claude"
  (clean slug), set body/description to "Coming soon.", and drop the
  placeholder text from the blog index.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 site/src/components/DemoVideo.astro           | 33 ++++++++++++++++++-
 site/src/components/WaitlistForm.astro        |  9 +++++
 site/src/content/blog/hello-world.md          | 19 -----------
 ...ing-kicad-graphics-to-webgl-with-claude.md |  7 ++++
 site/src/pages/blog/index.astro               |  3 +-
 site/src/sections/Hero.astro                  |  1 +
 site/src/sections/Multiplayer.astro           |  1 +
 7 files changed, 51 insertions(+), 22 deletions(-)
 delete mode 100644 site/src/content/blog/hello-world.md
 create mode 100644 site/src/content/blog/porting-kicad-graphics-to-webgl-with-claude.md

diff --git a/site/src/components/DemoVideo.astro b/site/src/components/DemoVideo.astro
index dc8c327..9a46412 100644
--- a/site/src/components/DemoVideo.astro
+++ b/site/src/components/DemoVideo.astro
@@ -18,10 +18,21 @@ interface Props {
   poster?: string;
   caption?: string;
   ratio?: string; // default 16/9
+  /** When true and no video yet, show a big "Demo coming soon" panel instead of
+   *  the internal PRODUCE placeholder. */
+  comingSoon?: boolean;
   class?: string;
 }
 
-const { mp4, webm, poster, caption, ratio = '16 / 9', class: cls = '' } = Astro.props;
+const {
+  mp4,
+  webm,
+  poster,
+  caption,
+  ratio = '16 / 9',
+  comingSoon = false,
+  class: cls = '',
+} = Astro.props;
 const hasVideo = Boolean(mp4 || webm);
 ---
 
@@ -45,6 +56,10 @@ const hasVideo = Boolean(mp4 || webm);
           <Icon name="icons/play.svg" size="3.5rem" alt="" />
         </button>
       </div>
+    ) : comingSoon ? (
+      <div class="demo-soon bp-grid" style={`aspect-ratio:${ratio};`}>
+        <span class="demo-soon-text">Demo coming soon</span>
+      </div>
     ) : (
       <Placeholder
         label="PRODUCE: multiplayer demo loop — 2–3 live cursors, one board (§4b.2)"
@@ -87,6 +102,22 @@ const hasVideo = Boolean(mp4 || webm);
   .demo-play[hidden] {
     display: none;
   }
+  .demo-soon {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    padding: 1.5rem;
+    text-align: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background-color: var(--bg-soft);
+  }
+  .demo-soon-text {
+    font-size: clamp(1.6rem, 5.5vw, 3rem);
+    font-weight: 800;
+    letter-spacing: -0.01em;
+    color: var(--fg);
+  }
   .demo-caption {
     margin-top: 0.75rem;
     font-family: var(--font-mono);
diff --git a/site/src/components/WaitlistForm.astro b/site/src/components/WaitlistForm.astro
index 14d73bc..ab95d20 100644
--- a/site/src/components/WaitlistForm.astro
+++ b/site/src/components/WaitlistForm.astro
@@ -78,6 +78,11 @@ const hpId = `wl-hp-${source}`;
     flex-direction: column;
     align-items: stretch;
   }
+  /* In a column the 16rem flex-basis would apply to the HEIGHT, ballooning the
+     input — reset it to content height when stacked. */
+  .layout-stack .wl-form input[type='email'] {
+    flex: 0 0 auto;
+  }
   .wl-form input[type='email'] {
     flex: 1 1 16rem;
     min-width: 0;
@@ -126,6 +131,10 @@ const hpId = `wl-hp-${source}`;
     .wl-form {
       flex-direction: column;
     }
+    /* Same column flex-basis fix as above: keep the input at content height. */
+    .wl-form input[type='email'] {
+      flex: 0 0 auto;
+    }
     .wl-form .btn {
       width: 100%;
     }
diff --git a/site/src/content/blog/hello-world.md b/site/src/content/blog/hello-world.md
deleted file mode 100644
index 8246fd4..0000000
--- a/site/src/content/blog/hello-world.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: "Hello World"
-description: "First placeholder post for the KiCad WebAssembly blog."
-pubDate: 2026-06-07
----
-
-This is a placeholder blog post. Replace this body with real content.
-
-## A heading
-
-Markdown content is rendered to static HTML at build time, so this page ships
-**zero JavaScript** to the browser.
-
-- Bullet one
-- Bullet two
-- Bullet three
-
-To add another post, drop a new `.md` file in `src/content/blog/` with the same
-frontmatter fields (`title`, `description`, `pubDate`).
diff --git a/site/src/content/blog/porting-kicad-graphics-to-webgl-with-claude.md b/site/src/content/blog/porting-kicad-graphics-to-webgl-with-claude.md
new file mode 100644
index 0000000..794172a
--- /dev/null
+++ b/site/src/content/blog/porting-kicad-graphics-to-webgl-with-claude.md
@@ -0,0 +1,7 @@
+---
+title: "Porting KiCad's Graphics to WebGL with Claude"
+description: "Coming soon."
+pubDate: 2026-06-07
+---
+
+Coming soon.
diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
index fc7afa9..c5fb328 100644
--- a/site/src/pages/blog/index.astro
+++ b/site/src/pages/blog/index.astro
@@ -13,9 +13,8 @@ const dateFmt = new Intl.DateTimeFormat('en-US', {
 });
 ---
 
-<BaseLayout title="Blog" description="Placeholder blog index.">
+<BaseLayout title="Blog" description="The PCBJam engineering blog — WebAssembly, real-time collaboration, and KiCad internals.">
   <h1>Blog</h1>
-  <p class="muted">Placeholder blog index. Posts live in src/content/blog/.</p>
 
   <ul class="post-list">
     {
diff --git a/site/src/sections/Hero.astro b/site/src/sections/Hero.astro
index db823a0..daeac36 100644
--- a/site/src/sections/Hero.astro
+++ b/site/src/sections/Hero.astro
@@ -34,6 +34,7 @@ import Icon from '../components/Icon.astro';
       {/* TODO(assets): swap for hero board still w/ presence cursors (§4b.3) or the
           multiplayer demo loop (§4b.2) once produced. */}
       <DemoVideo
+        comingSoon
         caption="2 editors · live cursors · one board.kicad_pcb · no merge step"
       />
     </div>
diff --git a/site/src/sections/Multiplayer.astro b/site/src/sections/Multiplayer.astro
index 4ae7378..371b2ea 100644
--- a/site/src/sections/Multiplayer.astro
+++ b/site/src/sections/Multiplayer.astro
@@ -36,6 +36,7 @@ const subpoints = [
 
   <DemoVideo
     class="mp-demo"
+    comingSoon
     caption="2 editors · live cursors · one board.kicad_pcb · no merge step"
   />