Create article layout

components/TableOfContent.vue

+<script setup lang="ts">
+const props = defineProps<{
+  links: any;
+  depth: {
+    type: number;
+    default: 2;
+  };
+}>();
+
+// const { navigation } = useContent();
+// console.log(navigation.value);
+</script>
+
+<template>
+  <template v-for="link in props.links">
+    <v-list-item
+      nav
+      :title="link.text"
+      :value="link.id"
+      :href="`#${link.id}`"
+      variant="plain"
+    >
+      <template v-if="link?.children && links.depth <= props.depth">
+        <TableOfContent :links="link.children" />
+      </template>
+    </v-list-item>
+  </template>
+</template>

content/1.introduction/index.md

 ---
 title: Introduction
-layout: custom
+layout: article
 ---
 
 # Introduction

content/2.defense-systems/0.index.md

 ---
 title: List of defense systems
+layout: article
 ---
 
 # List of defense systems

content/2.defense-systems/1.PARIS.md

 ---
 title: Paris
 toc: true
-layout: custom
+layout: article
 ---
 
 # PARIS system
@@ -56,10 +56,10 @@ Paris type II merge system in _Desulfovibrio desulfuricans_ (GCF\__000025705.1).
 
 3. Studier FW. Gene 0.3 of bacteriophage T7 acts to overcome the DNA restriction system of the host. J Mol Biol. 1975 May 15;94(2):283-95. doi: 10.1016/0022-2836(75)90083-2. PMID: 1095770.
 
-## ::references-list
+<!-- ## ::references-list
 
 items: - 10.1101/2021.01.21.427644 - 10.1093/nar/gkaa290 - 10.1016/0022-2836(75)90083-2
 
 ---
 
-::
+:: -->

layouts/article.vue

+<template>
+  <v-card>
+    <v-app>
+      <v-app-bar>
+        <v-app-bar-nav-icon
+          variant="text"
+          @click.stop="drawer = !drawer"
+        ></v-app-bar-nav-icon>
+        <v-toolbar-title>Microbial Warefare</v-toolbar-title>
+      </v-app-bar>
+
+      <v-navigation-drawer v-model="drawer">
+        <v-card flat>
+          <v-list>
+            <Navigation :navigation="navigation" />
+          </v-list>
+        </v-card>
+      </v-navigation-drawer>
+      <v-navigation-drawer location="right" permanent>
+        <v-list> <TableOfContent :links="page.body.toc.links" /> </v-list
+      ></v-navigation-drawer>
+      <v-main style="min-height: 300px">
+        <v-container>
+          <slot />
+
+          <v-footer app>footer</v-footer>
+        </v-container></v-main
+      >
+    </v-app>
+  </v-card>
+</template>
+<script setup lang="ts">
+const { navigation, page, surround, globals } = useContent();
+console.log(page.value);
+
+const drawer = ref(true);
+</script>