components/Nav/Navbar.vue

@@ -38,7 +38,7 @@ const computedNavigation = computed(() => {
 });
 </script>
 <template>
-  <v-app-bar :elevation="0" border density="prominent" scroll-behavior="hide">
+  <v-app-bar :elevation="0" border density="prominent" scroll-behavior="hide" scroll-threshold="150">
     <template #prepend>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->

components/Nav/TableOfContentItem.vue

 <script setup lang="ts">
 import { useTheme } from "vuetify";
-
+import { useRoute } from "#imports"
 const theme = useTheme();
-console.log(theme);
+// console.log(theme);
 const route = useRoute();
-
+// console.log(route)
 const props = defineProps<{
   links: any;
 }>();
 </script>
 <template>
   <template v-for="link in props.links">
-    <li
-      :title="link.text"
-      :value="link.id"
-      :class="[
-        `ps-${(link.depth - 1) * 3}`,
-        {
-          'text-primary': route.hash === `#${link.id}`,
-          'text-medium-emphasis': route.hash !== `#${link.id}`,
-        },
-      ]"
-      :style="{
-        'border-left':
-          route.hash === `#${link.id}`
-            ? `2px solid ${theme.current.value.colors.primary}`
-            : '2px solid #e5e5e5',
-      }"
-    >
-      <NuxtLink
-        :to="`#${link.id}`"
-        class="text-decoration-none"
-        style="color: inherit"
-        >{{ link.text }}</NuxtLink
-      >
+    <li :title="link.text" :value="link.id" :class="[
+      `ps-${(link.depth - 1) * 3}`,
+      {
+        'text-primary': route.hash === `#${link.id}`,
+        'text-medium-emphasis': route.hash !== `#${link.id}`,
+      },
+    ]" :style="{
+  'border-left':
+    route.hash === `#${link.id}`
+      ? `2px solid ${theme.current.value.colors.primary}`
+      : '2px solid #e5e5e5',
+}">
+      <NuxtLink :to="`#${link.id}`" class="text-decoration-none" style="color: inherit">{{ link.text }}</NuxtLink>
     </li>
     <template v-if="link?.children?.length > 0">
       <NavTableOfContentItem :links="link.children" />

components/content/ArticleReference.vue

+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+export interface Props {
+    index?: number;
+    doi: string;
+    divider?: boolean;
+    enumerate?: boolean;
+    title?: string;
+    abstract?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    enumerate: true,
+    divider: false,
+});
+const { article } = useFetchArticle(props.doi);
+const { mobile } = useDisplay();
+
+const articleTitle = computed(() => {
+    return props?.title ?? article?.value?.title ?? props.doi;
+});
+
+const articleAuthorsString = computed(() => {
+    // console.log(article.value)
+    // console.log(props.doi)
+    return article.value?.author?.length > 0 ? `${article.value.author[0].family} ${article.value.author[0].given} & al` : null
+})
+
+</script>
+<template>
+    <v-list-item v-if="article" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact" class="px-1">
+        <template #prepend v-if="!mobile && enumerate">
+            <v-avatar color="primary" size="small" density="compact" variant="tonal">
+                {{ props?.index ?? "#" }}
+            </v-avatar>
+        </template>
+
+        <template #title>
+            <span class="text-subtitle-1 font-weight-bold">{{
+                articleTitle
+            }}</span> <span class="text-caption">{{ articleAuthorsString }}</span>
+
+        </template>
+        <template #append v-if="!mobile">
+            <span> {{ article?.containerTitle ?? "no containerTitle" }} ({{
+                article?.year
+            }})</span>
+        </template>
+        <!-- <v-card flat color="transparent" density="compact" class="my-0">
+            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
+                <v-card-title><span class="text-subtitle-1 font-weight-bold">{{
+                    articleTitle
+                }}</span></v-card-title>
+                <v-card-subtitle>
+                    {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
+                <v-card-subtitle>
+                    {{ article?.containerTitle ?? "no containerTitle" }} ({{
+                        article?.year
+                    }})</v-card-subtitle>
+            </v-card-item>
+        </v-card> -->
+    </v-list-item>
+    <v-divider v-if="props.divider" inset></v-divider>
+</template>
\ No newline at end of file

components/content/Ref.vue

@@ -9,7 +9,7 @@ const { article } = useFetchArticle(props.doi);
   <v-chip
     v-if="article"
     variant="text"
-    :href="`#${props.doi}`"
+    :href="`#ref-${props.doi}`"
     class="pa-0 text-caption font-italic"
     >({{ article?.author[0]?.family ?? "test" }} et al,
     {{ article?.year }})</v-chip

components/content/References.vue

+<script setup lang="ts">
+import ProseH2 from '~/components/content/ProseH2'
+const { page } = useContent();
+const computedDois = computed(() => {
+    // console.log(page.value)
+    // console.log(page.value?.references)
+    if (page.value?.references?.length > 0) {
+        return page.value.references;
+    } else {
+        return [];
+    }
+});
+</script>
+<template>
+    <div v-if="computedDois?.length > 0">
+        <ProseH2 id="references">References</ProseH2>
+
+        <v-list density="compact">
+            <ArticleReference v-for="(item, index) in computedDois" :key="item.doi" :index="index + 1" :doi="item.doi"
+                :title="item?.title" :divider="item.divider" :abstract="item?.abstract" />
+        </v-list>
+    </div>
+</template>
\ No newline at end of file

components/content/ReferencesList.vue

-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useFetch as useFetchVueUse } from "@vueuse/core";
-
-// import { select, selectAll } from 'unist-util-select';
-
-const props = defineProps<{
-  items: string[];
-}>();
-
-
-
-const panel = ref([0, 1])
-const disabled = ref(false)
-const doiBaseUrl = ref(new URL("https://doi.org/"));
-const fetchedDoi = ref(
-  await Promise.all(
-    props.items.map(async (doi) => {
-      const url = new URL(`/works/${doi}`, "https://api.crossref.org/").href;
-      const { data, error } = await useFetchVueUse<{
-        message: {
-          DOI: string;
-          issue: number;
-          title: string;
-          author: Array<{ family: string; given: string }>;
-          "container-title-short": string;
-          "container-title": string;
-          abstract: string;
-          published: {
-            "date-parts": string[];
-          };
-        };
-      }>(url)
-        .get()
-        .json();
-      return data.value;
-    })
-  )
-);
-const computedItems = computed(() => {
-  return fetchedDoi.value.map((doi, i) => {
-    if (doi) {
-      const {
-        DOI,
-        title,
-        "container-title-short": cts,
-        "container-title": ct,
-        abstract,
-        published,
-        ...rest
-      } = doi.message;
-      let sanitizedAbstract = abstract
-      if (sanitizedAbstract) {
-        sanitizedAbstract = /\<jats\:p\>(.*)\<\/jats\:p\>/.exec(sanitizedAbstract)?.[1] ?? ''
-      }
-      return {
-        DOI,
-        title: title[0],
-        subtitle: toAuthorsString(doi?.message?.author ?? []),
-        containerTitle: cts?.length > 0 ? cts[0] : ct?.length > 0 ? ct[0] : "",
-        abstract: sanitizedAbstract,
-        year: published["date-parts"][0][0],
-        href: getReferenceUrl(DOI),
-        target: "_blank",
-        prependIcon: "mdi-newspaper-variant-outline",
-      };
-    } else {
-      return {};
-    }
-  });
-});
-
-function toAuthorsString(authors: Array<{ family: string; given: string }>) {
-  return authors
-    .map((curr) => {
-      return `${curr.family} ${curr.given}`;
-    })
-    .join(", ");
-}
-
-function getReferenceUrl(doi) {
-  return new URL(doi, doiBaseUrl.value).href;
-}
-</script>
-
-
-<template>
-  <ClientOnly fallback-tag="span" fallback="Loading references...">
-
-
-    <v-list v-if="computedItems.length > 0">
-      <v-list-item v-for="item in computedItems" :key="item.title" :title="item.title" lines="three" :href="item.href"
-        :target="item.target">
-        <template #title="{ title }">
-          <span class="font-weight-bold">{{ title }}</span>
-        </template>
-        <template #prepend>
-          <v-avatar>
-            <v-icon>{{ item.prependIcon }}</v-icon>
-          </v-avatar>
-        </template>
-        <template #subtitle>
-          <div>{{ item.subtitle }}</div>
-          <div>{{ item.containerTitle }} ({{ item.year }})</div>
-        </template>
-        <v-card flat color="transparent" class="text-justify my-2">
-          {{ item.abstract }}
-        </v-card>
-      </v-list-item>
-
-
-    </v-list>
-  </ClientOnly>
-</template>
-
-

components/content/ArticleDoiList.vue → components/content/RelevantAbstracts.vue

@@ -6,7 +6,7 @@ import ProseH2 from '~/components/content/ProseH2'
 
 const { page } = useContent();
 const computedDois = computed(() => {
-  if (page.value?.relevantAbstracts) {
+  if (page.value?.relevantAbstracts?.length > 0) {
     return page.value.relevantAbstracts;
   } else {
     return [];

content/0.index.md

@@ -49,7 +49,7 @@ Makarova KS, Wolf YI, Snir S, Koonin EV. Defense islands in bacterial and archae
 Tal N, Sorek R. SnapShot: Bacterial immunity. Cell. 2022 Feb 3;185(3):578-578.e1. doi: 10.1016/j.cell.2021.12.029. PMID: 35120666.
 
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1126/science.1138140

content/1.help.md

@@ -115,7 +115,7 @@ Any new item in the `tableColumns` object will create a new column in the list o
 **2. In the relevant abstract section, only the doi is relevant :**
 
 ```
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1038/s41586-020-2762-2

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

 ---
 title: List of defense systems
 layout: article-no-toc
-
+relevantAbstracts:
+    - doi: 10.1101/2021.09.02.458658
 ---
 
 # List of defense systems
@@ -17,11 +18,3 @@ The knowledge of anti-phage defense systems is ever expanding. The spectacular i
 
 
 
-## References
-
-::article-doi-list
----
-items:
-    - 10.1101/2021.09.02.458658
----
-::
\ No newline at end of file

content/3.defense-systems/abi2.md

 ---
 title: Abi2
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -17,7 +18,8 @@ relevantAbstracts:
 
 The Abi2 system is composed of one protein: Abi_2.
 
-Here is an example found in the RefSeq database: 
+Here is an example found in the RefSeq database:
+
 
 ![abi2](/abi2/Abi2.svg)
 

content/3.defense-systems/abia.md

 ---
 title: AbiA
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -17,6 +18,7 @@ relevantAbstracts:
 
 # AbiA 
 
+
 The AbiA system have been describe in a total of 2 subsystems.
 
 Here is some example found in the RefSeq database:

content/3.defense-systems/abib.md

 ---
 title: AbiB
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -8,6 +9,9 @@ tableColumns:
     Sensor: Unknown
     Activator: Unknown
     Effector: Unknown
+relevantAbstracts:
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 ---
 
 # AbiB
@@ -46,13 +50,4 @@ AbiB systems were experimentally validated using:
 
 A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect against 936 (Chopin et al., 2005)
 
-## Relevant abstracts
-
-::article-doi-list
----
-items:
-    - doi: 10.1023/A:1002027321171
-    - doi: 10.1016/j.mib.2005.06.006
 
----
-::

content/3.defense-systems/abic.md

 ---
 title: AbiC
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -55,7 +56,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171

content/3.defense-systems/abid.md

 ---
 title: AbiD
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -49,7 +50,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171

content/3.defense-systems/abie.md

 ---
 title: AbiE
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -68,7 +69,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171

content/3.defense-systems/abig.md

 ---
 title: AbiG
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -56,7 +57,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171

content/3.defense-systems/abih.md

 ---
 title: AbiH
+layout: article
 tableColumns:
     article:
       doi: 10.1111/j.1574-6968.1996.tb08446.x
@@ -51,7 +52,7 @@ A system from *lactococci* in *lactococci* has an anti-phage effect against 936,
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171

content/3.defense-systems/abii.md

 ---
 title: AbiI
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -50,7 +51,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171

content/3.defense-systems/abij.md

 ---
 title: AbiJ
+layout: article
 tableColumns:
     article:
       doi: 10.1016/j.mib.2005.06.006
@@ -51,7 +52,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 
 ## Relevant abstracts
 
-::article-doi-list
+::relevant-abstracts
 ---
 items:
     - doi: 10.1023/A:1002027321171