🎉 init

.gitignore

@@ -0,0 +1,2 @@
+/target
+/dist

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "rust-analyzer.rustfmt.overrideCommand": [
+        "leptosfmt",
+        "--stdin",
+        "--rustfmt"
+    ],
+    "editor.formatOnSave": true,
+    "[rust]": {
+        "editor.defaultFormatter": "rust-lang.rust-analyzer",
+    },
+    "files.associations": {
+        "*.rs": "rust"
+    },
+}

Cargo.toml

@@ -0,0 +1,32 @@
+[package]
+name = "osm_track_importer"
+version = "0.1.0"
+edition = "2021"
+authors = ["LeMoonStar <webmaster@unitcore.de>"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = { version = "0.7", features = ["csr"] }
+leptos_meta = { version = "0.7" }
+leptos_router = { version = "0.7" }
+console_log = "1"
+log = "0.4"
+console_error_panic_hook = "0.1"
+
+# utils
+# strum = { version = "0.25", features = ["derive", "strum_macros"] }
+# strum_macros = "0.25"
+
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3"
+web-sys = { version = "0.3", features = ["Document", "Window"] }
+
+
+[profile.release]
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"

README.md

@@ -0,0 +1,79 @@
+<picture>
+    <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
+    <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
+</picture>
+
+# Leptos Client-Side Rendered (CSR) App Starter Template
+
+This is a template for use with the [Leptos][Leptos] web framework using the [Trunk][Trunk] tool to compile and serve your app in development.
+
+## Creating your repo from the template
+
+This template requires you to have `cargo-generate` and `trunk` installed. [`leptosfmt`](https://github.com/bram209/leptosfmt) is optional but highly recommended. You can install them with
+
+```sh
+cargo install cargo-generate trunk leptosfmt
+```
+
+
+To set up your project with this template, run
+
+```sh
+cargo generate --git https://github.com/leptos-community/start-csr
+```
+
+to generate your new project, then
+
+```sh
+cd osm_track_importer
+```
+
+to go to your newly created project.
+
+By default, this template uses Rust `nightly` and requires that you've installed the `wasm` compilation target for your toolchain.
+
+
+Sass and Tailwind are also supported by the Trunk build tool, but are optional additions: [see here for more info on how to set those up with Trunk][Trunk-instructions].
+
+
+If you don't have Rust nightly, you can install it with
+```sh
+rustup toolchain install nightly --allow-downgrade
+```
+
+You can add the `wasm` compilation target to rust using
+```sh
+rustup target add wasm32-unknown-unknown
+```
+
+
+## Developing your Leptos CSR project
+
+To develop your Leptos CSR project, running
+
+```sh
+trunk serve --port 3000 --open
+```
+
+will open your app in your default browser at `http://localhost:3000`.
+
+
+## Deploying your Leptos CSR project
+
+To build a Leptos CSR app for release, use the command
+
+```sh
+trunk build --release
+```
+
+This will output the files necessary to run your app into the `dist` folder; you can then use any static site host to serve these files.
+
+For further information about hosting Leptos CSR apps, please refer to [the Leptos Book chapter on deployment available here][deploy-csr].
+
+
+[Leptos]: https://github.com/leptos-rs/leptos
+
+[Trunk]: https://github.com/trunk-rs/trunk
+[Trunk-instructions]: https://trunkrs.dev/assets/
+
+[deploy-csr]: https://book.leptos.dev/deployment/csr.html

Trunk.toml

@@ -0,0 +1,60 @@
+[build]
+# The index HTML file to drive the bundling process.
+target = "index.html"
+# Build in release mode.
+release = false
+# Use a custom cargo profile. Overrides the default chosen by cargo. Ignored if the 'index.html' has one configured.
+# cargo_profile = ""
+# The output dir for all final assets.
+dist = "dist"
+# The public URL from which assets are to be served.
+public_url = "/"
+# Whether to include hash values in the output file names.
+filehash = true
+# Whether to inject scripts (and module preloads) into the finalized output.
+inject_scripts = true
+# Run without network access
+# offline = false
+# Require Cargo.lock and cache are up to date
+# frozen = false
+# Require Cargo.lock is up to date
+# locked = false
+# Control minification
+# minify = "never" # can be one of: never, on_release, always
+# Allow disabling sub-resource integrity (SRI)
+# no_sri = false
+# An optional cargo profile to use
+# cargo_profile = "release-trunk"
+
+[watch]
+# Paths to watch. The `build.target`'s parent folder is watched by default.
+watch = []
+# Paths to ignore.
+ignore = []
+
+[serve]
+# The address to serve on.
+addresses = ["127.0.0.1"]
+# The port to serve on.
+port = 3000
+# Aliases to serve, typically found in an /etc/hosts file.
+# aliases = ["http://localhost.mywebsite.com"]
+# Disable the reverse DNS lookup during startup
+# disable_address_lookup = false
+# Open a browser tab once the initial build is complete.
+open = false
+# Whether to disable fallback to index.html for missing files.
+# no_spa = false
+# Disable auto-reload of the web app.
+# no_autoreload = false
+# Disable error reporting
+# no_error_reporting = false
+# Additional headers set for responses.
+# headers = { "test-header" = "header value", "test-header2" = "header value 2" }
+# Protocol used for autoreload WebSockets connection.
+# ws_protocol = "ws"
+# The certificate/private key pair to use for TLS, which is enabled if both are set.
+# tls_key_path = "self_signed_certs/key.pem"
+# tls_cert_path = "self_signed_certs/cert.pem"
+# Additional headers to send. NOTE: header names must be valid HTTP headers.
+# headers = { "X-Foo" = "bar" }

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="manifest" href="app.json" />
+
+  <link data-trunk rel="copy-file" href="public/app.json" data-target-path="/" />
+  <link data-trunk rel="tailwind-css" href="public/tailwind.css" />
+  <link data-trunk rel="icon" href="public/favicon.ico" />
+  <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
+</head>
+
+<body></body>
+
+</html>

public/app.json

@@ -0,0 +1,7 @@
+{
+    "name": "OSM Track Importer",
+    "short_name": "Track Importer",
+    "description": "A Utility to easily view, edit and submit your GPS tracks.",
+    "start_url": "/",
+    "display": "standalone"
+}

public/tailwind.css

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

rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "stable"

src/components/counter_btn.rs

@@ -0,0 +1,17 @@
+use leptos::prelude::*;
+
+/// A parameterized incrementing button
+#[component]
+pub fn Button(#[prop(default = 1)] increment: i32) -> impl IntoView {
+    let (count, set_count) = signal(0);
+    view! {
+        <button
+            on:click=move |_| { set_count.set(count.get() + increment) }
+            class="p-2 rounded-md bg-gray-300 hover:bg-gray-400"
+        >
+
+            "Click me: "
+            {count}
+        </button>
+    }
+}

src/components/mod.rs

@@ -0,0 +1 @@
+pub mod counter_btn;

src/lib.rs

@@ -0,0 +1,34 @@
+use leptos::prelude::*;
+use leptos_meta::*;
+use leptos_router::{components::*, path};
+
+// Modules
+mod components;
+mod pages;
+
+// Top-Level pages
+use crate::pages::home::Home;
+
+/// An app router which renders the homepage and handles 404's
+#[component]
+pub fn App() -> impl IntoView {
+    // Provides context that manages stylesheets, titles, meta tags, etc.
+    provide_meta_context();
+
+    view! {
+        <Html attr:lang="en" attr:dir="ltr" attr:data-theme="light" />
+
+        // sets the document title
+        <Title text="Welcome to Leptos CSR" />
+
+        // injects metadata in the <head> of the page
+        <Meta charset="UTF-8" />
+        <Meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <Router>
+            <Routes fallback=|| view! { NotFound }>
+                <Route path=path!("/") view=Home />
+            </Routes>
+        </Router>
+    }
+}

src/main.rs

@@ -0,0 +1,14 @@
+use leptos::prelude::*;
+use osm_track_importer::App;
+
+fn main() {
+    // set up logging
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    mount_to_body(|| {
+        view! {
+            <App />
+        }
+    })
+}

src/pages/home.rs

@@ -0,0 +1,38 @@
+use crate::components::counter_btn::Button;
+use leptos::prelude::*;
+
+/// Default Home Page
+#[component]
+pub fn Home() -> impl IntoView {
+    view! {
+        <ErrorBoundary fallback=|errors| {
+            view! {
+                <h1>"Uh oh! Something went wrong!"</h1>
+
+                <p>"Errors: "</p>
+                // Render a list of errors as strings - good for development purposes
+                <ul>
+                    {move || {
+                        errors
+                            .get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <li>{e.to_string()}</li> })
+                            .collect_view()
+                    }}
+
+                </ul>
+            }
+        }>
+
+            <div class="flex flex-col items-center m-5 gap-4">
+                <h1 class="text-3xl text-bold">"Welcome to Leptos"</h1>
+
+                <div class="flex flex-row gap-2">
+                    <Button />
+                    <Button increment=5 />
+                </div>
+
+            </div>
+        </ErrorBoundary>
+    }
+}

src/pages/mod.rs

@@ -0,0 +1,2 @@
+pub mod home;
+pub mod not_found;

src/pages/not_found.rs

@@ -0,0 +1,7 @@
+use leptos::prelude::*;
+
+/// 404 Not Found Page
+#[component]
+pub fn NotFound() -> impl IntoView {
+    view! { <h1>"Uh oh!" <br /> "We couldn't find that page!"</h1> }
+}

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: {
+        files: ["*.html", "./src/**/*.rs"],
+        transform: {
+            rs: (content) => content.replace(/(?:^|\s)class:/g, ' '),
+        },
+    },
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}