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

finishing migration to Svelte 5, Tailwind 4, and Skeleton 3

Browse Source
This commit is contained in:
Luke Hagar
2025-06-24 10:55:40 -05:00
parent 55706c32f6
commit c651e14559
12 changed files with 97 additions and 6074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5930
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

50
package.json
View File

@@ -13,34 +13,34 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@floating-ui/dom": "^1.6.11", "@floating-ui/dom": "^1.7.1",
"@skeletonlabs/skeleton": "^2.10.3", "@skeletonlabs/skeleton": "^3.1.3",
"@skeletonlabs/tw-plugin": "^0.3.1", "@skeletonlabs/skeleton-svelte": "^1.2.3",
"@sveltejs/adapter-static": "^3.0.5", "@skeletonlabs/tw-plugin": "^0.4.1",
"@sveltejs/kit": "^2.7.2", "@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/vite-plugin-svelte": "^4.0.0", "@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.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", "@tailwindcss/vite": "^4.0.0",
"@typescript-eslint/eslint-plugin": "^6.21.0", "@types/chrome": "^0.0.326",
"@typescript-eslint/parser": "^6.21.0", "@typescript-eslint/eslint-plugin": "^8.35.0",
"autoprefixer": "^10.4.20", "@typescript-eslint/parser": "^8.35.0",
"eslint": "^8.57.1", "autoprefixer": "^10.4.21",
"eslint-config-prettier": "^9.1.0", "eslint": "^9.29.0",
"eslint-plugin-svelte": "^2.46.0", "eslint-config-prettier": "^10.1.5",
"highlight.js": "^11.10.0", "eslint-plugin-svelte": "^3.9.3",
"postcss": "^8.4.47", "highlight.js": "^11.11.1",
"prettier": "^3.3.3", "prettier": "^3.6.0",
"prettier-plugin-svelte": "^3.2.7", "prettier-plugin-svelte": "^3.4.0",
"svelte": "^5.0.0", "svelte": "^5.34.7",
"svelte-check": "^4.0.0", "svelte-check": "^4.2.2",
"sveltekit-adapter-chrome-extension": "^2.0.1", "sveltekit-adapter-chrome-extension": "^2.0.1",
"tailwindcss": "^3.4.14", "tailwindcss": "^4.1.10",
"tslib": "^2.8.0", "tslib": "^2.8.1",
"typescript": "^5.6.3", "typescript": "^5.8.3",
"vite": "^5.4.10", "vite": "^6.3.5",
"vite-plugin-tailwind-purgecss": "^0.2.1", "vitest": "^3.2.4"
"vitest": "^1.6.0"
}, },
"type": "module" "type": "module"
} }

6
postcss.config.cjs
View File

@@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

17
src/app.css Normal file
View File

@@ -0,0 +1,17 @@
@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import '@skeletonlabs/skeleton/themes/legacy';
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
@custom-variant dark (&:where(.dark, .dark *));
html,
body {
height: 600px;
width: 800px;
overflow: hidden;
background-repeat: no-repeat, no-repeat, no-repeat;
}

4
src/app.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="skeleton"> <body data-theme="legacy" >
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

10
src/app.postcss
View File

@@ -1,10 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
html,
body {
@apply !h-[600px] !w-[800px];
background-repeat: no-repeat, no-repeat, no-repeat;
}

90
src/routes/+layout.svelte
View File

@@ -1,57 +1,45 @@
<script lang='ts'> <script lang="ts">
// 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.css';
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props(); let { children } = $props();
</script> </script>
<!-- App Shell --> <!-- App Shell -->
<AppShell> <div>
{#snippet header()} <div class="flex flex-row justify-between p-2">
<strong class="text-xl uppercase">Skeleton</strong>
<!-- App Bar -->
<AppBar> <div>
{#snippet lead()} <a
class="btn btn-sm variant-ghost-surface"
<strong class="text-xl uppercase">Skeleton</strong> href="https://discord.gg/EXqV7W8MtY"
target="_blank"
{/snippet} rel="noreferrer"
{#snippet trail()} >
Discord
<a </a>
class="btn btn-sm variant-ghost-surface" <a
href="https://discord.gg/EXqV7W8MtY" class="btn btn-sm variant-ghost-surface"
target="_blank" href="https://twitter.com/SkeletonUI"
rel="noreferrer" target="_blank"
> rel="noreferrer"
Discord >
</a> Twitter
<a </a>
class="btn btn-sm variant-ghost-surface" <a
href="https://twitter.com/SkeletonUI" class="btn btn-sm variant-ghost-surface"
target="_blank" href="https://github.com/skeletonlabs/skeleton"
rel="noreferrer" target="_blank"
> rel="noreferrer"
Twitter >
</a> GitHub
<a </a>
class="btn btn-sm variant-ghost-surface" </div>
href="https://github.com/skeletonlabs/skeleton" </div>
target="_blank"
rel="noreferrer"
>
GitHub
</a>
{/snippet}
</AppBar>
{/snippet}
<!-- Page Route Content --> <!-- Page Route Content -->
{@render children?.()} <div>
</AppShell> {@render children?.()}
</div>
</div>

24
src/routes/+page.svelte
View File

@@ -4,10 +4,10 @@
<div class="space-y-10 text-center flex flex-col items-center"> <div class="space-y-10 text-center flex flex-col items-center">
<h2 class="h2 font-bold">Welcome to Skeleton.</h2> <h2 class="h2 font-bold">Welcome to Skeleton.</h2>
<!-- Animated Logo --> <!-- Animated Logo -->
<figure> <figure class="flex relative flex-col">
<section class="img-bg"></section> <section class="img-bg w-32 h-32 absolute z-[-1] rounded-full blur-[50px] transition-all"></section>
<svg <svg
class="fill-token -scale-x-[100%] !h-24 !w-24" class="fill-white -scale-x-100 h-24! w-24!"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" viewBox="0 0 200 200"
> >
@@ -31,32 +31,24 @@
</div> </div>
</div> </div>
<style lang="postcss"> <style>
figure {
@apply flex relative flex-col;
}
figure svg,
.img-bg { .img-bg {
@apply w-32 h-32;
}
.img-bg {
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
animation: animation:
pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
glow 5s linear infinite; glow 5s linear infinite;
} }
@keyframes glow { @keyframes glow {
0% { 0% {
@apply bg-primary-400/50; background-color: oklch(48.376% 0.28256 265.22 / 0.5);
} }
33% { 33% {
@apply bg-secondary-400/50; background-color: oklch(49.477% 0.29446 281.787 / 0.5);
} }
66% { 66% {
@apply bg-tertiary-400/50; background-color: oklch(66.104% 0.18232 256.59 / 0.5);
} }
100% { 100% {
@apply bg-primary-400/50; background-color: oklch(48.376% 0.28256 265.22 / 0.5);
} }
} }
@keyframes pulse { @keyframes pulse {

5
svelte.config.js
View File

@@ -1,12 +1,7 @@
import adapter from 'sveltekit-adapter-chrome-extension'; import adapter from 'sveltekit-adapter-chrome-extension';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter. // If your environment is not supported or you settled on a specific environment, switch out the adapter.

25
tailwind.config.ts
View File

@@ -1,25 +0,0 @@
import { join } from 'path';
import type { Config } from 'tailwindcss';
// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';
const config = {
// 2. Opt for dark mode to be handled via the class method
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
// 3. Append the path to the Skeleton package
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
],
theme: {
extend: {}
},
plugins: [
// 4. Append the Skeleton plugin (after other plugins)
skeleton({ themes: { preset: [{ name: 'skeleton', enhancements: true }] } })
]
} satisfies Config;
export default config;

6
tsconfig.json
View File

@@ -8,9 +8,11 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true "strict": true,
"moduleResolution": "bundler"
} }
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
// //
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in // from the referenced tsconfig.json - TypeScript does not merge them in

4
vite.config.ts
View File

@@ -1,9 +1,9 @@
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';
import { defineConfig } from 'vitest/config'; import { defineConfig } from 'vitest/config';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit(), purgeCss()], plugins: [tailwindcss(), sveltekit()],
test: { test: {
include: ['src/**/*.{test,spec}.{js,ts}'] include: ['src/**/*.{test,spec}.{js,ts}']
} }