composable to fetch doi + expandable card to display abstract

components/content/ArticleDoi.vue

+<script setup lang="ts">
+const props = defineProps<{
+    doi: string;
+}>();
+
+const { article } = useFetchArticle(props.doi)
+
+const show = ref(false)
+console.log(article)
+
+</script>
+<template>
+    <v-list-item :href="article?.href" :target="article?.target">
+        <template #prepend>
+            <v-avatar>
+                <v-icon>{{ article?.prependIcon }}</v-icon>
+            </v-avatar>
+        </template>
+        <v-card flat color="transparent" density="compact">
+
+            <v-card-item density="compact">
+                <v-card-title><span class="text-subtitle-1 font-weight-bold">{{ article?.title ?? 'no title' }}</span></v-card-title>
+                <v-card-subtitle> {{ article?.subtitle ?? "no subtitle" }}</v-card-subtitle>
+                <v-card-subtitle> {{ article?.containerTitle ?? "no containerTitle" }} ({{ article?.year
+                }})</v-card-subtitle>
+            </v-card-item>
+            <v-card-actions v-if="article?.abstract" density="compact">
+                <v-btn size="x-small" variant="outlined" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                    @click.stop.prevent="show = !show">Abstract</v-btn>
+            </v-card-actions>
+
+            <v-expand-transition>
+                <v-card v-show="show" flat color="transparent">
+                    <v-card-text>
+                        {{ article?.abstract }}
+                    </v-card-text>
+                </v-card>
+
+            </v-expand-transition>
+        </v-card>
+    </v-list-item>
+    <v-divider inset></v-divider>
+</template>
\ No newline at end of file

components/content/ArticleDoiList.vue

+<script setup lang="ts">
+const props = defineProps<{
+    items: string[];
+}>();
+</script>
+<template>
+    <v-list>
+        <ArticleDoi v-for="item in items" :key="item" :doi="item" />
+       
+    </v-list>
+</template>
\ No newline at end of file

components/content/ReferencesList.vue

-<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>
-
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useFetch as useFetchVueUse } from "@vueuse/core";
@@ -35,6 +8,10 @@ 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(
@@ -107,3 +84,35 @@ 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>
+
+

composables/useFetchArticle.ts

+export interface ArticleMessage {
+    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[];
+    };
+}
+
+
+export interface Article {
+    DOI: string
+    title: string
+    subtitle: string
+    containerTitle: string
+    abstract: string
+    year: string
+    href: string
+    target: string
+    prependIcon: string
+}
+export interface RawArticle {
+    message: ArticleMessage
+
+}
+
+
+
+export function useFetchArticle(doi: string) {
+
+    const article = ref<Article | null>(null)
+    const pending = ref(false)
+    const doiBaseUrl = ref(new URL("https://doi.org/"));
+    const url = ref(new URL(`/works/${doi}`, " https://api.crossref.org/").href);
+    console.log("dans useFetchArticle")
+    console.log(url.value)
+    watchEffect(async () => {
+        console.log("dans watch effect")
+        article.value = null
+        const { data, pending: pendingUseFetch, error, refresh } = await useFetch<RawArticle>(toValue(url), {
+        })
+        console.log(data)
+        if (data.value?.message) {
+            const {
+                DOI,
+                title,
+                "container-title-short": cts,
+                "container-title": ct,
+                abstract,
+                published,
+                author,
+                ...rest
+            } = data.value.message;
+            let sanitizedAbstract = abstract
+            console.log(DOI)
+            if (sanitizedAbstract) {
+                sanitizedAbstract = /\<jats\:p\>(.*)\<\/jats\:p\>/.exec(sanitizedAbstract)?.[1] ?? ''
+            }
+            article.value = {
+                DOI,
+                title: title[0],
+                subtitle: toAuthorsString(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",
+            }
+            console.log(article.value)
+        }
+        pending.value = pendingUseFetch.value
+
+
+    })
+    function toAuthorsString(authors: Array<{ family: string; given: string }>) {
+        return authors
+            .map((curr) => {
+                return `${curr.family} ${curr.given}`;
+            })
+            .join(", ");
+    }
+
+    function getReferenceUrl(doi: string) {
+        return new URL(doi, doiBaseUrl.value).href;
+    }
+    return { article, pending }
+}
\ No newline at end of file

content/1.general-concepts/1.abortive-infection.md

@@ -6,3 +6,7 @@ toc: true
 
 
 This section is empty. You can help by adding to it.
+
+
+## test article
+

content/2.defense-systems/abia.md

@@ -33,7 +33,7 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ## Relevant abstracts
 
 
-::references-list
+::article-doi-list
 ---
 items:
     - 10.1016/j.mib.2005.06.006

content/2.defense-systems/avast.md

@@ -94,18 +94,10 @@ Subsystem CcAvs4 with a system from *Corallococcus coralloides* in *Escherichia
 
 ## Relevant abstracts
 
-
-::references-list
+::article-doi-list
 ---
 items:
     - 10.1126/science.abm4096
     - 10.1126/science.aba0372
 ---
-::
-
+::
\ No newline at end of file
-**Gao, L. A. et al. Prokaryotic innate immunity through pattern recognition of conserved viral proteins. Science 377, eabm4096 (2022).**
-Many organisms have evolved specialized immune pattern-recognition receptors, including nucleotide-binding oligomerization domain-like receptors (NLRs) of the STAND superfamily that are ubiquitous in plants, animals, and fungi. Although the roles of NLRs in eukaryotic immunity are well established, it is unknown whether prokaryotes use similar defense mechanisms. Here, we show that antiviral STAND (Avs) homologs in bacteria and archaea detect hallmark viral proteins, triggering Avs tetramerization and the activation of diverse N-terminal effector domains, including DNA endonucleases, to abrogate infection. Cryo-electron microscopy reveals that Avs sensor domains recognize conserved folds, active-site residues, and enzyme ligands, allowing a single Avs receptor to detect a wide variety of viruses. These findings extend the paradigm of pattern recognition of pathogen-specific proteins across all three domains of life.
-
-**Gao, L. et al. Diverse enzymatic activities mediate antiviral immunity in prokaryotes. Science 369, 1077-1084 (2020).**
-Bacteria and archaea are frequently attacked by viruses and other mobile genetic elements and rely on dedicated antiviral defense systems, such as restriction endonucleases and CRISPR, to survive. The enormous diversity of viruses suggests that more types of defense systems exist than are currently known. By systematic defense gene prediction and heterologous reconstitution, here we discover 29 widespread antiviral gene cassettes, collectively present in 32% of all sequenced bacterial and archaeal genomes, that mediate protection against specific bacteriophages. These systems incorporate enzymatic activities not previously implicated in antiviral defense, including RNA editing and retron satellite DNA synthesis. In addition, we computationally predict a diverse set of other putative defense genes that remain to be characterized. These results highlight an immense array of molecular functions that microbes use against viruses.
-

content/2.defense-systems/paris.md

@@ -50,11 +50,11 @@ Paris type II merge system in _Desulfovibrio desulfuricans_ (GCF\__000025705.1).
 
 ## References 
 
-::references-list
+::article-doi-list
 ---
 items:
     - 10.1101/2021.01.21.427644
     - 10.1093/nar/gkaa290
     - 10.1016/0022-2836(75)90083-2
 ---
-::
+::
\ No newline at end of file

pages/[...slug].vue

@@ -4,6 +4,8 @@
       <v-card flat color="transparent" max-width="1280">
         <v-card-text>
           <ContentDoc />
-        </v-card-text> </v-card></v-col>
+        </v-card-text>
+      </v-card></v-col>
   </v-row>
 </template>
+