LukeParke/sveltekit-extension-template
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltekit-extension-template.git synced 2025-12-06 04:21:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

migration to Svelte 5

Browse Source
This commit is contained in:
Luke Hagar
2025-06-23 13:12:58 -05:00
parent 96cf2081bf
commit 55706c32f6
3 changed files with 50 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -18,7 +18,7 @@
"@skeletonlabs/tw-plugin": "^0.3.1", "@skeletonlabs/tw-plugin": "^0.3.1",
"@sveltejs/adapter-static": "^3.0.5", "@sveltejs/adapter-static": "^3.0.5",
"@sveltejs/kit": "^2.7.2", "@sveltejs/kit": "^2.7.2",
"@sveltejs/vite-plugin-svelte": "^3.1.2", "@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tailwindcss/forms": "^0.5.9", "@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",
"@types/chrome": "^0.0.254", "@types/chrome": "^0.0.254",
@@ -32,8 +32,8 @@
"postcss": "^8.4.47", "postcss": "^8.4.47",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.7", "prettier-plugin-svelte": "^3.2.7",
"svelte": "^4.2.19", "svelte": "^5.0.0",
"svelte-check": "^3.8.6", "svelte-check": "^4.0.0",
"sveltekit-adapter-chrome-extension": "^2.0.1", "sveltekit-adapter-chrome-extension": "^2.0.1",
"tailwindcss": "^3.4.14", "tailwindcss": "^3.4.14",
"tslib": "^2.8.0", "tslib": "^2.8.0",

81
src/routes/+layout.svelte
View File

@@ -3,44 +3,55 @@
// Most of your app wide CSS should be put in this file // Most of your app wide CSS should be put in this file
import '../app.postcss'; import '../app.postcss';
import { AppShell, AppBar } from '@skeletonlabs/skeleton'; import { AppShell, AppBar } from '@skeletonlabs/skeleton';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
</script> </script>
<!-- App Shell --> <!-- App Shell -->
<AppShell> <AppShell>
<svelte:fragment slot="header"> {#snippet header()}
<!-- App Bar -->
<AppBar> <!-- App Bar -->
<svelte:fragment slot="lead"> <AppBar>
<strong class="text-xl uppercase">Skeleton</strong> {#snippet lead()}
</svelte:fragment>
<svelte:fragment slot="trail"> <strong class="text-xl uppercase">Skeleton</strong>
<a
class="btn btn-sm variant-ghost-surface" {/snippet}
href="https://discord.gg/EXqV7W8MtY" {#snippet trail()}
target="_blank"
rel="noreferrer" <a
> class="btn btn-sm variant-ghost-surface"
Discord href="https://discord.gg/EXqV7W8MtY"
</a> target="_blank"
<a rel="noreferrer"
class="btn btn-sm variant-ghost-surface" >
href="https://twitter.com/SkeletonUI" Discord
target="_blank" </a>
rel="noreferrer" <a
> class="btn btn-sm variant-ghost-surface"
Twitter href="https://twitter.com/SkeletonUI"
</a> target="_blank"
<a rel="noreferrer"
class="btn btn-sm variant-ghost-surface" >
href="https://github.com/skeletonlabs/skeleton" Twitter
target="_blank" </a>
rel="noreferrer" <a
> class="btn btn-sm variant-ghost-surface"
GitHub href="https://github.com/skeletonlabs/skeleton"
</a> target="_blank"
</svelte:fragment> rel="noreferrer"
</AppBar> >
</svelte:fragment> GitHub
</a>
{/snippet}
</AppBar>
{/snippet}
<!-- Page Route Content --> <!-- Page Route Content -->
<slot /> {@render children?.()}
</AppShell> </AppShell>

2
src/routes/+page.svelte
View File

@@ -5,7 +5,7 @@
<h2 class="h2 font-bold">Welcome to Skeleton.</h2> <h2 class="h2 font-bold">Welcome to Skeleton.</h2>
<!-- Animated Logo --> <!-- Animated Logo -->
<figure> <figure>
<section class="img-bg" /> <section class="img-bg"></section>
<svg <svg
class="fill-token -scale-x-[100%] !h-24 !w-24" class="fill-token -scale-x-[100%] !h-24 !w-24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"