Merge pull request #63 from chasefleming/chasefleming/example-readmes

Add readmes for examples

examples/htmx-counter/README.md

@@ -0,0 +1,48 @@
+# Simple Counter Application with elem-go and htmx
+
+A basic web application demonstrating a simple counter that can be incremented without reloading the page. It uses `elem-go` to construct HTML elements programmatically and `htmx` for handling the asynchronous increment of the counter.
+
+## Prerequisites
+
+Ensure that Go is installed on your system.
+
+## Installation
+
+Clone or download the repository, then run the following commands to download the necessary packages:
+
+```bash
+go mod tidy
+```
+
+This will install elem-go and the htmx subpackage required to run the application.
+
+## Running the Application
+
+To run the application, execute the following command:
+
+```bash
+go run main.go
+```
+
+The server will start on localhost at port 8080. You can view the application by navigating to `http://localhost:8080` in your web browser.
+
+## Features
+
+**Increment Counter**: Click the "Increment" button to increase the counter value. This action will send a POST request to `/increment` and update the counter display asynchronously.
+
+## Structure
+
+- `GET /`: Renders the home page with the current value of the counter and an "Increment" button.
+- `POST /increment`: Increases the counter by one and returns the updated value.
+
+## Asynchronous Updates with htmx
+
+The counter is updated asynchronously using htmx. When the "Increment" button is clicked, htmx sends a POST request to `/increment`, receives the new counter value, and updates the relevant part of the page without reloading.
+
+## HTML Generation
+
+The HTML for the page is generated on the server using the elem-go library, with elements such as `button` and `div` created programmatically. htmx attributes are applied directly to elements to enable the asynchronous behavior.
+
+## Stopping the Server
+
+To stop the application, press `Ctrl + C` in the terminal where the server is running.

examples/htmx-counter/main.go

@@ -37,22 +37,22 @@ func incrementCounterHandler(w http.ResponseWriter, r *http.Request) {
 
 func generateCounterContent() string {
 	head := elem.Head(nil,
-		elem.Script(elem.Attrs{attrs.Src: "https://unpkg.com/[email protected]"}),
+		elem.Script(attrs.Props{attrs.Src: "https://unpkg.com/[email protected]"}),
 	)
 
-	buttonStyle := elem.Style{
+	buttonStyle := styles.Props{
 		styles.BackgroundColor: "blue",
 		styles.Color:           "white",
 	}
 
 	body := elem.Body(nil,
-		elem.Button(elem.Attrs{
+		elem.Button(attrs.Props{
 			htmx.HXPost:   "/increment",
 			htmx.HXTarget: "#counter-div",
 			htmx.HXSwap:   "innerText",
-			attrs.Style:   elem.ApplyStyle(buttonStyle),
+			attrs.Style:   buttonStyle.ToInline(),
 		}, elem.Text("Increment")),
-		elem.Div(elem.Attrs{attrs.ID: "counter-div"}, elem.Text(fmt.Sprintf("%d", counter))),
+		elem.Div(attrs.Props{attrs.ID: "counter-div"}, elem.Text(fmt.Sprintf("%d", counter))),
 	)
 
 	htmlDoc := elem.Html(nil, head, body)

examples/htmx-fiber-counter/README.md

@@ -0,0 +1,53 @@
+# Counter App Example with elem-go, htmx, Go Fiber
+
+This is a simple counter application demonstrating the integration of a Go Fiber backend with elem-go for server-side HTML element creation and htmx for dynamic front-end interactions.
+
+## Prerequisites
+
+Before you begin, ensure you have Go installed on your system.
+
+## Installation
+
+Clone or download the repository, then run the following commands to download the necessary packages:
+
+```bash
+go mod tidy
+```
+
+This will install elem-go along with Go Fiber and the htmx subpackage required to run the application.
+
+## Running the App
+
+Navigate to the directory containing the application's source code and execute the following command:
+
+```bash
+go run main.go
+```
+
+This command compiles and runs the Go program, starting the Go Fiber server on port `3000`.
+
+## Using the Application
+
+Open your web browser and go to `http://localhost:3000` to view and interact with the counter application.
+
+- Click on "+" to increment the counter.
+- Click on "-" to decrement the counter.
+
+These actions will trigger htmx requests to the server at the `/increment` and `/decrement` endpoints, respectively, which will update the counter value displayed on the page without needing a full page refresh.
+
+## Code Explanation
+
+The Go application defines three routes:
+
+- `POST /increment`: Increases the counter and returns the new value as a string.
+- `POST /decrement`: Decreases the counter and returns the new value as a string.
+- `GET /`: Serves the main HTML page which includes:
+  - The htmx script for handling attributes like `hx-post` and `hx-target`.
+  - A styled button to increment and decrement the counter.
+  - A div element to display the current value of the counter, which is updated by htmx when either button is clicked.
+
+The elem-go library is used to programmatically create the HTML content served on the root path. The HTML content includes a head element with the required htmx script and a body element with inline styling for the counter and buttons.
+
+## Stopping the Server
+
+To stop the application, switch to the terminal window where it's running and press `Ctrl + C`.

examples/htmx-fiber-todo/README.md

@@ -0,0 +1,54 @@
+# Todo List Application with elem-go, htmx, and Go Fiber
+
+This project is a Todo List web application built with Go using the Go Fiber framework. It features server-side rendering of HTML with elem-go and uses htmx to handle asynchronous actions without needing to reload the page.
+
+## Prerequisites
+
+Before you begin, ensure you have Go installed on your system.
+
+## Installation
+
+Clone or download the repository, then run the following commands to download the necessary packages:
+
+```bash
+go mod tidy
+```
+
+This will install elem-go along with Go Fiber and the htmx subpackage required to run the application.
+
+## Running the App
+
+Navigate to the directory containing the application's source code and execute the following command:
+
+```bash
+go run main.go
+```
+
+This command compiles and runs the Go program, starting the Go Fiber server on port `3000`.
+
+## Features
+
+- **Add Todos**: Enter a new task in the text box and click "Add" or press enter to add a new Todo to the list.
+- **Toggle Todos**: Click on a Todo item to toggle its Done status. Items marked as done will have a line-through style.
+
+## Structure
+
+- `GET /`: Displays the list of Todo items.
+- `POST /toggle/:id`: Toggles the Done status of a Todo based on its ID.
+- `POST /add`: Adds a new Todo to the list.
+
+## HTML Generation
+
+HTML content is programmatically generated using the elem-go library. This includes:
+
+- A form for adding new Todos.
+- A dynamic list that renders each Todo as an `li` element with an `input` checkbox to toggle completion.
+- Styling for elements is handled inline using the `styles` subpackage.
+
+## Asynchronous Behavior
+
+Using htmx, the application performs actions like adding a new Todo or toggling the completion status without a full page reload. This provides a smoother user experience.
+
+## Stopping the Server
+
+To stop the application, use `Ctrl + C` in the terminal.