<template>
  <div class="min-h-dvh">
    <NuxtLoadingIndicator color="hsl(12, 76%, 48%)" />
    <NuxtRouteAnnouncer />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>

    <ClientOnly>
      <PlayerPersistent />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
const { data: site } = await useSiteContent()

useHead({
  titleTemplate: (title) => {
    const siteName = site.value?.identity.name ?? 'Le Librodrome'
    return title ? `${title} — ${siteName}` : siteName
  },
  meta: [
    { name: 'description', content: site.value?.identity.description ?? '' },
  ],
})
</script>
