The Moon Phase Demo is a web development project designed to showcase the power of modern web technologies like HTMX and Rust. This project serves as a playground for sharpening skills with these new tools, offering a practical example of how they can be used in tandem to create a dynamic and efficient web application.
π Live Demo: https://moon.edgardocarreras.com/
- File:
Cargo.toml
,src/lib.rs
,src/main.rs
- Purpose: Rust is used for the backend logic, offering memory safety and blazing speed. The project uses Rust's package manager, Cargo, to manage dependencies and build the project.
- File:
src/main.rs
,src/router/mod.rs
- Purpose: HTMX allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML, without requiring any JavaScript. It's used here to create a dynamic and interactive frontend.
- File:
tailwind.config.js
,package.json
- Purpose: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It's configured via
tailwind.config.js
and managed through npm as seen inpackage.json
.
- File:
src/bin/build-css.rs
- Purpose: A custom Rust script to build and optimize the CSS for the project.
-
Clone the Repository
git clone https://github.com/donedgardo/moon_phase_demo.git
-
Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
-
Install Node.js and npm
# Using nvm nvm install node
-
Run the Project
cargo run
For automatic css build, formatting on change of files install cargo-watch, leptosfmt and cargo-make and use this command. It will build css and re-compile
cargo watch -x 'make dev' -i static/**
For automatic testing I like to run them on a separate terminal
cargo watch -x 'test --bins -lib'
To view the moon phases, simply navigate to http://localhost:8000/
.
Feel free to contribute to this project. Fork it, create a new branch, commit your changes, and create a pull request.
This project is licensed under the MIT License.
Created by Edgardo Carreras to explore and demonstrate the capabilities of HTMX and Rust in modern web development.