webgpu demo

implementations/Catcrafts-Blog.cpp

@@ -10,11 +10,34 @@ export module Catcrafts:Blog_impl;
 import :Blog;
 import :Root;
 import :Views;
+import :Demo;
 import Crafter.Graphics;
 import std;
 
 using namespace Crafter;
 
+namespace Catcrafts {
+    // Post that hosts the live ray-traced WebGPU demo. RenderBlogPost
+    // injects the mount container into this post and mounts the render
+    // canvas into it once the DOM is in place.
+    constexpr std::string_view kDemoPostSlug = "hello-world-2";
+
+    // Markup for the embedded demo: a fixed-height host box the render
+    // canvas is reparented into (see Catcrafts:Demo / WebGPU::SetCanvasMount)
+    // plus a caption. The id must match kDemoMountId.
+    constexpr std::string_view kDemoCardHtml = R"(
+<div class="webgpu-demo">
+    <div id="webgpu-demo" class="webgpu-demo-canvas"></div>
+    <p class="webgpu-demo-caption">
+        Live above: a scene ray-traced in real time &mdash; four coloured
+        point lights, one soft shadow per light &mdash; running through the
+        Crafter.Graphics WebGPU wavefront tracer, driven from this page's
+        C++ compiled to WebAssembly. Not a video, not an iframe: the same
+        WASM module that rendered this text is tracing those pixels.
+    </p>
+</div>)";
+}
+
 export namespace Catcrafts {
     // Persistent storage for the per-post card click handlers. HtmlElementPtr
     // unregisters its listeners on destruction, so the elements have to
@@ -63,6 +86,7 @@ export namespace Catcrafts {
     void RenderBlogPost(const std::string_view slug) {
         for(const BlogPost& post : posts) {
             if(post.slug == slug) {
+                const bool isDemo = post.slug == kDemoPostSlug;
                 MainContent().SetInnerHTML(std::format(R"(
 <div class="blog-post-page">
     <div class="post-header">
@@ -72,7 +96,13 @@ export namespace Catcrafts {
     <div class="post-content">
         {}
     </div>
-</div>)", post.name, post.date, post.content));
+    {}
+</div>)", post.name, post.date, post.content, isDemo ? kDemoCardHtml : std::string_view{}));
+
+                // The #webgpu-demo container now exists in the DOM, so the
+                // render canvas can be reparented into it and tracing can
+                // start. RenderRoot() already called UnmountDemo() for us.
+                if(isDemo) MountDemo();
                 return;
             }
         }