Custom website names, and capture logo and aspect ratio in Kubernetes

kubernetes/loculus/templates/_common-metadata.tpl

@@ -31,6 +31,7 @@ fields:
 {{/* Generate website config from passed config object */}}
 {{- define "loculus.generateWebsiteConfig" }}
 name: {{ $.Values.name }}
+logo: {{ $.Values.logo | toYaml | nindent 6 }}
 accessionPrefix: {{ $.Values.accessionPrefix }}
 {{- $commonMetadata := (include "loculus.commonMetadata" . | fromYaml).fields }}
 instances:

kubernetes/loculus/values.yaml

@@ -5,6 +5,10 @@ disablePreprocessing: false
 siloImportLimitSeconds: 3600
 accessionPrefix: "LOC_"
 name: "Loculus"
+logo:
+  url: "/favicon.svg"
+  width: 100
+  height: 100
 instances:
   dummy-organism:
     schema:

website/src/config.ts

@@ -18,7 +18,7 @@ function getConfigDir(): string {
     return configDir;
 }
 
-function getWebsiteConfig(): WebsiteConfig {
+export function getWebsiteConfig(): WebsiteConfig {
     if (_config === null) {
         _config = readTypedConfigFile('website_config.json', websiteConfig);
     }

website/src/layouts/BaseLayout.astro

@@ -2,7 +2,10 @@
 import '../styles/base.scss';
 import Navigation from '../components/Navigation/Navigation.astro';
 import OrganismSelector from '../components/Navigation/OrganismSelector.astro';
+import { getWebsiteConfig } from '../config';
 import { navigationItems } from '../routes';
+const websiteConfig = getWebsiteConfig();
+const { name: websiteName, logo } = websiteConfig;
 
 interface Props {
     title: string;
@@ -26,8 +29,17 @@ const { title } = Astro.props;
                     <div class='flex justify-start'>
                         <div class='flex flex-col'>
                             <div class='flex flex-row pb-3'>
-                                <a href='/'><img class='h-8 mr-4' src='/favicon.svg' alt='icon' /></a>
-                                <a href='/' class='fancytitle mr-4'>Loculus</a>
+                                <a href='/'
+                                    ><img
+                                        class='h-8 mr-4'
+                                        src={logo.url}
+                                        alt='icon'
+                                        style={{
+                                            aspectRatio: `${logo.width}/${logo.height}`,
+                                        }}
+                                    /></a
+                                >
+                                <a href='/' class='fancytitle mr-4'>{websiteName}</a>
                             </div>
                             <OrganismSelector />
                         </div>

website/src/types/config.ts

@@ -41,7 +41,15 @@ export const instanceConfig = z.object({
 });
 export type InstanceConfig = z.infer<typeof instanceConfig>;
 
+const logoConfig = z.object({
+    url: z.string(),
+    width: z.number(),
+    height: z.number(),
+});
+
 export const websiteConfig = z.object({
     instances: z.record(instanceConfig),
+    name: z.string(),
+    logo: logoConfig,
 });
 export type WebsiteConfig = z.infer<typeof websiteConfig>;

website/src/types/runtimeConfig.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+export const name = z.string().min(1);
+
 const serviceUrls = z.object({
     backendUrl: z.string(),
     lapisUrls: z.record(z.string(), z.string()),