Frontend: Added color.js, calculating text/icon color depending on the background color. Backend: Skills are now ordered by id.

backend/src/main.rs

@@ -79,7 +79,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
     
     let programming_languages = sqlx::query_as!(
         ProgrammingLanguages,
-        "SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1",
+        "SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1 ORDER BY programming_languages.id",
         id
     )
     .fetch_all(&pool)
@@ -87,7 +87,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
 
     let softwares = sqlx::query_as!(
         Softwares,
-        "SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1",
+        "SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1 ORDER BY softwares.id",
         id
     )
     .fetch_all(&pool)
@@ -95,7 +95,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
 
     let languages = sqlx::query_as!(
         Languages,
-        "SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1",
+        "SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1 ORDER BY languages.id",
         id
     )
     .fetch_all(&pool)

frontend/src/lib/components/pill.svelte

@@ -2,20 +2,21 @@
     import SvgIcon from "@jamescoyle/svelte-icon";
     import "$lib/css/pill.css";
     import { mdiHelp } from "@mdi/js";
+    import { shouldColorBeWhite } from "$lib/js/color.js";
 
     export let name = "Unknown";
     export let icon = mdiHelp;
     export let color = "#000000";
     export let type_icon = "mdi";
 
+    const white = shouldColorBeWhite(color.slice(1));
     const style = `background-color: ${color};
-    box-shadow: 0px 8px 18px -1px ${color}40;`;
+    box-shadow: 0px 8px 18px -1px ${color}60;`;
 </script>
 
-<div class="pill-container" {style}>
+<div class={white ? "pill-container pill-white" : "pill-container pill-black"} {style}>
     {#if type_icon === "simpleicons"}
         <img
-            class="pill-white"
             height="20"
             width="20"
             src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"

frontend/src/lib/css/pill.css

@@ -4,7 +4,6 @@
     padding-left: 1rem;
     border-radius: 3rem;
     background-color: #000000;
-    color: var(--color-background);
     display: flex;
     flex-direction: row;
     width: fit-content;
@@ -15,9 +14,21 @@
 }
 
 .pill-white {
+    color: var(--color-background);
+}
+
+.pill-black {
+    color: var(--color-text);
+}
+
+.pill-white img {
     filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
 }
 
+.pill-black img {
+    filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%);
+}
+
 .pill-container img, svg {
-    margin: 0.5rem;
+    margin-right: 0.5rem;
 }

frontend/src/lib/js/color.js

@@ -0,0 +1,10 @@
+export function shouldColorBeWhite(color) {
+    const colorHex = {
+        red: parseInt(color.slice(0,2),16),
+        green: parseInt(color.slice(2,4),16),
+        blue: parseInt(color.slice(4,6),16)
+    }
+    const total = colorHex.red*0.299 + colorHex.green*0.587 + colorHex.blue*0.114;
+    console.log(total <= 186);
+    return total <= 186;
+}