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.

5 files changed, 8 insertions, 277 deletions

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<S: Storage>(req: Request<ApplicationState<S>>) -> 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<D: Storage>(
         }
     }
 }
-
-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<String>) -> 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;
-}