SCSS styling capabilities

.gitignore

@@ -6,6 +6,9 @@
 target
 target-analyzer
 
+# Build-time generated CSS artifacts
+/kitsune/assets-dist
+
 # Redis dump
 /dump.rdb
 

crates/kitsune-http-client/Cargo.toml

@@ -8,7 +8,7 @@ edition.workspace = true
 bytes = "1.5.0"
 futures-core = "0.3.29"
 headers = "0.3.9"
-http-body = "0.4.5"
+http-body = "0.4.6"
 hyper = { version = "0.14.27", features = [
     "client",
     "deprecated",

crates/kitsune-search/src/lib.rs

@@ -5,7 +5,7 @@ use enum_dispatch::enum_dispatch;
 use kitsune_db::model::{account::Account as DbAccount, post::Post as DbPost};
 use serde::{Deserialize, Serialize};
 use speedy_uuid::Uuid;
-use strum::EnumIter;
+use strum::{AsRefStr, EnumIter};
 
 mod error;
 #[cfg(feature = "meilisearch")]
@@ -101,7 +101,8 @@ impl From<DbPost> for SearchItem {
     }
 }
 
-#[derive(Clone, Copy, Debug, EnumIter, Eq, Hash, Ord, PartialEq, PartialOrd)]
+#[derive(AsRefStr, Clone, Copy, Debug, EnumIter, Eq, Hash, Ord, PartialEq, PartialOrd)]
+#[strum(serialize_all = "snake_case")]
 pub enum SearchIndex {
     Account,
     Post,

crates/kitsune-search/src/meilisearch.rs

@@ -20,7 +20,6 @@ impl MeiliSearchService {
     /// # Errors
     ///
     /// - Failed to connect to the instance
-    #[allow(clippy::missing_panics_doc)]
     pub async fn new(host: &str, api_key: &str) -> Result<Self> {
         let service = Self {
             client: Client::new(host, Some(api_key)),
@@ -42,10 +41,7 @@ impl MeiliSearchService {
     }
 
     fn get_index(&self, index: SearchIndex) -> Index {
-        match index {
-            SearchIndex::Account => self.client.index("accounts"),
-            SearchIndex::Post => self.client.index("posts"),
-        }
+        self.client.index(index.as_ref())
     }
 }
 

crates/kitsune-url/src/lib.rs

@@ -39,12 +39,12 @@ impl UrlService {
 
     #[must_use]
     pub fn default_avatar_url(&self) -> String {
-        format!("{}/public/assets/default-avatar.png", self.base_url())
+        format!("{}/public/default-avatar.png", self.base_url())
     }
 
     #[must_use]
     pub fn default_header_url(&self) -> String {
-        format!("{}/public/assets/default-header.png", self.base_url())
+        format!("{}/public/default-header.png", self.base_url())
     }
 
     #[must_use]

kitsune-fe/src/consts.ts

@@ -2,7 +2,7 @@ const BACKEND_PREFIX =
   import.meta.env.VITE_BACKEND_PREFIX ?? window.location.origin;
 
 const DEFAULT_PROFILE_PICTURE_URL =
-  BACKEND_PREFIX + '/public/assets/default-avatar.png';
+  BACKEND_PREFIX + '/public/default-avatar.png';
 
 const MAX_UUID = 'FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFFFFFF';
 

kitsune/Cargo.toml

@@ -101,7 +101,6 @@ utoipa-swagger-ui = { version = "4.0.0", features = ["axum"] }
 
 # --- Optional dependencies ---
 
-
 # "graphql" feature
 async-graphql = { version = "6.0.11", default-features = false, features = [
     "playground",
@@ -119,6 +118,10 @@ kitsune-mastodon = { path = "../crates/kitsune-mastodon", optional = true }
 # "oidc" feature
 kitsune-oidc = { path = "../crates/kitsune-oidc", optional = true }
 
+[build-dependencies]
+camino = "1.1.6"
+fs_extra = "1.3.0"
+
 [dev-dependencies]
 deadpool-redis = "0.13.0"
 kitsune-http-client = { path = "../crates/kitsune-http-client" }

kitsune/assets/template.scss

@@ -0,0 +1,212 @@
+@use "../../kitsune-fe/src/styles/colours" as *;
+@use "../../kitsune-fe/src/styles/mixins" as *;
+
+* {
+  font-family: "Courier New", Courier, monospace;
+}
+
+a {
+  font-weight: 500;
+  color: $shade1light;
+  text-decoration: inherit;
+}
+
+body {
+  //background-image: url("/public/assets/BG.webp");
+  //background-size: cover;
+  //backdrop-filter: blur(2.5px) saturate(1.4);
+  //background-position: center;
+  //background-repeat: no-repeat;
+
+  background-color: $dark1;
+  color: white;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.header {
+  font-size: 4.3rem;
+  color: $shade2light;
+  text-shadow: $shade2dark 3px 3px 4.5px;
+  line-height: 100%;
+  margin: 25px auto;
+
+  @include only-on-mobile {
+    font-size: 42px;
+    color: $shade2light;
+    text-shadow: $shade2dark 3px 3px 4.5px;
+    line-height: 100%;
+    margin: 25px auto;
+  }
+}
+
+form,
+.message {
+  background: linear-gradient(to top left, $dark2, $dark1);
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 4px;
+  border-image-source: linear-gradient(to left, $shade1light, $shade1dark);
+  font-size: 18px;
+  font-weight: 300;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+form {
+  padding: 8vh 4.5vh;
+
+  & .field {
+    width: 280px;
+    min-height: 30px;
+    margin: 10px auto;
+    margin-bottom: 20px;
+    border: 0.5px solid $shade2light;
+    border-radius: 2px;
+    font-size: 20px;
+
+    @include only-on-mobile {
+      width: 200px;
+      min-height: 25px;
+      margin: 10px auto;
+      margin-bottom: 20px;
+      border: 0.5px solid $shade2light;
+      border-radius: 2px;
+      font-size: 16px;
+    }
+  }
+}
+
+.message,
+.consent-forms form {
+  padding: 2vh;
+}
+
+div.consent-forms {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+}
+
+.label {
+  text-transform: uppercase;
+}
+
+.disclaimer {
+  background: linear-gradient(to right, $dark2, $dark1);
+  padding: 2vh;
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 3px;
+  border-image-source: linear-gradient(to left, $shade1light, $shade1dark);
+  font-size: 16px;
+  font-weight: bold;
+  max-width: 80%;
+
+  @include only-on-mobile {
+    font-size: 13px;
+    max-width: 70%;
+    text-align: center;
+    border-width: 3px;
+  }
+}
+
+.authUsername,
+.appName {
+  color: $shade2light;
+  font-weight: bold;
+}
+
+.appName {
+  text-transform: uppercase;
+}
+
+.formButton {
+  background-color: $shade2dark;
+  border: 0.5px solid $shade2light;
+  border-radius: 5px;
+  padding: 10px;
+  color: white;
+  font-size: 20px;
+  font-weight: 500;
+  width: 100px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: 0.5s;
+
+  &:hover {
+    background-color: $shade2light;
+    color: $dark1;
+    transition: 0.3s;
+  }
+
+  @include only-on-mobile {
+    padding: 8px;
+    font-size: 16px;
+    width: 80px;
+  }
+}
+
+.tokenContainer {
+  background: linear-gradient(to top left, $dark2, $dark1);
+  padding: 8vh 4.5vh;
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 4px;
+  border-image-source: linear-gradient(to left, $shade1light, $shade1dark);
+  font-size: 20px;
+  font-weight: 300;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.token {
+  border: 0.5px solid $shade2light;
+  width: 400px;
+  padding: 20px 10px;
+  text-align: center;
+  overflow-x: auto;
+  font-weight: bold;
+
+  &::-webkit-scrollbar {
+    width: 0.5em;
+    height: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $shade2dark;
+    outline: 1px solid $dark2;
+  }
+
+  @include only-on-mobile {
+    max-width: 250px;
+  }
+}
+
+@include only-on-mobile {
+  form,
+  .tokenContainer {
+    padding: 6vh 4vh;
+    font-size: 16px;
+    border-width: 3px;
+  }
+}

kitsune/build.rs

@@ -1,3 +1,43 @@
-fn main() {
+use camino::Utf8Path;
+use fs_extra::dir::{self, CopyOptions};
+use std::{env, error::Error, io, process::Command};
+
+/// Run an `xtask` subcommand
+fn xtask(args: &[&str]) -> io::Result<()> {
+    let output = Command::new(env!("CARGO"))
+        .args(["run", "--manifest-path", "../xtask/Cargo.toml", "--"])
+        .args(args)
+        .output()?;
+
+    output.status.success().then_some(()).ok_or_else(|| {
+        let stderr = String::from_utf8(output.stderr).unwrap();
+        io::Error::new(
+            io::ErrorKind::Other,
+            format!("Failed to run xtask: {stderr}"),
+        )
+    })
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    println!("cargo:rerun-if-changed=assets");
     println!("cargo:rerun-if-changed=templates");
+
+    let assets_path = Utf8Path::new("./assets").canonicalize_utf8()?;
+    let prepared_assets_path = Utf8Path::new("./assets-dist");
+
+    // Only clean the `assets-dist` directory on non-debug builds
+    if !cfg!(debug_assertions) {
+        dir::remove(prepared_assets_path)?;
+    }
+
+    let copy_options = CopyOptions {
+        overwrite: true,
+        content_only: true,
+        ..CopyOptions::default()
+    };
+    dir::copy(assets_path, prepared_assets_path, &copy_options)?;
+
+    xtask(&["build-scss", "--path", prepared_assets_path.as_str()])?;
+
+    Ok(())
 }