From 256c6d8e32ca6ceb61afd6982280bef79bee8063 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 21 Jan 2025 12:54:56 +1300
Subject: [PATCH] Add an option to choose between doi.org and citation.js for
 citation format

---
 src/components/ConnectivityInfo.vue |  6 +++++-
 src/components/SideBar.vue          | 12 +++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index b75f306a..60b3bec4 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -218,7 +218,7 @@
     </div>
 
     <div class="content-container content-container-references" v-if="resources.length">
-      <external-resource-card :resources="resources" @references-loaded="onReferencesLoaded"></external-resource-card>
+      <external-resource-card :resources="resources" :useDOIFormatter="useDOIFormatter" @references-loaded="onReferencesLoaded"></external-resource-card>
     </div>
   </div>
 </template>
@@ -292,6 +292,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 3e01e9e4..9cd5436e 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -37,6 +37,7 @@
                 v-if="tab.id === activeTabId"
                 :envVars="envVars"
                 :ref="'connectivityTab_' + tab.id"
+                :useDOIFormatter="useDOIFormatter"
                 @show-connectivity="showConnectivity"
                 @connectivity-component-click="onConnectivityComponentClick"
               />
@@ -165,7 +166,16 @@ export default {
         x: 0,
         y: 0,
       },
-    }
+    },
+    /**
+     * The option to use DOI.org as citation formatter.
+     * If set to `false`, citation.js will be used.
+     * Default is `true`.
+     */
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {