diff --git a/examples/htmx-counter/README.md b/examples/htmx-counter/README.md new file mode 100644 index 0000000..2c8b4ec --- /dev/null +++ b/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. \ No newline at end of file diff --git a/examples/htmx-counter/main.go b/examples/htmx-counter/main.go index 9bbdc3d..38357f8 100644 --- a/examples/htmx-counter/main.go +++ b/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/htmx.org@1.6.1"}), + elem.Script(attrs.Props{attrs.Src: "https://unpkg.com/htmx.org@1.6.1"}), ) - 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) diff --git a/examples/htmx-fiber-counter/README.md b/examples/htmx-fiber-counter/README.md new file mode 100644 index 0000000..3ad4b5c --- /dev/null +++ b/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`. \ No newline at end of file diff --git a/examples/htmx-fiber-todo/README.md b/examples/htmx-fiber-todo/README.md new file mode 100644 index 0000000..5e62c36 --- /dev/null +++ b/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. \ No newline at end of file