add basic citation dialog to footer

should add clipboard copy functionality to citation text TODO: figure out how to usefully sync citation and build id
openskope · Oct 6, 2023 · b4ceb16 · b4ceb16
1 parent 998b1af
commit b4ceb16
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/app/components/Citation.vue b/app/components/Citation.vue
@@ -0,0 +1,65 @@
+<template>
+  <client-only>
+    <v-dialog v-model="showCitation" width="auto">
+      <template #activator="{ on, props }">
+        <v-btn
+          style="font-weight: bold"
+          color="white"
+          class="text-body-1"
+          plain
+          v-bind="props"
+          v-on="on"
+        >
+          Cite SKOPE
+        </v-btn>
+      </template>
+      <v-card>
+        <v-card-title><h2>How to Cite SKOPE</h2></v-card-title>
+        <v-card-text>
+          <h2>Citation</h2>
+          <p class="text-body-1 px-2">
+            Use of data, graphics, or other information provided by SKOPE should
+            be accompanied by a citation of the original data source provided by
+            SKOPE in the dataset metadata and of the SKOPE web application
+            itself.
+          </p>
+
+          <h2>Example Citation</h2>
+          <blockquote class="blockquote">{{ citationText }}</blockquote>
+          <blockquote class="blockquote">{{ citationBibTex }}</blockquote>
+
+          <h2>Contact us</h2>
+          <p class="text-body-1 px-2">
+            Feedback is welcome! You can reach us via the "Contact" button in
+            the footer or by sending an email to
+            <a href="mailto: skope-team@googlegroups.com">
+              skope-team@googlegroups.com
+            </a>
+          </p>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </client-only>
+</template>
+<script>
+import Vue from "vue";
+import { Component } from "nuxt-property-decorator";
+import { CITATION_TXT, CITATION_BIB } from "@/store/modules/_constants";
+
+@Component()
+class Citation extends Vue {
+  showCitation = false;
+
+  get citationText() {
+    return CITATION_TXT;
+  }
+
+  get citationBibTex() {
+    return CITATION_BIB;
+  }
+}
+
+export default Citation;
+</script>
+
+<style></style>
diff --git a/app/components/Footer.vue b/app/components/Footer.vue
@@ -14,6 +14,7 @@
         &copy; 2016-{{ new Date().getFullYear() }} Synthesizing Knowledge of
         Past Environments (SKOPE)
       </span>
+      <Citation />
       <TermsOfUse />
       <v-btn
         v-for="link in links"
@@ -47,10 +48,12 @@ import Vue from "vue";
 import { Component } from "nuxt-property-decorator";
 import { BUILD_ID } from "@/store/modules/_constants";
 import TermsOfUse from "@/components/TermsOfUse.vue";
+import Citation from "@/components/Citation.vue";
 
 @Component({
   components: {
     TermsOfUse,
+    Citation,
   },
 })
 class Footer extends Vue {

diff --git a/app/components/TermsOfUse.vue b/app/components/TermsOfUse.vue
@@ -40,7 +40,8 @@
 
           <h2>Contact us</h2>
           <p class="text-body-1">
-            Please use the "Contact" button in the footer or send us an email at
+            Feedback is welcome! You can reach us via the "Contact" button in
+            the footer or by sending an email to
             <a href="mailto: skope-team@googlegroups.com">
               skope-team@googlegroups.com
             </a>