1 files changed, 38 insertions, 0 deletions
diff --git a/docs/components/app/AppLayout.vue b/docs/components/app/AppLayout.vue
new file mode 100644
index 0000000..97a8d26
--- /dev/null
+++ b/docs/components/app/AppLayout.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { config } = useDocus()
+
+useHead({
+  titleTemplate: config.value.titleTemplate,
+  meta: [
+    { name: 'twitter:card', content: 'summary_large_image' }
+  ]
+})
+
+watch(
+  () => config.value.titleTemplate,
+  () => useHead({ titleTemplate: config.value.titleTemplate })
+)
+
+useContentHead(config.value as any)
+</script>
+
+<template>
+  <div class="app-layout">
+    <AppLoadingBar />
+    <AppHeader />
+    <main>
+      <slot />
+    </main>
+    <AppFooter />
+  </div>
+</template>
+
+<style lang="ts" scoped>
+css({
+  '.app-layout': {
+    main: {
+      minHeight: 'calc(100vh - {docus.header.height} - {docus.footer.height})',
+    }
+  }
+})
+</style>