SPA readme

examples/SPAExample/README.md

@@ -0,0 +1,94 @@
+# SPAExample
+
+This example demonstrates how to create a Single Page Application (SPA) using Crafter.CppDOM with dynamic content updating and browser history management.
+
+## Features
+
+- Shows how to implement SPA navigation without page reloads
+- Demonstrates usage of `PushState` and `PopState` events
+- Illustrates dynamic content updating based on navigation
+- Shows how to handle browser back/forward buttons
+- Uses modern web techniques for seamless navigation
+
+## Usage
+
+```cpp
+import Crafter.CppDOM;
+import std;
+using namespace Crafter;
+using namespace Crafter::CppDOMBindings;
+
+HtmlElementView* body = new HtmlElementView("body", R"(
+<nav>
+    <h2 style="margin-bottom: 20px; padding: 10px; background-color: #f0f0f0;">SPA Navigation Demo</h2>
+    <a id="home" style="margin-right: 15px; text-decoration: none; color: blue; cursor: pointer;">Home</a>
+    <a id="about" style="margin-right: 15px; text-decoration: none; color: blue; cursor: pointer;">About</a>
+    <a id="contact" style="margin-right: 15px; text-decoration: none; color: blue; cursor: pointer;">Contact</a>
+</nav>
+<div id="content" style="min-height: 200px; padding: 15px; border: 1px solid #ccc;"></div>
+)");
+HtmlElementView* home = new HtmlElementView("home");
+HtmlElementView* about = new HtmlElementView("about");
+HtmlElementView* contact = new HtmlElementView("contact");
+HtmlElementView* content = new HtmlElementView("content");
+
+void UpdateContent(const std::string_view page) {
+    if (page == "home") {
+        content->SetInnerHTML("<h3>Home Page</h3><p>Welcome to the Home page of our Single Page Application!</p><p>This demo shows how to use the new history.pushState and popstate event handling features.</p>");
+    } else if (page == "about") {
+        content->SetInnerHTML("<h3>About Page</h3><p>This is the About page.</p><p>Notice how the URL changes without reloading the page.</p>");
+    } else if (page == "contact") {
+        content->SetInnerHTML("<h3>Contact Page</h3><p>This is the Contact page.</p><p>You can navigate back and forth using the browser's back/forward buttons.</p>");
+    }
+}
+
+int main() {
+    body->SetStyle("font-family: Arial, sans-serif; margin: 0; padding: 20px;");
+    
+    // Add click handlers for navigation
+    home->AddClickListener([](Crafter::MouseEvent e) {
+        PushState("{\"page\": \"home\"}", "Home", "/");
+        UpdateContent("home");
+    });
+    
+    about->AddClickListener([](Crafter::MouseEvent e) {
+        PushState("{\"page\": \"about\"}", "About", "/about");
+        UpdateContent("about");
+    });
+    
+    contact->AddClickListener([](Crafter::MouseEvent e) {
+        PushState("{\"page\": \"contact\"}", "Contact", "/contact");
+        UpdateContent("contact");
+    });
+    
+    // Add popstate listener to handle browser back/forward buttons
+    auto popStateId = AddPopStateListener([]() {
+        std::string path = GetPathNameString();
+        if (path == "/") {
+            UpdateContent("home");
+        } else if (path == "/about") {
+            UpdateContent("about");
+        } else if (path == "/contact") {
+            UpdateContent("contact");
+        } else {
+            UpdateContent("home");
+        }
+    });
+    
+    // Initialize with home page
+    UpdateContent("home");
+    
+    return 0;
+}
+```
+
+## Building and Running
+
+```bash
+crafter-build build executable
+run.sh
+```
+
+Then navigate to `http://localhost:8080/` in your browser.
+
+If caddy is not installed, you can use your favorite static file server instead.