migration to leptos 0.5

Cargo.toml

@@ -7,24 +7,24 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-axum = { version = "0.6.4", optional = true }
+axum = { version = "0.6", optional = true }
 console_error_panic_hook = "0.1"
-console_log = "0.2"
+console_log = "1"
 cfg-if = "1"
-leptos = { version = "0.2", default-features = false, features = ["serde"] }
-leptos_axum = { version = "0.2", optional = true }
-leptos_meta = { version = "0.2", default-features = false }
-leptos_router = { version = "0.2", default-features = false }
+http = "0.2"
+leptos = { version = "0.5", features = ["serde", "nightly"] }
+leptos_axum = { version = "0.5", optional = true }
+leptos_meta = { version = "0.5", features = ["nightly"] }
+leptos_router = { version = "0.5" , features = ["nightly"] }
 log = "0.4"
-simple_logger = "4"
-tokio = { version = "1.25.0", optional = true }
-tower = { version = "0.4.13", optional = true }
-tower-http = { version = "0.3.5", features = ["fs"], optional = true }
-wasm-bindgen = "0.2"
-thiserror = "1.0.38"
-tracing = { version = "0.1.37", optional = true }
-http = "0.2.8"
 serde = { version = "1", features = ["derive"] }
+simple_logger = "4"
+thiserror = "1.0"
+tokio = { version = "1.33", optional = true }
+tower = { version = "0.4", optional = true }
+tower-http = { version = "0.4", features = ["fs"], optional = true }
+tracing = { version = "0.1", optional = true }
+wasm-bindgen = "=0.2.87"
 
 [features]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
@@ -33,11 +33,11 @@ ssr = [
   "dep:tokio",
   "dep:tower",
   "dep:tower-http",
+  "dep:tracing",
   "dep:leptos_axum",
   "leptos/ssr",
   "leptos_meta/ssr",
   "leptos_router/ssr",
-  "dep:tracing",
 ]
 
 [package.metadata.cargo-all-features]
@@ -46,44 +46,28 @@ skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
-output-name = "start-axum"
+output-name = "briefpappe_rs"
 
-# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/site"
-
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
 # Defaults to pkg
 site-pkg-dir = "pkg"
-
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-style-file = "style/main.scss"
-# Assets source dir. All files found here will be copied and synchronized to site-root.
-# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
-#
-# Optional. Env: LEPTOS_ASSETS_DIR.
+style-file = "style/output.css"
+# [Optional] Files in the asset-dir will be copied to the site-root directory
 assets-dir = "public"
-
 # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
 site-addr = "127.0.0.1:3001"
-
 # The port to use for automatic reload monitoring
 reload-port = 3002
-
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
-#   [Windows] for non-WSL use "npx.cmd playwright test"
-#   This binary name can be checked in Powershell with Get-Command npx
 end2end-cmd = "npx playwright test"
-end2end-dir = "end2end"
-
 #  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
-
-# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
+# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head
 watch = false
-
 # The environment Leptos will run in, usually either "DEV" or "PROD"
 env = "DEV"
-
 # The features to use when compiling the bin target
 #
 # Optional. Can be over-ridden with the command line parameter --bin-features
@@ -103,3 +87,15 @@ lib-features = ["hydrate"]
 #
 # Optional. Defaults to false.
 lib-default-features = false
+
+tailwind-input-file = "input.css"
+lib-profile-release = "wasm-release"
+
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+
+[profile.dev.package.sqlx-macros]
+opt-level = 3

Makefile.toml

@@ -0,0 +1,11 @@
+extend = { path = "../cargo-make/common.toml" }
+
+[tasks.build]
+command = "cargo"
+args = ["+nightly", "build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+command = "cargo"
+args = ["+nightly", "check-all-features"]
+install_crate = "cargo-all-features"

README.md

@@ -7,27 +7,43 @@
 
 This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool using [Axum](https://github.com/tokio-rs/axum).
 
-## Running your project
+## Creating your template repo
 
-To run the project in development mode you need to spin up two processes, one for Leptos and another one for Tailwind (styling).
+If you don't have `cargo-leptos` installed you can install it with
 
 ```bash
-cargo leptos watch
+cargo install cargo-leptos
 ```
 
+Then run
 ```bash
-npx tailwindcss -i style/tailwind.css -o style/generated.css --watch
+cargo leptos new --git leptos-rs/start-axum
+```
+
+to generate a new project template.
+
+```bash
+cd {{project-name}}
+```
+
+to go to your newly created project.  
+Feel free to explore the project structure, but the best place to start with your application code is in `src/app.rs`.  
+Addtionally, Cargo.toml may need updating as new versions of the dependencies are released, especially if things are not working after a `cargo update`.
+
+## Running your project
+
+```bash
+cargo leptos watch
 ```
 
 ## Installing Additional Tools
 
 By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
 
 1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
-2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
-3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
-4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
-5. `npm install -g sass` - install `dart-sass` (should be optional in future)
+2. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+3. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+4. `npm install -g sass` - install `dart-sass` (should be optional in future
 
 ## Compiling for Release
 ```bash
@@ -56,15 +72,15 @@ After running a `cargo leptos build --release` the minimum files needed are:
 
 Copy these files to your remote server. The directory structure should be:
 ```text
-start-axum
+{{project-name}}
 site/
 ```
-Set the following enviornment variables (updating for your project as needed):
+Set the following environment variables (updating for your project as needed):
 ```text
-LEPTOS_OUTPUT_NAME="start-axum"
+LEPTOS_OUTPUT_NAME="{{project-name}}"
 LEPTOS_SITE_ROOT="site"
 LEPTOS_SITE_PKG_DIR="pkg"
 LEPTOS_SITE_ADDR="127.0.0.1:3000"
 LEPTOS_RELOAD_PORT="3001"
 ```
-Finally, run the server binary.
+Finally, run the server binary.

input.css

@@ -0,0 +1,73 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.collection-link {
+  height: 150px;
+  position: relative;
+  display: flex;
+  flex-direction: row-reverse;
+  border-radius: 20px;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  overflow: hidden;
+}
+
+.collection-link > .title {
+  position: absolute;
+  z-index: 10;
+  left: 30px;
+  line-height: 150px;
+  text-shadow: 0 0 5px 5px white;
+  margin: 0;
+  width: calc(100% - 30px);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 25%, rgba(255, 255, 255, 0) 75%);
+  opacity: 0.9;
+  transition: opacity 300ms;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: initial;
+}
+
+.collection-link > .title > .icon {
+  position: relative;
+  top: 4px;
+  opacity: 0.5;
+}
+
+@media screen and (max-width: 920px) {
+  .collection-link {
+    height: 100px;
+  }
+
+  .collection-link > .title {
+    font-size: 1.5em;
+    line-height: 100px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .collection-link > .title {
+    left: 10px;
+    font-size: 1.25em;
+  }
+}
+
+.collection-link > img {
+  display: block;
+  opacity: 0.8;
+  transition: opacity 300ms;
+}
+
+.collection-link:hover > .title {
+  opacity: 1;
+}
+
+.collection-link:hover > img {
+  opacity: 1
+}