version 2 of my website
update some styles, fix busted theme toggle
+86
-90
+23
-27
src/components/commonHead.astro
+23
-27
src/components/commonHead.astro
···
5
5
---
6
6
7
7
<head>
8
-
<meta charset="utf-8" />
9
-
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
10
-
<meta name="viewport" content="width=device-width" />
11
-
<meta name="generator" content={Astro.generator} />
12
-
<title>{title}</title>
13
-
<ClientRouter />
14
-
<script>
15
-
// Function to update theme
16
-
function updateTheme() {
17
-
if (
18
-
localStorage.theme === "dark" ||
19
-
(!("theme" in localStorage) &&
20
-
window.matchMedia("(prefers-color-scheme: dark)").matches)
21
-
) {
22
-
document.documentElement.classList.add("dark");
23
-
} else {
24
-
document.documentElement.classList.remove("dark");
25
-
}
26
-
}
27
-
28
-
// Run on page load
29
-
updateTheme();
30
-
31
-
// Listen for system theme changes
32
-
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateTheme);
33
-
</script>
34
-
</head>
8
+
<meta charset="utf-8" />
9
+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
10
+
<meta name="viewport" content="width=device-width" />
11
+
<meta name="generator" content={Astro.generator} />
12
+
<title>{title}</title>
13
+
<ClientRouter />
14
+
<script is:inline>
15
+
const theme = localStorage.theme ?? "dark";
16
+
if (theme === "dark") {
17
+
document.documentElement.classList.add("dark");
18
+
}
19
+
</script>
20
+
<script is:inline>
21
+
document.addEventListener("astro:after-swap", () => {
22
+
const theme = localStorage.theme ?? "dark";
23
+
if (theme === "dark") {
24
+
document.documentElement.classList.add("dark");
25
+
} else {
26
+
document.documentElement.classList.remove("dark");
27
+
}
28
+
});
29
+
</script>
30
+
</head>
+26
-16
src/components/header.astro
+26
-16
src/components/header.astro
···
3
3
---
4
4
5
5
<header class="m-3 flex justify-end items-center">
6
-
<!-- <h1>dustycode</h1> -->
7
-
<button type="button" id="theme-selector" class="p-2 rounded-lg hover:scale-105 transition-all ease-in-out duration-300 hover:cursor-pointer">
8
-
<span class="sr-only">
9
-
Enable <span class="dark:hidden">light</span><span class="hidden dark:inline">dark</span> mode
10
-
</span>
11
-
<Moon class="hidden dark:block w-6 h-6" />
12
-
<Sun class="block dark:hidden w-6 h-6" />
13
-
</button>
6
+
<!-- <h1>dustycode</h1> -->
7
+
<button
8
+
type="button"
9
+
id="theme-selector"
10
+
class="p-2 rounded-lg hover:scale-105 transition-all ease-in-out duration-300 hover:cursor-pointer"
11
+
>
12
+
<span class="sr-only">
13
+
Enable <span class="dark:hidden">light</span><span
14
+
class="hidden dark:inline">dark</span
15
+
> mode
16
+
</span>
17
+
<Moon class="hidden dark:block w-6 h-6" />
18
+
<Sun class="block dark:hidden w-6 h-6" />
19
+
</button>
14
20
</header>
15
21
16
22
<script>
23
+
function initTheme() {
17
24
const themeSelector = document.getElementById("theme-selector");
18
-
25
+
19
26
themeSelector?.addEventListener("click", () => {
20
-
if (document.documentElement.classList.contains("dark")) {
21
-
localStorage.theme = "light";
22
-
document.documentElement.classList.remove("dark");
23
-
} else {
24
-
localStorage.theme = "dark";
25
-
document.documentElement.classList.add("dark");
26
-
}
27
+
if (document.documentElement.classList.contains("dark")) {
28
+
localStorage.theme = "light";
29
+
document.documentElement.classList.remove("dark");
30
+
} else {
31
+
localStorage.theme = "dark";
32
+
document.documentElement.classList.add("dark");
33
+
}
27
34
});
35
+
}
36
+
37
+
document.addEventListener("astro:page-load", initTheme);
28
38
</script>
src/components/hooks/yooper.ts
src/components/hooks/yooper.ts
This is a binary file and will not be displayed.
+2
-18
src/components/lastfm.tsx
+2
-18
src/components/lastfm.tsx
···
1
+
import { useLastFm } from '@/hooks/use-lastfm.ts';
1
2
import clsx from 'clsx';
2
-
import { useEffect, useState } from "react";
3
-
import type { TrackResponse } from '../types/lastfm.ts';
4
3
5
4
export default function LastFM() {
6
-
const [track, setTrack] = useState<TrackResponse>();
7
-
const [loading, setLoading] = useState(true);
8
-
const [error, setError] = useState(null);
9
-
10
-
useEffect(() => {
11
-
fetch('/api/lastfm/recentTracks')
12
-
.then(res => res.json())
13
-
.then(data => {
14
-
setTrack(data);
15
-
setLoading(false);
16
-
})
17
-
.catch(err => {
18
-
setError(err.message);
19
-
setLoading(false);
20
-
})
21
-
}, [])
5
+
const { track, loading, error } = useLastFm();
22
6
23
7
if (loading) return (
24
8
<div className="surface">
+2
-2
src/components/whoami.astro
+2
-2
src/components/whoami.astro
···
5
5
6
6
<div class="border border-solid rounded-lg p-6 surface">
7
7
<div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
8
-
<div class="flex-1 space-y-2">
8
+
<div class="flex-1 space-y-2 text-lg">
9
9
<h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
10
-
<p class="text-lg">
10
+
<p>
11
11
I'm a senior full stack software engineer from Michigan, currently
12
12
working on some cool stuff at Zenimax Online Studios!
13
13
</p>
-25
src/components/yooperButton.tsx
-25
src/components/yooperButton.tsx
···
1
-
import { useState } from "react"
2
-
3
-
export function YooperButton() {
4
-
5
-
const [isPlaying, setIsPlaying] = useState(false);
6
-
7
-
8
-
return (
9
-
<div className="inline">
10
-
<button
11
-
className="text-blue hover:cursor-pointer"
12
-
onClick={() => {
13
-
setIsPlaying(true);
14
-
}}
15
-
>Upper Peninsula</button
16
-
>
17
-
<audio id="audioPlayer" preload="auto">
18
-
<source
19
-
src="https://ia801608.us.archive.org/31/items/gl_20230503/02%20The%20Wreck%20of%20the%20Edmund%20Fitzgerald.mp3"
20
-
type="audio/mp3"
21
-
/>
22
-
</audio>
23
-
</div>
24
-
)
25
-
}
+26
src/hooks/use-lastfm.ts
+26
src/hooks/use-lastfm.ts
···
1
+
import type { TrackResponse } from "@/types/lastfm";
2
+
import { useEffect, useState } from "react";
3
+
4
+
export function useLastFm() {
5
+
const [track, setTrack] = useState<TrackResponse>();
6
+
const [loading, setLoading] = useState(true);
7
+
const [error, setError] = useState(null);
8
+
9
+
useEffect(() => {
10
+
fetch('/api/lastfm/recentTracks')
11
+
.then(res => res.json())
12
+
.then(data => {
13
+
setTrack(data);
14
+
setLoading(false);
15
+
})
16
+
.catch(err => {
17
+
setError(err.message);
18
+
setLoading(false);
19
+
})
20
+
}, [])
21
+
22
+
23
+
return {
24
+
track, loading, error
25
+
}
26
+
}