feat: add index

app/app.config.ts

@@ -6,5 +6,12 @@ export default defineAppConfig({
     }
   },
   /** Tiles of the hub on `/`; each app adds its own in its layer's app.config.ts, keyed by the app name */
-  hub: {} as Record<string, HubApp>
+  hub: {} as Record<string, HubApp>,
+  /** External services, shown in their own section of the hub below the apps, in this order */
+  hubServices: [
+    { title: 'Paperless', icon: 'i-lucide-file-archive', href: 'https://paperless.huaqo.de/dashboard' },
+    { title: 'Gitea', icon: 'i-lucide-git-branch', href: 'https://gitea.huaqo.de/huaqo' },
+    { title: 'Baserow', icon: 'i-lucide-table', href: 'https://baserow.huaqo.de/workspace/83' },
+    { title: 'Jellyfin', icon: 'i-lucide-clapperboard', href: 'https://jellyfin.huaqo.de' }
+  ] as HubService[]
 })

app/pages/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 useHead({ title: 'huaqo.de' })
 
-const { hub } = useAppConfig()
+const { hub, hubServices } = useAppConfig()
 
 const apps = computed(() => Object.values(hub as Record<string, HubApp>).sort((a, b) => a.title.localeCompare(b.title, 'de')))
 </script>
@@ -32,6 +32,30 @@ const apps = computed(() => Object.values(hub as Record<string, HubApp>).sort((a
           </NuxtLink>
         </li>
       </ul>
+
+      <template v-if="hubServices.length">
+        <h2 class="mt-10 mb-3 text-sm font-medium text-muted">
+          Dienste
+        </h2>
+        <ul class="grid gap-3 sm:grid-cols-2">
+          <li v-for="service in hubServices" :key="service.href">
+            <a
+              :href="service.href"
+              target="_blank"
+              rel="noopener"
+              class="group flex h-full items-center gap-4 rounded-lg border border-default p-4 transition-colors hover:border-primary hover:bg-elevated/50 focus-visible:outline-2 focus-visible:outline-primary"
+            >
+              <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                <UIcon :name="service.icon" class="size-5" />
+              </span>
+              <span class="flex min-w-0 items-center gap-1.5 font-medium text-highlighted">
+                {{ service.title }}
+                <UIcon name="i-lucide-external-link" class="size-3.5 text-muted" aria-label="Öffnet in neuem Tab" />
+              </span>
+            </a>
+          </li>
+        </ul>
+      </template>
     </UContainer>
   </UMain>
 </template>