Update

web/src/routes/+page.svelte

@@ -1,5 +1,14 @@
 <script>
-  import spec from '$lib/spec.json'
+
+  import { onMount } from 'svelte'
+
+  let spec = null
+
+  onMount(async () => {
+
+    const resp = await fetch('https://sysinfo.gwei.cz/api/spec')
+    spec = await resp.json()
+  })
 
   const serverCols = [
     { title: 'Name', key: 'name' },
@@ -22,61 +31,67 @@
 </script>
 
 
+<svelte:head>
+	<title>sysinfo.gwei.cz</title>
+</svelte:head>
+
 <section class="mb-10">
   Overview of Gwei.cz servers and services
 </section>
 
-<section class="mb-10">
-  <h2 class="mb-4 text-xl font-bold">Servers</h2>
-  <table class="table-auto w-full text-sm">
-    <thead>
-      <tr class="">
-        {#each serverCols as col}
-          <th class="text-left pb-2">{col.title}</th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each spec.servers as item}
-        <tr>
+{#if spec}
+  <section class="mb-10">
+    <h2 class="mb-4 text-xl font-bold">Servers</h2>
+    <table class="table-auto w-full text-sm">
+      <thead>
+        <tr class="">
           {#each serverCols as col}
-            <td class="">{@html typeof col.key === 'string' ? item[col.key] : col.key(item)}</td>
+            <th class="text-left pb-2">{col.title}</th>
           {/each}
         </tr>
-      {/each}
-    </tbody>
-  </table>
-
-</section>
-
-<section>
-  <h2 class="mb-4 text-xl font-bold">Services</h2>
-  <table class="table-auto w-full text-sm">
-    <thead>
-      <tr class="">
-        {#each cols as col}
-          <th class="text-left pb-2">{col.title}</th>
+      </thead>
+      <tbody>
+        {#each spec.servers as item}
+          <tr>
+            {#each serverCols as col}
+              <td class="">{@html typeof col.key === 'string' ? item[col.key] : col.key(item)}</td>
+            {/each}
+          </tr>
         {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each spec.services as service}
-        <tr>
+      </tbody>
+    </table>
+
+  </section>
+
+  <section>
+    <h2 class="mb-4 text-xl font-bold">Services</h2>
+    <table class="table-auto w-full text-sm">
+      <thead>
+        <tr class="">
           {#each cols as col}
-            <td class="">{@html typeof col.key === 'string' ? service[col.key] : col.key(service)}</td>
+            <th class="text-left pb-2">{col.title}</th>
           {/each}
         </tr>
-      {/each}
-    </tbody>
-  </table>
-</section>
+      </thead>
+      <tbody>
+        {#each spec.services as service}
+          <tr>
+            {#each cols as col}
+              <td class="">{@html typeof col.key === 'string' ? service[col.key] : col.key(service)}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </section>
 
-<section class="mt-16 text-base">
-  Generated {spec.time}
-   | <a href="https://sysinfo.gwei.cz/spec.json" class="underline hover:no-underline">spec.json</a>
-   | <a href="https://git.gwei.cz/gweicz/sysinfo" class="underline hover:no-underline">source code</a>
-</section>
+  <section class="mt-16 text-base">
+    Generated {spec.time}
+     | <a href="https://sysinfo.gwei.cz/api/spec" class="underline hover:no-underline">api</a>
+     | <a href="https://git.gwei.cz/gweicz/sysinfo" class="underline hover:no-underline">source code</a>
+  </section>
 
-<!--section class="pt-60">
-  <code><pre>{JSON.stringify(spec, null, 2)}</pre></code>
-</section-->
+  <!--section class="pt-60">
+    <code><pre>{JSON.stringify(spec, null, 2)}</pre></code>
+  </section-->
+{/if}