feat: initialize CompareWare project with Dioxus template- Ran dx new compareware to scaffold the project- Set up initial directory structure and dependencies- Prepared project for further development

compareware/.gitignore

@@ -0,0 +1,12 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+/dist/
+/static/
+/.dioxus/
+
+# this file will generate by tailwind:
+/assets/tailwind.css
+
+# These are backup files generated by rustfmt
+**/*.rs.bk

compareware/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "compareware"
+version = "0.1.0"
+authors = ["Ryan Mwangi <ryannganga13325@gmail.com>"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+
+dioxus = { version = "0.5", features = ["web", "router"] }
+
+# Debug
+dioxus-logger = "0.5.1"

compareware/Dioxus.toml

@@ -0,0 +1,43 @@
+[application]
+
+# App (Project) Name
+name = "compareware"
+
+# Dioxus App Default Platform
+# web, desktop, fullstack
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (assets) file folder
+asset_dir = "assets"
+
+[web.app]
+
+# HTML title tag content
+title = "compareware"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "assets"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+
+style = ["/tailwind.css"]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

compareware/README.md

@@ -0,0 +1,17 @@
+# Development
+
+1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
+2. Install the tailwind css cli: https://tailwindcss.com/docs/installation
+3. Run the following command in the root of the project to start the tailwind CSS compiler:
+
+```bash
+npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
+```
+
+Run the following command in the root of the project to start the Dioxus dev server:
+
+```bash
+dx serve --hot-reload
+```
+
+- Open the browser to http://localhost:8080

compareware/assets/main.css

@@ -0,0 +1,40 @@
+body {
+    background-color: #111216;
+}
+
+#main {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
+
+#links {
+    width: 400px;
+    text-align: left;
+    font-size: x-large;
+    color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+#links a {
+    color: white;
+    text-decoration: none;
+    margin-top: 20px;
+    margin: 10px;
+    border: white 1px solid;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+#links a:hover {
+    background-color: #1f1f1f;
+    cursor: pointer;
+}
+
+#header {
+    max-width: 1200px;
+}

compareware/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

compareware/src/main.rs

@@ -0,0 +1,52 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use dioxus_logger::tracing::{info, Level};
+
+#[derive(Clone, Routable, Debug, PartialEq)]
+enum Route {
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+}
+
+fn main() {
+    // Init logger
+    dioxus_logger::init(Level::INFO).expect("failed to init logger");
+    info!("starting app");
+    launch(App);
+}
+
+fn App() -> Element {
+    rsx! {
+        Router::<Route> {}
+    }
+}
+
+#[component]
+fn Blog(id: i32) -> Element {
+    rsx! {
+        Link { to: Route::Home {}, "Go to counter" }
+        "Blog post {id}"
+    }
+}
+
+#[component]
+fn Home() -> Element {
+    let mut count = use_signal(|| 0);
+
+    rsx! {
+        Link {
+            to: Route::Blog {
+                id: count()
+            },
+            "Go to blog"
+        }
+        div {
+            h1 { "High-Five counter: {count}" }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+        }
+    }
+}

compareware/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  mode: "all",
+  content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};