feat: add index

README.md

@@ -9,7 +9,8 @@ choice of light or dark applies to the whole site. The root only holds what apps
 
 - the shell (`app/app.vue`, global CSS, theme) and the hub on `/`: a tile per app (icon, title, a lock
   for the protected ones), sorted by title. Each app registers its tile in its own `app/app.config.ts` under
-  `hub.<name>` (`HubApp` in `shared/types/hub.ts`).
+  `hub.<name>` (`HubApp` in `shared/types/hub.ts`). Below them, a "Dienste" section links to external services
+  (Paperless, Gitea, Baserow, Jellyfin), listed in `hubServices` in `app/app.config.ts` and opened in a new tab.
 - the Baserow client `server/utils/baserow.ts` (`listRows`, `getRow`, `createRow`, `updateRow`, `deleteRow`,
   `listFields`, each taking a table ID). `NUXT_BASEROW_URL` and `NUXT_BASEROW_TOKEN` are shared; each app reads its
   own table IDs.

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>

shared/types/hub.ts

@@ -7,3 +7,11 @@ export interface HubApp {
   /** Behind the shared password; shows a lock */
   locked?: boolean
 }
+
+/** One external service on the hub (`/`), listed in its own section and opened in a new tab */
+export interface HubService {
+  title: string
+  /** Iconify name, e.g. 'i-lucide-git-branch' */
+  icon: string
+  href: string
+}