Basic code added.

Cargo.toml

@@ -1,8 +1,26 @@
 [package]
-name = "rust-stream-layouts"
+name = "werefox-stream-layouts"
 version = "0.1.0"
+authors = ["Ada Werefox <ada.werefox@tutanota.com>"]
 edition = "2021"
 
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
 [dependencies]
+dioxus = "0.3.2"
+dioxus-web = "0.3.1"
+dioxus-autofmt = "0.3.0"
+# WebAssembly Debug
+wasm-logger = "0.2.0"
+console_error_panic_hook = "0.1.7"
+log = "0.4.17"
+markdown = "1.0.0-alpha.7"
+rust-embed = { version = "6.6.1" }
+dioxus-helmet = "0.2.4"
+dioxus-use-storage = "0.3.0"
+
+[dependencies.serde]
+version = "1.0.160"
+features = ["derive"]
+
+[dependencies.dioxus-router]
+version = "0.3.0"
+features = ["query", "web"]

Dioxus.toml

@@ -0,0 +1,48 @@
+[application]
+
+# App (Project) Name
+name = "werefox-stream-layouts"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "Stream Layouts"
+
+[web.watcher]
+
+# when watcher triggers, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "data", "public", "tailwind.config.js", "Dioxus.toml", "Cargo.toml", "build.rs"]
+
+# implement redirect on 404
+index_on_404 = true
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = ["/styles/tailwind.min.css"]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# CSS style file
+style = ["/styles/tailwind.min.css"]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

build.rs

@@ -0,0 +1,15 @@
+fn main() {
+    let mut tailwind = std::process::Command::new("npx");
+    tailwind.args(
+        "tailwindcss -i src/index.css -c tailwind.config.js -o styles/tailwind.min.css --minify"
+            .split(" "),
+    );
+    tailwind.env("NODE_ENV", "production");
+    match tailwind.spawn() {
+        Ok(_) => (),
+        Err(_) => {
+            print!("Didn't find npx in the path, can't compile CSS. Is Node installed?");
+            ()
+        }
+    }
+}

src/index.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "OpenDyslexic";
+  src: url("/fonts/OpenDyslexic-Regular.otf");
+}
+
+@font-face {
+  font-family: "DejaVuSansMono";
+  src: url("/fonts/DejaVuSansMono.ttf");
+}

src/lib.rs

@@ -0,0 +1,46 @@
+//! # Werefox Stream Layouts
+//!
+//! Rendering functions for stream layouts using [Dioxus](https://dioxuslabs.com/).
+
+#![allow(non_snake_case)]
+
+// mod components;
+// pub mod utils;
+
+/// A module that handles the functions needed
+/// to render the site.
+pub mod layouts_app {
+
+    // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
+    pub use dioxus::prelude::*;
+
+    // use dioxus_helmet::Helmet;
+    use dioxus_router::{Redirect, Route, Router};
+    // use dioxus_use_storage::use_local_storage;
+
+    pub fn DioxusApp(cx: Scope) -> Element {
+
+        cx.render(rsx! {
+            Router {
+                Route { to: "/", HomePage {} }
+                Route { to: "", PageNotFound {} }
+            }
+        })
+    }
+
+    fn PageNotFound(cx: Scope) -> Element {
+        cx.render(rsx! {
+            p { "That page doesn't exist, sorry!" }
+            Redirect { to: "/" }
+        })
+    }
+
+    /// Renders the app and returns the rendered Element.
+    pub fn HomePage(cx: Scope) -> Element {
+        cx.render(rsx!{
+            div { class: "",
+                "Hello, world!"
+            }
+        })
+    }
+}

src/main.rs

@@ -1,3 +1,22 @@
+#[cfg(target_family = "wasm")]
+use console_error_panic_hook;
+
+#[cfg(target_family = "wasm")]
+use layouts_app;
+
+#[cfg(target_family = "wasm")]
+use wasm_logger;
+
+#[cfg(any(target_family = "unix", target_family = "windows"))]
 fn main() {
-    println!("Hello, world!");
+    print!("You can't run this without targeting web assembly. Try running `dioxus serve`.")
+}
+
+#[cfg(target_family = "wasm")]
+fn main() {
+    // init debug tool for WebAssembly
+    wasm_logger::init(wasm_logger::Config::default());
+    console_error_panic_hook::set_once();
+
+    dioxus_web::launch(layouts_app::DioxusApp);
 }

styles/tailwind.min.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.hidden{display:none}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.otf)}@font-face{font-family:DejaVuSansMono;src:url(/fonts/DejaVuSansMono.ttf)}

tailwind.config.js

@@ -0,0 +1,117 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // Or if using `src` directory:
+    "./src/**/*.{rs,html,js,ts,jsx,tsx,ttf}",
+    "./target/**/*.{rs,html,js,ts,jsx,tsx,ttf}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: "1rem",
+        xl: "0rem",
+      }
+    },
+    extend: {
+      fontFamily: {
+        nerd: ["DejaVuSansMono"],
+        open: ["OpenDyslexic"],
+      },
+      colors: {
+        "ada-werefox-cyan": {
+          light: "#AAFFFF",
+          DEFAULT: "#50FFFF",
+          dark: "#008888",
+        },
+        "ada-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#424242",
+          dark: "#242424",
+          darker: "#121212",
+        },
+        "skye-werefox-blue": {
+          light: "#94C2FF",
+          DEFAULT: "#75B1FF",
+          dark: "#0052B8",
+          darker: "#00377A",
+          darkest: "#00326B",
+        },
+        "skye-werefox-pink": {
+          DEFAULT: "#FF84CA",
+          dark: "#9E0054",
+          darker: "#8A0040",
+          darkest: "#75003F",
+        },
+        "skye-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#424242",
+          dark: "#242424",
+          darker: "#121212",
+        },
+        "alice-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#242424",
+          dark: "#121212",
+          darker: "#000",
+        },
+        "alice-werefox-red": {
+          light: "#E08587",
+          DEFAULT: "#c93439",
+          dark: "#800008",
+          darker: "#550006",
+          darkest: "#7A0000",
+        },
+        "alice-werefox-blue": {
+          light: "#9197F3",
+          DEFAULT: "#1b29e0",
+          dark: "#3300FF",
+          darker: "#2C00DB",
+          darkest: "#2700C2",
+        },
+      },
+      keyframes: {
+        growshrink: {
+          "0%": {
+            transform: "scale(0.5)",
+          },
+          "40%": {
+            transform: "scale(1.2)",
+          },
+          "60%": {
+            transform: "scale(1.2)",
+          },
+          "100% ": {
+            transform: "scale(0.5)",
+          },
+        },
+        wiggle: {
+          "0%, 100%": { transform: "rotate(-1deg)" },
+          "50%": { transform: "rotate(1deg)" },
+        },
+        jiggle: {
+          "0%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(-10deg)" },
+          "75%": { transform: "rotate(10deg)" },
+        },
+        yip: {
+          "0%, 100%": { transform: "scale(1, 1)" },
+          "50%": { transform: "scale(1.01, 1.01)" },
+        },
+      },
+      animation: {
+        wiggle: "wiggle 7s ease-in-out infinite",
+        jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
+        yip: "yip 0.1s ease-in-out",
+        growshrink: "growshrink 2s cubic-bezier(1, 0, 0, 1) infinite",
+      },
+    },
+  },
+  plugins: [],
+};