Adds logo support with masking.

src/config.yml

@@ -1,5 +1,7 @@
 title: 'Hello World !!'
 subtitle: 'actually, I am a new pilot.'
+logo: 'icon-any.svg'
+asmask: true
 
 services:
   - title: '/Cloud'

src/lib/components/Brand.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { BrandConfig } from '$lib/config';
+
+	export let brand: BrandConfig = {};
+	export let size = 48;
+	console.log(brand);
+
+	function masked() {
+		return brand.logo != undefined && brand.asmask == true;
+	}
+</script>
+
+<div
+	class="logo container"
+	style="--size: {size}px; --mask: url({brand.logo || ''})"
+	class:masked={masked()}
+>
+	{#if brand.logo}
+		{#if brand.asmask != true}
+			<img src={brand.logo} alt="logo" />
+		{/if}
+	{:else if brand.icon}
+		<p>an icon</p>
+	{/if}
+</div>
+
+<style>
+	.container {
+		width: var(--size);
+		height: var(--size);
+	}
+
+	.masked {
+		background: black;
+		mask: var(--mask) center no-repeat;
+		mask-size: var(--size);
+		-webkit-mask: var(--mask) center no-repeat;
+		-webkit-mask-size: var(--size);
+	}
+</style>

src/lib/config.ts

@@ -1,7 +1,7 @@
 export interface BrandConfig {
 	logo?: string;
 	icon?: string;
-	usemask?: boolean;
+	asmask?: boolean;
 }
 
 export interface SectionConfig extends BrandConfig {

src/lib/server/config.ts

@@ -9,7 +9,7 @@ const requiredService: Required<ServiceConfig> = {
 	subtitle: '',
 	logo: '',
 	icon: '',
-	usemask: false,
+	asmask: false,
 	url: '',
 	target: '',
 	type: ''
@@ -20,7 +20,7 @@ const requiredServiceGroup: Required<ServiceGroupConfig> = {
 	subtitle: '',
 	logo: '',
 	icon: '',
-	usemask: false,
+	asmask: false,
 	items: [requiredService]
 };
 
@@ -29,7 +29,7 @@ export const requiredConfig: Required<Config> = {
 	subtitle: '',
 	logo: '',
 	icon: '',
-	usemask: false,
+	asmask: false,
 	services: [requiredServiceGroup]
 };
 

src/routes/+page.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
+	import Brand from '$lib/components/Brand.svelte';
 	import ServiceGroup from '$lib/components/ServiceGroup.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 </script>
 
-<h1>{data.config.title}</h1>
-{#if data.config.subtitle}
-	<h2>{data.config.subtitle}</h2>
-{/if}
-
+<header>
+	<Brand brand={data.config} />
+	<h1>{data.config.title}</h1>
+	{#if data.config.subtitle}
+		<h2>{data.config.subtitle}</h2>
+	{/if}
+</header>
 {#each data.config.services as group, i}
 	<ServiceGroup {group} groupData={data.serviceData[i]} />
 {/each}