data endpoint for entity 90008 (aka. a website)
feat: redo the home page layout
+158
-158
+158
-158
src/routes/+page.svelte
+158
-158
src/routes/+page.svelte
···
14
14
let { data }: Props = $props();
15
15
</script>
16
16
17
-
<div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
18
-
<div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto">
17
+
<div class="flex flex-col md:flex-row gap-4 md:gap-8 md:h-full h-card">
18
+
<div class="flex flex-col gap-4 md:gap-8 ml-auto">
19
+
<Window title="latest stuff">
20
+
<div class="prose prose-ralsei prose-img:m-0 leading-6">
21
+
<LatestStuff />
22
+
</div>
23
+
</Window>
24
+
<Window style="md:ml-4" title="status" removePadding>
25
+
{#if data.lastNote}
26
+
<div class="m-1.5 flex flex-col font-monospace text-sm">
27
+
<p
28
+
class="prose prose-ralsei p-1 border-4 text-sm bg-ralsei-black"
29
+
style="border-style: double double none double;"
30
+
title={renderDate(data.lastNote.published)}
31
+
>
32
+
<a href="/entries">last log was…</a>
33
+
published {renderRelativeDate(data.lastNote.published)}!
34
+
</p>
35
+
<div class="mt-0 p-1.5 border-4 border-double bg-ralsei-black min-w-full max-w-[60ch]">
36
+
<Note note={data.lastNote} onlyContent />
37
+
</div>
38
+
</div>
39
+
{/if}
40
+
{#if data.lastTrack}
41
+
<div class="flex flex-row gap-0.5 m-1.5 border-4 border-double bg-ralsei-black">
42
+
<!-- svelte-ignore a11y_missing_attribute -->
43
+
{#if data.lastTrack.image}
44
+
<img
45
+
class="border-4 w-[4.5rem] h-[4.5rem]"
46
+
style="border-style: none double none none;"
47
+
src={data.lastTrack.image}
48
+
/>
49
+
{:else}
50
+
<img
51
+
class="border-4 w-[4.5rem] h-[4.5rem] p-2"
52
+
style="border-style: none double none none; image-rendering: pixelated;"
53
+
src="/icons/cd_audio.webp"
54
+
/>
55
+
{/if}
56
+
<div class="flex flex-col max-w-[60ch] p-2">
57
+
<p
58
+
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
59
+
>
60
+
<span class="text-sm text-shadow-white text-ralsei-white"
61
+
>{data.lastTrack.playing ? 'listening to' : 'listened to'}</span
62
+
>
63
+
<a
64
+
title={data.lastTrack.name}
65
+
href="https://www.last.fm/user/yusdacra"
66
+
class="hover:underline motion-safe:hover:animate-squiggle">{data.lastTrack.name}</a
67
+
>
68
+
</p>
69
+
<p
70
+
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
71
+
>
72
+
<span class="text-shadow-white text-ralsei-white">by</span>
73
+
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
74
+
</p>
75
+
<p
76
+
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
77
+
>
78
+
…{renderRelativeDate(data.lastTrack.when)}
79
+
</p>
80
+
</div>
81
+
</div>
82
+
{/if}
83
+
{#if data.lastGame}
84
+
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
85
+
<!-- svelte-ignore a11y_missing_attribute -->
86
+
<img
87
+
class="border-4 w-[4.5rem] h-[4.5rem]"
88
+
style="border-style: none double none none;"
89
+
width="64"
90
+
height="64"
91
+
src={data.lastGame.icon}
92
+
/>
93
+
<div class="flex flex-col max-w-[60ch] p-2 gap-0.5 overflow-hidden">
94
+
<p
95
+
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
96
+
>
97
+
<span class="text-sm text-shadow-white text-ralsei-white"
98
+
>{data.lastGame.playing ? 'playing' : 'played'}</span
99
+
>
100
+
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
101
+
>{data.lastGame.name}</a
102
+
>
103
+
</p>
104
+
<p
105
+
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[50ch]"
106
+
>
107
+
…{renderRelativeDate(data.lastGame.when)}
108
+
</p>
109
+
<!-- svelte-ignore a11y_missing_attribute -->
110
+
<a
111
+
href="https://steamcommunity.com/id/yusdacra"
112
+
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
113
+
><img class="inline w-4" src={data.lastGame.pfp} />
114
+
<span class="align-middle">steam profile</span></a
115
+
>
116
+
</div>
117
+
</div>
118
+
{/if}
119
+
</Window>
120
+
</div>
121
+
<div class="flex flex-col gap-4 md:gap-8 mr-auto w-full md:w-fit place-items-end">
122
+
<Window style="md:mr-12" title="links!" iconUri="/icons/contact.webp">
123
+
<div
124
+
class="[width:40ch] prose prose-ralsei prose-ul:px-[0.9rem] prose-ul:leading-[1.1rem] prose-headings:leading-none"
125
+
>
126
+
<ul>
127
+
<li>discord: yusdacra</li>
128
+
<li>
129
+
e-mail:
130
+
<a class="u-email" href="mailto:y.bera003.06@pm.me" rel="me">y.bera003.06@pm.me</a>
131
+
</li>
132
+
<li>
133
+
bluesky:
134
+
<a class="u-url" href="https://bsky.app/profile/gaze.systems" rel="me">@gaze.systems</a>
135
+
</li>
136
+
</ul>
137
+
<h4>development</h4>
138
+
<ul>
139
+
<li>
140
+
github:
141
+
<a class="u-url" href="https://github.com/yusdacra" rel="me">@yusdacra</a>
142
+
</li>
143
+
<li>
144
+
my gitea:
145
+
<a class="u-url" href="https://git.gaze.systems/dusk" rel="me">@dusk</a>
146
+
(<a href="https://git.gaze.systems/gazesys/website">website repo</a>)
147
+
</li>
148
+
<li>
149
+
gitlab:
150
+
<a class="u-url" href="https://gitlab.com/yusdacra" rel="me">@yusdacra</a>
151
+
</li>
152
+
<li>
153
+
itch.io:
154
+
<a class="u-url" href="https://yusdacra.itch.io" rel="me">@yusdacra</a>
155
+
</li>
156
+
</ul>
157
+
<h4>services</h4>
158
+
<ul>
159
+
<li>
160
+
<a href="https://pmart.gaze.systems">random project moon art</a>
161
+
</li>
162
+
</ul>
163
+
<h4>88x31</h4>
164
+
<div class="flex flex-row flex-wrap gap-1 prose-img:m-0">
165
+
<img src="/88x31.gif" alt="88x31 banner" title="midnight AND sunrise! woaw" />
166
+
<img
167
+
src="/88x31_midnight.gif"
168
+
alt="88x31 banner (midnight only)"
169
+
title="it's midnight!"
170
+
/>
171
+
<img src="/88x31_sunrise.gif" alt="88x31 banner (sunrise only)" title="it's sunrise!" />
172
+
</div>
173
+
</div>
174
+
</Window>
19
175
<Window title="readme?" iconUri="/icons/question.webp" removePadding>
20
176
<div class="flex flex-col p-1.5 gap-1.5 prose prose-ralsei prose-img:m-0 leading-none">
21
177
<div class="flex flex-row gap-3 mx-auto bg-ralsei-black/20 overflow-hidden">
···
107
263
>
108
264
</div>
109
265
</div>
110
-
</Window>
111
-
<Window title="latest stuff" style="mt-auto">
112
-
<div class="prose prose-ralsei prose-img:m-0 leading-6">
113
-
<LatestStuff />
114
-
</div>
115
-
</Window>
116
-
</div>
117
-
<div class="flex flex-col gap-y-2 lg:gap-y-0 mx-auto w-full md:w-fit place-items-end">
118
-
<Window title="links!" iconUri="/icons/contact.webp">
119
-
<div
120
-
class="prose prose-ralsei prose-ul:px-[0.9rem] prose-ul:leading-[1.1rem] prose-headings:leading-none"
121
-
>
122
-
<ul>
123
-
<li>discord: yusdacra</li>
124
-
<li>
125
-
e-mail:
126
-
<a class="u-email" href="mailto:y.bera003.06@pm.me" rel="me">y.bera003.06@pm.me</a>
127
-
</li>
128
-
<li>
129
-
bluesky:
130
-
<a class="u-url" href="https://bsky.app/profile/gaze.systems" rel="me">@gaze.systems</a>
131
-
</li>
132
-
</ul>
133
-
<h4>development</h4>
134
-
<ul>
135
-
<li>
136
-
github:
137
-
<a class="u-url" href="https://github.com/yusdacra" rel="me">@yusdacra</a>
138
-
</li>
139
-
<li>
140
-
my gitea:
141
-
<a class="u-url" href="https://git.gaze.systems/dusk" rel="me">@dusk</a>
142
-
(<a href="https://git.gaze.systems/gazesys/website">website repo</a>)
143
-
</li>
144
-
<li>
145
-
gitlab:
146
-
<a class="u-url" href="https://gitlab.com/yusdacra" rel="me">@yusdacra</a>
147
-
</li>
148
-
<li>
149
-
itch.io:
150
-
<a class="u-url" href="https://yusdacra.itch.io" rel="me">@yusdacra</a>
151
-
</li>
152
-
</ul>
153
-
<h4>services</h4>
154
-
<ul>
155
-
<li>
156
-
<a href="https://pmart.gaze.systems">random project moon art</a>
157
-
</li>
158
-
</ul>
159
-
<h4>88x31</h4>
160
-
<div class="flex flex-row flex-wrap gap-1 prose-img:m-0">
161
-
<img src="/88x31.gif" alt="88x31 banner" title="midnight AND sunrise! woaw" />
162
-
<img
163
-
src="/88x31_midnight.gif"
164
-
alt="88x31 banner (midnight only)"
165
-
title="it's midnight!"
166
-
/>
167
-
<img src="/88x31_sunrise.gif" alt="88x31 banner (sunrise only)" title="it's sunrise!" />
168
-
</div>
169
-
</div>
170
-
</Window>
171
-
<Window title="status" style="mt-auto" removePadding>
172
-
{#if data.lastNote}
173
-
<div class="m-1.5 flex flex-col font-monospace text-sm">
174
-
<p
175
-
class="prose prose-ralsei p-1 border-4 text-sm bg-ralsei-black"
176
-
style="border-style: double double none double;"
177
-
title={renderDate(data.lastNote.published)}
178
-
>
179
-
<a href="/entries">last log was…</a>
180
-
published {renderRelativeDate(data.lastNote.published)}!
181
-
</p>
182
-
<div class="mt-0 p-1.5 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
183
-
<Note note={data.lastNote} onlyContent />
184
-
</div>
185
-
</div>
186
-
{/if}
187
-
{#if data.lastTrack}
188
-
<div class="flex flex-row gap-0.5 m-1.5 border-4 border-double bg-ralsei-black">
189
-
<!-- svelte-ignore a11y_missing_attribute -->
190
-
{#if data.lastTrack.image}
191
-
<img
192
-
class="border-4 w-[4.5rem] h-[4.5rem]"
193
-
style="border-style: none double none none;"
194
-
src={data.lastTrack.image}
195
-
/>
196
-
{:else}
197
-
<img
198
-
class="border-4 w-[4.5rem] h-[4.5rem] p-2"
199
-
style="border-style: none double none none; image-rendering: pixelated;"
200
-
src="/icons/cd_audio.webp"
201
-
/>
202
-
{/if}
203
-
<div class="flex flex-col max-w-[40ch] p-2">
204
-
<p
205
-
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
206
-
>
207
-
<span class="text-sm text-shadow-white text-ralsei-white"
208
-
>{data.lastTrack.playing ? 'listening to' : 'listened to'}</span
209
-
>
210
-
<a
211
-
title={data.lastTrack.name}
212
-
href="https://www.last.fm/user/yusdacra"
213
-
class="hover:underline motion-safe:hover:animate-squiggle">{data.lastTrack.name}</a
214
-
>
215
-
</p>
216
-
<p
217
-
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
218
-
>
219
-
<span class="text-shadow-white text-ralsei-white">by</span>
220
-
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
221
-
</p>
222
-
<p
223
-
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
224
-
>
225
-
…{renderRelativeDate(data.lastTrack.when)}
226
-
</p>
227
-
</div>
228
-
</div>
229
-
{/if}
230
-
{#if data.lastGame}
231
-
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
232
-
<!-- svelte-ignore a11y_missing_attribute -->
233
-
<img
234
-
class="border-4 w-[4.5rem] h-[4.5rem]"
235
-
style="border-style: none double none none;"
236
-
width="64"
237
-
height="64"
238
-
src={data.lastGame.icon}
239
-
/>
240
-
<div class="flex flex-col max-w-[40ch] p-2 gap-0.5 overflow-hidden">
241
-
<p
242
-
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
243
-
>
244
-
<span class="text-sm text-shadow-white text-ralsei-white"
245
-
>{data.lastGame.playing ? 'playing' : 'played'}</span
246
-
>
247
-
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
248
-
>{data.lastGame.name}</a
249
-
>
250
-
</p>
251
-
<p
252
-
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
253
-
>
254
-
…{renderRelativeDate(data.lastGame.when)}
255
-
</p>
256
-
<!-- svelte-ignore a11y_missing_attribute -->
257
-
<a
258
-
href="https://steamcommunity.com/id/yusdacra"
259
-
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
260
-
><img class="inline w-4" src={data.lastGame.pfp} />
261
-
<span class="align-middle">steam profile</span></a
262
-
>
263
-
</div>
264
-
</div>
265
-
{/if}
266
266
</Window>
267
267
</div>
268
268
</div>