data endpoint for entity 90008 (aka. a website)
refactor: smol changes
+52
-43
+13
-18
src/components/_window_layout.svelte
+13
-18
src/components/_window_layout.svelte
···
1
1
<script lang="ts">
2
-
import Window from './window.svelte'
3
-
import '../styles/app.css'
2
+
import Window from './window.svelte';
3
+
import '../styles/app.css';
4
4
5
-
interface Props {
6
-
title: any;
7
-
sticky: any;
8
-
prose?: boolean;
9
-
children?: import('svelte').Snippet;
10
-
}
5
+
interface Props {
6
+
title: string;
7
+
sticky: boolean;
8
+
prose?: boolean;
9
+
children?: import('svelte').Snippet;
10
+
}
11
11
12
-
let {
13
-
title,
14
-
sticky,
15
-
prose = true,
16
-
children
17
-
}: Props = $props();
12
+
let { title, sticky, prose = true, children }: Props = $props();
18
13
</script>
19
14
20
15
<Window {title} {sticky}>
21
-
<div class="{prose ? "prose prose-ralsei leading-6 prose-ul:leading-5" : ""}">
22
-
{@render children?.()}
23
-
</div>
24
-
</Window>
16
+
<div class={prose ? 'prose prose-ralsei leading-6 prose-ul:leading-5' : ''}>
17
+
{@render children?.()}
18
+
</div>
19
+
</Window>
+39
-25
src/components/window.svelte
+39
-25
src/components/window.svelte
···
3
3
import { draggable } from '@neodrag/svelte';
4
4
5
5
interface Props {
6
-
title?: string | undefined;
6
+
title?: string;
7
7
iconUri?: string;
8
8
id?: string;
9
9
sticky?: boolean;
···
25
25
removePadding = false,
26
26
center = false,
27
27
layered = false,
28
-
style = "",
28
+
style = '',
29
29
tooltip = false,
30
30
children
31
31
}: Props = $props();
32
32
33
33
const scaleKeyframes = [
34
-
"window-open",
35
-
"window-open-vertical",
36
-
"window-open-vertical",
37
-
"window-open-horizontal",
38
-
"window-open-horizontal",
39
-
"window-open-move-up",
40
-
"window-open-move-down",
41
-
"window-open-move-left",
42
-
"window-open-move-right",
34
+
'window-open',
35
+
'window-open-vertical',
36
+
'window-open-vertical',
37
+
'window-open-horizontal',
38
+
'window-open-horizontal',
39
+
'window-open-move-up',
40
+
'window-open-move-down',
41
+
'window-open-move-left',
42
+
'window-open-move-right'
43
43
];
44
-
let chosenKeyframe = $derived(scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length)))
44
+
let chosenKeyframe = $derived(
45
+
scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))
46
+
);
45
47
46
-
const isOnMobile = isMobile()
48
+
const isOnMobile = isMobile();
47
49
const _draggable = isOnMobile ? () => {} : draggable;
48
50
49
51
const focusWindow = (node: HTMLElement) => {
50
-
$highestZIndex += 1
51
-
node.style.zIndex = $highestZIndex.toString()
52
-
}
52
+
$highestZIndex += 1;
53
+
node.style.zIndex = $highestZIndex.toString();
54
+
};
53
55
</script>
54
56
55
57
<!-- svelte-ignore a11y_no_static_element_interactions -->
···
59
61
disabled: isOnMobile,
60
62
applyUserSelectHack: true,
61
63
handle: '.window-titlebar',
62
-
onDragStart: (data) => {focusWindow(data.currentNode)},
64
+
onDragStart: (data) => {
65
+
focusWindow(data.currentNode);
66
+
}
63
67
}}
64
-
onclick={(data) => {focusWindow(data.currentTarget)}}
68
+
onclick={(data) => {
69
+
focusWindow(data.currentTarget);
70
+
}}
65
71
class="
66
-
relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
67
-
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip ? "min-w-fit" : "min-w-[30ch] lg:min-w-[40ch]"} w-full md:w-fit [height:fit-content]
68
-
bg-ralsei-black border-ralsei-white border-ridge {tooltip ? "border-[6px] border-t-[9px]" : "border-8 border-t-[12px]"}
72
+
relative {layered ? 'col-[1] row-[1]' : ''} flex flex-col {sticky
73
+
? 'md:sticky md:-top-9'
74
+
: ''} {center ? 'mx-auto' : ''}
75
+
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip
76
+
? 'min-w-fit'
77
+
: 'min-w-[30ch] lg:min-w-[40ch]'} w-full md:w-fit [height:fit-content]
78
+
bg-ralsei-black border-ralsei-white border-ridge {tooltip
79
+
? 'border-[6px] border-t-[9px]'
80
+
: 'border-8 border-t-[12px]'}
69
81
animate-{chosenKeyframe} drop-shadow-[24px_24px_24px_rgba(1,1,1,0.8)]
70
82
{style}
71
83
"
···
76
88
class="
77
89
window-titlebar p-1 border-ralsei-white border-8
78
90
bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
79
-
{!isOnMobile ? "cursor-move" : ""}
91
+
{!isOnMobile ? 'cursor-move' : ''}
80
92
"
81
93
style="border-style: hidden hidden ridge hidden;"
82
94
>
···
100
112
</div>
101
113
</div>
102
114
{/if}
103
-
<div class="
104
-
{removePadding ? "" : tooltip ? "p-1" : "p-2"} bg-gradient-to-tl
115
+
<div
116
+
class="
117
+
{removePadding ? '' : tooltip ? 'p-1' : 'p-2'} bg-gradient-to-tl
105
118
to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
106
-
">
119
+
"
120
+
>
107
121
{@render children?.()}
108
122
</div>
109
123
</div>