Add Favicons to all the examples and standardize on the public folder for public assets

This commit is contained in:
benwis 2023-01-09 15:27:52 -08:00
parent 28ec3a6cda
commit ee647cba1c
33 changed files with 27 additions and 337 deletions

View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<link data-trunk rel="rust" data-wasm-opt="z"/> <link data-trunk rel="rust" data-wasm-opt="z"/>
<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
</head> </head>
<body></body> <body></body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -54,7 +54,7 @@ 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 # [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 = "src/styles/tailwind.css" # style-file = "src/styles/tailwind.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory # [Optional] Files in the asset-dir will be copied to the site-root directory
# assets-dir = "static/assets" 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. # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "127.0.0.1:3000" site-address = "127.0.0.1:3000"
# The port to use for automatic reload monitoring # The port to use for automatic reload monitoring

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -1,5 +1,6 @@
use leptos::*; use leptos::*;
use leptos_router::*; use leptos_router::*;
use leptos_meta::*;
#[cfg(feature = "ssr")] #[cfg(feature = "ssr")]
use std::sync::atomic::{AtomicI32, Ordering}; use std::sync::atomic::{AtomicI32, Ordering};
@ -44,6 +45,7 @@ pub async fn clear_server_count() -> Result<i32, ServerFnError> {
} }
#[component] #[component]
pub fn Counters(cx: Scope) -> impl IntoView { pub fn Counters(cx: Scope) -> impl IntoView {
provide_meta_context(cx);
view! { view! {
cx, cx,
<Router> <Router>
@ -59,6 +61,7 @@ pub fn Counters(cx: Scope) -> impl IntoView {
<li><A href="multi">"Multi-User"</A></li> <li><A href="multi">"Multi-User"</A></li>
</ul> </ul>
</nav> </nav>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<main> <main>
<Routes> <Routes>
<Route path="" view=|cx| view! { <Route path="" view=|cx| view! {

View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<link data-trunk rel="rust" data-wasm-opt="z"/> <link data-trunk rel="rust" data-wasm-opt="z"/>
<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
</head> </head>
<style> <style>
img { img {

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -56,7 +56,7 @@ 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 # [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.css" style-file = "./style.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory # [Optional] Files in the asset-dir will be copied to the site-root directory
# assets-dir = "static/assets" 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. # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "127.0.0.1:3000" site-address = "127.0.0.1:3000"
# The port to use for automatic reload monitoring # The port to use for automatic reload monitoring

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -16,6 +16,7 @@ pub fn App(cx: Scope) -> impl IntoView {
cx, cx,
<> <>
<Stylesheet id="leptos" href="/pkg/hackernews.css"/> <Stylesheet id="leptos" href="/pkg/hackernews.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Meta name="description" content="Leptos implementation of a HackerNews demo."/> <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
<Router> <Router>
<Nav /> <Nav />

View file

@ -14,6 +14,10 @@ cfg_if! {
async fn css() -> impl Responder { async fn css() -> impl Responder {
actix_files::NamedFile::open_async("./style.css").await actix_files::NamedFile::open_async("./style.css").await
} }
#[get("/favicon.ico")]
async fn favicon() -> impl Responder {
actix_files::NamedFile::open_async("./target/site//favicon.ico").await
}
#[actix_web::main] #[actix_web::main]
async fn main() -> std::io::Result<()> { async fn main() -> std::io::Result<()> {
@ -28,6 +32,7 @@ cfg_if! {
App::new() App::new()
.service(css) .service(css)
.service(favicon)
.route("/api/{tail:.*}", leptos_actix::handle_server_fns()) .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
.leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <App/> }) .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <App/> })
.service(Files::new("/", &site_root)) .service(Files::new("/", &site_root))

View file

@ -64,7 +64,7 @@ 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 # [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.css" style-file = "./style.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory # [Optional] Files in the asset-dir will be copied to the site-root directory
# assets-dir = "static/assets" 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. # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "127.0.0.1:3000" site-address = "127.0.0.1:3000"
# The port to use for automatic reload monitoring # The port to use for automatic reload monitoring

View file

@ -1,4 +0,0 @@
[tasks.build]
command = "cargo"
args = ["+nightly", "build-all-features"]
install_crate = "cargo-all-features"

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -17,6 +17,7 @@ pub fn App(cx: Scope) -> impl IntoView {
view! { view! {
cx, cx,
<> <>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Stylesheet id="leptos" href="/pkg/hackernews_axum.css"/> <Stylesheet id="leptos" href="/pkg/hackernews_axum.css"/>
<Meta name="description" content="Leptos implementation of a HackerNews demo."/> <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
<Router> <Router>

View file

@ -6,6 +6,7 @@ cfg_if! {
if #[cfg(feature = "ssr")] { if #[cfg(feature = "ssr")] {
use axum::{ use axum::{
Router, Router,
routing::get,
extract::Extension, extract::Extension,
}; };
use leptos_axum::{generate_route_list, LeptosRoutes}; use leptos_axum::{generate_route_list, LeptosRoutes};
@ -25,6 +26,7 @@ if #[cfg(feature = "ssr")] {
// build our application with a route // build our application with a route
let app = Router::new() let app = Router::new()
.route("/favicon.ico", get(file_handler))
.leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> } ) .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> } )
.fallback(file_handler) .fallback(file_handler)
.layer(Extension(Arc::new(leptos_options))); .layer(Extension(Arc::new(leptos_options)));

View file

@ -1,326 +0,0 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 15px;
background-color: #f2f3f5;
margin: 0;
padding-top: 55px;
color: #34495e;
overflow-y: scroll
}
a {
color: #34495e;
text-decoration: none
}
.header {
background-color: #335d92;
position: fixed;
z-index: 999;
height: 55px;
top: 0;
left: 0;
right: 0
}
.header .inner {
max-width: 800px;
box-sizing: border-box;
margin: 0 auto;
padding: 15px 5px
}
.header a {
color: rgba(255, 255, 255, .8);
line-height: 24px;
transition: color .15s ease;
display: inline-block;
vertical-align: middle;
font-weight: 300;
letter-spacing: .075em;
margin-right: 1.8em
}
.header a:hover {
color: #fff
}
.header a.active {
color: #fff;
font-weight: 400
}
.header a:nth-child(6) {
margin-right: 0
}
.header .github {
color: #fff;
font-size: .9em;
margin: 0;
float: right
}
.logo {
width: 24px;
margin-right: 10px;
display: inline-block;
vertical-align: middle
}
.view {
max-width: 800px;
margin: 0 auto;
position: relative
}
.fade-enter-active,
.fade-exit-active {
transition: all .2s ease
}
.fade-enter,
.fade-exit-active {
opacity: 0
}
@media (max-width:860px) {
.header .inner {
padding: 15px 30px
}
}
@media (max-width:600px) {
.header .inner {
padding: 15px
}
.header a {
margin-right: 1em
}
.header .github {
display: none
}
}
.news-view {
padding-top: 45px
}
.news-list,
.news-list-nav {
background-color: #fff;
border-radius: 2px
}
.news-list-nav {
padding: 15px 30px;
position: fixed;
text-align: center;
top: 55px;
left: 0;
right: 0;
z-index: 998;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}
.news-list-nav .page-link {
margin: 0 1em
}
.news-list-nav .disabled {
color: #aaa
}
.news-list {
position: absolute;
margin: 30px 0;
width: 100%;
transition: all .5s cubic-bezier(.55, 0, .1, 1)
}
.news-list ul {
list-style-type: none;
padding: 0;
margin: 0
}
@media (max-width:600px) {
.news-list {
margin: 10px 0
}
}
.news-item {
background-color: #fff;
padding: 20px 30px 20px 80px;
border-bottom: 1px solid #eee;
position: relative;
line-height: 20px
}
.news-item .score {
color: #335d92;
font-size: 1.1em;
font-weight: 700;
position: absolute;
top: 50%;
left: 0;
width: 80px;
text-align: center;
margin-top: -10px
}
.news-item .host,
.news-item .meta {
font-size: .85em;
color: #626262
}
.news-item .host a,
.news-item .meta a {
color: #626262;
text-decoration: underline
}
.news-item .host a:hover,
.news-item .meta a:hover {
color: #335d92
}
.item-view-header {
background-color: #fff;
padding: 1.8em 2em 1em;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}
.item-view-header h1 {
display: inline;
font-size: 1.5em;
margin: 0;
margin-right: .5em
}
.item-view-header .host,
.item-view-header .meta,
.item-view-header .meta a {
color: #626262
}
.item-view-header .meta a {
text-decoration: underline
}
.item-view-comments {
background-color: #fff;
margin-top: 10px;
padding: 0 2em .5em
}
.item-view-comments-header {
margin: 0;
font-size: 1.1em;
padding: 1em 0;
position: relative
}
.item-view-comments-header .spinner {
display: inline-block;
margin: -15px 0
}
.comment-children {
list-style-type: none;
padding: 0;
margin: 0
}
@media (max-width:600px) {
.item-view-header h1 {
font-size: 1.25em
}
}
.comment-children .comment-children {
margin-left: 1.5em
}
.comment {
border-top: 1px solid #eee;
position: relative
}
.comment .by,
.comment .text,
.comment .toggle {
font-size: .9em;
margin: 1em 0
}
.comment .by {
color: #626262
}
.comment .by a {
color: #626262;
text-decoration: underline
}
.comment .text {
overflow-wrap: break-word
}
.comment .text a:hover {
color: #335d92
}
.comment .text pre {
white-space: pre-wrap
}
.comment .toggle {
background-color: #fffbf2;
padding: .3em .5em;
border-radius: 4px
}
.comment .toggle a {
color: #626262;
cursor: pointer
}
.comment .toggle.open {
padding: 0;
background-color: transparent;
margin-bottom: -.5em
}
.user-view {
background-color: #fff;
box-sizing: border-box;
padding: 2em 3em
}
.user-view h1 {
margin: 0;
font-size: 1.5em
}
.user-view .meta {
list-style-type: none;
padding: 0
}
.user-view .label {
display: inline-block;
min-width: 4em
}
.user-view .about {
margin: 1em 0
}
.user-view .links a {
text-decoration: underline
}

View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<link data-trunk rel="rust" data-wasm-opt="z"/> <link data-trunk rel="rust" data-wasm-opt="z"/>
<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
<style> <style>
.red { .red {
color: red; color: red;

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<link data-trunk rel="rust" data-wasm-opt="z"/> <link data-trunk rel="rust" data-wasm-opt="z"/>
<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
<style> <style>
a[aria-current] { a[aria-current] {
font-weight: bold; font-weight: bold;

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -89,7 +89,7 @@ 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 # [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/output.css" style-file = "style/output.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory # [Optional] Files in the asset-dir will be copied to the site-root directory
assets-dir = "assets" 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. # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "127.0.0.1:3000" site-address = "127.0.0.1:3000"
# The port to use for automatic reload monitoring # The port to use for automatic reload monitoring

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -11,6 +11,7 @@ pub fn App(cx: Scope) -> impl IntoView {
view! { view! {
cx, cx,
<Stylesheet id="leptos" href="/pkg/tailwind.css"/> <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Router> <Router>
<Routes> <Routes>
<Route path="" view= move |cx| view! { <Route path="" view= move |cx| view! {

View file

@ -58,7 +58,7 @@ 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 # [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.css" style-file = "./style.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory # [Optional] Files in the asset-dir will be copied to the site-root directory
# assets-dir = "static/assets" 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. # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "127.0.0.1:3000" site-address = "127.0.0.1:3000"
# The port to use for automatic reload monitoring # The port to use for automatic reload monitoring

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -95,6 +95,7 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
provide_meta_context(cx); provide_meta_context(cx);
view! { view! {
cx, cx,
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Stylesheet id="leptos" href="/pkg/todo_app_sqlite.css"/> <Stylesheet id="leptos" href="/pkg/todo_app_sqlite.css"/>
<Router> <Router>
<header> <header>

View file

@ -72,7 +72,7 @@ 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 # [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.css" style-file = "./style.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory # [Optional] Files in the asset-dir will be copied to the site-root directory
# assets-dir = "static/assets" 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. # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "127.0.0.1:3000" site-address = "127.0.0.1:3000"
# The port to use for automatic reload monitoring # The port to use for automatic reload monitoring

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -110,7 +110,8 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
provide_meta_context(cx); provide_meta_context(cx);
view! { view! {
cx, cx,
<Stylesheet id="leptos" href="./pkg/todo_app_sqlite_axum.css"/> <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Stylesheet id="leptos" href="/pkg/todo_app_sqlite_axum.css"/>
<Router> <Router>
<header> <header>
<h1>"My Tasks"</h1> <h1>"My Tasks"</h1>

View file

@ -7,6 +7,7 @@
<link data-trunk rel="css" href="./node_modules/todomvc-app-css/index.css"> <link data-trunk rel="css" href="./node_modules/todomvc-app-css/index.css">
<title>Leptos • TodoMVC</title> <title>Leptos • TodoMVC</title>
<link data-trunk rel="rust" data-wasm-opt="z"/> <link data-trunk rel="rust" data-wasm-opt="z"/>
<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
</head> </head>
<body></body> <body></body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB