Begin migrate to leptos

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Added by cargo
+
+/target

.idea/portfolio.iml

@@ -3,6 +3,7 @@
   <component name="NewModuleRootManager">
     <content url="file://$MODULE_DIR$">
       <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src_old" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />

.tool-versions

@@ -1 +0,0 @@
-nodejs 19.8.1

Cargo.toml

@@ -0,0 +1,94 @@
+[package]
+name = "portfolio"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = { version = "0.5.1", features = ["nightly"] }
+leptos_actix = { version = "0.5.1", optional = true }
+leptos_meta = { version = "0.5.1", features = ["nightly"] }
+leptos_router = { version = "0.5.1", features = ["nightly"] }
+gloo-net = { version = "0.4.0", features = ["http"] }
+log = "0.4"
+cfg-if = "1.0"
+
+# dependecies for client (enable when csr or hydrate set)
+wasm-bindgen = { version = "0.2", optional = true }
+console_log = { version = "1", optional = true }
+console_error_panic_hook = { version = "0.1", optional = true }
+
+# dependecies for server (enable when ssr set)
+actix-files = { version = "0.6", optional = true }
+actix-web = { version = "4", features = ["macros"], optional = true }
+futures = { version = "0.3", optional = true }
+simple_logger = { version = "4.0", optional = true }
+
+[features]
+default = ["csr"]
+hydrate = [
+    "leptos/hydrate",
+    "leptos_meta/hydrate",
+    "leptos_router/hydrate",
+    "dep:wasm-bindgen",
+    "dep:console_log",
+    "dep:console_error_panic_hook",
+]
+csr = [
+    "leptos/csr",
+    "leptos_meta/csr",
+    "leptos_router/csr",
+    "dep:wasm-bindgen",
+    "dep:console_log",
+    "dep:console_error_panic_hook",
+]
+ssr = [
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+    "dep:leptos_actix",
+    "dep:actix-web",
+    "dep:actix-files",
+    "dep:futures",
+    "dep:simple_logger",
+]
+
+[package.metadata.cargo-all-features]
+denylist = [
+    "actix-files",
+    "actix-web",
+    "console_error_panic_hook",
+    "console_log",
+    "futures",
+    "leptos_actix",
+    "simple_logger",
+    "wasm-bindgen",
+]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+
+[profile.release]
+codegen-units = 1
+lto = true
+opt-level = 'z'
+
+[package.metadata.leptos]
+name = "portfolio"
+site-root = "target/site"
+site-pkg-dir = "pkg"
+tailwind-input-file = "style/portfolio.css"
+assets-dir = "public"
+site-addr = "127.0.0.1:3000"
+reload-port = 3001
+browserquery = "defaults"
+watch = false
+env = "DEV"
+
+bin-features = ["ssr"]
+bin-default-features = false
+
+lib-features = ["hydrate"]
+lib-default-features = false

package.json

@@ -1,28 +0,0 @@
-{
-  "name": "portfolio",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.9.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
-    "sass": "^1.60.0",
-    "tailwindcss": "^3.3.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0"
-  }
-}

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

rust-toolchain.toml

@@ -0,0 +1,3 @@
+[toolchain]
+channel = "nightly"
+targets = ["wasm32-unknown-unknown"]

src/app.rs

@@ -0,0 +1,43 @@
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+#[component]
+pub fn App() -> impl IntoView {
+    provide_meta_context();
+
+    view! {
+
+        <Stylesheet id="leptos" href="/pkg/portfolio.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Router>
+            <Routes>
+                <Route path="" view=  move || view! { <Home/> }/>
+            </Routes>
+        </Router>
+    }
+}
+
+#[component]
+fn Home() -> impl IntoView {
+    let (count, set_count) = create_signal(0);
+
+    view! {
+        <main class="my-0 mx-auto max-w-3xl text-center">
+            <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
+            <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
+            <button
+                class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
+                on:click=move |_| set_count.update(|count| *count += 1)
+            >
+                "Something's here | "
+                {move || if count() == 0 {
+                    "Click me!".to_string()
+                } else {
+                    count().to_string()
+                }}
+                " | Some more text"
+            </button>
+        </main>
+    }
+}

src/lib.rs

@@ -0,0 +1,39 @@
+mod app;
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "hydrate")] {
+        use wasm_bindgen::prelude::wasm_bindgen;
+        use crate::app::*;
+        use leptos::*;
+
+        #[wasm_bindgen]
+        pub fn hydrate() {
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
+
+            logging::log!("hydrate mode - hydrating");
+
+            leptos::mount_to_body(|| {
+                view! { <App/> }
+            });
+        }
+    }
+    else if #[cfg(feature = "csr")] {
+        use wasm_bindgen::prelude::wasm_bindgen;
+
+        #[wasm_bindgen(start)]
+        pub fn main() {
+            use app::*;
+            use leptos::*;
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
+
+            logging::log!("csr mode - mounting to body");
+
+            mount_to_body(|| {
+                view! { <App /> }
+            });
+        }
+    }
+}

src/main.rs

@@ -0,0 +1,40 @@
+mod app;
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use actix_files::Files;
+        use actix_web::*;
+        use leptos::*;
+        use crate::app::*;
+        use leptos_actix::{generate_route_list, LeptosRoutes};
+
+        #[actix_web::main]
+        async fn main() -> std::io::Result<()> {
+
+            // Setting this to None means we'll be using cargo-leptos and its env vars.
+            let conf = get_configuration(None).await.unwrap();
+
+            let addr = conf.leptos_options.site_addr;
+
+            // Generate the list of routes in your Leptos App
+            let routes = generate_route_list(|| view! { <App/> });
+
+            HttpServer::new(move || {
+                let leptos_options = &conf.leptos_options;
+                let site_root = &leptos_options.site_root;
+                let routes = &routes;
+                App::new()
+                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), || view! { <App/> })
+                    .service(Files::new("/", site_root))
+                    .wrap(middleware::Compress::default())
+            })
+            .bind(&addr)?
+            .run()
+            .await
+        }
+    }
+    else {
+        pub fn main() {}
+    }
+}

src_old/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="//main.tsx"></script>
   </body>
 </html>

style/portfolio.css

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

tailwind.config.js

@@ -1,9 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: {
+    files: ["*.html", "./src/**/*.rs"],
+  },
   theme: {
     extend: {
       colors: {

tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ],
-  "references": [{ "path": "./tsconfig.node.json"}]
-}

tsconfig.node.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts"
-  ]
-}

vite.config.ts

@@ -1,8 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: process.env.VITE_BASE,
-  plugins: [react()],
-})