Ref ui

components/content/Ref.vue

@@ -11,10 +11,8 @@ const dois = computed(() => {
 
 </script>
 <template>
-  (
-  <template v-for="doi, index in dois" :key="doi">
+  (<template v-for="doi, index in dois" :key="doi">
     <RefArticle :doi="doi"></RefArticle>
     <span v-if="index < dois.length - 1">, </span>
-  </template>
-  )
+  </template>)
 </template>
\ No newline at end of file

components/content/RefArticle.vue

 <script setup lang="ts">
+import { useTheme } from "vuetify";
+const theme = useTheme();
 export interface Props {
     doi: string;
 }
@@ -7,7 +9,17 @@ const props = withDefaults(defineProps<Props>(), {});
 const { article } = useFetchArticle(props.doi);
 </script>
 <template>
-    <v-chip v-if="article" variant="text" :href="`#ref-${props.doi}`" class="pa-0 text-caption font-italic">{{
+    <!-- <v-chip v-if="article" variant="text" :href="`#ref-${props.doi}`" class="pa-0 font-italic">{{
         article?.author[0]?.family ?? "test" }} et al,
-        {{ article?.year }}</v-chip>
-</template>
\ No newline at end of file
+        {{ article?.year }}</v-chip> -->
+    <NuxtLink v-if="article" :href="`#ref-${props.doi}`"
+        :class="theme.global.current.value.dark ? 'text-grey-lighten-1' : 'text-grey-darken-2'" class="pa-0 ">{{
+            article?.author[0]?.family ?? "test" }} et al,
+        {{ article?.year }}</NuxtLink>
+</template>
+<style scoped>
+.ref-link {
+    /* color: rgba(var(--v-theme-tertiary)); */
+    color: grey-darken-3;
+}
+</style>
\ No newline at end of file