fix(website): some minor fixes (#198)

This fixes some minor bugs on the website.

common/src/http/router/mod.rs

@@ -48,7 +48,23 @@ impl<I: 'static, O: 'static, E: 'static> Router<I, O, E> {
 				}
 				Err(err) => {
 					if let Some(error_handler) = error_handler {
-						return Ok(error_handler((hyper::Request::from_parts(parts, ()), err)).await);
+						// run post middlewares for error handler response
+						// TODO: prevent code duplication
+						let req = hyper::Request::from_parts(parts.clone(), ());
+						let mut res = error_handler((req.clone(), err)).await;
+						for idx in info.post_middleware.iter().copied() {
+							let (parts, body) = res.into_parts();
+							res = match self.post_middlewares[idx].0((
+								hyper::Response::from_parts(parts.clone(), body),
+								req.clone(),
+							))
+							.await
+							{
+								Ok(res) => res,
+								Err(err) => error_handler((req.clone(), err)).await,
+							};
+						}
+						return Ok(res);
 					} else {
 						return Err(RouterError::Unhandled(err));
 					}

package.json

@@ -1,9 +1,9 @@
 {
 	"private": true,
 	"devDependencies": {
-		"@commitlint/cli": "^18.4.3",
-		"@commitlint/config-conventional": "^18.4.3",
-		"commitlint": "^18.4.3",
+		"@commitlint/cli": "^18.4.4",
+		"@commitlint/config-conventional": "^18.4.4",
+		"commitlint": "^18.4.4",
 		"husky": "^8.0.3",
 		"prettier": "^3.1.1"
 	},

platform/api/src/api/v1/gql/mod.rs

@@ -35,7 +35,7 @@ pub fn schema<G: ApiGlobal>() -> MySchema<G> {
 	.enable_subscription_in_federation()
 	.extension(extensions::Analyzer)
 	.extension(extensions::Tracing)
-	.limit_complexity(100) // We don't want to allow too complex queries to be executed
+	.limit_complexity(200) // We don't want to allow too complex queries to be executed
 	.finish()
 }
 

platform/api/src/api/v1/gql/models/color.rs

@@ -4,10 +4,10 @@ use async_graphql::{ComplexObject, InputValueError, InputValueResult, Scalar, Sc
 
 /// A hex rgb color code.
 #[derive(Copy, Clone, Debug)]
-pub struct Color(i32);
+pub struct RgbColor(i32);
 
 #[Scalar]
-impl ScalarType for Color {
+impl ScalarType for RgbColor {
 	fn parse(value: Value) -> InputValueResult<Self> {
 		match value {
 			Value::String(s) => {
@@ -35,60 +35,71 @@ impl ScalarType for Color {
 	}
 }
 
-impl Color {
-	fn rgb(&self) -> (u8, u8, u8) {
+impl RgbColor {
+	fn split(&self) -> (u8, u8, u8) {
 		let r = (self.0 >> 16) & 0xFF;
 		let g = (self.0 >> 8) & 0xFF;
 		let b = self.0 & 0xFF;
 		(r as u8, g as u8, b as u8)
 	}
 }
 
-impl Deref for Color {
+impl Deref for RgbColor {
 	type Target = i32;
 
 	fn deref(&self) -> &Self::Target {
 		&self.0
 	}
 }
 
-impl From<i32> for Color {
+impl From<i32> for RgbColor {
 	fn from(value: i32) -> Self {
 		Self(value)
 	}
 }
 
-impl ToString for Color {
+impl ToString for RgbColor {
 	fn to_string(&self) -> String {
 		format!("#{:06x}", self.0)
 	}
 }
 
+/// A HSL color.
+#[derive(Copy, Clone, Debug, SimpleObject)]
+pub struct HslColor {
+	/// Hue in degrees, value between 0.0 and 360.0.
+	pub h: f64,
+	/// Saturation, value between 0.0 and 1.0.
+	pub s: f64,
+	/// Lightness, value between 0.0 and 1.0.
+	pub l: f64,
+}
+
 #[derive(SimpleObject, Clone)]
 #[graphql(complex)]
 pub struct DisplayColor {
-	pub color: Color,
+	pub rgb: RgbColor,
 }
 
-impl From<Color> for DisplayColor {
-	fn from(color: Color) -> Self {
-		Self { color }
+impl From<RgbColor> for DisplayColor {
+	fn from(color: RgbColor) -> Self {
+		Self { rgb: color }
 	}
 }
 
 impl From<i32> for DisplayColor {
 	fn from(color: i32) -> Self {
 		Self {
-			color: Color::from(color),
+			rgb: RgbColor::from(color),
 		}
 	}
 }
 
 #[ComplexObject]
 impl DisplayColor {
 	// https://www.rapidtables.com/convert/color/rgb-to-hsl.html
-	async fn hue(&self) -> f64 {
-		let (r, g, b) = self.color.rgb();
+	async fn hsl(&self) -> HslColor {
+		let (r, g, b) = self.rgb.split();
 		let r = r as f64 / 255.0;
 		let g = g as f64 / 255.0;
 		let b = b as f64 / 255.0;
@@ -97,7 +108,7 @@ impl DisplayColor {
 		let c_min = r.min(g).min(b);
 		let delta = c_max - c_min;
 
-		let h = if delta == 0.0 {
+		let mut h = if delta == 0.0 {
 			0.0
 		} else if c_max == r {
 			60.0 * (((g - b) / delta) % 6.0)
@@ -107,11 +118,23 @@ impl DisplayColor {
 			60.0 * ((r - g) / delta + 4.0)
 		};
 
-		if h < 0.0 { h + 360.0 } else { h }
+		if h < 0.0 {
+			h += 360.0;
+		}
+
+		let l = (c_max + c_min) / 2.0;
+
+		let s = if delta == 0.0 {
+			0.0
+		} else {
+			delta / (1.0 - (2.0 * l - 1.0).abs())
+		};
+
+		HslColor { h, s, l }
 	}
 
 	async fn is_gray(&self) -> bool {
-		let (r, g, b) = self.color.rgb();
+		let (r, g, b) = self.rgb.split();
 		// Color is gray when r == g == b
 		r == g && g == b
 	}

platform/api/src/api/v1/gql/mutations/user.rs

@@ -8,7 +8,7 @@ use crate::api::auth::AuthError;
 use crate::api::v1::gql::error::ext::*;
 use crate::api::v1::gql::error::{GqlError, Result};
 use crate::api::v1::gql::ext::ContextExt;
-use crate::api::v1::gql::models::color::Color;
+use crate::api::v1::gql::models::color::RgbColor;
 use crate::api::v1::gql::models::two_fa::{TwoFaRequest, TwoFaResponse};
 use crate::api::v1::gql::models::ulid::GqlUlid;
 use crate::api::v1::gql::models::user::User;
@@ -142,7 +142,7 @@ impl<G: ApiGlobal> UserMutation<G> {
 	async fn display_color<'ctx>(
 		&self,
 		ctx: &Context<'_>,
-		#[graphql(desc = "New display color.")] color: Color,
+		#[graphql(desc = "New display color.")] color: RgbColor,
 	) -> Result<User<G>> {
 		let global = ctx.get_global::<G>();
 		let request_context = ctx.get_req_context();

platform/api/src/api/v1/gql/playground.html

@@ -49,10 +49,16 @@
 			type="application/javascript"
 		></script>
 		<script>
+			function trimTrailingSlash(s) {
+				return s.replace(/\/$/, '');
+			}
+
 			const sub_url = new URL(".", window.location.href);
 			sub_url.protocol = sub_url.protocol.replace("http", "ws");
+			sub_url.href = trimTrailingSlash(sub_url.href);
 
 			const url = new URL(".", window.location.href);
+			url.href = trimTrailingSlash(url.href);
 
 			ReactDOM.render(
 				React.createElement(GraphiQL, {

platform/website/codegen.cjs

@@ -13,7 +13,7 @@ const config = {
 					DateRFC3339: "string",
 					UUID: "string",
 					ULID: "string",
-					Color: "string",
+					RgbColor: "string",
 				},
 			},
 		},

platform/website/src/components/chat/messages.svelte

@@ -14,6 +14,7 @@
 	import type { Writable } from "svelte/store";
 	import { websocketOpen } from "$/store/websocket";
 	import { getContextClient } from "@urql/svelte";
+	import { colorToStyle } from "$/lib/colors";
 
 	export let channelId: string;
 	export let onlyUserMessages: boolean = false;
@@ -76,11 +77,6 @@
 		}
 	}
 
-	function colorToStyle(color?: string) {
-		if (!color) return "";
-		return `color: ${color};`;
-	}
-
 	function subscribeToMessages(channelId: string) {
 		$chatStatus = ChatStatus.Connecting;
 		const subscriptionQuery = graphql(`
@@ -94,7 +90,11 @@
 						username
 						displayName
 						displayColor {
-							color
+							hsl {
+								h
+								s
+								l
+							}
 						}
 					}
 				}
@@ -131,9 +131,7 @@
 		<div class="message">
 			{#if message.message.type === MessageType.User}
 				<span
-					><span
-						class="message-sender"
-						style={colorToStyle(message.message.user?.displayColor.color)}
+					><span class="message-sender" style={colorToStyle(message.message.user?.displayColor.hsl)}
 						>{message.message.user?.displayName}</span
 					>:
 				</span>