Can now add scoped rcss files

assets/main.rml

@@ -7,8 +7,8 @@
     <div id="navbar">
         <h1>RmlUi App Template</h1>
         <div class="nav-buttons">
+            <button id="nav-home">Home</button>
             <button id="nav-test">Test Page</button>
-            <button id="nav-about">About</button>
             <button id="nav-lua-test" onclick="NavigateTo('lua-test')">Lua Test</button>
         </div>
     </div>

assets/pages/about.rml

@@ -1,4 +0,0 @@
-<div id="page-root" class="page">
-    <h1>About</h1>
-    <p>This is a static page</p>
-</div>

assets/pages/home.rml

@@ -0,0 +1,14 @@
+<div id="page-root" class="page">
+    <h1>Home</h1>
+    <p>This is an RmlUi template project with some nice built in features such as:</p>
+    <ul>
+        <li>- Lua and SVG plugins enabled</li>
+        <li>- A shell + page loading system with scoped stylesheets and lua functionality</li>
+        <li>- Hot reload when pressing F5</li>
+        <li>- Basic application state management</li>
+        <li>- A basic stylesheet for common elements</li>
+        <li>- Easy custom controls system</li>
+        <li>- Optional Raylib context</li>
+        <li>- Nix flake for easy development/building</li>
+    </ul>
+</div>

assets/pages/lua-test.rml

@@ -1,8 +1,10 @@
 <div id="page-root">
     <h1>Lua test page</h1>
-    <p>This button uses <code>NavigateTo('about')</code> lua code instead of a registered C++ event</p>
+    <p>This button uses <code>NavigateTo('about')</code> lua code instead of being harcoded in a C++ PageBase class:</p>
     <button onclick="NavigateTo('about')">Go to About Page</button>
 
+    <p>If you have a .lua file with the same name as the page in the pages directory, it will be loaded at runtime so you can add functionality to a page like this:</p>
+
     <p>This button calls <code>LuaTest.Test()</code> from the scoped `lua-test.lua` file</p>
     <button onclick="LuaTest.Test(event)">Click me!</button>
     <p id="lua-counter"></p>

assets/pages/test-page.rcss

@@ -0,0 +1,3 @@
+#page-root h1 {
+    color: red;
+}

assets/pages/test-page.rml

@@ -0,0 +1,7 @@
+<div id="page-root" data-model="test-page" class="page">
+    <h1>Test page</h1>
+    <p>{{greeting}}</p>
+    <button id="test-btn">Button clicked: {{counter}} times</button>
+
+    <p>If you have a .rcss file with the same name as the page in the pages directory, it will be loaded at runtime so you can add custom styling to a page, which is why the header is red on this page only.</p>
+</div>

assets/pages/testPage.rml

@@ -1,5 +0,0 @@
-<div id="page-root" data-model="testPage" class="page">
-    <h1>Test page</h1>
-    <p>{{greeting}}</p>
-    <button id="test-btn">Button clicked: {{counter}} times</button>
-</div>

src/app.cpp

@@ -2,6 +2,7 @@
 #include <RmlUi/Core/Core.h>
 #include <RmlUi/Core/Factory.h>
 #include <RmlUi/Lua/Interpreter.h>
+#include <RmlUi/Core/StyleSheetContainer.h>
 #include <RmlUi/Lua.h>
 #include <filesystem>
 #include <fstream>
@@ -98,6 +99,17 @@ bool App::NavigateTo(const std::string &pageName) {
     } else {
         std::cout << "[WARN] failed to create data model for page '" << pageName << "'\n";
     }
+    
+    std::string rcssPath = GetAssetsPath() + "/pages/" + pageName + ".rcss";
+    if (std::filesystem::exists(rcssPath)) {
+        auto pageStyleSheet = Rml::Factory::InstanceStyleSheetFile(rcssPath);
+        if (pageStyleSheet && baseStyleSheet) {
+            auto combined = baseStyleSheet->CombineStyleSheetContainer(*pageStyleSheet);
+            doc->SetStyleSheetContainer(combined);
+        }
+    } else if (doc && baseStyleSheet) {
+        doc->SetStyleSheetContainer(baseStyleSheet);
+    }
 
     pageOutlet->SetInnerRML(content);
 
@@ -125,6 +137,8 @@ bool App::LoadUi() {
         std::cout << "[WARN] main.rml has no element with id=\"page-content\"\n";
     }
 
+    baseStyleSheet = Rml::Factory::InstanceStyleSheetFile(GetAssetsPath() + "/styles/main.rcss");
+    
     listeners.clear();
     if (onBindListeners) {
         onBindListeners(doc);

src/app.hpp

@@ -42,6 +42,8 @@ private:
     Rml::ElementDocument* doc;
     Rml::Element* pageOutlet = nullptr;
 
+    Rml::SharedPtr<Rml::StyleSheetContainer> baseStyleSheet;
+
     std::vector<std::unique_ptr<Rml::EventListener>> listeners;
     std::function<void(Rml::ElementDocument*)> onBindListeners;
 

src/main.cpp

@@ -96,18 +96,18 @@ int main() {
 
     std::cout << "Loading UI...\n";
     
-    app->RegisterPage<TestPagePage>("testPage");
+    app->RegisterPage<TestPagePage>("test-page");
 
     app->SetupListeners([](Rml::ElementDocument *doc) {
         if (auto *btn = doc->GetElementById("nav-test")) {
             app->RegisterListener(btn, std::make_unique<ButtonClickListener>([](Rml::Event&){
-                app->NavigateTo("testPage");
+                app->NavigateTo("test-page");
             }));
         }
 
-        if (auto *btn = doc->GetElementById("nav-about")) {
+        if (auto *btn = doc->GetElementById("nav-home")) {
             app->RegisterListener(btn, std::make_unique<ButtonClickListener>([](Rml::Event&){
-                app->NavigateTo("about");
+                app->NavigateTo("home");
             }));
         }
     });