From 9844498c9589a1246ffc41336c6897e7a369bebc Mon Sep 17 00:00:00 2001
From: Alexandre Tuleu <alexandre.tuleu.2005@polytechnique.org>
Date: Sun, 13 Aug 2023 14:57:09 +0200
Subject: [PATCH] Adds logo support with masking.

---
 src/config.yml                  |  2 ++
 src/lib/components/Brand.svelte | 40 +++++++++++++++++++++++++++++++++
 src/lib/config.ts               |  2 +-
 src/lib/server/config.ts        |  6 ++---
 src/routes/+page.svelte         | 13 ++++++-----
 5 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/Brand.svelte

diff --git a/src/config.yml b/src/config.yml
index 2ab3a21..39a9eff 100644
--- a/src/config.yml
+++ b/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'
diff --git a/src/lib/components/Brand.svelte b/src/lib/components/Brand.svelte
new file mode 100644
index 0000000..0d29e54
--- /dev/null
+++ b/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>
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 753016b..65b13a1 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,7 +1,7 @@
 export interface BrandConfig {
 	logo?: string;
 	icon?: string;
-	usemask?: boolean;
+	asmask?: boolean;
 }
 
 export interface SectionConfig extends BrandConfig {
diff --git a/src/lib/server/config.ts b/src/lib/server/config.ts
index d32e80f..afc1acd 100644
--- a/src/lib/server/config.ts
+++ b/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]
 };
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4390733..cf44d90 100644
--- a/src/routes/+page.svelte
+++ b/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}