add boxes

components/Nav/Navbar.vue

@@ -13,8 +13,6 @@ function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
 }
 
-
-
 const sections = ref([
   {
     id: "webservice",
@@ -27,20 +25,6 @@ const sections = ref([
 ]);
 
 
-// const computedSections = computed(() => {
-//   return sections.value.map(section => {
-
-//     if (section?.to) {
-//       const { refinedUrl } = useRefinedUrl(section.to)
-//       return { ...section, to: refinedUrl.value }
-//     }
-//     else {
-//       return section
-//     }
-
-
-//   })
-// })
 
 
 const drawer = ref(true);

components/content/Alert/Danger.vue

+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Danger'
+});
+</script>
+
+<template>
+    <v-alert type="error" border="start" variant="tonal" class="my-2" prominent :title="title">
+        <slot></slot>
+    </v-alert>
+</template>

components/content/Alert/ExpansionDetails.vue

+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Details'
+});
+
+
+import { useTheme } from "vuetify";
+const theme = useTheme();
+
+
+</script>
+<template>
+    <div>
+        <v-expansion-panels>
+            <v-expansion-panel>
+                <v-expansion-panel-title class=" text-h6">
+                    {{ title }}
+                </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                    <slot></slot>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>

components/content/Alert/Info.vue

+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Info'
+});
+</script>
+
+<template>
+    <v-alert type="info" border="start" variant="tonal" class="my-2" prominent :title="title">
+        <slot></slot>
+    </v-alert>
+</template>

components/content/Alert/Tip.vue

+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Tip'
+});
+</script>
+<template>
+    <v-alert color="primary" border-color="primary" border="start" variant="tonal" class="my-2" prominent :title="title"
+        icon="md:lightbulb">
+        <slot></slot>
+    </v-alert>
+</template>

components/content/Alert/Warning.vue

+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Warning'
+});
+</script>
+<template>
+    <v-alert type="warning" border="start" variant="tonal" class="my-2" prominent :title="title">
+        <slot></slot>
+    </v-alert>
+</template>

content/3.defense-systems/abi2.md

@@ -19,7 +19,7 @@ The Abi2 system is composed of one protein: Abi_2.
 
 Here is an example found in the RefSeq database: 
 
-![abi2](/abi2/Abi2.svg){max-width=750px}
+![abi2](/abi2/Abi2.svg)
 
 Abi2 system in the genome of *Clostridium butyricum* (GCF_014131795.1) is composed of 1 protein: Abi_2 (WP_035763709.1).
 
@@ -29,7 +29,7 @@ The Abi2 system is present in a total of 176 different species.
 
 Among the 22k complete genomes of RefSeq, this system is present in 1210 genomes (5.3 %).
 
-![abi2](/abi2/Distribution_Abi2.svg){max-width=750px}
+![abi2](/abi2/Distribution_Abi2.svg)
 
 *Proportion of genome encoding the Abi2 system for the 14 phyla with more than 50 genomes in the RefSeq database.* 
 

nuxt.config.ts

@@ -11,6 +11,16 @@ export default defineNuxtConfig({
   content: {
     documentDriven: {
       injectPage: false,
+    },
+    highlight: {
+      theme: {
+        // Default theme (same as single string)        
+        default: 'github-light',
+        // Theme used if `html.dark`        
+        dark: 'github-dark',
+        // Theme used if `html.sepia`        
+        sepia: 'monokai'
+      }
     }
   },
   vuetify: {