Optional title abstract

components/content/ArticleDoi.vue

 <script setup lang="ts">
-const props = defineProps<{
-    doi: string;
+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,
+})
 const { article } = useFetchArticle(props.doi)
-
+const { mobile } = useDisplay()
 const show = ref(false)
-console.log(article)
+
+const articleTitle = computed(() => { return props?.title ?? article.value?.title ?? props.doi })
+const articleAbstract = computed(() => { return props.abstract ?? article.value?.abstract })
 
 </script>
 <template>
-    <v-list-item :href="article?.href" :target="article?.target">
-        <template #prepend>
+    <v-list-item :href="article?.href" :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 #append v-if="!mobile">
             <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>
+        </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-actions v-if="article?.abstract" density="compact">
-                <v-btn size="x-small" variant="outlined" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
+                <v-btn v-if="articleAbstract" 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-card-item>
             <v-expand-transition>
                 <v-card v-show="show" flat color="transparent">
                     <v-card-text>
-                        {{ article?.abstract }}
+                        {{ articleAbstract }}
                     </v-card-text>
                 </v-card>
 

components/content/ArticleDoiList.vue

 <script setup lang="ts">
 const props = defineProps<{
-    items: string[];
+    items: { doi: string, title?: string, divider: boolean, abstract?: string }[];
 }>();
 </script>
 <template>
-    <v-list>
-        <ArticleDoi v-for="item in items" :key="item" :doi="item" />
-       
+    <v-list density="compact">
+        <ArticleDoi v-for="item, index in props.items" :key="item.doi" :index="index + 1" :doi="item.doi"
+            :title="item?.title" :divider="item.divider" :abstract="item?.abstract" />
     </v-list>
 </template>
\ No newline at end of file

components/content/ListSystems.vue

@@ -30,14 +30,16 @@ function filterOnlyCapsText(value, query, item) {
             <v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
                 label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
         </v-toolbar>
-        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="props.headers"
+        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="props.headers" density="compact"
             :custom-filter="filterOnlyCapsText" :items="props.systems" :search="search">
             <template #[`item.system`]="{ item }">
                 <v-chip variant="text" link :to="`${item.columns.system.path}`">{{
                     item.columns.system.name }}</v-chip>
             </template>
-            <template #[`item.doi`]="{ item }">
-                <ArticleDoiList v-if="item.columns?.doi" :items="[item.columns.doi]" :divider="false" />
+            <template #[`item.article`]="{ item }">
+                <ArticleDoi v-if="item.columns?.article" :doi="item.columns.article.doi"
+                    :title="item.columns.article?.title" :abstract="item.columns.article?.abstract" :divider="false"
+                    :enumerate="false" />
             </template>
         </v-data-table>
     </v-card>

content/0.index.md

@@ -50,12 +50,14 @@ Tal N, Sorek R. SnapShot: Bacterial immunity. Cell. 2022 Feb 3;185(3):578-578.e1
 ::article-doi-list
 ---
 items:
-    - 10.1126/science.1138140
-    - 10.1038/nmicrobiol.2017.92
-    - 10.1128/jb.65.2.113-121.1953
-    - 10.1126/science.aar4120
-    - 10.1126/science.aba0372
-    - 10.1038/s41586-019-1894-8
-    - 10.1128/jb.64.4.557-569.1952
+    - doi: 10.1126/science.1138140
+      abstract: |
+        Clustered regularly interspaced short palindromic repeats (CRISPR) are a distinctive feature of the genomes of most Bacteria and Archaea and are thought to be involved in resistance to bacteriophages. We found that, after viral challenge, bacteria integrated new spacers derived from phage genomic sequences. Removal or addition of particular spacers modified the phage-resistance phenotype of the cell. Thus, CRISPR, together with associated cas genes, provided resistance against phages, and resistance specificity is determined by spacer-phage sequence similarity.
+    - doi: 10.1038/nmicrobiol.2017.92
+    - doi: 10.1128/jb.65.2.113-121.1953
+    - doi: 10.1126/science.aar4120
+    - doi: 10.1126/science.aba0372
+    - doi: 10.1038/s41586-019-1894-8
+    - doi: 10.1128/jb.64.4.557-569.1952
 ---
 ::

content/2.defense-systems/abi2.md

 ---
 title: Abi2
 tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
+    article: 
+      doi: 10.1016/j.mib.2005.06.006
+      abstract: |
+        Abortive infection (Abi) systems, also called phage exclusion, block phage multiplication and cause premature bacterial cell death upon phage infection. This decreases the number of progeny particles and limits their spread to other cells allowing the bacterial population to survive. Twenty Abi systems have been isolated in Lactococcus lactis, a bacterium used in cheese-making fermentation processes, where phage attacks are of economical importance. Recent insights in their expression and mode of action indicate that, behind diverse phenotypic and molecular effects, lactococcal Abis share common traits with the well-studied Escherichia coli systems Lit and Prr. Abis are widespread in bacteria, and recent analysis indicates that Abis might have additional roles other than conferring phage resistance.
 ---
 
 The Abi2 system is composed of one protein: Abi_2.

content/2.defense-systems/abia.md

 ---
 title: AbiA
 tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
+    article:
+      doi: 10.1016/j.mib.2005.06.006
+      abstract: |
+        Abortive infection (Abi) systems, also called phage exclusion, block phage multiplication and cause premature bacterial cell death upon phage infection. This decreases the number of progeny particles and limits their spread to other cells allowing the bacterial population to survive. Twenty Abi systems have been isolated in Lactococcus lactis, a bacterium used in cheese-making fermentation processes, where phage attacks are of economical importance. Recent insights in their expression and mode of action indicate that, behind diverse phenotypic and molecular effects, lactococcal Abis share common traits with the well-studied Escherichia coli systems Lit and Prr. Abis are widespread in bacteria, and recent analysis indicates that Abis might have additional roles other than conferring phage resistance.
 ---
 
 The AbiA system have been describe in a total of 2 subsystems.
@@ -37,9 +40,12 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
-    - 10.1093/nar/gkac467
+    - doi: 10.1023/A:1002027321171
+      title: Bacteriophage defence systems in lactic acid bacteria
+    - doi: 10.1016/j.mib.2005.06.006
+      abstract: | 
+        Abortive infection (Abi) systems, also called phage exclusion, block phage multiplication and cause premature bacterial cell death upon phage infection. This decreases the number of progeny particles and limits their spread to other cells allowing the bacterial population to survive. Twenty Abi systems have been isolated in Lactococcus lactis, a bacterium used in cheese-making fermentation processes, where phage attacks are of economical importance. Recent insights in their expression and mode of action indicate that, behind diverse phenotypic and molecular effects, lactococcal Abis share common traits with the well-studied Escherichia coli systems Lit and Prr. Abis are widespread in bacteria, and recent analysis indicates that Abis might have additional roles other than conferring phage resistance.
+    - doi: 10.1093/nar/gkac467
 
 ---
 ::

content/2.defense-systems/abib.md

 ---
 title: AbiB
 tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
+    article:
+      doi: 10.1016/j.mib.2005.06.006
+      abstract: |
+        Abortive infection (Abi) systems, also called phage exclusion, block phage multiplication and cause premature bacterial cell death upon phage infection. This decreases the number of progeny particles and limits their spread to other cells allowing the bacterial population to survive. Twenty Abi systems have been isolated in Lactococcus lactis, a bacterium used in cheese-making fermentation processes, where phage attacks are of economical importance. Recent insights in their expression and mode of action indicate that, behind diverse phenotypic and molecular effects, lactococcal Abis share common traits with the well-studied Escherichia coli systems Lit and Prr. Abis are widespread in bacteria, and recent analysis indicates that Abis might have additional roles other than conferring phage resistance.
 ---
 
 The AbiB system is composed of one protein: AbiB.
@@ -33,8 +36,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abic.md

 ---
 title: AbiC
-tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
 ---
 
 The AbiC system is composed of one protein: AbiC.
@@ -39,8 +37,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abid.md

 ---
 title: AbiD
-tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
 ---
 
 The AbiD system is composed of one protein: AbiD.
@@ -33,8 +31,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abie.md

 ---
 title: AbiE
-tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
 ---
 
 AbiE is a family of an anti-phage defense systems. They act through a Toxin-Antitoxin mechanism, and are comprised of a pair of genes, with one gene being toxic while the other confers immunity to this toxicity. 
@@ -45,9 +43,9 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
-    - 10.1093/nar/gkt1419
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
+    - doi: 10.1093/nar/gkt1419
 
 ---
 ::

content/2.defense-systems/abig.md

 ---
 title: AbiG
-tableColumns:
-    doi: 10.1016/j.mib.2005.06.006
 ---
 
 The AbiG system is composed of 2 proteins: AbiGi and, AbiGii.
@@ -33,8 +31,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abih.md

 ---
 title: AbiH
 tableColumns:
-    doi: 10.1111/j.1574-6968.1996.tb08446.x
+    article: 
+      doi: 10.1111/j.1574-6968.1996.tb08446.x
+      abstract: |
+        A gene which encodes resistance by abortive infection (Abi+) to bacteriophage was cloned from Lactococcus lactis ssp. lactis biovar. diacetylactis S94. This gene was found to confer a reduction in efficiency of plating and plaque size for prolate-headed bacteriophage φ53 (group I of homology) and total resistance to the small isometric-headed bacteriophage φ59 (group III of homology). The cloned gene is predicted to encode a polypeptide of 346 amino acid residues with a deduced molecular mass of 41 455 Da. No homology with any previously described genes was found. A probe was used to determine the presence of this gene in two strains on 31 tested.
 ---
 
 ## Example of genomic structure
@@ -35,9 +38,9 @@ A system from *lactococci* in *lactococci* has an anti-phage effect against 936,
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
-    - 10.1111/j.1574-6968.1996.tb08446.x
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
+    - doi: 10.1111/j.1574-6968.1996.tb08446.x
 
 ---
 ::

content/2.defense-systems/abii.md

@@ -33,8 +33,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abij.md

@@ -33,8 +33,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abik.md

@@ -33,9 +33,9 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
-    - 10.1093/nar/gkac467
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
+    - doi: 10.1093/nar/gkac467
 
 ---
 ::

content/2.defense-systems/abil.md

@@ -33,8 +33,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abin.md

@@ -33,8 +33,8 @@ A system from *lactococcal prophage* in *lactococci* has an anti-phage effect ag
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abio.md

@@ -33,8 +33,8 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
 
 ---
 ::

content/2.defense-systems/abip2.md

@@ -35,9 +35,9 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
-    - 10.1093/nar/gkac467
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
+    - doi: 10.1093/nar/gkac467
 
 ---
 ::

content/2.defense-systems/abiq.md

@@ -33,9 +33,9 @@ A system from *lactococcal plasmid* in *lactococci* has an anti-phage effect aga
 ::article-doi-list
 ---
 items:
-    - 10.1023/A:1002027321171
-    - 10.1016/j.mib.2005.06.006
-    - 10.1128/AEM.64.12.4748-4756.1998
+    - doi: 10.1023/A:1002027321171
+    - doi: 10.1016/j.mib.2005.06.006
+    - doi: 10.1128/AEM.64.12.4748-4756.1998
 
 ---
 ::