feat: add root and public layouts with config-driven theming
This commit is contained in:
@@ -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 };
|
||||||
|
};
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import type { LayoutServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: LayoutServerLoad = async ({ locals }) => {
|
||||||
|
return {
|
||||||
|
user: locals.user,
|
||||||
|
orgConfig: locals.orgConfig
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -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 />
|
||||||
|
|||||||
Reference in New Issue
Block a user