Merge pull request #46 from sdsc-ordes/feat/add-logos-and-links

Feat/add logos and links

Author: sabinem

src/lib/components/Footer.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { base } from '$app/paths';
+  import { publicConfig } from '$lib/config';
+</script>
+<footer class="p-8 md:p-12 flex flex-col items-center gap-8 bg-surface-100 dark:bg-surface-800">
+    <div class="flex flex-wrap justify-center items-center gap-10 md:gap-16">
+        <a href="{publicConfig.PUBLIC_SWISSCAT_URL}" target="_blank" rel="noopener" class="opacity-75 hover:opacity-100 transition-opacity">
+            <img
+                src="{base}/catplus-logo.png"
+                alt="CAT Plus at EPFL"
+                class="h-14 w-auto"
+            />
+        </a>
+        <a href="{publicConfig.PUBLIC_SDSC_URL}" target="_blank" rel="noopener" class="opacity-75 hover:opacity-100 transition-opacity">
+            <img
+                src="{base}/logo-sdsc.png"
+                alt="SDSC Swiss Data Science Center"
+                class="h-14 w-auto"
+            />
+        </a>
+    </div>
+
+    <p class="text-sm text-surface-500 dark:text-surface-400">
+        Chemboard 2025
+    </p>
+
+</footer>

src/lib/components/Header.svelte

@@ -1,24 +1,34 @@
 <script lang="ts">
 	import { AppBar } from '@skeletonlabs/skeleton-svelte';
 	import { base } from '$app/paths';
-	import Paperclip from '@lucide/svelte/icons/paperclip';
-	import Calendar from '@lucide/svelte/icons/calendar';
 	import Home from '@lucide/svelte/icons/home';
 	import Database from '@lucide/svelte/icons/database';
-	import CircleUser from '@lucide/svelte/icons/circle-user';
 	import Search from '@lucide/svelte/icons/search';
+	import { publicConfig } from '$lib/config';
 </script>
 
-<AppBar classes="flex items-left">
+<AppBar 
+    classes="flex items-left"
+	gridColumns="grid-cols-3"
+    slotLead="place-self-start"
+    slotDefault="place-self-center"
+    slotTrail="place-self-end"
+    class="p-4"
+>
 	{#snippet lead()}
 	    <a href="{base}/" class="flex items-center mx-4 gap-x-2"><Home size={20} />Home</a>
 	    <a href="{base}/search" class="flex items-center mx-4 gap-x-2"><Search size={20} />Search</a>
 		<a href="{base}/data" class="flex items-center mx-4 gap-x-2"><Database size={20} />Data</a>
 	{/snippet}
+	<span class="text-2xl font-bold">HT Chemboard</span>
 	{#snippet trail()}
-		<Paperclip size={20} />
-		<Calendar size={20} />
-		<CircleUser size={20} />
+		<a href="{publicConfig.PUBLIC_CHEMBOARD_GITHUB_URL}"
+		   target="_blank" rel="noopener" class="opacity-75 hover:opacity-100 transition-opacity">
+			<img
+				src="{base}/github-mark.png"
+				alt="Github repository"
+				class="h-10 w-auto"
+			/>
+		</a>
 	{/snippet}
-	<span>CAT+ Chemboard</span>
 </AppBar>

src/lib/config.ts

@@ -121,13 +121,19 @@ export const publicConfig = {
   PUBLIC_QLEVER_UI_URL: publicEnv.PUBLIC_QLEVER_UI_URL || process.env.PUBLIC_QLEVER_UI_URL,
   PUBLIC_CATPLUS_ONTOLOGY_URL: publicEnv.PUBLIC_CATPLUS_ONTOLOGY_URL || process.env.PUBLIC_CATPLUS_ONTOLOGY_URL,
   PUBLIC_RESULTS_PER_PAGE: parseInt(publicEnv.PUBLIC_RESULTS_PER_PAGE || process.env.PUBLIC_RESULTS_PER_PAGE),
+  PUBLIC_SWISSCAT_URL: publicEnv.PUBLIC_SWISSCAT_URL || process.env.PUBLIC_SWISSCAT_URL,
+  PUBLIC_SDSC_URL: publicEnv.PUBLIC_SDSC_URL || process.env.PUBLIC_SDSC_URL,
+  PUBLIC_CHEMBOARD_GITHUB_URL: publicEnv.PUBLIC_CHEMBOARD_GITHUB_URL || process.env.PUBLIC_CHEMBOARD_GITHUB_URL,
 }
 
 export function validatePublicConfiguration(): void {
     const requiredPaths = [
         'PUBLIC_QLEVER_UI_URL',
         'PUBLIC_CATPLUS_ONTOLOGY_URL',
         'PUBLIC_RESULTS_PER_PAGE',
+        'PUBLIC_SWISSCAT_URL',
+        'PUBLIC_SDSC_URL',
+        'PUBLIC_CHEMBOARD_GITHUB_URL'
     ];
 
     const missingVars: string[] = [];

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import Header from '$lib/components/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 
 	let { children } = $props();
 </script>
@@ -11,5 +12,5 @@
 		<Header />
 	</header>
 	{@render children()}
-	<footer class="p-4 text-center">Chemboard 2025</footer>
+	<Footer />
 </div>

src/routes/+page.svelte

@@ -6,7 +6,6 @@
 </script>
 
 {#snippet sidebar()}
-	<h1 class="mb-6 text-2xl font-bold text-surface-800-200">Cat Plus</h1>
 	<section class="space-y-4">
 		<div class="card preset-filled-surface-100-900 w-full max-w-md p-4 text-center">
 			<img
@@ -36,12 +35,13 @@
 {/snippet}
 
 {#snippet main()}
-	<h1 class="mb-6 p-4 text-2xl font-bold text-surface-800-200">An automated Catalysis Lab</h1>
-	<h2 class="mb-6 p-4 text-xl font-bold"><a href="{base}/data" class="text-primary-500">Explore the data</a></h2>
+<div class="space-y-6">
+	<h1 class="text-2xl font-bold text-surface-800-200">Cat+:An automated Catalysis Lab</h1>
+	<h2 class="text-xl font-bold"><a href="{base}/data" class="text-primary-500">Explore the data</a></h2>
 	<p>Explore the campaigns by year / month / day</p>
-	<h2 class="mb-6 p-4 text-xl font-bold"><a href="{base}/search" class="text-primary-500">Search in the Campaigns</a></h2>
+	<h2 class="text-xl font-bold"><a href="{base}/search" class="text-primary-500">Search in the Campaigns</a></h2>
 	<p>You can search Campaigns by a variety of search criteria:</p>
-	<ul class="mb-6 p-4 list-disc">
+	<ul class="list-disc list-inside space-y-2">
 		<li>Campaign Name</li>
 		<li>Reaction Type</li>
 		<li>Reaction Name</li>
@@ -50,7 +50,7 @@
 		<li>SMILES</li>
 		<li>Device</li>
 	</ul>
-	<h2 class="mb-6 p-4 text-xl font-bold">Search with Sparql</h2>
+	<h2 class="text-xl font-bold">Search with Sparql</h2>
 	<p class="leading-normal">
 		You can use our
 		<a
@@ -61,7 +61,9 @@
 			<ExternalLink class="h-4 w-4" />
 			<span class="ml-1">Sparql Endpoint</span>
 		</a>
-		to query the data directly via Sparql. See the
+		to query the data directly via Sparql.
+	</p>
+	<p>See the
 		<a
 		href="{publicConfig.PUBLIC_CATPLUS_ONTOLOGY_URL}"
 		target="_blank"
@@ -71,7 +73,7 @@
 			<span class="ml-1">Catplus Ontology</span>
 		</a> for more information on our data model.
 	</p>
-
+</div>
 {/snippet}
 
 <ContentLayout {sidebar} {main} />

static/catplus-logo.png

@@ -18,3 +18,6 @@ data:
   QLEVER_UI_URL: #@ data.values.app.qleverUiUrl
   CATPLUS_ONTOLOGY_URL: #@ data.values.app.catplusOntologyUrl
   RESULTS_PER_PAGE: #@ data.values.app.resultsPerPage
+  SWISSCAT_URL: #@ data.values.app.swisscatUrl
+  SDSC_URL: #@ data.values.app.sdscUrl
+  CHEMBOARD_GITHUB_URL: #@ data.values.app.chemboardGithubUrl

static/github-mark.png

@@ -58,6 +58,21 @@ spec:
             configMapKeyRef:
               name: #@ data.values.name + "-config"
               key: QLEVER_UI_URL
+        - name: PUBLIC_SDSC_URL
+          valueFrom:
+            configMapKeyRef:
+              name: #@ data.values.name + "-config"
+              key: SDSC_URL
+        - name: PUBLIC_SWISSCAT_URL
+          valueFrom:
+            configMapKeyRef:
+              name: #@ data.values.name + "-config"
+              key: SWISSCAT_URL
+        - name: PUBLIC_CHEMBOARD_GITHUB_URL
+          valueFrom:
+            configMapKeyRef:
+              name: #@ data.values.name + "-config"
+              key: CHEMBOARD_GITHUB_URL
         - name: PUBLIC_CATPLUS_ONTOLOGY_URL
           valueFrom:
             configMapKeyRef: