mirror of
https://github.com/LukeHagar/sveltekit-extension-template.git
synced 2025-12-06 04:21:37 +00:00
finishing migration to Svelte 5, Tailwind 4, and Skeleton 3
This commit is contained in:
Luke Hagar
5930
package-lock.json
generated
5930
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
50
package.json
50
package.json
@@ -13,34 +13,34 @@
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@floating-ui/dom": "^1.6.11",
|
||||
"@skeletonlabs/skeleton": "^2.10.3",
|
||||
"@skeletonlabs/tw-plugin": "^0.3.1",
|
||||
"@sveltejs/adapter-static": "^3.0.5",
|
||||
"@sveltejs/kit": "^2.7.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@floating-ui/dom": "^1.7.1",
|
||||
"@skeletonlabs/skeleton": "^3.1.3",
|
||||
"@skeletonlabs/skeleton-svelte": "^1.2.3",
|
||||
"@skeletonlabs/tw-plugin": "^0.4.1",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/chrome": "^0.0.254",
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.46.0",
|
||||
"highlight.js": "^11.10.0",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-svelte": "^3.2.7",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"@types/chrome": "^0.0.326",
|
||||
"@typescript-eslint/eslint-plugin": "^8.35.0",
|
||||
"@typescript-eslint/parser": "^8.35.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.29.0",
|
||||
"eslint-config-prettier": "^10.1.5",
|
||||
"eslint-plugin-svelte": "^3.9.3",
|
||||
"highlight.js": "^11.11.1",
|
||||
"prettier": "^3.6.0",
|
||||
"prettier-plugin-svelte": "^3.4.0",
|
||||
"svelte": "^5.34.7",
|
||||
"svelte-check": "^4.2.2",
|
||||
"sveltekit-adapter-chrome-extension": "^2.0.1",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"tslib": "^2.8.0",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.10",
|
||||
"vite-plugin-tailwind-purgecss": "^0.2.1",
|
||||
"vitest": "^1.6.0"
|
||||
"tailwindcss": "^4.1.10",
|
||||
"tslib": "^2.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
17
src/app.css
Normal file
17
src/app.css
Normal 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;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" data-theme="skeleton">
|
||||
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
|
||||
<body data-theme="legacy" >
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,28 +1,16 @@
|
||||
<script lang='ts'>
|
||||
|
||||
<script lang="ts">
|
||||
// Most of your app wide CSS should be put in this file
|
||||
import '../app.postcss';
|
||||
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
import '../app.css';
|
||||
|
||||
let { children }: Props = $props();
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<!-- App Shell -->
|
||||
<AppShell>
|
||||
{#snippet header()}
|
||||
|
||||
<!-- App Bar -->
|
||||
<AppBar>
|
||||
{#snippet lead()}
|
||||
|
||||
<div>
|
||||
<div class="flex flex-row justify-between p-2">
|
||||
<strong class="text-xl uppercase">Skeleton</strong>
|
||||
|
||||
{/snippet}
|
||||
{#snippet trail()}
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://discord.gg/EXqV7W8MtY"
|
||||
@@ -47,11 +35,11 @@
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/snippet}
|
||||
</AppBar>
|
||||
|
||||
{/snippet}
|
||||
<!-- Page Route Content -->
|
||||
<div>
|
||||
{@render children?.()}
|
||||
</AppShell>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<div class="space-y-10 text-center flex flex-col items-center">
|
||||
<h2 class="h2 font-bold">Welcome to Skeleton.</h2>
|
||||
<!-- Animated Logo -->
|
||||
<figure>
|
||||
<section class="img-bg"></section>
|
||||
<figure class="flex relative flex-col">
|
||||
<section class="img-bg w-32 h-32 absolute z-[-1] rounded-full blur-[50px] transition-all"></section>
|
||||
<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"
|
||||
viewBox="0 0 200 200"
|
||||
>
|
||||
@@ -31,32 +31,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
figure {
|
||||
@apply flex relative flex-col;
|
||||
}
|
||||
figure svg,
|
||||
<style>
|
||||
.img-bg {
|
||||
@apply w-32 h-32;
|
||||
}
|
||||
.img-bg {
|
||||
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
|
||||
animation:
|
||||
pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
|
||||
glow 5s linear infinite;
|
||||
}
|
||||
@keyframes glow {
|
||||
0% {
|
||||
@apply bg-primary-400/50;
|
||||
background-color: oklch(48.376% 0.28256 265.22 / 0.5);
|
||||
}
|
||||
33% {
|
||||
@apply bg-secondary-400/50;
|
||||
background-color: oklch(49.477% 0.29446 281.787 / 0.5);
|
||||
}
|
||||
66% {
|
||||
@apply bg-tertiary-400/50;
|
||||
background-color: oklch(66.104% 0.18232 256.59 / 0.5);
|
||||
}
|
||||
100% {
|
||||
@apply bg-primary-400/50;
|
||||
background-color: oklch(48.376% 0.28256 265.22 / 0.5);
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
import adapter from 'sveltekit-adapter-chrome-extension';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
kit: {
|
||||
// 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.
|
||||
|
||||
@@ -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;
|
||||
@@ -8,9 +8,11 @@
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": 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
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { purgeCss } from 'vite-plugin-tailwind-purgecss';
|
||||
import { defineConfig } from 'vitest/config';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit(), purgeCss()],
|
||||
plugins: [tailwindcss(), sveltekit()],
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user