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

theming and cleaning

Browse Source
This commit is contained in:
Luke Hagar
2025-05-27 17:14:09 -05:00
parent b00c4a2da6
commit 0c6cf023cc
9 changed files with 3 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
my-saas-template/src/app.html
View File

@@ -1,25 +0,0 @@
<!doctype html>
<html lang="en" data-theme="modern" class="dark"> <!-- Added data-theme and class="dark" -->
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<!-- For SvelteKit, importing app.css in a root +layout.svelte or +layout.ts
is the standard way to include global CSS.
Explicitly linking app.css here is usually not needed if src/app.css exists
and is imported by SvelteKit's build process (e.g. via +layout.svelte).
However, Skeleton V3 examples sometimes show it directly or rely on it being processed.
SvelteKit should automatically inject styles from `src/app.css` if it's processed
as part of the component tree (e.g. imported in +layout.svelte).
Let's ensure it's robust. If src/app.css is imported by +layout.svelte (or its module script)
or a similar root Svelte file, SvelteKit handles it.
The new Skeleton v3 setup has app.css with @import rules.
This app.css needs to be processed. Importing it in +layout.svelte's module script
is a common way.
-->
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

58
my-saas-template/src/routes/+layout.svelte
View File

@@ -1,58 +0,0 @@
<script lang="ts">
// CSS imports for theme and skeleton base styles are removed from here.
// They are now handled by src/app.css
// Floating UI
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
import { storePopup, Toast, Modal } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
import { onMount } from 'svelte';
import { supabase } from '$lib/supabaseClient';
import type { Session } from '@supabase/supabase-js';
import { invalidateAll } from '$app/navigation';
import SvelteToast from '$lib/components/SvelteToast.svelte';
let session: Session | null = null;
onMount(() => {
supabase.auth.getSession().then(({ data }) => {
session = data.session;
});
const { data: authListener } = supabase.auth.onAuthStateChange((event, newSession) => {
session = newSession;
invalidateAll();
});
return () => {
authListener?.unsubscribe();
};
});
</script>
<!-- Skeleton Toasts and Modals -->
<Toast position="tr" />
<Modal />
<SvelteToast />
<nav class="p-4 bg-surface-100-800-token">
<a href="/" class="btn btn-ghost-surface">Home</a>
<a href="/pricing" class="btn btn-ghost-surface">Pricing</a>
<a href="/blog" class="btn btn-ghost-surface">Blog</a>
{#if session}
<a href="/dashboard" class="btn btn-ghost-surface">Dashboard</a>
<form action="/auth/logout" method="POST" style="display: inline;">
<button type="submit" class="btn btn-primary">Logout</button>
</form>
<span class="ml-4">Logged in as: {session.user.email}</span>
{:else}
<a href="/auth/login" class="btn btn-ghost-surface">Login</a>
<a href="/auth/signup" class="btn btn-primary">Sign Up</a>
{/if}
</nav>
<main class="p-4">
<slot {session} /> <!-- Pass session to child pages -->
</main>

2
my-saas-template/src/routes/+page.svelte
View File

@@ -1,2 +0,0 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

24
my-saas-template/tailwind.config.cjs
View File

@@ -1,24 +0,0 @@
// @ts-check
import { join } from 'path';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
// Path to Skeleton Svelte components
join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}'),
// Path to Skeleton core
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
],
theme: {
extend: {},
},
plugins: [
forms,
typography
// Skeleton plugin is removed
]
};

6
my-saas-template/vite.config.ts
View File

@@ -1,6 +0,0 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});

22
package.json
View File

@@ -1,5 +1,6 @@
{
"name": "my-saas-template",
"name": "saasy",
"description": "Saasy is a SaaS template for SvelteKit",
"private": true,
"version": "0.0.1",
"type": "module",
@@ -12,24 +13,6 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
<<<<<<< HEAD:my-saas-template/package.json
"@sveltejs/adapter-auto": "^6.0.0",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.2.6"
},
"dependencies": {
"@skeletonlabs/skeleton": "^3.1.3",
"@skeletonlabs/skeleton-svelte": "^1.2.3",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.16",
"autoprefixer": "^10.4.21",
"postcss": "^8.5.3",
"tailwindcss": "^4.1.7"
=======
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
"@floating-ui/dom": "^1.7.0",
@@ -69,6 +52,5 @@
"remark-toc": "^9.0.0",
"remark-unwrap-images": "^4.0.1",
"shiki": "^3.4.2"
>>>>>>> 3c705b9 (Overhaul):package.json
}
}

19
src/app.css
View File

@@ -1,21 +1,3 @@
<<<<<<< HEAD:my-saas-template/src/app.css
/* Tailwind base, components, and utilities */
@import 'tailwindcss';
/* Skeleton core and base theme system */
@import '@skeletonlabs/skeleton';
/* Optional: Skeleton presets (recommended by v3 docs) */
@import '@skeletonlabs/skeleton/optional/presets';
/* Skeleton chosen theme (e.g., modern) */
@import '@skeletonlabs/skeleton/themes/theme-modern.css';
/* You can switch 'theme-modern.css' to other available themes like 'theme-cerberus.css', etc. */
/* Your own global styles can go here */
/* The @source line from docs is a comment, so it's omitted here */
=======
@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@@ -50,4 +32,3 @@
@import '@skeletonlabs/skeleton/themes/wintry';
@custom-variant dark (&:where(.dark, .dark *));
>>>>>>> 3c705b9 (Overhaul):src/app.css

2
src/routes/pricing/+page.svelte
View File

@@ -84,7 +84,7 @@
<!-- Pricing Cards -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
{#each plans as plan}
<div class="card {plan.popular ? 'preset-outlined-primary-500 relative' : 'preset-outlined-surface-200-800'} p-6 md:p-8 space-y-6 {plan.popular ? 'scale-105 shadow-2xl' : 'hover:scale-105'} transition-all duration-300">
<div class="card {plan.popular ? 'preset-outlined-primary-500 relative' : 'preset-outlined-secondary-500'} p-6 md:p-8 space-y-6 {plan.popular ? 'scale-105 shadow-2xl' : 'hover:scale-105'} transition-all duration-300">
{#if plan.popular}
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">

4
svelte.config.js
View File

@@ -1,7 +1,4 @@
import adapter from '@sveltejs/adapter-auto';
<<<<<<< HEAD:my-saas-template/svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
=======
import { mdsvex } from 'mdsvex';
import remarkUnwrapImages from 'remark-unwrap-images';
import remarkToc from 'remark-toc';
@@ -14,7 +11,6 @@ const mdsvexOptions = {
remarkPlugins: [remarkUnwrapImages, remarkToc, remarkAbbr],
rehypePlugins: [rehypeSlug]
};
>>>>>>> 3c705b9 (Overhaul):svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {