vielle.dev
[Archived] Archived WIP of vielle.dev
Make the moon sync to (server) time for rendering This could be done client side but was cleaner and less resource intensive to do it server side
todo:
- make other background elements svgs
- sun (configurable/randomised prongs)
- stars (randomised prongs + varied parallax)
- clouds (randomised style thing)
- use Astro.request.headers to get user date and prerender page
original commit message: I DID IT OH MY GOD THE MOON WORKS IT WAS SO EASY WHAT THE HELL
+21
-9
src/components/blog/background/Moon.astro
+21
-9
src/components/blog/background/Moon.astro
···
2
2
import { blog } from "@/config";
3
3
import { Moon as LunarPhaseJS } from "lunarphase-js";
4
4
5
-
// sorry south hemisphere, theres fuck all i can do without getting ur location which is weird </3
5
+
// sorry south hemisphere, theres fuck all i can do without getting ur location which is creepy </3
6
+
const phase = LunarPhaseJS.lunarAgePercent();
6
7
---
7
8
8
9
<style>
···
21
22
id="moon"
22
23
width="100"
23
24
height="100"
24
-
style={`--parallax-speed: ${blog.background.parallax.moon};
25
-
--phase: ${LunarPhaseJS.lunarAgePercent()};`}
25
+
style={`--parallax-speed: ${blog.background.parallax.moon}`}
26
26
data-parallax
27
27
>
28
28
<defs>
29
29
<clipPath id="shadow">
30
-
<rect x="50" y="0" width="50" height="100"></rect>
30
+
<rect x={phase < 0.5 ? "0" : "100"} y="0" width="100" height="200"></rect>
31
31
</clipPath>
32
32
</defs>
33
33
34
-
<circle style="fill:#ffffff" cx="50" cy="50" r="50"></circle>
35
-
<circle style="fill:#000000" cx="50" cy="50" r="50" clip-path="url(#shadow)"
36
-
></circle>
37
-
<ellipse style="fill:#000000" cx="50" cy="50" rx="25" ry="50"></ellipse>
38
-
</svg>
34
+
<!-- base -->
35
+
<circle style="fill:#ffffff" cx="100" cy="100" r="100"></circle>
36
+
<!-- half shadow -->
37
+
<circle
38
+
style="fill:#000000"
39
+
cx="100"
40
+
cy="100"
41
+
r="100"
42
+
clip-path="url(#shadow)"></circle>
43
+
<!-- rotation shadow bulge thing -->
44
+
<ellipse
45
+
style={`fill: #${phase < 0.25 || phase > 0.75 ? "000000" : "ffffff"}`}
46
+
cx="100"
47
+
cy="100"
48
+
rx={50 * Math.cos(4 * Math.PI * phase) + 50}
49
+
ry="100"></ellipse>
50
+
</svg>