<script setup lang="ts">
import { useData } from "vitepress";

import TopBar from "./TopBar.vue";
import Home from "./Home.vue";
import NotFound from "./NotFound.vue";
import Footer from "./Footer.vue";

// https://vitepress.dev/reference/runtime-api#usedata
const { frontmatter, page } = useData();
</script>

<template>
  <div class="custom-layout">
    <TopBar />
    <div class="content-container" v-if="frontmatter.home">
      <Home />
    </div>
    <NotFound v-else-if="page.isNotFound" />
    <div class="content-container" v-else>
      <Content />
    </div>
    <Footer />
  </div>
</template>

<style scoped>
.custom-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-container {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
</style>
