From 9f7b903901acb0cd6ec9cb2146406a92ebf79cab Mon Sep 17 00:00:00 2001 From: Vika Date: Fri, 7 Oct 2022 19:53:04 +0300 Subject: templates: move static assets to the templates crate It makes more sense to keep CSS near the templates, and the client-side JavaScript code too, since it depends on the DOM structure to work. Additionally, the overhead of `include_dir!()` is almost completely mitigated by the fact that this is a separate crate that isn't recompiled often. The linking stage, however, is still expected to take a little bit long. But I doubt it'd be longer than what it was before, since it's the same exact files that get linked into the app. --- kittybox-rs/src/frontend/login.rs | 2 +- kittybox-rs/src/frontend/mod.rs | 47 +------- kittybox-rs/src/frontend/onboarding.css | 33 ------ kittybox-rs/src/frontend/onboarding.rs | 2 +- kittybox-rs/src/frontend/style.css | 201 -------------------------------- 5 files changed, 8 insertions(+), 277 deletions(-) delete mode 100644 kittybox-rs/src/frontend/onboarding.css delete mode 100644 kittybox-rs/src/frontend/style.css (limited to 'kittybox-rs/src/frontend') diff --git a/kittybox-rs/src/frontend/login.rs b/kittybox-rs/src/frontend/login.rs index 9665ce7..c693899 100644 --- a/kittybox-rs/src/frontend/login.rs +++ b/kittybox-rs/src/frontend/login.rs @@ -9,7 +9,7 @@ use std::str::FromStr; use crate::frontend::templates::Template; use crate::frontend::{FrontendError, IndiewebEndpoints}; use crate::{database::Storage, ApplicationState}; -use kittybox_templates::LoginPage; +use kittybox_frontend_renderer::LoginPage; pub async fn form(req: Request>) -> Result { let owner = req.url().origin().ascii_serialization() + "/"; diff --git a/kittybox-rs/src/frontend/mod.rs b/kittybox-rs/src/frontend/mod.rs index 58de39d..f0f4e5a 100644 --- a/kittybox-rs/src/frontend/mod.rs +++ b/kittybox-rs/src/frontend/mod.rs @@ -12,7 +12,12 @@ use tracing::{debug, error}; //pub mod login; pub mod onboarding; -use kittybox_templates::{Entry, ErrorPage, Feed, MainPage, Template, VCard, POSTS_PER_PAGE}; +use kittybox_frontend_renderer::{ + Entry, Feed, VCard, + ErrorPage, Template, MainPage, + POSTS_PER_PAGE +}; +pub use kittybox_frontend_renderer::assets::statics; #[derive(Debug, Deserialize)] pub struct QueryParams { @@ -266,43 +271,3 @@ pub async fn catchall( } } } - -const STYLE_CSS: &[u8] = include_bytes!("./style.css"); -// XXX const path handling is ugly, and concat!() doesn't take -// constants, only literals... how annoying! -// -// This might break compiling on inferior operating systems that use -// backslashes as their path separator -const ONBOARDING_JS: &[u8] = include_bytes!(concat!( - env!("OUT_DIR"), "/", "kittybox_js", "/", "onboarding.js" -)); -const ONBOARDING_CSS: &[u8] = include_bytes!("./onboarding.css"); -const INDIEAUTH_JS: &[u8] = include_bytes!(concat!( - env!("OUT_DIR"), "/", "kittybox_js", "/", "indieauth.js" -)); -const LIB_JS: &[u8] = include_bytes!(concat!( - env!("OUT_DIR"), "/", "kittybox_js", "/", "lib.js" -)); -const JSLABELS_HTML: &[u8] = include_bytes!("../../javascript/jslicense.html"); -const MIME_JS: &str = "application/javascript"; -const MIME_CSS: &str = "text/css"; -const MIME_PLAIN: &str = "text/plain"; -const MIME_HTML: &str = "text/html; charset=utf-8"; - -pub async fn statics(Path(name): Path) -> impl IntoResponse { - use axum::http::header::CONTENT_TYPE; - - match name.as_str() { - "style.css" => (StatusCode::OK, [(CONTENT_TYPE, MIME_CSS)], STYLE_CSS), - "onboarding.js" => (StatusCode::OK, [(CONTENT_TYPE, MIME_JS)], ONBOARDING_JS), - "onboarding.css" => (StatusCode::OK, [(CONTENT_TYPE, MIME_CSS)], ONBOARDING_CSS), - "indieauth.js" => (StatusCode::OK, [(CONTENT_TYPE, MIME_JS)], INDIEAUTH_JS), - "lib.js" => (StatusCode::OK, [(CONTENT_TYPE, MIME_JS)], LIB_JS), - "jslicense.html" => (StatusCode::OK, [(CONTENT_TYPE, MIME_HTML)], JSLABELS_HTML), - _ => ( - StatusCode::NOT_FOUND, - [(CONTENT_TYPE, MIME_PLAIN)], - "not found".as_bytes(), - ), - } -} diff --git a/kittybox-rs/src/frontend/onboarding.css b/kittybox-rs/src/frontend/onboarding.css deleted file mode 100644 index 6f191b9..0000000 --- a/kittybox-rs/src/frontend/onboarding.css +++ /dev/null @@ -1,33 +0,0 @@ -form.onboarding > ul#progressbar > li.active { - font-weight: bold; -} -form.onboarding > ul#progressbar { - display: flex; list-style: none; justify-content: space-around; -} - -form.onboarding > fieldset > div.switch_card_buttons { - display: flex; - justify-content: space-between; - width: 100%; -} -form.onboarding > fieldset > div.switch_card_buttons button:last-child { - margin-left: auto; -} -.form_group, .multi_input { - display: flex; - flex-direction: column; -} -.multi_input { - align-items: start; -} -.multi_input > input { - width: 100%; - align-self: stretch; -} -form.onboarding > fieldset > .form_group + * { - margin-top: .75rem; -} -form.onboarding textarea { - width: 100%; - resize: vertical; -} diff --git a/kittybox-rs/src/frontend/onboarding.rs b/kittybox-rs/src/frontend/onboarding.rs index b460e6a..b4bae8e 100644 --- a/kittybox-rs/src/frontend/onboarding.rs +++ b/kittybox-rs/src/frontend/onboarding.rs @@ -5,7 +5,7 @@ use axum::{ response::{Html, IntoResponse}, Json, }; -use kittybox_templates::{ErrorPage, OnboardingPage, Template}; +use kittybox_frontend_renderer::{ErrorPage, OnboardingPage, Template}; use serde::Deserialize; use tracing::{debug, error}; diff --git a/kittybox-rs/src/frontend/style.css b/kittybox-rs/src/frontend/style.css deleted file mode 100644 index a8ef6e4..0000000 --- a/kittybox-rs/src/frontend/style.css +++ /dev/null @@ -1,201 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Lato&display=swap'); - -:root { - font-family: var(--font-normal); - --font-normal: 'Lato', sans-serif; - --font-accent: 'Caveat', cursive; - --type-scale: 1.250; - - --primary-accent: purple; - --secondary-accent: gold; -} -* { - box-sizing: border-box; -} -body { - margin: 0; -} -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-accent); -} -.titanic { - font-size: 3.815rem -} -h1, .xxxlarge { - margin-top: 0; - margin-bottom: 0; - font-size: 3.052rem; -} -h2, .xxlarge {font-size: 2.441rem;} -h3, .xlarge {font-size: 1.953rem;} -h4, .larger {font-size: 1.563rem;} -h5, .large {font-size: 1.25rem;} -h6, .normal {font-size: 1rem;} -small, .small { font-size: 0.8em; } - -nav#headerbar { - background: var(--primary-accent); - color: whitesmoke; - border-bottom: .75rem solid var(--secondary-accent); - padding: .3rem; - vertical-align: center; - position: sticky; - top: 0; -} -nav#headerbar a#homepage { - font-weight: bolder; - font-family: var(--font-accent); - font-size: 2rem; -} -nav#headerbar > ul { - display: flex; - padding: inherit; - margin: inherit; - gap: .75em; -} -nav#headerbar > ul > li { - display: inline-flex; - flex-direction: column; - marker: none; - padding: inherit; - margin: inherit; - justify-content: center; -} -nav#headerbar > ul > li.shiftright { - margin-left: auto; -} -nav#headerbar a { - color: white; -} -body > main { - max-width: 60rem; - margin: auto; - padding: .75rem; -} -body > footer { - text-align: center; -} -.sidebyside { - display: flex; - flex-wrap: wrap; - gap: .75rem; - margin-top: .75rem; - margin-bottom: .75rem; -} -.sidebyside > * { - width: 100%; - margin-top: 0; - margin-bottom: 0; - border: .125rem solid black; - border-radius: .75rem; - padding: .75rem; - margin-top: 0 !important; - margin-bottom: 0 !important; - flex-basis: 28rem; - flex-grow: 1; -} -article > * + * { - margin-top: .75rem; -} -article > header { - padding-bottom: .75rem; - border-bottom: 1px solid gray; -} -article > footer { - border-top: 1px solid gray; -} -article.h-entry, article.h-feed, article.h-card, article.h-event { - border: 2px solid black; - border-radius: .75rem; - padding: .75rem; - margin-top: .75rem; - margin-bottom: .75rem; -} -.webinteractions > ul.counters { - display: inline-flex; - padding: inherit; - margin: inherit; - gap: .75em; - flex-wrap: wrap; -} -.webinteractions > ul.counters > li > .icon { - font-size: 1.5em; -} -.webinteractions > ul.counters > li { - display: inline-flex; - align-items: center; - gap: .5em; -} -article.h-entry > header.metadata ul { - padding-inline-start: unset; - margin: unset; -} -article.h-entry > header.metadata ul.categories { - flex-wrap: wrap; - display: inline-flex; - list-style-type: none; -} -article.h-entry > header.metadata ul.categories li { - display: inline; - margin-inline-start: unset; -} -article.h-entry > header.metadata ul li { - margin-inline-start: 2.5em; -} -article.h-entry .e-content pre { - border: 1px solid gray; - border-radius: 0.5em; - overflow-y: auto; - padding: 0.5em; -} -article.h-entry img.u-photo { - max-width: 80%; - max-height: 90vh; - display: block; - margin: auto; -} -article.h-entry img.u-photo + * { - margin-top: .75rem; -} -article.h-entry > header.metadata span + span::before { - content: " | " -} -li.p-category::before { - content: " #"; -} - -article.h-entry ul.categories { - gap: .2em; -} -article.h-card img.u-photo { - border-radius: 100%; - float: left; - height: 8rem; - border: 1px solid gray; - margin-right: .75em; - object-fit: cover; - aspect-ratio: 1; -} - -.mini-h-card img, #indieauth_page img { - height: 2em; - display: inline-block; - border: 2px solid gray; - border-radius: 100%; - margin-right: 0.5rem; -} - -.mini-h-card * { - vertical-align: middle; -} - -.mini-h-card a { - text-decoration: none; -} - -#indieauth_page > #introduction { - border: .125rem solid gray; - border-radius: .75rem; - margin: 1.25rem; - padding: .75rem; -} -- cgit 1.4.1