chore(ui): modularize the website

package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.48.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/node": "^24.9.1",
 		"svelte-check": "^4.3.3",
 		"typescript": "^5.9.3",
 		"vite": "^7.1.12"

pnpm-lock.yaml

@@ -14,13 +14,16 @@ importers:
     devDependencies:
       '@sveltejs/adapter-static':
         specifier: ^3.0.10
-        version: 3.0.10(@sveltejs/kit@2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))
+        version: 3.0.10(@sveltejs/kit@2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))
       '@sveltejs/kit':
         specifier: ^2.48.2
-        version: 2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))
+        version: 2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.1
-        version: 6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))
+        version: 6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
+      '@types/node':
+        specifier: ^24.9.1
+        version: 24.9.1
       svelte-check:
         specifier: ^4.3.3
         version: 4.3.3(picomatch@4.0.3)(svelte@5.42.3)(typescript@5.9.3)
@@ -29,7 +32,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^7.1.12
-        version: 7.1.12(sass@1.80.4)
+        version: 7.1.12(@types/node@24.9.1)(sass@1.80.4)
 
 packages:
 
@@ -447,6 +450,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/node@24.9.1':
+    resolution: {integrity: sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==}
+
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -650,6 +656,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
   vite@7.1.12:
     resolution: {integrity: sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -935,15 +944,15 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-static@3.0.10(@sveltejs/kit@2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))':
+  '@sveltejs/adapter-static@3.0.10(@sveltejs/kit@2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))':
     dependencies:
-      '@sveltejs/kit': 2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))
+      '@sveltejs/kit': 2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
 
-  '@sveltejs/kit@2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))':
+  '@sveltejs/kit@2.48.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))':
     dependencies:
       '@standard-schema/spec': 1.0.0
       '@sveltejs/acorn-typescript': 1.0.6(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -956,26 +965,26 @@ snapshots:
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
       svelte: 5.42.3
-      vite: 7.1.12(sass@1.80.4)
+      vite: 7.1.12(@types/node@24.9.1)(sass@1.80.4)
 
-  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))':
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
       debug: 4.4.3
       svelte: 5.42.3
-      vite: 7.1.12(sass@1.80.4)
+      vite: 7.1.12(@types/node@24.9.1)(sass@1.80.4)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))':
+  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(sass@1.80.4))
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)))(svelte@5.42.3)(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
       debug: 4.4.3
       deepmerge: 4.3.1
       magic-string: 0.30.21
       svelte: 5.42.3
-      vite: 7.1.12(sass@1.80.4)
+      vite: 7.1.12(@types/node@24.9.1)(sass@1.80.4)
-      vitefu: 1.1.1(vite@7.1.12(sass@1.80.4))
+      vitefu: 1.1.1(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4))
     transitivePeerDependencies:
       - supports-color
 
@@ -983,6 +992,10 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/node@24.9.1':
+    dependencies:
+      undici-types: 7.16.0
+
   acorn@8.15.0: {}
 
   aria-query@5.3.2: {}
@@ -1211,7 +1224,9 @@ snapshots:
 
   typescript@5.9.3: {}
 
-  vite@7.1.12(sass@1.80.4):
+  undici-types@7.16.0: {}
+
+  vite@7.1.12(@types/node@24.9.1)(sass@1.80.4):
     dependencies:
       esbuild: 0.25.11
       fdir: 6.5.0(picomatch@4.0.3)
@@ -1220,11 +1235,12 @@ snapshots:
       rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
+      '@types/node': 24.9.1
       fsevents: 2.3.3
       sass: 1.80.4
 
-  vitefu@1.1.1(vite@7.1.12(sass@1.80.4)):
+  vitefu@1.1.1(vite@7.1.12(@types/node@24.9.1)(sass@1.80.4)):
     optionalDependencies:
-      vite: 7.1.12(sass@1.80.4)
+      vite: 7.1.12(@types/node@24.9.1)(sass@1.80.4)
 
   zimmerframe@1.1.4: {}

src/lib/About.svelte

@@ -1,5 +1,10 @@
+<script lang="ts">
+  import { site } from "./site.config";
+  const mailto = `mailto:${site.contactEmail}`;
+</script>
+
 <section>
-  <div style="margin: 0.5rem 0;">Owner: Arlind Sulejmani</div>
+  <div style="margin: 0.5rem 0;">Owner: {site.ownerName}</div>
-  <div style="margin: 0.5rem 0;">Contact: <a href="mailto:arlind@sulej.ch">arlind@sulej.ch</a></div>
+  <div style="margin: 0.5rem 0;">Contact: <a href={mailto}>{site.contactEmail}</a></div>
 </section>
 

src/lib/Footer.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
   import type { VersionInfo } from "./version";
+  import { site, currentYear } from "./site.config";
   export let versionInfo: VersionInfo;
 </script>
 
 <footer>
   <div style="display: inline-flex; align-items: baseline; gap: 1rem; margin: 1rem 0 0;">
-    <small>© 2025 sulej.ch</small>
+    <small>© {currentYear} {site.domain}</small>
     <small>
-      <a class="version-link" href="https://github.com/Arlind-dev/sulej.ch">
+      {#if site.githubRepo}
+        <a class="version-link" href={site.githubRepo}>
           {versionInfo.version} <span class="commit">({versionInfo.commit})</span>
         </a>
+      {:else}
+        <span class="version-link" aria-label="App version">
+          {versionInfo.version} <span class="commit">({versionInfo.commit})</span>
+        </span>
+      {/if}
     </small>
   </div>
 </footer>

src/lib/Header.svelte

@@ -1,3 +1,9 @@
+<script lang="ts">
+  import { site } from "./site.config";
+  const title = `About ${site.siteTitle}`;
+  // Keep markup minimal and data-driven via config
+</script>
+
 <header>
-  <h1 style="margin: 0.5rem 0 1rem;">About sulej.ch</h1>
+  <h1 style="margin: 0.5rem 0 1rem;">{title}</h1>
 </header>

src/lib/site.config.ts

@@ -0,0 +1,17 @@
+export type SiteConfig = {
+  ownerName: string;
+  contactEmail: string;
+  domain: string; // e.g. "sulej.ch"
+  siteTitle: string; // e.g. "sulej.ch"
+  githubRepo?: string; // optional repo URL
+};
+
+export const site: SiteConfig = {
+  ownerName: "Arlind Sulejmani",
+  contactEmail: "arlind@sulej.ch",
+  domain: "sulej.ch",
+  siteTitle: "sulej.ch",
+  githubRepo: "https://github.com/Arlind-dev/sulej.ch"
+};
+
+export const currentYear = new Date().getFullYear();

src/routes/+layout.svelte

@@ -1,11 +1,15 @@
-<script>
+<script lang="ts">
   import '../app.css';
+  import { site } from '../lib/site.config';
+  const title = site.siteTitle;
+  const description = `${site.siteTitle} — ${site.domain}`;
 </script>
 
 <svelte:head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>sulej.ch</title>
+  <title>{title}</title>
+  <meta name="description" content={description} />
 </svelte:head>
 
 <div style="min-height: 100vh; padding-top: clamp(1rem, 8vh, 6rem); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: clamp(1rem, 1.5vw, 1.5rem); padding-left: clamp(0.5rem, 2vw, 1.5rem); padding-right: clamp(0.5rem, 2vw, 1.5rem); padding-bottom: clamp(0.5rem, 2vw, 1.5rem); font-size: clamp(1rem, 1rem + 1vw, 1.5rem);">