From fb1710e0380c4e76860fdd2c1b8caf4ccf56aa0c Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 19 Oct 2023 14:30:16 +0200
Subject: [PATCH] add boxes
---
components/Nav/Navbar.vue | 16 ----------
components/content/Alert/Danger.vue | 15 ++++++++++
components/content/Alert/ExpansionDetails.vue | 29 +++++++++++++++++++
components/content/Alert/Info.vue | 15 ++++++++++
components/content/Alert/Tip.vue | 15 ++++++++++
components/content/Alert/Warning.vue | 14 +++++++++
content/3.defense-systems/abi2.md | 4 +--
nuxt.config.ts | 10 +++++++
8 files changed, 100 insertions(+), 18 deletions(-)
create mode 100644 components/content/Alert/Danger.vue
create mode 100644 components/content/Alert/ExpansionDetails.vue
create mode 100644 components/content/Alert/Info.vue
create mode 100644 components/content/Alert/Tip.vue
create mode 100644 components/content/Alert/Warning.vue
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index cf7f51d2..f580e4c8 100644
--- a/components/Nav/Navbar.vue
+++ b/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);
diff --git a/components/content/Alert/Danger.vue b/components/content/Alert/Danger.vue
new file mode 100644
index 00000000..f66b8e8e
--- /dev/null
+++ b/components/content/Alert/Danger.vue
@@ -0,0 +1,15 @@
+<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>
diff --git a/components/content/Alert/ExpansionDetails.vue b/components/content/Alert/ExpansionDetails.vue
new file mode 100644
index 00000000..62823929
--- /dev/null
+++ b/components/content/Alert/ExpansionDetails.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/components/content/Alert/Info.vue b/components/content/Alert/Info.vue
new file mode 100644
index 00000000..4d804852
--- /dev/null
+++ b/components/content/Alert/Info.vue
@@ -0,0 +1,15 @@
+<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>
diff --git a/components/content/Alert/Tip.vue b/components/content/Alert/Tip.vue
new file mode 100644
index 00000000..f9e390e2
--- /dev/null
+++ b/components/content/Alert/Tip.vue
@@ -0,0 +1,15 @@
+<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>
diff --git a/components/content/Alert/Warning.vue b/components/content/Alert/Warning.vue
new file mode 100644
index 00000000..c5fc34a2
--- /dev/null
+++ b/components/content/Alert/Warning.vue
@@ -0,0 +1,14 @@
+<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>
diff --git a/content/3.defense-systems/abi2.md b/content/3.defense-systems/abi2.md
index ee06af70..7e1d4617 100644
--- a/content/3.defense-systems/abi2.md
+++ b/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:
-{max-width=750px}
+
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 %).
-{max-width=750px}
+
*Proportion of genome encoding the Abi2 system for the 14 phyla with more than 50 genomes in the RefSeq database.*
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2eac5520..2a61a770 100644
--- a/nuxt.config.ts
+++ b/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: {
--
GitLab