Merge pull request #88 from hcorson-dosch-usgs/add_authorship_component

Add authorship component

src/assets/text/authors.js

@@ -0,0 +1,37 @@
+export default {
+    // do not delete section. delete individuals as needed. modify content as needed
+    // currently only 'fullName', 'firstName', 'initials', 'profile_link', and 'contribution' are used
+    primaryAuthors: [
+      {
+        firstName: 'Cee',
+        lastName: 'Nell',
+        fullName: 'Cee Nell',
+        initials: 'CN',
+        profile_link: 'https://www.usgs.gov/staff-profiles/cee-nell',
+        role: 'developer',
+        contribution: 'contributed to the data processing pipeline, developed the website, and created the D3 animation'
+      },
+      {
+        firstName: 'Lindsay',
+        lastName: 'Platt',
+        fullName: 'Lindsay Platt',
+        initials: 'LP',
+        profile_link: 'https://www.usgs.gov/staff-profiles/lindsay-rc-platt',
+        role: 'developer',
+        contribution: 'developed the data processing pipeline to pull historic and current groundwater levels, and generated the svg map'
+      }
+    ],
+    // do not delete section. delete any or all individuals as needed. modify content as needed
+    // currently only 'fullName', 'firstName', 'initials', 'profile_link', and 'contribution' are used
+    additionalAuthors: [
+      {
+        firstName: 'Hayley',
+        lastName: 'Corson-Dosch',
+        fullName: 'Hayley Corson-Dosch',
+        initials: 'HCD',
+        profile_link: 'https://www.usgs.gov/staff-profiles/hayley-corson-dosch',
+        role: 'developer',
+        contribution: 'contributed to website development and reviewed code'
+      }
+      ]
+};

src/components/Authorship.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="author-container" v-if="showAuthors">
+    <p>
+      <span id="primary-author-statment">
+        The development of {{ appTitle }} was led by 
+        <span
+          v-for="(author, index) in primaryAuthors" 
+          :key="`${author.initials}-attribution`"
+          :id="`initial-${author.initials}`"
+          :class="'author first'"
+        >
+          <a v-bind:href="author.profile_link" target="_blank" v-text="author.fullName"></a>
+          <span v-if="index != Object.keys(primaryAuthors).length - 1 && Object.keys(primaryAuthors).length > 2">, </span>
+          <span v-if="index == Object.keys(primaryAuthors).length - 2"> and </span>
+        </span>.
+      </span>
+      <span id="additional-author-statement" v-if="showAdditionalAuthors">
+        <span
+          v-for="(author, index) in additionalAuthors" 
+          :key="`${author.initials}-attribution`"
+          :id="`author-${author.initials}`"
+          :class="'author'"
+        >
+          <a v-bind:href="author.profile_link" target="_blank" v-text="author.fullName"></a>
+          <span v-if="index != Object.keys(additionalAuthors).length - 1 && Object.keys(additionalAuthors).length > 2">, </span>
+          <span v-if="index == Object.keys(additionalAuthors).length - 2"> and </span>
+        </span>
+        <span>
+        also contributed to the site.
+        </span>
+      </span>
+      <span id="contribution-statements" v-if="showContributionStatements">
+        <span id="primary-author-contribution">
+          <span
+            v-for="author in primaryAuthors" 
+            :key="`${author.initials}-contribution`"
+            :id="`author-${author.initials}`"
+            :class="'author'"
+          >
+            <span v-text="author.firstName"> </span> <span v-text="author.contribution"></span>. 
+          </span>
+        </span>
+        <span id="additional-author-contribution"  v-if="showAditionalContributionStatement">
+          <span
+            v-for="author in additionalAuthors" 
+            :key="`${author.initials}-contribution`"
+            :id="`author-${author.initials}`"
+            :class="'author'"
+          >
+            <span v-text="author.firstName"> </span> <span v-text="author.contribution"></span>. 
+          </span>
+        </span>
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+import { isMobile } from 'mobile-device-detect';
+import authors from "@/assets/text/authors";
+export default {
+  name: "authorship",
+    components: {
+    },
+    props: {
+    },
+    data() {
+      return {
+        publicPath: process.env.BASE_URL, // allows the application to find the files when on different deployment roots
+        appTitle: process.env.VUE_APP_TITLE, // Pull in title of page from Vue environment (set in .env)
+        mobileView: isMobile, // test for mobile
+        primaryAuthors: authors.primaryAuthors,
+        additionalAuthors: authors.additionalAuthors,
+        showAuthors: null, // Turn on or off attribution for all authors
+        showAdditionalAuthors: null, // If showAuthors is true, turn on or off attribution for additional authors
+        showContributionStatements: true, // If showAuthors is true, turn on or off contribution statements for ALL authors
+        showAditionalContributionStatement: null // If showAuthors is true and if showContributionStatements is true, turn on or off contriubtion statements for ADDITIONAL authors
+      }
+    },
+    mounted(){   
+      console.log(this.appTitle)
+      this.showAuthors = this.primaryAuthors.length > 0 ? true: false; // Show author statements for any authors
+      this.showAdditionalAuthors =  this.additionalAuthors.length > 0 ? true : false; // Show author statements for additional authors if any are listed
+      this.showAditionalContributionStatement = this.additionalAuthors.length > 0 ? true : false; // Show contributions statements for additional authors if any are listed AND showContributionStatements is true
+    },
+    methods:{
+      isMobile() {
+              if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+                  return true
+              } else {
+                  return false
+              }
+          }
+    }
+}
+</script>
+<style>
+#author-container {
+  height: auto;
+}
+</style>

src/components/GWL.vue

@@ -104,6 +104,11 @@
           >Provisional data</a> were included in this analysis. 
         </p>
         <br>
+        <h4>
+          Page development
+        </h4>
+        <authorship class="text-content"/>
+        <br>
         <hr>
         <img
           id="vizlab-wordmark"
@@ -142,7 +147,8 @@ export default {
     components: {
       GWLmap,
       mapLabels,
-      Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend")
+      Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend"),
+      authorship: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/Authorship")
     },
     data() {
     return {

src/views/Visualization.vue

@@ -10,7 +10,6 @@ export default {
     name: 'Visualization',
     components: {
       GWL: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/GWL")
-      
     },
     computed: {
     },