<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 paletteStore = usePaletteStore()
onMounted(() => paletteStore.applyToDOM())

useHead({
  titleTemplate: (title) => {
    return title ? `${title} — Le Librodrome` : 'Le librodrome'
  },
  meta: [
    { name: 'description', content: 'Une économie du don — enfin concevable. Un livre et des chansons, lecture guidée et écoute libre.' },
  ],
})
</script>
