New tags and dark mode support

src/lib/CheckDarkMode.ts

@@ -0,0 +1,4 @@
+function IsDarkMode(window: Window):boolean{
+    console.log("Init")
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}

src/lib/EntryData.ts

@@ -11,7 +11,9 @@ export enum ETag{
     SlangPy = "SlangPy",
     Cuda = "Cuda",
     Optix = "OptiX",
-    WgSL = "WgSL"
+    WgSL = "WgSL",
+    WebGPU = "WebGPU",
+    PlayGround = "Play Ground"
 }
 
 

src/lib/components/Entry.svelte

@@ -1,42 +1,96 @@
 <script lang="ts">
-    import type { createEmptySlangProject, ISlangProject } from "$lib/EntryData";
-	import { scale } from 'svelte/transition';
-	import { expoInOut } from 'svelte/easing';
-    const  {num, SlangProject} = $props();
+    import type {
+        createEmptySlangProject,
+        ISlangProject,
+    } from "$lib/EntryData";
+    import { scale } from "svelte/transition";
+    import { expoInOut } from "svelte/easing";
+    import { onMount } from "svelte";
 
+    const { num, SlangProject } = $props();
 
+    //========================
+    // TODO: refactor this to be reusable, it is also in the header component
+    let darkMode = $state();
+    onMount(() => {
+        darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addListener(function (e) {
+                console.log(`changed to ${e.matches ? "dark" : "light"} mode`);
+                if (e.matches) {
+                    darkMode = true;
+                } else {
+                    darkMode = false;
+                }
+            });
+    });
 </script>
 
-<div transition:scale={{duration: 220, delay:20, easing: expoInOut}}  class=" flex bg-white border-1 border-zinc-200 p-4 lg:p-2 flex-col  duration-120  rounded-2xl shadow-xl w-full  lg:mx-0 ">
-<div class="px-2 w-full flex flex-row items-center justify-between">
-    <div class="flex flex-col wrap flex-1 min-w-0">
-        <div class="w-full">
-            <div class="overflow-x-auto whitespace-nowrap w-full no-scrollbar">
-                <h1 class="font-chivo font-semibold text-2xl inline-block">{SlangProject.name}</h1>
+<div
+    transition:scale={{ duration: 220, delay: 20, easing: expoInOut }}
+    class=" flex bg-white dark:bg-zinc-900 border-1 border-zinc-200 dark:border-zinc-900 p-4 lg:p-2 flex-col duration-120 rounded-2xl shadow-xl w-full lg:mx-0"
+>
+    <div class="px-2 w-full flex flex-row items-center justify-between">
+        <div class="flex flex-col wrap flex-1 min-w-0">
+            <div class="w-full">
+                <div
+                    class="overflow-x-auto whitespace-nowrap w-full no-scrollbar"
+                >
+                    <h1
+                        class="font-chivo dark:text-white font-semibold text-2xl inline-block"
+                    >
+                        {SlangProject.name}
+                    </h1>
+                </div>
             </div>
+            <p class="text-s text-zinc-400 dark:text-zinc-200">
+                by: {SlangProject.authorName}
+            </p>
+        </div>
+        <div class="h-7 w-7 lg:h-8 lg:w-8 flex-shrink-0 justify-end m-2">
+            <a
+                target="_blank"
+                rel="noopener noreferrer"
+                class="h-full w-full"
+                href={SlangProject.ghLink}
+            >
+                <img
+                    alt="github"
+                    class="hover:scale-110 duration-100 h-full w-full"
+                    src={darkMode
+                        ? "svg/github-light.svg"
+                        : "svg/github-cyan.svg"}
+                />
+            </a>
         </div>
-        <p class="text-s text-zinc-400">by: {SlangProject.authorName}</p>
-    </div>
-    <div class="h-7 w-7 lg:h-8 lg:w-8 flex-shrink-0 justify-end m-2">
-        <a target="_blank" rel="noopener noreferrer" class="h-full w-full" href={SlangProject.ghLink}>
-            <img alt="github" class="hover:scale-110 duration-100 h-full w-full" src="svg/github-cyan.svg">
-        </a>
     </div>
-</div>
-    <div class="w-1/3 ml-2 mt-2 h-1 {num %2 == 0 ? " bg-amber-500" : "bg-teal-700" } "></div>
-    <div class ="mx-2 mt-4 overflow-hidden  overflow-y-scroll m-2 font-chivo font-light lg:h-80 h-80  text-sm lg:text-lg">
-        <p class=" font-bold">Description:</p>
-        <div class="text-lg ">   
+    <div
+        class="w-1/3 ml-2 mt-2 h-1 {num % 2 == 0
+            ? ' bg-amber-500'
+            : 'bg-teal-700'} "
+    ></div>
+    <div
+        class="mx-2 mt-4 overflow-hidden overflow-y-scroll m-2 font-chivo font-light lg:h-80 h-80 text-sm lg:text-lg"
+    >
+        <p class=" font-bold dark:text-white">Description:</p>
+        <div class="dark:text-white text-lg">
             {SlangProject.description}
         </div>
     </div>
 
-    <p class=" ml-2 font-bold mt-2">Tags:</p>
+    <p class=" ml-2 font-bold dark:text-white mt-2">Tags:</p>
 
-    <div class = "w-full mt-1 h-30 gap-3 grid grid-cols-3  overflow-auto grid-rows-3">
-            {#each SlangProject.tags as tag, i }
-                <button  class=" justify-around {num%2 == 0 ? "bg-amber-600 text-white" : " bg-teal-700 text-white"  } p-1 shadow-md rounded-2xl h-8" >{tag}</button>
-            {/each}
+    <div
+        class="w-full mt-1 h-30 gap-3 grid grid-cols-3 overflow-auto grid-rows-3"
+    >
+        {#each SlangProject.tags as tag, i}
+            <button
+                class=" justify-around {num % 2 == 0
+                    ? 'bg-amber-600 text-white'
+                    : ' bg-teal-700 text-white'} p-1 shadow-md rounded-2xl h-8"
+                >{tag}</button
+            >
+        {/each}
     </div>
-
 </div>

src/lib/components/Footer.svelte

@@ -1,12 +1,21 @@
 <script>
-
 </script>
 
-<footer class=" w-full justify-center gap-1 py-2 flex flex-row items-center bg-zinc-800">
-    <div class="flex flex-col items-center ">
-        <p class=" text-white  opacity-50">Made by <a href="https://github.com/wpsimon09" class="underline">wpsimon09</a></p>
-        <a href="https://github.com/wpsimon09/Slang-In-Wild"  class="text-white  opacity-50 underline">Source</a>
-        <p class=" text-white text-center text-xs px-20 lg:px-0 opacity-50">Slang™ and the Slang logo are trademarks of the Khronos Group Inc.</p>
+<footer
+    class=" w-full justify-center gap-1 py-2 flex flex-row items-center dark:bg-zinc-950 bg-zinc-800"
+>
+    <div class="flex flex-col items-center">
+        <p class=" text-white opacity-50">
+            Made by <a href="https://github.com/wpsimon09" class="underline"
+                >wpsimon09</a
+            >
+        </p>
+        <a
+            href="https://github.com/wpsimon09/Slang-In-Wild"
+            class="text-white opacity-50 underline">Source</a
+        >
+        <p class=" text-white text-center text-xs px-20 lg:px-0 opacity-50">
+            Slang™ and the Slang logo are trademarks of the Khronos Group Inc.
+        </p>
     </div>
-
-</footer>
+</footer>

src/lib/components/Header.svelte

@@ -1,17 +1,59 @@
-<script>
+<script lang="ts">
     import { expoInOut } from "svelte/easing";
     import { scale } from "svelte/transition";
+    import { onMount } from "svelte";
 
+    let darkMode = $state();
 
+    onMount(() => {
+        darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addListener(function (e) {
+                console.log(`changed to ${e.matches ? "dark" : "light"} mode`);
+                if (e.matches) {
+                    darkMode = true;
+                } else {
+                    darkMode = false;
+                }
+            });
+    });
 </script>
 
-<div transition:scale={{ duration: 120, delay: 0, easing: expoInOut }} class="flex flex-col items-center w-full md:w-1/2 lg:w-1/2 ">
-    <a target="_blank" rel="noopener noreferrer" class="w-full hidden md:block  lg:block md:w-1/2 lg:w-1/2 h-full" href="https://shader-slang.org/">
-        <img alt=" slang-logo " class="h-full w-full"  src ="svg/slang-logo-dark.svg"/>
+<div
+    transition:scale={{ duration: 120, delay: 0, easing: expoInOut }}
+    class="flex flex-col items-center w-full md:w-1/2 lg:w-1/2"
+>
+    <a
+        target="_blank"
+        rel="noopener noreferrer"
+        class="w-full hidden md:block lg:block md:w-1/2 lg:w-1/2 h-full"
+        href="https://shader-slang.org/"
+    >
+        <img
+            alt=" slang-logo "
+            class="h-full w-full"
+            src={darkMode
+                ? "svg/slang-logo-light.svg"
+                : "svg/slang-logo-dark.svg"}
+        />
     </a>
-    <a target="_blank" rel="noopener noreferrer" class="w-20 h-20 md:hidden lg:hidden lg:w-1/2 " href="https://shader-slang.org/">
-        <img alt=" slang-logo " class="h-full w-full" src ="svg/slang-small.svg"/>
+    <a
+        target="_blank"
+        rel="noopener noreferrer"
+        class="w-20 h-20 md:hidden lg:hidden lg:w-1/2"
+        href="https://shader-slang.org/"
+    >
+        <img
+            alt=" slang-logo "
+            class="h-full w-full"
+            src={darkMode ? "svg/slang-small-light.svg" : "svg/slang-small.svg"}
+        />
     </a>
 
-    <h1 class="font-chivo font-semibold px-10 lg:px-0 lg:text-2xl justify-center text-center mt-2 lg:mt-10">Open source projects that are using Slang shading language</h1>
-</div>
+    <h1
+        class="font-chivo font-semibold px-10 lg:px-0 lg:text-2xl dark:text-white justify-center text-center mt-2 lg:mt-10"
+    >
+        Open source projects that are using Slang shading language
+    </h1>
+</div>