Initial commit

2025-11-30 09:05:02 +08:00
commit 265175ed82
23 changed files with 3329 additions and 0 deletions
--- a/docs/tutorials/basics/serving-dynamic-content.md
+++ b/docs/tutorials/basics/serving-dynamic-content.md
@@ -0,0 +1,145 @@
+# Serving Dynamic HTML Content in Vuer
+
+## Overview
+
+Vuer allows you to serve dynamic content by adding custom route handlers to your application server.
+
+## Implementation Method
+
+You can register a dynamic HTML handler using the `add_route()` method.
+
+## Basic Example
+
+```python
+from vuer import Vuer
+
+app = Vuer()
+
+counter = 0
+
+def dynamic_html_handler():
+    global counter
+    counter += 1
+    template = f"""
+    <!DOCTYPE html>
+    <html>
+    <head><title>Dynamic HTML</title></head>
+    <body>
+        <h1>Counter Value: {counter}</h1>
+    </body>
+    </html>
+    """
+    return template
+
+app.add_route("/dynamic", dynamic_html_handler, method="GET")
+app.run()
+```
+
+## Usage
+
+After starting the server, visit `http://localhost:8012/dynamic` to see the dynamically generated content. The counter value will update on each page reload.
+
+## Key Parameters
+
+- **Route path**: Specify the URL endpoint (e.g., "/dynamic")
+- **Handler function**: Returns HTML content as a string
+- **HTTP method**: Specify the request method (e.g., "GET")
+
+## Advanced Example with JSON Response
+
+```python
+from vuer import Vuer
+import json
+
+app = Vuer()
+
+def json_api_handler():
+    data = {
+        "status": "success",
+        "data": {
+            "message": "Hello from Vuer!",
+            "timestamp": time.time()
+        }
+    }
+    return json.dumps(data)
+
+app.add_route("/api/data", json_api_handler, method="GET")
+app.run()
+```
+
+## Multiple Routes
+
+You can add multiple routes to your application:
+
+```python
+from vuer import Vuer
+
+app = Vuer()
+
+def home_handler():
+    return "<h1>Home Page</h1>"
+
+def about_handler():
+    return "<h1>About Page</h1>"
+
+def api_handler():
+    return '{"status": "ok"}'
+
+app.add_route("/", home_handler, method="GET")
+app.add_route("/about", about_handler, method="GET")
+app.add_route("/api/status", api_handler, method="GET")
+
+app.run()
+```
+
+## Best Practices
+
+1. **Return strings**: Handler functions should return HTML or text as strings
+2. **Use templates**: Consider using template engines for complex HTML
+3. **Handle errors**: Add error handling in your route handlers
+4. **Set content types**: For JSON responses, consider setting appropriate headers
+
+## Combining with 3D Scenes
+
+You can serve both dynamic HTML content and 3D scenes from the same Vuer application:
+
+```python
+from vuer import Vuer
+from vuer.schemas import Scene, Box
+import asyncio
+
+app = Vuer()
+
+# Add dynamic HTML route
+def stats_handler():
+    return f"""
+    <html>
+    <body>
+        <h1>Vuer Statistics</h1>
+        <p>Server running on port 8012</p>
+    </body>
+    </html>
+    """
+
+app.add_route("/stats", stats_handler, method="GET")
+
+# Add 3D scene
+@app.spawn
+async def main(session):
+    session.set @ Scene(
+        Box(
+            args=[0.1, 0.1, 0.1],
+            position=[0, 0, 0],
+            key="box",
+        ),
+    )
+
+    while True:
+        await asyncio.sleep(1.0)
+
+app.run()
+```
+
+## Source
+
+Documentation: https://docs.vuer.ai/en/latest/tutorials/basics/adding_html_handler.html