Optional title abstract

Closes #125 (closed)

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>