Enhance routing and layout for site-specific pages. Added support for dynamic site routes, updated component imports, and improved layout styles for fullscreen display. Refactored navigation to utilize site data for dynamic button generation.

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { Button } from '$lib/components/ui/button';
+  import { sites, siteSlugs } from '$lib/sites';
 
   let { data }: { data: Record<string, unknown> } = $props();
 </script>
@@ -17,18 +18,12 @@
   <main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 sm:p-6">
     <h1 class="text-2xl font-semibold">Base</h1>
     <div class="flex w-full max-w-xs flex-col gap-3">
-      <a href="https://prism.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-        <Button class="h-16 w-full min-h-16" variant="outline">Prism</Button>
-      </a>
-      <a href="https://tasgrid.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-        <Button class="h-16 min-h-16 w-full" variant="outline">TasGrid</Button>
-      </a>
-      <a href="https://stackq.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-        <Button class="h-16 min-h-16 w-full" variant="outline">Stackq</Button>
-      </a>
-      <a href="https://hrm.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-        <Button class="h-16 min-h-16 w-full" variant="outline">HRM</Button>
-      </a>
+      {#each siteSlugs as slug}
+        {@const site = sites[slug]}
+        <a href="/{slug}" class="block">
+          <Button class="h-16 w-full min-h-16" variant="outline">{site.title}</Button>
+        </a>
+      {/each}
     </div>
   </main>
 {/if}

src/routes/HomeWithDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button';
+  import { sites, siteSlugs } from '$lib/sites';
 
   let { data: _data }: { data: Record<string, unknown> } = $props();
   // `_data` is accepted to mirror Stackq's pattern (unused for now).
@@ -7,20 +8,15 @@
 
 <main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 sm:p-6">
   <h1 class="w-full max-w-xs shrink-0 text-center text-2xl font-semibold">Base</h1>
-
   <div class="flex w-full max-w-xs shrink-0 flex-col gap-3">
-    <a href="https://prism.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-      <Button class="h-16 min-h-16 w-full" variant="outline">Prism</Button>
-    </a>
-    <a href="https://tasgrid.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-      <Button class="h-16 min-h-16 w-full" variant="outline">TasGrid</Button>
-    </a>
-    <a href="https://stackq.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-      <Button class="h-16 min-h-16 w-full" variant="outline">Stackq</Button>
-    </a>
-    <a href="https://hrm.ccllc.pro" class="block" target="_blank" rel="noopener noreferrer">
-      <Button class="h-16 min-h-16 w-full" variant="outline">HRM</Button>
-    </a>
+    {#each siteSlugs as slug}
+      {@const site = sites[slug]}
+      <a href="/{slug}" class="block">
+        <Button class="h-16 min-h-16 w-full" variant="outline">
+          {site.title}
+        </Button>
+      </a>
+    {/each}
   </div>
 </main>
 

src/routes/[site]/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children }: { children: import('svelte').Snippet } = $props();
+</script>
+
+<div class="site-fullscreen">
+  {@render children?.()}
+</div>

src/routes/[site]/+page.server.ts

@@ -0,0 +1,17 @@
+import { sites, type SiteSlug } from '$lib/sites';
+import { error } from '@sveltejs/kit';
+
+export function load({ params }) {
+  const slug = params.site?.toLowerCase() as SiteSlug | undefined;
+  const site = slug && slug in sites ? sites[slug as SiteSlug] : null;
+
+  if (!site) {
+    throw error(404, `Unknown site: ${params.site}`);
+  }
+
+  return {
+    slug: slug as SiteSlug,
+    url: site.url,
+    title: site.title
+  };
+}

src/routes/[site]/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+
+  let { data }: {
+    data: { slug: string; url: string; title: string };
+  } = $props();
+</script>
+
+<svelte:head>
+  <title>{data.title} — Base</title>
+</svelte:head>
+
+<main class="relative flex-1 min-h-0 min-w-0 flex flex-col">
+  <iframe
+    id="app-iframe"
+    title={data.title}
+    src={data.url}
+    class="absolute inset-0 w-full h-full border-0 rounded-none"
+  />
+  <div
+    class="absolute top-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center pointer-events-none pt-[env(safe-area-inset-top)]"
+    aria-hidden="true"
+  >
+    <div class="pointer-events-auto">
+      <a href="/">
+        <Button type="button" variant="secondary" class="shadow-md">
+          Base
+        </Button>
+      </a>
+    </div>
+  </div>
+</main>

src/routes/layout.css

@@ -142,6 +142,18 @@
       min-height: 36px;
     }
   }
+  /* [site] iframe route: break out of shell and fill viewport */
+  .site-fullscreen {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100dvh;
+    min-height: 100dvh;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 }
 
 /* Use on icon-only links for 44px touch target */