data endpoint for entity 90008 (aka. a website)
feat: use comic mono package, show relative time in status for log
+22
-45
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+3
-1
package.json
+3
-1
package.json
···
40
40
},
41
41
"type": "module",
42
42
"dependencies": {
43
+
"@fontsource/comic-mono": "^5.1.0",
43
44
"@neodrag/svelte": "^2.3.1",
44
45
"@skyware/bot": "^0.3.8",
45
46
"@std/toml": "npm:@jsr/std__toml",
···
49
50
"rehype-autolink-headings": "^7.1.0",
50
51
"rehype-slug": "^6.0.0",
51
52
"robots-parser": "^3.0.1",
52
-
"steamgriddb": "^2.2.0"
53
+
"steamgriddb": "^2.2.0",
54
+
"svelte-time": "^2.0.0"
53
55
},
54
56
"trustedDependencies": [
55
57
"@sveltejs/kit",
+1
-1
src/components/note.svelte
+1
-1
src/components/note.svelte
···
65
65
}
66
66
</script>
67
67
68
-
<div class="text-wrap break-words max-w-[70ch] leading-none">
68
+
<div class="text-wrap break-words max-w-[70ch] leading-tight">
69
69
{#if !onlyContent}<Token v={renderDate(note.published)} small={!isHighlighted}/>{/if} <Token v={note.content} str/>
70
70
{#if note.hasMedia}<Token v="-contains media-" keywd small/>{/if}
71
71
{#if note.hasQuote}<Token v="-contains quote-" keywd small/>{/if}
+1
src/routes/+layout.svelte
+1
src/routes/+layout.svelte
+9
-8
src/routes/+page.svelte
+9
-8
src/routes/+page.svelte
···
3
3
import Note from '../components/note.svelte';
4
4
import Window from '../components/window.svelte';
5
5
import LatestStuff from './lateststuff.md';
6
+
import Time from "svelte-time";
6
7
7
8
interface Props {
8
9
data: any;
···
151
152
</Window>
152
153
<Window title="status" style="mt-auto" removePadding>
153
154
{#if data.lastNote}
154
-
<div class="m-1.5 flex flex-col font-monospace">
155
-
<div
156
-
class="prose prose-ralsei items-center p-1 border-4 text-sm font-bold bg-ralsei-black"
155
+
<div class="m-1.5 flex flex-col font-monospace text-sm">
156
+
<p
157
+
class="prose prose-ralsei p-1 border-4 text-sm bg-ralsei-black"
157
158
style="border-style: double double none double;"
158
159
>
159
-
<a href="/entries">last log</a>
160
-
<span class="border-4 pl-[1ch]" style="border-style: none none none double;">published on {renderDate(data.lastNote.published)}</span>
161
-
</div>
162
-
<div class="mt-0 p-1 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
160
+
<a href="/entries">last log was...</a>
161
+
published <Time relative format="dddd @ h:mm A · MMMM D, YYYY" timestamp={data.lastNote.published}/>!
162
+
</p>
163
+
<div class="mt-0 p-1.5 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
163
164
<Note note={data.lastNote} onlyContent/>
164
165
</div>
165
166
</div>
···
190
191
<a
191
192
title={data.lastTrack.name}
192
193
href="https://www.last.fm/user/yusdacra"
193
-
class="hover:underline">{data.lastTrack.name}</a
194
+
class="hover:underline motion-safe:hover:animate-squiggle">{data.lastTrack.name}</a
194
195
>
195
196
</p>
196
197
<p
+7
-34
src/styles/app.css
+7
-34
src/styles/app.css
···
70
70
text-shadow: 0 0 4px theme(colors.ralsei.pink.regular);
71
71
}
72
72
73
+
.prose code, .prose pre {
74
+
@apply text-sm;
75
+
}
76
+
73
77
.text-shadow-green {
74
78
text-shadow: 0 0 2px theme(colors.ralsei.black), 0 0 5px theme(colors.ralsei.green.light);
75
79
}
···
80
84
}
81
85
82
86
@font-face {
83
-
font-family: 'Comic Shanns';
84
-
font-display: swap;
85
-
src: url('/fonts/ComicMono-Condensed.woff2') format('woff2');
86
-
}
87
-
88
-
@font-face {
89
87
font-family: 'Comic Sans';
90
-
src: url('/fonts/subset-ComicSansMS-Italic.woff2') format('woff2');
88
+
src: local('Comic Sans MS'), url('/fonts/subset-ComicSansMS-Italic.woff2') format('woff2');
91
89
font-weight: normal;
92
90
font-style: italic;
93
91
font-display: swap;
···
95
93
96
94
@font-face {
97
95
font-family: 'Comic Sans';
98
-
src: url('/fonts/subset-ComicSansMS.woff2') format('woff2');
96
+
src: local('Comic Sans MS'), url('/fonts/subset-ComicSansMS.woff2') format('woff2');
99
97
font-weight: normal;
100
98
font-style: normal;
101
99
font-display: swap;
···
103
101
104
102
@font-face {
105
103
font-family: 'Comic Sans';
106
-
src: url('/fonts/subset-ComicSansMS-Bold.woff2') format('woff2');
104
+
src: local('Comic Sans MS'), url('/fonts/subset-ComicSansMS-Bold.woff2') format('woff2');
107
105
font-weight: bold;
108
106
font-style: normal;
109
107
font-display: swap;
110
108
}
111
-
112
-
113
109
114
110
.animate-squiggle {
115
111
animation: squigglevision 0.3s infinite;
···
131
127
100% {
132
128
filter: url("#squiggly-4");
133
129
}
134
-
}
135
-
136
-
.pixelate {
137
-
filter: url("#pixelate");
138
-
}
139
-
140
-
.pixelate-bg {
141
-
backdrop-filter: url("#pixelate");
142
-
}
143
-
144
-
.dither {
145
-
filter: url("#dither");
146
-
}
147
-
148
-
.dither-bg {
149
-
backdrop-filter: url("#dither");
150
130
}
151
131
152
132
@keyframes blink {
···
400
380
overflow: auto;
401
381
}
402
382
}
403
-
}
404
-
405
-
.genderfluid-gradient {
406
-
background: linear-gradient(to right, rgb(255, 120, 166), rgb(247, 196, 210), rgb(255, 255, 255) 23%, rgb(255, 255, 255), rgb(255, 255, 255) 28%, rgb(219, 148, 213), rgb(190, 20, 215), rgb(89, 22, 85), rgb(0, 0, 0) 73%, rgb(0, 0, 0), rgb(0, 0, 0) 78%, rgb(51, 36, 87), rgb(50, 60, 191));
407
-
background-clip: text;
408
-
color: transparent;
409
-
text-shadow: none;
410
383
}
411
384
412
385
@font-face {