ch/initial commit

flake.nix

@@ -0,0 +1,67 @@
+{
+  description = "Example Rust development environment for Zero to Nix";
+
+  # Flake inputs
+  inputs = {
+    # nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/*.tar.gz";
+    rust-overlay.url = "github:oxalica/rust-overlay"; # A helper for Rust + Nix
+    # cargo2nix.url = "github:cargo2nix/cargo2nix/";
+    nixpkgs.follows = "rust-overlay/nixpkgs";
+  };
+
+  # Flake outputs
+  outputs = { self, nixpkgs, rust-overlay}:
+    let
+      # Overlays enable you to customize the Nixpkgs attribute set
+      overlays = [
+        # Makes a `rust-bin` attribute available in Nixpkgs
+        (import rust-overlay)
+        # Provides a `rustToolchain` attribute for Nixpkgs that we can use to
+        # create a Rust environment
+        (self: super: {
+          rustToolchain = super.rust-bin.stable.latest.default;
+        })
+      ];
+
+      # Systems supported
+      allSystems = [
+        "x86_64-linux" # 64-bit Intel/AMD Linux
+        "aarch64-linux" # 64-bit ARM Linux
+        "x86_64-darwin" # 64-bit Intel macOS
+        "aarch64-darwin" # 64-bit ARM macOS
+      ];
+
+      # rustTarget = nixpkgs.pkgs.rust-bin.selectLatestNightlyWith (toolchain: toolchain.default.override {
+      #       extensions = [ "rust-src" "rustup" "rust-analyzer" "rust-std" ];
+      #       targets = [ "x86_64-unknown-linux-gnu" "wasm32-unknown-unknown" ];
+      #     });
+
+      # Helper to provide system-specific attributes
+      forAllSystems = f: nixpkgs.lib.genAttrs allSystems (system: f {
+        pkgs = import nixpkgs { inherit overlays system; };
+      });
+    in
+    {
+      # Development environment output
+      devShells = forAllSystems ({ pkgs }: {
+        default = pkgs.mkShell {
+          buildInputs = [
+            pkgs.cargo-shuttle
+          ];
+          # shellHook = ''
+          #   rustup target add wasm32-unknown-unknown
+          # '';
+          # The Nix packages provided in the environment
+          packages = (with pkgs; [
+            # The package provided by our custom overlay. Includes cargo, Clippy, cargo-fmt,
+            # rustdoc, rustfmt, and other tools.
+            rust-analyzer
+            clippy
+            trunk
+            tailwindcss
+            rustToolchain
+          ]) ++ pkgs.lib.optionals pkgs.stdenv.isDarwin (with pkgs; [ libiconv ]);
+        };
+      });
+    };
+}

frontend/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "wordl-frontend"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+web-sys = {version="0.3.69", features = ["HtmlInputElement"]}
+yew = { version = "0.21.0", features = ["csr"] }
+yew-router = { version = "0.18.0"}
+gloo-console = "0.3.0"
+yewdux = "0.10.0"
+serde = "1.0.198"
+serde_json = "1.0.116"
+regex = "1.10.4"

frontend/Trunk.toml

@@ -0,0 +1,7 @@
+[[hooks]]
+stage = "build"
+command = "tailwindcss"
+command_arguments = ["-i","input.css","-o","public/styles.css"]
+
+[serve]
+address = "0.0.0.0"

frontend/flake.nix

@@ -0,0 +1,67 @@
+{
+  description = "Example Rust development environment for Zero to Nix";
+
+  # Flake inputs
+  inputs = {
+    # nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/*.tar.gz";
+    rust-overlay.url = "github:oxalica/rust-overlay"; # A helper for Rust + Nix
+    # cargo2nix.url = "github:cargo2nix/cargo2nix/";
+    nixpkgs.follows = "rust-overlay/nixpkgs";
+  };
+
+  # Flake outputs
+  outputs = { self, nixpkgs, rust-overlay}:
+    let
+      # Overlays enable you to customize the Nixpkgs attribute set
+      overlays = [
+        # Makes a `rust-bin` attribute available in Nixpkgs
+        (import rust-overlay)
+        # Provides a `rustToolchain` attribute for Nixpkgs that we can use to
+        # create a Rust environment
+        (self: super: {
+          rustToolchain = super.rust-bin.stable.latest.default;
+        })
+      ];
+
+      # Systems supported
+      allSystems = [
+        "x86_64-linux" # 64-bit Intel/AMD Linux
+        "aarch64-linux" # 64-bit ARM Linux
+        "x86_64-darwin" # 64-bit Intel macOS
+        "aarch64-darwin" # 64-bit ARM macOS
+      ];
+
+      # rustTarget = nixpkgs.pkgs.rust-bin.selectLatestNightlyWith (toolchain: toolchain.default.override {
+      #       extensions = [ "rust-src" "rustup" "rust-analyzer" "rust-std" ];
+      #       targets = [ "x86_64-unknown-linux-gnu" "wasm32-unknown-unknown" ];
+      #     });
+
+      # Helper to provide system-specific attributes
+      forAllSystems = f: nixpkgs.lib.genAttrs allSystems (system: f {
+        pkgs = import nixpkgs { inherit overlays system; };
+      });
+    in
+    {
+      # Development environment output
+      devShells = forAllSystems ({ pkgs }: {
+        default = pkgs.mkShell {
+          # buildInputs = [
+          #   rustup
+          # ];
+          # shellHook = ''
+          #   rustup target add wasm32-unknown-unknown
+          # '';
+          # The Nix packages provided in the environment
+          packages = (with pkgs; [
+            # The package provided by our custom overlay. Includes cargo, Clippy, cargo-fmt,
+            # rustdoc, rustfmt, and other tools.
+            rust-analyzer
+            clippy
+            trunk
+            tailwindcss
+            rustToolchain
+          ]) ++ pkgs.lib.optionals pkgs.stdenv.isDarwin (with pkgs; [ libiconv ]);
+        };
+      });
+    };
+}

frontend/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>wordl</title>
+    <link data-trunk href="./public/styles.css" rel="css">
+    <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon">
+    <link data-trunk rel="copy-dir" href="public" > 
+    <link rel="manifest" href="public/manifest.json" />
+  </head>
+  <body class="bg-black text-white">
+  </body>
+</html>

frontend/input.css

@@ -0,0 +1,202 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.logo {
+  @apply absolute;
+}
+
+.logo-fadein-right {
+  position:relative;
+  animation: logo-fadein-right 1s ;
+}
+
+.validation-error {
+  @apply border-solid border-error;
+}
+
+@keyframes logo-fadein-right {
+  0% {
+    transform: translateX(-200%);
+    opacity: 0;
+  }
+  70%{
+    transform: translateX(0);
+    opacity: 0.7;
+  }
+  80%{
+    opacity: 1;
+  }
+  90%{
+    opacity: 0.8;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+
+
+.logo-fadein-left {
+  position: relative;
+  animation: logo-fadein-left 1s;
+}
+
+@keyframes logo-fadein-left {
+  0% {
+    transform: translateX(500%);
+    opacity: 0;
+  }
+  70%{
+    opacity: 0.7;
+  }
+  80%{
+    transform: translateX(0);
+    opacity: 1;
+  }
+  90%{
+    opacity: 0.8;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+@keyframes logo-fadein-left {
+  from{
+    left: -200%;
+    opacity: 0.5;
+  }
+  to{
+    left: 0;
+    opacity: 1;
+  }
+}
+
+
+.fade-in{
+  position:relative;
+animation:fadein 0.4s}
+@keyframes fadein{
+  from{
+  left:200%;
+opacity:0;
+} to{
+left:0;
+opacity:1}
+}
+
+.fade-out{
+  position:relative;
+animation:fadeout 0.4s}
+@keyframes fadeout{
+  from{
+  left:0;
+opacity:0
+} to{
+left:-200%;
+opacity:1}
+}
+
+.mail-animation {
+  position:relative;
+  animation:mail-animation 2s infinite;
+}
+@keyframes mail-animation {
+  0% {
+    left: -20%;
+    opacity: 0.5;
+  }
+  20% {
+    opacity: 1;
+  }
+  70%{
+    left: 20%;
+  }
+  80%{
+    opacity: 1;
+  }
+  100%{
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+.cx-date-picker {
+  @apply inline-block relative;
+}
+
+.cx-date-picker[type="date"]::-webkit-calendar-picker-indicator {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+}
+
+.text-danger {
+  color: rgba(255, 82, 82,1.0);
+}
+
+.bg-danger {
+  background-color: rgba(255, 82, 82,1.0);
+}
+
+.min-height {
+  min-height: 500px;
+}
+
+.text-tertiary {
+  color: rgba(132, 129, 122,1.0);
+}
+
+.bg-tertriary {
+  background-color: rgba(132, 129, 122,1.0);
+}
+
+.border-primary {
+  border-color: rgba(51,217,178,1.0);
+}
+
+.border-error {
+  border-color: rgba(255, 82, 82,1.0) !important;
+}
+.accent-primary {
+  accent-color: rgba(51, 217, 178,1.0);
+}
+
+.text-primary {
+  color: rgba(51, 217, 178,1.0);
+}
+
+.text-primary-dark {
+  color: rgba(33, 140, 116,1.0);
+}
+
+.bg-primary-dark {
+  background-color: rgba(33, 140, 116,1.0);
+}
+
+.bg-primary {
+  background-color: rgba(51, 217, 178,1.0);
+}
+
+.text-secondary {
+  color: rgba(52, 172, 224,1.0);
+}
+
+.text-secondary-dark {
+  color: rgba(34, 112, 147,1.0);
+}
+
+.bg-secondary-dark {
+  background-color: rgba(34, 112, 147,1.0);
+}
+
+.bg-secondary {
+  background-color: rgba(52, 172, 224,1.0);
+}
+

frontend/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
+  }
+}

frontend/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "wordl",
+  "short_name": "wordl",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#000",
+  "description": "Wortspiel mit Koepfchen",
+  "categories": [
+    "utilities"
+  ],
+  "icons": [
+    "public/favicon.ico"
+  ],
+  "orientation": "portrait-primary"
+}

frontend/src/lib.rs

@@ -0,0 +1,3 @@
+pub mod pages;
+pub mod router;
+pub mod storage;

frontend/src/main.rs

@@ -0,0 +1,5 @@
+use wordl_frontend::router::Main;
+
+fn main() {
+    yew::Renderer::<Main>::new().render();
+}

frontend/src/pages.rs

@@ -0,0 +1,6 @@
+
+mod home;
+pub use home::Home;
+
+mod settings;
+pub use settings::Settings;

frontend/src/pages/home.rs

@@ -0,0 +1,10 @@
+use yew::{classes, function_component, html, Html};
+use yew_router::prelude::Link;
+
+use crate::router::Route;
+
+#[function_component]
+pub fn Home() -> Html {
+    html! {
+    }
+}

frontend/src/pages/settings.rs

@@ -0,0 +1,10 @@
+use yew::{classes, function_component, html, Html};
+use yew_router::prelude::Link;
+
+use crate::router::Route;
+
+#[function_component]
+pub fn Settings() -> Html {
+    html! {
+    }
+}

frontend/src/router.rs

@@ -0,0 +1,32 @@
+use crate::pages::{Settings, Home};
+
+use yew::{function_component, html, Html};
+use yew_router::prelude::*;
+#[derive(Clone, Routable, PartialEq)]
+pub enum Route {
+    #[at("/")]
+    #[not_found]
+    Home,
+    #[at("/settings")]
+    Settings,
+}
+
+fn route(routes: Route) -> Html {
+    match routes {
+        Route::Home => {
+            html! { <Home /> }
+        }
+        Route::Settings => {
+            html! { <Settings /> }
+        }
+    }
+}
+
+#[function_component(Main)]
+pub fn app() -> Html {
+    html! {
+        <BrowserRouter>
+            <Switch<Route> render={route} />
+        </BrowserRouter>
+    }
+}

frontend/src/storage.rs

@@ -0,0 +1,42 @@
+use serde::{Deserialize, Serialize};
+use yewdux::Store;
+
+#[derive(Debug, Default, Clone, PartialEq, Store, Serialize, Deserialize)]
+#[store(storage = "local")]
+pub struct UserData {
+    id: Option<String>,
+    email_address: Option<String>,
+    token: Option<String>,
+}
+
+impl UserData {
+    pub fn email_address(&self) -> Option<String> {
+        self.email_address.clone()
+    }
+
+    pub fn id(&self) -> Option<String> {
+        self.id.clone()
+    }
+
+    pub fn token(&self) -> Option<String> {
+        self.token.clone()
+    }
+}
+
+pub fn set_email_address(dispatch: yewdux::Dispatch<UserData>, email_address: Option<String>) {
+    dispatch.reduce_mut(move |store| {
+        store.email_address = email_address;
+    })
+}
+
+pub fn set_token(dispatch: yewdux::Dispatch<UserData>, token: Option<String>) {
+    dispatch.reduce_mut(move |store| {
+        store.token = token;
+    })
+}
+
+pub fn set_id(dispatch: yewdux::Dispatch<UserData>, id: Option<String>) {
+    dispatch.reduce_mut(move |store| {
+        store.id = id;
+    })
+}

frontend/tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    purge: {
+        mode: "all",
+        content: [
+            "./src/**/*.rs",
+            "./src/pages/documents.rs",
+            "./index.html",
+            "./src/**/*.html",
+            "./src/**/*.css",
+        ],
+    },
+    theme: {},
+    variants: {},
+    plugins: [],
+};