Skip to content

Commit 1e81e0e

Browse files
wpsimon09wpsimon09
authored
Merge pull request #14 from wpsimon09/wpsimon09-new-tags
New tags and dark mode support
2 parents fdc2d0d + a2a32ba commit 1e81e0e

File tree

11 files changed

+405
-107
lines changed

11 files changed

+405
-107
lines changed

‎src/lib/CheckDarkMode.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
function IsDarkMode(window: Window):boolean{
2+
console.log("Init")
3+
return window.matchMedia("(prefers-color-scheme: dark)").matches;
4+
}

‎src/lib/EntryData.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ export enum ETag{
1111
SlangPy = "SlangPy",
1212
Cuda = "Cuda",
1313
Optix = "OptiX",
14-
WgSL = "WgSL"
14+
WgSL = "WgSL",
15+
WebGPU = "WebGPU",
16+
PlayGround = "Play Ground"
1517
}
1618

1719

‎src/lib/components/Entry.svelte‎

Lines changed: 81 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,96 @@
11
<script lang="ts">
2-
import type { createEmptySlangProject, ISlangProject } from "$lib/EntryData";
3-
import { scale } from 'svelte/transition';
4-
import { expoInOut } from 'svelte/easing';
5-
const {num, SlangProject} = $props();
2+
import type {
3+
createEmptySlangProject,
4+
ISlangProject,
5+
} from "$lib/EntryData";
6+
import { scale } from "svelte/transition";
7+
import { expoInOut } from "svelte/easing";
8+
import { onMount } from "svelte";
69
10+
const { num, SlangProject } = $props();
711
12+
//========================
13+
// TODO: refactor this to be reusable, it is also in the header component
14+
let darkMode = $state();
15+
onMount(() => {
16+
darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
17+
window
18+
.matchMedia("(prefers-color-scheme: dark)")
19+
.addListener(function (e) {
20+
console.log(`changed to ${e.matches ? "dark" : "light"} mode`);
21+
if (e.matches) {
22+
darkMode = true;
23+
} else {
24+
darkMode = false;
25+
}
26+
});
27+
});
828
</script>
929

10-
<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 ">
11-
<div class="px-2 w-full flex flex-row items-center justify-between">
12-
<div class="flex flex-col wrap flex-1 min-w-0">
13-
<div class="w-full">
14-
<div class="overflow-x-auto whitespace-nowrap w-full no-scrollbar">
15-
<h1 class="font-chivo font-semibold text-2xl inline-block">{SlangProject.name}</h1>
30+
<div
31+
transition:scale={{ duration: 220, delay: 20, easing: expoInOut }}
32+
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"
33+
>
34+
<div class="px-2 w-full flex flex-row items-center justify-between">
35+
<div class="flex flex-col wrap flex-1 min-w-0">
36+
<div class="w-full">
37+
<div
38+
class="overflow-x-auto whitespace-nowrap w-full no-scrollbar"
39+
>
40+
<h1
41+
class="font-chivo dark:text-white font-semibold text-2xl inline-block"
42+
>
43+
{SlangProject.name}
44+
</h1>
45+
</div>
1646
</div>
47+
<p class="text-s text-zinc-400 dark:text-zinc-200">
48+
by: {SlangProject.authorName}
49+
</p>
50+
</div>
51+
<div class="h-7 w-7 lg:h-8 lg:w-8 flex-shrink-0 justify-end m-2">
52+
<a
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
class="h-full w-full"
56+
href={SlangProject.ghLink}
57+
>
58+
<img
59+
alt="github"
60+
class="hover:scale-110 duration-100 h-full w-full"
61+
src={darkMode
62+
? "svg/github-light.svg"
63+
: "svg/github-cyan.svg"}
64+
/>
65+
</a>
1766
</div>
18-
<p class="text-s text-zinc-400">by: {SlangProject.authorName}</p>
19-
</div>
20-
<div class="h-7 w-7 lg:h-8 lg:w-8 flex-shrink-0 justify-end m-2">
21-
<a target="_blank" rel="noopener noreferrer" class="h-full w-full" href={SlangProject.ghLink}>
22-
<img alt="github" class="hover:scale-110 duration-100 h-full w-full" src="svg/github-cyan.svg">
23-
</a>
2467
</div>
25-
</div>
26-
<div class="w-1/3 ml-2 mt-2 h-1 {num %2 == 0 ? " bg-amber-500" : "bg-teal-700" } "></div>
27-
<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">
28-
<p class=" font-bold">Description:</p>
29-
<div class="text-lg ">
68+
<div
69+
class="w-1/3 ml-2 mt-2 h-1 {num % 2 == 0
70+
? ' bg-amber-500'
71+
: 'bg-teal-700'} "
72+
></div>
73+
<div
74+
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"
75+
>
76+
<p class=" font-bold dark:text-white">Description:</p>
77+
<div class="dark:text-white text-lg">
3078
{SlangProject.description}
3179
</div>
3280
</div>
3381

34-
<p class=" ml-2 font-bold mt-2">Tags:</p>
82+
<p class=" ml-2 font-bold dark:text-white mt-2">Tags:</p>
3583

36-
<div class = "w-full mt-1 h-30 gap-3 grid grid-cols-3 overflow-auto grid-rows-3">
37-
{#each SlangProject.tags as tag, i }
38-
<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>
39-
{/each}
84+
<div
85+
class="w-full mt-1 h-30 gap-3 grid grid-cols-3 overflow-auto grid-rows-3"
86+
>
87+
{#each SlangProject.tags as tag, i}
88+
<button
89+
class=" justify-around {num % 2 == 0
90+
? 'bg-amber-600 text-white'
91+
: ' bg-teal-700 text-white'} p-1 shadow-md rounded-2xl h-8"
92+
>{tag}</button
93+
>
94+
{/each}
4095
</div>
41-
4296
</div>

‎src/lib/components/Footer.svelte‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
<script>
2-
32
</script>
43

5-
<footer class=" w-full justify-center gap-1 py-2 flex flex-row items-center bg-zinc-800">
6-
<div class="flex flex-col items-center ">
7-
<p class=" text-white opacity-50">Made by <a href="https://github.com/wpsimon09" class="underline">wpsimon09</a></p>
8-
<a href="https://github.com/wpsimon09/Slang-In-Wild" class="text-white opacity-50 underline">Source</a>
9-
<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>
4+
<footer
5+
class=" w-full justify-center gap-1 py-2 flex flex-row items-center dark:bg-zinc-950 bg-zinc-800"
6+
>
7+
<div class="flex flex-col items-center">
8+
<p class=" text-white opacity-50">
9+
Made by <a href="https://github.com/wpsimon09" class="underline"
10+
>wpsimon09</a
11+
>
12+
</p>
13+
<a
14+
href="https://github.com/wpsimon09/Slang-In-Wild"
15+
class="text-white opacity-50 underline">Source</a
16+
>
17+
<p class=" text-white text-center text-xs px-20 lg:px-0 opacity-50">
18+
Slang™ and the Slang logo are trademarks of the Khronos Group Inc.
19+
</p>
1020
</div>
11-
12-
</footer>
21+
</footer>

‎src/lib/components/Header.svelte‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,59 @@
1-
<script>
1+
<script lang="ts">
22
import { expoInOut } from "svelte/easing";
33
import { scale } from "svelte/transition";
4+
import { onMount } from "svelte";
45
6+
let darkMode = $state();
57
8+
onMount(() => {
9+
darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
10+
window
11+
.matchMedia("(prefers-color-scheme: dark)")
12+
.addListener(function (e) {
13+
console.log(`changed to ${e.matches ? "dark" : "light"} mode`);
14+
if (e.matches) {
15+
darkMode = true;
16+
} else {
17+
darkMode = false;
18+
}
19+
});
20+
});
621
</script>
722

8-
<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 ">
9-
<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/">
10-
<img alt=" slang-logo " class="h-full w-full" src ="svg/slang-logo-dark.svg"/>
23+
<div
24+
transition:scale={{ duration: 120, delay: 0, easing: expoInOut }}
25+
class="flex flex-col items-center w-full md:w-1/2 lg:w-1/2"
26+
>
27+
<a
28+
target="_blank"
29+
rel="noopener noreferrer"
30+
class="w-full hidden md:block lg:block md:w-1/2 lg:w-1/2 h-full"
31+
href="https://shader-slang.org/"
32+
>
33+
<img
34+
alt=" slang-logo "
35+
class="h-full w-full"
36+
src={darkMode
37+
? "svg/slang-logo-light.svg"
38+
: "svg/slang-logo-dark.svg"}
39+
/>
1140
</a>
12-
<a target="_blank" rel="noopener noreferrer" class="w-20 h-20 md:hidden lg:hidden lg:w-1/2 " href="https://shader-slang.org/">
13-
<img alt=" slang-logo " class="h-full w-full" src ="svg/slang-small.svg"/>
41+
<a
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
class="w-20 h-20 md:hidden lg:hidden lg:w-1/2"
45+
href="https://shader-slang.org/"
46+
>
47+
<img
48+
alt=" slang-logo "
49+
class="h-full w-full"
50+
src={darkMode ? "svg/slang-small-light.svg" : "svg/slang-small.svg"}
51+
/>
1452
</a>
1553

16-
<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>
17-
</div>
54+
<h1
55+
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"
56+
>
57+
Open source projects that are using Slang shading language
58+
</h1>
59+
</div>

0 commit comments

Comments
 (0)