catcrafts.net/implementations/Catcrafts-Blog.cpp

/*
catcrafts.net
Copyright (C) 2026 Catcrafts

The source code of this website is made available for viewing purposes only.
No permission is granted to copy, modify, distribute, or create derivative works.
*/

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
    // outlive Render(); clear() at the top of RenderBlog() detaches the
    // previous render's handlers before we attach the new ones.
    std::vector<Dom::HtmlElementPtr> blogButtons;

    void RenderBlog() {
        blogButtons.clear();
        std::string html = "";
        for(const BlogPost& post : posts) {
            std::string previewContent = post.content;
            if(previewContent.length() > 200) {
                std::size_t lastSpace = previewContent.find_last_of(' ', 200);
                if(lastSpace != std::string::npos) {
                    previewContent = previewContent.substr(0, lastSpace) + "...";
                } else {
                    previewContent = previewContent.substr(0, 200) + "...";
                }
            }
            html += std::format(R"(
<div class="post fade-in" id="blog-post-{}">
    <div class="post-header">
        <h2 class="post-title"><a>{}</a></h2>
        <span class="post-date">{}</span>
    </div>
    <div class="post-content">
        {}
    </div>
    <div class="post-footer">
        <a class="btn">Read Full Post</a>
    </div>
</div>)", post.slug, post.name, post.date, previewContent);
        }
        MainContent().SetInnerHTML(std::format(R"(<div class="blog-posts">{}</div>)", html));

        for(const BlogPost& post : posts) {
            Dom::HtmlElementPtr& cardView = blogButtons.emplace_back(std::format("blog-post-{}", post.slug));
            cardView.AddClickListener([slug = post.slug](Dom::MouseEvent) {
                Router::PushState("{}", "", std::format("/blog/{}", slug));
                RenderRoot(std::format("/blog/{}", slug));
            });
        }
    }

    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">
        <h1 class="post-title">{}</h1>
        <span class="post-date">{}</span>
    </div>
    <div class="post-content">
        {}
    </div>
    {}
</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;
            }
        }

        MainContent().SetInnerHTML("<h1>Post Not Found</h1><p>The requested blog post could not be found.</p>");
    }
}