feat: add root and public layouts with config-driven theming

This commit is contained in:
2026-03-26 12:03:31 -05:00
parent a30205fa28
commit 2fa3d4ec67
4 changed files with 56 additions and 5 deletions
+16
View File
@@ -0,0 +1,16 @@
import { db } from '$lib/server/db';
import { sponsors } from '$lib/server/schema';
import { eq, asc } from 'drizzle-orm';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ parent }) => {
const parentData = await parent();
const allSponsors = await db
.select()
.from(sponsors)
.where(eq(sponsors.active, true))
.orderBy(asc(sponsors.sortOrder));
return { ...parentData, sponsors: allSponsors };
};
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts">
import Header from '$lib/components/public/Header.svelte';
import Footer from '$lib/components/public/Footer.svelte';
let { data, children } = $props();
</script>
<svelte:head>
<meta name="description" content="{data.orgConfig.orgInfo.name} — {data.orgConfig.orgInfo.tagline || 'A foster-based animal rescue'}" />
<meta property="og:site_name" content={data.orgConfig.orgInfo.name} />
<meta property="og:type" content="website" />
{@html `<style>:root{--color-primary:${data.orgConfig.branding.primaryColor};--color-primary-light:${data.orgConfig.branding.primaryColorLight};--color-primary-dark:${data.orgConfig.branding.primaryColorDark};--color-accent:${data.orgConfig.branding.accentColor};--color-accent-light:${data.orgConfig.branding.accentColorLight};--color-accent-dark:${data.orgConfig.branding.accentColorDark}}</style>`}
</svelte:head>
<div class="min-h-screen flex flex-col bg-warm-bg">
<Header
orgName={data.orgConfig.orgInfo.name}
logoUrl={data.orgConfig.branding.logoUrl}
/>
<main class="flex-1">
{@render children()}
</main>
<Footer
orgName={data.orgConfig.orgInfo.name}
sponsors={data.sponsors}
facebookUrl={data.orgConfig.orgInfo.facebookUrl}
instagramUrl={data.orgConfig.orgInfo.instagramUrl}
/>
</div>
+8
View File
@@ -0,0 +1,8 @@
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
return {
user: locals.user,
orgConfig: locals.orgConfig
};
};
+3 -5
View File
@@ -1,11 +1,9 @@
<script lang="ts"> <script lang="ts">
import favicon from '$lib/assets/favicon.svg'; import '../app.css';
import Toast from '$lib/components/ui/Toast.svelte';
let { children } = $props(); let { children } = $props();
</script> </script>
<svelte:head>
<link rel="icon" href={favicon} />
</svelte:head>
{@render children()} {@render children()}
<Toast />