data endpoint for entity 90008 (aka. a website)
feat: show latest log in hoe
+133
-102
+44
src/components/note.svelte
+44
src/components/note.svelte
···
1
+
<script lang="ts">
2
+
import type { Note } from "$lib/notes";
3
+
import Token from "./token.svelte";
4
+
5
+
export let id: string;
6
+
export let note: Note;
7
+
export let isHighlighted = false;
8
+
export let onlyContent = false;
9
+
10
+
const renderDate = (timestamp: number) => {
11
+
return (new Date(timestamp)).toLocaleString("en-GB", {
12
+
year: "2-digit",
13
+
month: "2-digit",
14
+
day: "2-digit",
15
+
hour: "2-digit",
16
+
minute: "2-digit",
17
+
})
18
+
}
19
+
20
+
const getOutgoingLink = (name: string, link: string) => {
21
+
if (name === "bsky") {
22
+
if (link.startsWith("https://bsky.gaze.systems")) {
23
+
return link
24
+
}
25
+
return `https://bsky.gaze.systems/post/${link.split('/').pop()}`
26
+
}
27
+
return link
28
+
}
29
+
// this is ASS this should be a tailwind class
30
+
const getTextShadowStyle = (color: string) => {
31
+
return `text-shadow: 0 0 1px theme(colors.ralsei.black), 0 0 5px ${color};`
32
+
}
33
+
const outgoingLinkColors: Record<string, string> = {
34
+
bsky: "rgb(0, 133, 255)",
35
+
}
36
+
</script>
37
+
38
+
<div class="text-wrap break-words max-w-[70ch] leading-none">
39
+
{#if !onlyContent}<Token v={renderDate(note.published)} small={!isHighlighted}/> <Token v={id} keywd small={!isHighlighted}/><Token v="#" punct/> {/if}<Token v={note.content} str/>
40
+
{#each note.outgoingLinks ?? [] as {name, link}}
41
+
{@const color = outgoingLinkColors[name]}
42
+
<span class="text-sm"><Token v="(" punct/><a style="color: {color};{getTextShadowStyle(color)}" href={getOutgoingLink(name, link)}>{name}</a><Token v=")" punct/></span>
43
+
{/each}
44
+
</div>
+1
-1
src/lib/notes.ts
+1
-1
src/lib/notes.ts
+4
-1
src/routes/+page.server.ts
+4
-1
src/routes/+page.server.ts
···
1
1
import { lastFmGetNowPlaying } from "$lib/lastfm"
2
+
import { readNote, readNotesList } from "$lib/notes.js"
2
3
import { steamGetNowPlaying } from "$lib/steam"
3
4
4
5
export const load = async ({}) => {
···
9
10
const no = getBannerNo(banners)
10
11
banners.push(no)
11
12
}
12
-
return {banners, lastTrack, lastGame}
13
+
const lastNoteId = readNotesList()[0]
14
+
const lastNote = readNote(lastNoteId)
15
+
return {banners, lastTrack, lastGame, lastNote, lastNoteId}
13
16
}
14
17
15
18
const getBannerNo = (others: number[]) => {
+80
-64
src/routes/+page.svelte
+80
-64
src/routes/+page.svelte
···
1
-
<script>
1
+
<script lang="ts">
2
2
import { PUBLIC_BASE_URL } from '$env/static/public';
3
+
import Note from '../components/note.svelte';
3
4
import Tooltip from '../components/tooltip.svelte';
4
5
import Window from '../components/window.svelte';
5
6
import LatestStuff from './lateststuff.md';
6
7
7
8
export let data;
9
+
10
+
const renderDate = (timestamp: number) => {
11
+
return (new Date(timestamp)).toLocaleString("en-GB", {
12
+
year: "2-digit",
13
+
month: "2-digit",
14
+
day: "2-digit",
15
+
hour: "2-digit",
16
+
minute: "2-digit",
17
+
})
18
+
}
8
19
</script>
9
20
10
21
<div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
···
131
142
<li>
132
143
<a href="https://pmart.gaze.systems">random project moon art</a>
133
144
</li>
134
-
<li>
135
-
<a href="https://git.gaze.systems">gitea</a>
136
-
<span class="text-sm">(if i like you ask me for an acc ;3)</span>
137
-
</li>
138
145
</ul>
139
146
</div>
140
147
</Window>
141
-
<Window title="now happening" style="mt-auto" removePadding>
142
-
{#if data.lastTrack}
143
-
<div class="flex flex-row m-2 border-4 border-double">
144
-
<!-- svelte-ignore a11y-missing-attribute -->
145
-
{#if data.lastTrack.image}
146
-
<img
147
-
class="border-4 w-16 h-16"
148
-
style="border-style: none double none none;"
149
-
width="64"
150
-
height="64"
151
-
src={data.lastTrack.image}
152
-
/>
153
-
{:else}
154
-
<img
155
-
class="border-4 w-16 h-16 p-2"
156
-
style="border-style: none double none none; image-rendering: pixelated;"
157
-
src="/icons/cd_audio.png"
158
-
/>
159
-
{/if}
160
-
<div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">
161
-
<p
162
-
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
163
-
>
164
-
<span class="text-sm text-shadow-white text-ralsei-white">listening to</span>
165
-
<a
166
-
title={data.lastTrack.name}
167
-
href="https://www.last.fm/user/yusdacra"
168
-
class="hover:underline">{data.lastTrack.name}</a
169
-
>
170
-
</p>
171
-
<p
172
-
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
173
-
>
174
-
<span class="text-shadow-white text-ralsei-white">by</span>
175
-
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
176
-
</p>
177
-
</div>
148
+
<Window title="status" style="mt-auto" removePadding>
149
+
<div class="m-1.5 flex flex-col font-monospace">
150
+
<div
151
+
class="prose prose-ralsei items-center p-1 border-4 text-sm font-bold bg-ralsei-black"
152
+
style="border-style: double double none double;"
153
+
>
154
+
<a href="/entries">last log</a>
155
+
<span class="border-4 pl-[1ch]" style="border-style: none none none double;">published on {renderDate(data.lastNote.published)}</span>
156
+
</div>
157
+
<div class="mt-0 p-1 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
158
+
<Note id={data.lastNoteId} note={data.lastNote} onlyContent/>
178
159
</div>
179
-
{/if}
180
-
{#if data.lastGame}
181
-
<div class="flex flex-row m-2 border-4 border-double">
182
-
<!-- svelte-ignore a11y-missing-attribute -->
160
+
</div>
161
+
{#if data.lastTrack}
162
+
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
163
+
<!-- svelte-ignore a11y-missing-attribute -->
164
+
{#if data.lastTrack.image}
183
165
<img
184
166
class="border-4 w-16 h-16"
185
167
style="border-style: none double none none;"
186
168
width="64"
187
169
height="64"
188
-
src={data.lastGame.icon}
170
+
src={data.lastTrack.image}
171
+
/>
172
+
{:else}
173
+
<img
174
+
class="border-4 w-16 h-16 p-2"
175
+
style="border-style: none double none none; image-rendering: pixelated;"
176
+
src="/icons/cd_audio.png"
189
177
/>
190
-
<div class="flex flex-col max-w-[40ch] p-2 gap-1 overflow-hidden">
191
-
<p
192
-
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
193
-
>
194
-
<span class="text-sm text-shadow-white text-ralsei-white">playing</span>
195
-
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
196
-
>{data.lastGame.name}</a
197
-
>
198
-
</p>
199
-
<!-- svelte-ignore a11y-missing-attribute -->
178
+
{/if}
179
+
<div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">
180
+
<p
181
+
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
182
+
>
183
+
<span class="text-sm text-shadow-white text-ralsei-white">listening to</span>
200
184
<a
201
-
href="https://steamcommunity.com/id/yusdacra"
202
-
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
203
-
><img class="inline w-4" src={data.lastGame.pfp} />
204
-
<span class="align-middle">steam profile</span></a
185
+
title={data.lastTrack.name}
186
+
href="https://www.last.fm/user/yusdacra"
187
+
class="hover:underline">{data.lastTrack.name}</a
205
188
>
206
-
</div>
189
+
</p>
190
+
<p
191
+
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
192
+
>
193
+
<span class="text-shadow-white text-ralsei-white">by</span>
194
+
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
195
+
</p>
207
196
</div>
197
+
</div>
208
198
{/if}
209
-
{#if !data.lastGame && !data.lastTrack}
210
-
<p class="text-xl m-2">nothing, apparently.</p>
199
+
{#if data.lastGame}
200
+
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
201
+
<!-- svelte-ignore a11y-missing-attribute -->
202
+
<img
203
+
class="border-4 w-16 h-16"
204
+
style="border-style: none double none none;"
205
+
width="64"
206
+
height="64"
207
+
src={data.lastGame.icon}
208
+
/>
209
+
<div class="flex flex-col max-w-[40ch] p-2 gap-1 overflow-hidden">
210
+
<p
211
+
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
212
+
>
213
+
<span class="text-sm text-shadow-white text-ralsei-white">playing</span>
214
+
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
215
+
>{data.lastGame.name}</a
216
+
>
217
+
</p>
218
+
<!-- svelte-ignore a11y-missing-attribute -->
219
+
<a
220
+
href="https://steamcommunity.com/id/yusdacra"
221
+
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
222
+
><img class="inline w-4" src={data.lastGame.pfp} />
223
+
<span class="align-middle">steam profile</span></a
224
+
>
225
+
</div>
226
+
</div>
211
227
{/if}
212
228
</Window>
213
229
</div>
+4
-36
src/routes/log/+page.svelte
+4
-36
src/routes/log/+page.svelte
···
1
1
<script lang="ts">
2
2
import Window from '../../components/window.svelte';
3
3
import Token from '../../components/token.svelte';
4
+
import Note from '../../components/note.svelte';
4
5
5
6
export let data;
6
7
7
-
const renderDate = (timestamp: number) => {
8
-
return (new Date(timestamp)).toLocaleString("en-GB", {
9
-
year: "2-digit",
10
-
month: "2-digit",
11
-
day: "2-digit",
12
-
hour: "2-digit",
13
-
minute: "2-digit",
14
-
})
15
-
}
16
-
17
8
const highlightedNote = data.notes.get(data.highlightedNote ?? '') ?? null
18
-
19
-
const getOutgoingLink = (name: string, link: string) => {
20
-
if (name === "bsky") {
21
-
if (link.startsWith("https://bsky.gaze.systems")) {
22
-
return link
23
-
}
24
-
return `https://bsky.gaze.systems/post/${link.split('/').pop()}`
25
-
}
26
-
return link
27
-
}
28
-
// this is ASS this should be a tailwind class
29
-
const getTextShadowStyle = (color: string) => {
30
-
return `text-shadow: 0 0 1px theme(colors.ralsei.black), 0 0 5px ${color};`
31
-
}
32
-
const outgoingLinkColors: Record<string, string> = {
33
-
bsky: "rgb(0, 133, 255)",
34
-
}
35
9
</script>
36
10
37
11
<svelte:head>
···
55
29
<Token v="[" punct/>gazesystems <Token v="/" keywd/><Token v="]$" punct/> <Token v="ls" funct/> <Token v="log" /> <Token v="|" punct/> <Token v="each" funct/> <Token v="{" punct/><Token v="|" punct/><Token v="file"/><Token v="|" punct/> <Token v="render" funct/> <Token v="(" punct/><Token v="open" funct/> <Token v="$file.name" /><Token v=")" punct/><Token v="}" punct/>
56
30
<br>
57
31
<br>
58
-
{#each data.notes as [noteId, note], index}
59
-
{@const isHighlighted = noteId === data.highlightedNote}
60
-
<div class="text-wrap break-words max-w-[70ch] leading-none">
61
-
<Token v={renderDate(note.published)} small={!isHighlighted}/> <Token v={noteId} keywd small={!isHighlighted}/><Token v="#" punct/> <Token v={note.content} str/>
62
-
{#each note.outgoingLinks ?? [] as {name, link}}
63
-
{@const color = outgoingLinkColors[name]}
64
-
<span class="text-sm"><Token v="(" punct/><a style="color: {color};{getTextShadowStyle(color)}" href={getOutgoingLink(name, link)}>{name}</a><Token v=")" punct/></span>
65
-
{/each}
66
-
</div>
32
+
{#each data.notes as [id, note], index}
33
+
{@const isHighlighted = id === data.highlightedNote}
34
+
<Note {id} {note} {isHighlighted}/>
67
35
{#if index < data.notes.size - 1}
68
36
<div class="mt-3"/>
69
37
{/if}