article.vue

<script setup lang="ts">
const { page } = useContent();
// import { useCustomTheme } from '~/composables/useCustomTheme'
import { useDisplay } from 'vuetify'


const scrollThreshold = ref(200)
const density = ref("prominent")
function onScroll(e) {
  if (window.scrollY > scrollThreshold.value) {
    density.value = "compact"
  }
  else { density.value = "prominent" }
}
</script>
<template>
  <VApp>

    <v-main style="min-height: 300px">

      <!-- <v-container class="fill-height w-auto" > -->
      <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
            <v-card-text> -->
      <v-container v-scroll="onScroll">
        <slot />
        <!-- </v-card-text>
          </v-card> -->
        <EditGitlab />
        <NavPrevNext />
      </v-container>
      <Footer></Footer>
    </v-main>
    <NavNavbar :density="density" />
    <NavTableOfContent :links="page.body.toc.links" />
    <nav-back-to-top />
  </VApp>
</template>

<style scoped>
#app-footer {
  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}
</style>