initial os release. I really expect SO much bugs, guys. good luck =)

This commit is contained in:
Yiffy Dev 2024-10-30 10:59:43 +05:00
commit a2f1b72204
No known key found for this signature in database
GPG key ID: FB83DFEAFB3F4709
21 changed files with 7965 additions and 0 deletions

1483
examples/define-styles/Cargo.lock generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,9 @@
[package]
name = "define-styles"
version = "0.0.0"
edition = "2021"
rust-version = "1.82"
publish = false
[dependencies]
sabry = {path = "../../", features = ["sass"]}

View file

@ -0,0 +1,104 @@
use sabry::sassy;
sassy!(utils {
@mixin flex($direction, $align, $justify, $gap: .5rem) {
display: flex;
list-style: none;
gap: $gap;
flex-direction: $direction;
@if $align == start{
align-items: flex-start;
}
@else if $align == end{
align-items: flex-end;
}
@else{
align-items: $align;
}
@if $justify == start {
justify-content: flex-start;
}
@else if $justify == end {
justify-content: flex-end;
}
@else {
justify-content: $justify;
}
}
});
sassy!(theme {
$thm-surface-primary: #2b2a29;
$thm-surface-secondary: #6C6C6C;
$thm-surface-tertiary: #4C4C4C;
$thm-surface-accent: #B0CB1F;
$thm-text-primary: #ffffff;
$thm-text-secondary: #ffffff;
$thm-text-tertiary: #ffffff;
$thm-text-accent: #B0CB1F;
@mixin surface($style: primary) {
@if $style == primary {
@include txt(primary);
background-color: $thm-surface-primary;
}
@else if $style == secondary {
@include txt(secondary);
background-color: $thm-surface-secondary;
}
@else if $style == accent {
@include txt;
background-color: $thm-surface-accent;
}
}
@mixin txt($style: primary) {
@if $style == primary {
font-weight: 500;
color: $thm-text-primary;
}
@else if $style == secondary {
font-weight: 400;
color: $thm-text-secondary;
}
@else if $style == tertiary {
font-weight: 400;
color: $thm-text-tertiary;
}
@else if $style == accent {
font-weight: 500;
color: $thm-text-accent;
}
}
});
sassy!(tokens {
@use "theme";
@mixin clickable($style: accent, $scale: 1.2, $clickscale: 0.9){
@if $style == accent{
@include theme.surface(accent);
}
@else if $style == secondary {
@include theme.surface(secondary);
}
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: #00000000;
transition: transform .07s, filter .07s;
&:hover{
transform: scale($scale);
}
&:focus-visible {
outline: 2px solid #fff;
}
&:active {
filter: brightness(.9);
transform: scale($clickscale);
}
}
});

14
examples/leptos-axum/.gitignore vendored Normal file
View file

@ -0,0 +1,14 @@
# Generated by Cargo
# will have compiled files and executables
debug/
target/
# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
Cargo.lock
# These are backup files generated by rustfmt
**/*.rs.bk
# MSVC Windows builds of rustc generate these, which store debugging information
*.pdb

View file

@ -0,0 +1,67 @@
[package]
name = "leptos-axum-sabry"
version = "0.1.0"
edition = "2021"
publish = false
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
leptos = { version = "0.7.0-gamma3" }
leptos_axum = { version = "0.7.0-gamma3", optional = true }
leptos_meta = { version = "0.7.0-gamma3" }
leptos_router = { version = "0.7.0-gamma3" }
axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.93"
thiserror = "1"
tracing = { version = "0.1", optional = true }
http = "1"
# sabry with sass
sabry = {path = "../../", features = ["sass"]}
[build-dependencies]
# sabry for build with sass
sabry = {path = "../../", features = ["build", "sass"]}
# lets depend on our styles
define-styles = {path = "../define-styles"}
[features]
hydrate = ["leptos/hydrate"]
ssr = [
"dep:axum",
"dep:tokio",
"dep:tower",
"dep:tower-http",
"dep:leptos_axum",
"leptos/ssr",
"leptos_meta/ssr",
"leptos_router/ssr",
"dep:tracing",
]
[package.metadata.sabry]
css.minify = true
# We'll use bundle for leptos
css.bundle = "target/.sabry/target/bundle.css"
[package.metadata.leptos]
output-name = "leptos-axum"
site-root = "target/site"
site-pkg-dir = "pkg"
# Sabry-generated bundle for leptos
style-file = "target/.sabry/target/bundle.css"
assets-dir = "public"
site-addr = "127.0.0.1:3000"
reload-port = 3001
browserquery = "defaults"
env = "DEV"
bin-features = ["ssr"]
bin-default-features = false
lib-features = ["hydrate"]
lib-default-features = false

View file

@ -0,0 +1,24 @@
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <https://unlicense.org>

View file

@ -0,0 +1,90 @@
<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 Axum Starter Template
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).
## Creating your template repo
If you don't have `cargo-leptos` installed you can install it with
```bash
cargo install cargo-leptos --locked
```
Then run
```bash
cargo leptos new --git https://github.com/leptos-rs/start-axum-0.7
```
to generate a new project template.
```bash
cd leptos-axum
```
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 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
cargo leptos build --release
```
Will generate your server binary in target/server/release and your site package in target/site
## Testing Your Project
```bash
cargo leptos end-to-end
```
```bash
cargo leptos end-to-end --release
```
Cargo-leptos uses Playwright as the end-to-end test tool.
Tests are located in end2end/tests directory.
## Executing a Server on a Remote Machine Without the Toolchain
After running a `cargo leptos build --release` the minimum files needed are:
1. The server binary located in `target/server/release`
2. The `site` directory and all files within located in `target/site`
Copy these files to your remote server. The directory structure should be:
```text
leptos-axum
site/
```
Set the following environment variables (updating for your project as needed):
```text
LEPTOS_OUTPUT_NAME="leptos-axum"
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.
## Licensing
This template itself is released under the Unlicense. You should replace the LICENSE for your own application with an appropriate license if you plan to release it publicly.

View file

@ -0,0 +1,11 @@
use define_styles::{theme, utils, tokens};
fn main(){
sabry::buildy(
sabry::usey!(
utils!(),
theme!(),
tokens!()
)
).expect("Failed to build with sabry");
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,10 @@
pub mod shell;
pub mod routes;
#[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
use crate::shell::*;
console_error_panic_hook::set_once();
leptos::mount::hydrate_body(App);
}

View file

@ -0,0 +1,38 @@
#[cfg(feature = "ssr")]
#[tokio::main]
async fn main() {
use axum::Router;
use leptos::prelude::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use leptos_axum_sabry::shell::*;
let conf = get_configuration(None).unwrap();
let addr = conf.leptos_options.site_addr;
let leptos_options = conf.leptos_options;
// Generate the list of routes in your Leptos App
let routes = generate_route_list(App);
let app = Router::new()
.leptos_routes(&leptos_options, routes, {
let leptos_options = leptos_options.clone();
move || shell(leptos_options.clone())
})
.fallback(leptos_axum::file_and_error_handler(shell))
.with_state(leptos_options);
// run our app with hyper
// `axum::Server` is a re-export of `hyper::Server`
log!("listening on http://{}", &addr);
let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
axum::serve(listener, app.into_make_service())
.await
.unwrap();
}
#[cfg(not(feature = "ssr"))]
pub fn main() {
// no client-side main function
// unless we want this to work with e.g., Trunk for pure client-side testing
// see lib.rs for hydration function instead
}

View file

@ -0,0 +1,33 @@
use leptos::prelude::*;
use sabry::styly;
styly!(s "src/routes/home.scss");
styly!(s2 {
@use "theme";
.card {
@include theme.surface(secondary);
}
.pocwarn {
@include theme.surface(secondary);
text-transform: uppercase;
}
});
/// Renders the home page of your application.
#[component]
pub fn Route() -> impl IntoView {
// Creates a reactive value to update the button
let count = RwSignal::new(0);
let on_click = move |_| *count.write() += 1;
view! {
<section class=s::table>
<h1>"Welcome to Leptos!"</h1>
<button class=s::btn on:click=on_click>"Ima CRAZY button, clicked: " {count} " times!"</button>
<span class=s2::card>"DISCLAIMER:"</span>
<p class=s2::pocwarn>"This isn't a design example! Its just proof of sabry's capabilities."</p>
<p class=s2::pocwarn>"Plz dont make websites/apps which look like this page :D"</p>
</section>
}
}

View file

@ -0,0 +1,12 @@
@use "tokens";
@use "utils";
@use "theme";
.btn {
@include tokens.clickable(accent);
}
.table {
@include utils.flex(column, center, center);
@include theme.surface(primary);
}

View file

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

View file

@ -0,0 +1,43 @@
use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
use leptos_router::{
components::{Route, Router, Routes},
StaticSegment,
};
use crate::routes;
pub fn shell(options: LeptosOptions) -> impl IntoView {
view! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<AutoReload options=options.clone() />
<HydrationScripts options/>
<MetaTags/>
</head>
<body>
<App/>
</body>
</html>
}
}
#[component]
pub fn App() -> impl IntoView {
provide_meta_context();
view! {
<Stylesheet id="leptos" href="/pkg/leptos-axum.css"/>
<Title text="Welcome to Leptos"/>
<Router>
<main>
<Routes fallback=|| "Page not found.".into_view()>
<Route path=StaticSegment("") view=routes::home::Route/>
</Routes>
</main>
</Router>
}
}

1491
examples/use-styles/Cargo.lock generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,24 @@
[package]
name = "use-styles"
version = "0.0.0"
edition = "2021"
rust-version = "1.82"
publish = false
[dependencies]
sabry = {path = "../../", features = ["sass"]}
[build-dependencies]
sabry = {path = "../../", features = ["build", "sass"]}
define-styles = {path = "../define-styles"}
[package.metadata.sabry]
css.bundle = "target/static/style.css"
css.scopes = "target/static/styles/"
css.bundle_prelude = ["assets/prelude.css"]
hash.size = 6
hash.collision = "error"
[package.metadata.sabry.lightningcss]
targets = {chrome = "120", firefox = "120", ie = "8"}

View file

@ -0,0 +1,4 @@
html {
box-sizing: border-box;
font-size: 10px;
}

View file

@ -0,0 +1,22 @@
use define_styles::{theme, tokens, utils as utils_dup};
use sabry::{sassy, usey};
// This module will have the same name as define_styles_example::utils
// and sabry is configured to merge them
sassy!(utils {
@mixin nonclickable(){
display: none;
}
});
fn main(){
/* Declare modules to use with sabry */
sabry::buildy(
usey!(
theme!(),
tokens!(),
utils_dup!(),
utils!()
)
).expect("Failed to build sabry styles");
}

View file

@ -0,0 +1,17 @@
use sabry::styly;
styly!(pub const bundlemod {
@use "tokens";
.someth {
@include tokens.clickable;
background-color: black;
}
});
styly!(pub const filemod:sass "src/main.sass");
fn main(){
println!("someth class codemod styles: {}", bundlemod::someth);
println!("someth class filemod styles: {}", filemod::someth);
println!("Thats how we used the styles! Good luck!!");
}

Some files were not shown because too many files have changed in this diff Show more