Start splitting in component the page.

src/lib/components/ServiceCard.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { ServiceConfig } from '$lib/config';
+	import { getServiceComponent } from '$lib/services/services';
+
+	export let service: ServiceConfig;
+	export let data: any;
+
+	const component = getServiceComponent(service.type || '');
+</script>
+
+<p>{service.title}</p>
+{#if component != undefined}
+	<svelte:component this={component} {data} />
+{/if}

src/lib/components/ServiceGroup.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { ServiceGroupConfig } from '$lib/config';
+	import ServiceCard from './ServiceCard.svelte';
+
+	export let group: ServiceGroupConfig;
+	export let groupData: Array<unknown>;
+</script>
+
+{#each group.items as service, i}
+	<ServiceCard {service} data={groupData[i]} />
+{/each}

src/lib/config.ts

@@ -0,0 +1,30 @@
+export interface BrandConfig {
+	logo?: string;
+	icon?: string;
+	usemask?: boolean;
+}
+
+export interface SectionConfig extends BrandConfig {
+	title: string;
+	subtitle?: string;
+}
+
+export interface ServiceConfig extends SectionConfig {
+	url: string;
+	target?: string;
+	type?: string;
+
+	[x: string]: unknown;
+}
+
+export interface ServiceGroupConfig extends SectionConfig {
+	items: Array<ServiceConfig>;
+
+	[x: string]: unknown;
+}
+
+export interface Config extends SectionConfig {
+	services: Array<ServiceGroupConfig>;
+
+	[x: string]: unknown;
+}

src/lib/server/config.ts

@@ -2,37 +2,7 @@ import { writable, type Readable, type Writable, derived } from 'svelte/store';
 import configData from '../../config.yml';
 import { readFile, watch } from 'fs/promises';
 import * as yml from 'js-yaml';
-
-export interface BrandConfig {
-	logo?: string;
-	icon?: string;
-	usemask?: boolean;
-}
-
-export interface SectionConfig extends BrandConfig {
-	title: string;
-	subtitle?: string;
-}
-
-export interface ServiceConfig extends SectionConfig {
-	url: string;
-	target?: string;
-	type?: string;
-
-	[x: string]: unknown;
-}
-
-export interface ServiceGroupConfig extends SectionConfig {
-	items: Array<ServiceConfig>;
-
-	[x: string]: unknown;
-}
-
-export interface Config extends SectionConfig {
-	services: Array<ServiceGroupConfig>;
-
-	[x: string]: unknown;
-}
+import type { Config, ServiceConfig, ServiceGroupConfig } from '$lib/config';
 
 const requiredService: Required<ServiceConfig> = {
 	title: '',