From 59a7caec82c78806805a2022edbfd53eace507a1 Mon Sep 17 00:00:00 2001 From: Jorijn van der Graaf Date: Mon, 10 Nov 2025 22:08:08 +0100 Subject: [PATCH] style readme --- README.md | 86 ++++++++++++++++++--------------- examples/StyleExample/README.md | 57 ++++++++++++++++++++++ 2 files changed, 103 insertions(+), 40 deletions(-) create mode 100644 examples/StyleExample/README.md diff --git a/README.md b/README.md index 5891544..20a4f00 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,59 @@ -# Crafter.CppDOM +# About -A C++ DOM library for web applications that allows you to manipulate HTML elements directly from C++. +![alt text](https://github.com/Catcrafts/Crafter.Web/blob/master/hello.png?raw=true) -## New Styling Features +Crafter.CppDOM is a C++ library that exposes the browser DOM api's to C++ WebAssembly. -This library now supports comprehensive styling capabilities beyond just inline HTML: - -### Style Methods - -- `SetStyle(const std::string_view style)` - Sets multiple CSS properties at once -- `SetProperty(const std::string_view property, const std::string_view value)` - Sets a single CSS property -- `AddClass(const std::string_view className)` - Adds a CSS class to the element -- `RemoveClass(const std::string_view className)` - Removes a CSS class from the element -- `ToggleClass(const std::string_view className)` - Toggles a CSS class on the element -- `HasClass(const std::string_view className)` - Checks if the element has a specific CSS class - -### Example Usage +# How to use +Please view the examples folder, this is a snippit from the HelloElement example: ```cpp -HtmlElement div("myDiv"); +import Crafter.CppDOM; +using namespace Crafter::CppDOM; -// Set multiple styles at once -div.SetStyle("color: blue; font-size: 20px; background-color: lightgray;"); +int main(){ + HtmlElement body("body"); + body.SetInnerHTML("Hello World!"); +} +``` +You can also view the wiki for more detailed information. -// Set individual properties -div.SetProperty("border", "2px solid red"); -div.SetProperty("padding", "10px"); +It is highly recommended to use this with [Crafter.Build](https://forgejo.catcrafts.net/Catcrafts/Crafter.Build), but it is not strictly required if the same way of injecting the env is followed. The following instructions will be for Crafter.Build. -// Work with CSS classes -div.AddClass("highlight"); -div.AddClass("container"); -div.ToggleClass("active"); -bool isActive = div.HasClass("active"); -div.RemoveClass("highlight"); +## Quickstart +create a ``project.json`` in an empty folder, open it in your preferred text editor. +Create a basic project file, that describes your web project. +```JSON +{ + "name": "main", + "configurations": [ + { + "name": "executable", + "implementations": ["main"], + "target": "wasm32-wasi", + "debug" : true, + "dependencies": [ + { + "path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git", + "configuration":"lib-debug" + } + ], + } + ] +} ``` -### Benefits +Save and close the file, create a ``main.cpp`` +```cpp +import Crafter.CppDOM; +using namespace Crafter::CppDOM; -1. **Type Safety**: Compile-time checking of method names and parameters -2. **Performance**: More efficient than constructing HTML strings -3. **Maintainability**: Clear separation between content and styling logic -4. **Flexibility**: Support for both inline styles and CSS classes -5. **Developer Experience**: Intuitive API similar to JavaScript DOM +int main(){ + HtmlElement body("body"); + body.SetInnerHTML("Hello World!"); +} +``` -## Examples +Save and close, then run ``crafter-build build executable && caddy file-server --listen :8080 --root bin/executable``. if you have caddy installed, if not use your favorite static file server instead. Now you can open the browser at ``http://localhost:8080`` and ``Hello World!`` will appear in the browser. -Check the examples directory for usage demonstrations: -- `HelloWorld` - Basic usage -- `HelloElement` - Creating and manipulating elements -- `InteractiveElement` - Interactive elements with event handling -- `AllEventHandling` - Complete event handling example -- `StyleExample` - Demonstrates new styling features \ No newline at end of file +This sample can also be viewed in the [HelloElement example](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples) \ No newline at end of file diff --git a/examples/StyleExample/README.md b/examples/StyleExample/README.md new file mode 100644 index 0000000..eac24f1 --- /dev/null +++ b/examples/StyleExample/README.md @@ -0,0 +1,57 @@ +# StyleExample + +This example demonstrates how to apply styling to HTML elements using Crafter.CppDOM. + +## Features + +- Shows how to apply inline styles using CSS strings +- Demonstrates setting individual CSS properties +- Illustrates working with CSS classes (adding, removing, toggling) +- Shows how to check for class existence + +## Usage + +```cpp +import Crafter.CppDOM; +using namespace Crafter::CppDOM; + +int main(){ + HtmlElement body("body","
"); + // Create a div element + HtmlElement div("myDiv"); + + // Set some initial content + div.SetInnerHTML("

This is a styled paragraph

"); + + // Apply styles using different methods + div.SetStyle("color: blue; font-size: 20px; background-color: lightgray;"); + + // Or apply individual properties + div.SetProperty("border", "2px solid red"); + div.SetProperty("padding", "10px"); + + // Add CSS classes + div.AddClass("highlight"); + div.AddClass("container"); + + // Demonstrate class toggling + div.ToggleClass("active"); + + // Check if class exists + bool hasActiveClass = div.HasClass("active"); + + // Remove a class + div.RemoveClass("highlight"); +} +``` + +## 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. \ No newline at end of file