diff --git a/bun.lockb b/bun.lockb index 0876500..d074b4b 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 25a1dc2..5bb21c8 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "devDependencies": { "@sveltejs/enhanced-img": "^0.3.10", "@sveltejs/kit": "^2.17.2", - "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@sveltejs/vite-plugin-svelte": "^4.0.0", "@tailwindcss/forms": "^0.5.10", "@tailwindcss/typography": "^0.5.16", "@types/eslint": "^9.6.1", @@ -28,9 +28,9 @@ "postcss": "^8.5.3", "prettier": "^3.5.2", "prettier-plugin-svelte": "^3.3.3", - "svelte": "^4.2.19", + "svelte": "^5.0.0", "svelte-adapter-bun": "^0.5.2", - "svelte-check": "^3.8.6", + "svelte-check": "^4.0.0", "sveltekit-rate-limiter": "^0.6.1", "tailwindcss": "^3.4.17", "tslib": "^2.8.1", diff --git a/src/components/_window_layout.svelte b/src/components/_window_layout.svelte index 0ed67ef..1da5a2a 100644 --- a/src/components/_window_layout.svelte +++ b/src/components/_window_layout.svelte @@ -2,13 +2,23 @@ import Window from './window.svelte' import '../styles/app.css' - export let title - export let sticky - export let prose = true + interface Props { + title: any; + sticky: any; + prose?: boolean; + children?: import('svelte').Snippet; + } + + let { + title, + sticky, + prose = true, + children + }: Props = $props();
- + {@render children?.()}
\ No newline at end of file diff --git a/src/components/navButton.svelte b/src/components/navButton.svelte index 1f1c07e..703ec46 100644 --- a/src/components/navButton.svelte +++ b/src/components/navButton.svelte @@ -1,8 +1,17 @@ +
- Hello world! + {#if tooltipContent}{@render tooltipContent()}{:else}Hello world!{/if}
- + {@render children?.()}
\ No newline at end of file diff --git a/src/components/window.svelte b/src/components/window.svelte index d25dce2..13791a9 100644 --- a/src/components/window.svelte +++ b/src/components/window.svelte @@ -2,16 +2,33 @@ import { highestZIndex, isMobile } from '$lib/window.ts'; import { draggable } from '@neodrag/svelte'; - export let title: string | undefined = undefined; - export let iconUri: string = ''; - export let id: string = ''; - export let sticky: boolean = false; - export let entry: boolean = false; - export let removePadding: boolean = false; - export let center: boolean = false; - export let layered: boolean = false; - export let style: string = ""; - export let tooltip: boolean = false; + interface Props { + title?: string | undefined; + iconUri?: string; + id?: string; + sticky?: boolean; + entry?: boolean; + removePadding?: boolean; + center?: boolean; + layered?: boolean; + style?: string; + tooltip?: boolean; + children?: import('svelte').Snippet; + } + + let { + title = undefined, + iconUri = '', + id = '', + sticky = false, + entry = false, + removePadding = false, + center = false, + layered = false, + style = "", + tooltip = false, + children + }: Props = $props(); const scaleKeyframes = [ "window-open", @@ -24,7 +41,7 @@ "window-open-move-left", "window-open-move-right", ]; - $: chosenKeyframe = scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length)) + let chosenKeyframe = $derived(scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))) const isOnMobile = isMobile() const _draggable = isOnMobile ? () => {} : draggable; @@ -35,8 +52,8 @@ } - - + +
{focusWindow(data.currentNode)}, }} - on:click={(data) => {focusWindow(data.currentTarget)}} + onclick={(data) => {focusWindow(data.currentTarget)}} class=" relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""} 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] @@ -87,6 +104,6 @@ {removePadding ? "" : tooltip ? "p-1" : "p-2"} bg-gradient-to-tl to-ralsei-pink-neon/15 from-ralsei-pink-regular/20 "> - + {@render children?.()}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c5eae1d..f9ef313 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,7 +4,12 @@ import Tooltip from '../components/tooltip.svelte'; import '../styles/app.css'; - export let data; + interface Props { + data: any; + children?: import('svelte').Snippet; + } + + let { data, children }: Props = $props(); interface MenuItem { href: string; @@ -19,9 +24,9 @@ { href: 'about', name: 'about', iconUri: '/icons/about.webp' } ]; - $: routeComponents = data.route.split('/'); - $: doAddPostItem = routeComponents.length > 3 && routeComponents[1] === 'entries'; - $: isRoute = (_route: string) => { + let routeComponents = $derived(data.route.split('/')); + let doAddPostItem = $derived(routeComponents.length > 3 && routeComponents[1] === 'entries'); + let isRoute = $derived((_route: string) => { if (doAddPostItem) { if (_route === 'entries') { return false; @@ -30,9 +35,9 @@ } } return _route === routeComponents[1]; - }; + }); - $: title = getTitle(data.route); + let title = $derived(getTitle(data.route)); const svgSquiggles = [[2], [3], [2], [3], [1]]; @@ -49,13 +54,13 @@ app-grid-background motion-safe:app-grid-background-anim fixed -z-10 w-full [height:100%] top-0 left-0 " -/> +>
+>
- + {@render children?.()}