vielle.dev
[Archived] Archived WIP of vielle.dev
Remove "progressive enhancement" for time of day this is again done by the server
astro.request and http date header ftw
-4
src/Base.astro
-4
src/Base.astro
+8
-32
src/components/blog/Background.astro
+8
-32
src/components/blog/Background.astro
···
3
3
import Stars from "./background/Stars.astro";
4
4
import Moon from "./background/Moon.astro";
5
5
import Sun from "./background/Sun.astro";
6
+
7
+
const date = new Date(Astro.request.headers.get("Date") ?? Date.now());
8
+
const accurateHours =
9
+
date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 ** 2;
10
+
const daytime = accurateHours > 6 && accurateHours < 18;
6
11
---
7
12
8
13
<style is:inline>
···
16
21
}
17
22
}
18
23
19
-
#background *[data-parallax] {
24
+
#background *[data-parallax] {
20
25
@media (prefers-reduced-motion: no-preference) {
21
26
animation: scroll, 1ms, alternate;
22
27
animation-timeline: scroll();
···
24
29
}
25
30
26
31
/* time styling */
27
-
#background:not([data-time]) > :is(#stars, #sun, #moon) {
28
-
display: none;
29
-
}
30
-
31
32
#background[data-time="day"] {
32
33
background-color: dodgerblue;
33
34
···
57
58
}
58
59
</style>
59
60
60
-
<script>
61
-
// progressive enhancement
62
-
const refresh = () => {
63
-
const time = new Date(0, 0, 0, 2);
64
-
const accurateTime =
65
-
time.getHours() + time.getMinutes() / 60 + time.getSeconds() / 60 ** 2;
66
-
67
-
const daytime = accurateTime > 6 && accurateTime < 18;
68
-
const bg = document.getElementById("background");
69
-
if (bg === null) throw new Error("no #background");
70
-
bg.dataset.time = daytime ? "day" : "night";
71
-
72
-
if (daytime) {
73
-
const percent = (accurateTime - 6) / 12;
74
-
const sun = document.getElementById("sun");
75
-
if (sun === null) throw new Error("no #sun");
76
-
sun.style.setProperty("--sun-progress-percent", percent + "");
77
-
}
78
-
79
-
setTimeout(refresh, 5 * 60 * 1000);
80
-
};
81
-
82
-
refresh();
83
-
</script>
84
-
85
61
<style>
86
62
#background {
87
63
background: dodgerblue;
···
95
71
}
96
72
</style>
97
73
98
-
<div id="background">
74
+
<div id="background" data-time={daytime ? "day" : "night"}>
99
75
<Clouds />
100
76
<Stars />
101
-
<Sun />
77
+
<Sun percent={(accurateHours - 6) / 12} />
102
78
<Moon />
103
79
</div>
+9
-4
src/components/blog/background/Sun.astro
+9
-4
src/components/blog/background/Sun.astro
···
1
1
---
2
2
import { blog } from "@/config";
3
+
4
+
interface Props {
5
+
percent: number;
6
+
}
7
+
8
+
const { percent } = Astro.props;
3
9
---
4
10
5
11
<style>
···
7
13
position: absolute;
8
14
border-radius: 100%;
9
15
top: 15rem;
10
-
left: 5rem;
16
+
left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
11
17
z-index: -1;
12
18
13
-
transition: left 0.2s ease-in-out;
14
-
left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
15
19
}
16
20
</style>
17
21
···
19
23
id="sun"
20
24
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/BBSO_full-disk_H-alpha_2002-07-26_153931_color.png/250px-BBSO_full-disk_H-alpha_2002-07-26_153931_color.png"
21
25
alt=""
22
-
style={`--parallax-speed: ${blog.background.parallax.sun}`}
26
+
style={`--parallax-speed: ${blog.background.parallax.sun};
27
+
--sun-progress-percent: ${percent}`}
23
28
data-parallax
24
29
/>