automatic reference section

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/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