Adding logo. Different in light and dark mode (#293)

Author: MaanavD

www/src/lib/components/app-sidebar.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import { siteConfig } from '$lib/config';
-	import GalleryVerticalEnd from 'lucide-svelte/icons/gallery-vertical-end';
 	import type { ComponentProps } from 'svelte';
 	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 	import { docsNavigation } from '$lib/components/doc-navigation.svelte';
 	import { page } from '$app/state';
 	import SocialMedia from './social-media.svelte';
 	const path = $derived(page.url.pathname);
+	const compactLogo = siteConfig.logoMark ?? siteConfig.logo;
 </script>
 
 <Sidebar.Root bind:ref {...restProps}>
@@ -20,7 +20,11 @@
 							<div
 								class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
 							>
-								<GalleryVerticalEnd class="size-4" />
+								<img
+									src={compactLogo}
+									alt="Foundry Local logo"
+									class="h-5 w-5"
+								/>
 							</div>
 							<div class="flex flex-col gap-0.5 leading-none">
 								<span class="font-semibold"> {siteConfig.title} </span>

www/src/lib/components/home/hero.svelte

@@ -66,10 +66,23 @@
 
 <div class="relative overflow-hidden">
 	<div class="relative mx-auto max-w-[85rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8">
+		<!-- Brand mark -->
+		<div
+			class="mx-auto flex max-w-2xl justify-center"
+			use:animate={{ delay: 0, duration: 700, animation: 'fade-in' }}
+		>
+			<img src={siteConfig.logo} alt="Foundry Local logo" class="h-16 dark:hidden" />
+			{#if siteConfig.logoDark}
+				<img src={siteConfig.logoDark} alt="Foundry Local logo" class="hidden h-16 dark:block" />
+			{:else}
+				<img src={siteConfig.logo} alt="Foundry Local logo" class="hidden h-16 dark:block" />
+			{/if}
+		</div>
+
 		<!-- Title -->
 		<div class="mx-auto mt-5 max-w-2xl text-center">
 			<h1
-				use:animate={{ delay: 0, duration: 800, animation: 'slide-up' }}
+				use:animate={{ delay: 150, duration: 800, animation: 'slide-up' }}
 				class="block text-4xl font-bold text-gray-800 dark:text-neutral-200 md:text-5xl lg:text-6xl"
 			>
 				<span class="text-primary">Foundry Local</span>
@@ -79,7 +92,7 @@
 		<!-- Description -->
 		<div class="mx-auto mt-5 max-w-3xl text-center">
 			<p
-				use:animate={{ delay: 200, duration: 800, animation: 'slide-up' }}
+				use:animate={{ delay: 350, duration: 800, animation: 'slide-up' }}
 				class="text-lg text-gray-600 dark:text-neutral-400"
 			>
 				{siteConfig.description}

www/src/lib/config.ts

@@ -26,8 +26,9 @@ export const siteConfig: SiteConfig = {
 		},
 		{ title: 'GitHub', href: 'https://github.com/microsoft/foundry-local' }
 	],
-	logo: '/azure.svg',
-	logoDark: '/azure-white.svg',
+	logo: '/logos/foundry-local-logo-color.svg',
+	logoDark: '/logos/foundry-local-logo-fill.svg',
+	logoMark: '/logos/foundry-local-logo-stroke.svg',
 	favicon: '/favicon.png'
 };
 

www/src/lib/types/config.ts

@@ -29,6 +29,9 @@ export interface SiteConfig {
 	/** Path to the dark theme logo (optional) */
 	logoDark?: string;
 
+	/** Optional mark or monochrome variant for compact contexts */
+	logoMark?: string;
+
 	/** Path to the site favicon */
 	favicon: string;
 }