Contributors page added

nuxt.config.js

@@ -39,8 +39,23 @@ const dynamicRoutes = async () => {
       }))
     })
 
+    const dynamicContributorsRoutes = await axios.get('https://api.github.com/repos/stacsnssce/official-website/stats/contributors')
+    .then(async (data) => {
+      return await Promise.all(data.data.map(async (dat) => {
+        return {
+          route: '/contributors/' + dat.author.login + '/',
+          payload: await axios.get(dat.author.url)
+            .then((res) => {
+              return {
+                title: res.data
+              }
+            })
+        }
+      }))
+    })
+
   const route = dynamicBlogRoutes.concat(dynamicActivitiesRoutes)
-
+  route = route.concat(dynamicContributorsRoutes)
   return route
 }
 
@@ -111,7 +126,8 @@ export default {
     ]
   },
   generate: {
-    routes: dynamicRoutes
+    routes: dynamicRoutes,
+
   },
 
   /*

pages/contributors/index.vue

@@ -1,15 +1,100 @@
 <template>
   <div class="container">
-    Contributors
+    <div class="center-align">
+      <h4>Our Contributors</h4>
+    </div>
+    <br>
+    <br>
+    <div class="row">
+      <section v-for="c in contributors" :key="c.id">
+        <div class="col s12 m4 l4">
+          <div class="card-panel hoverable">
+            <div class="card-image center-align">
+              <progressive-img
+                class="faculty-img circle responsive-image"
+                :src="`${c.attribute.avatar_url || '/profilepic.png'}`"
+                placeholder="/imageplaceholder1x1.png"
+                :alt="`${c.attribute.name}`"
+                :blur="30"
+              />
+            </div>
+            <div class="card-content center-align text">
+              <p style="font-size:20px">
+                {{ c.attribute.name }}
+              </p>
+              <a :href="c.attribute.html_url">
+                View GitHub Profile
+                <i class="fa fa-github git circle" />
+              </a>
+              &nbsp;
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import axios from 'axios'
 
+export default {
+  fetch ({ store }) {
+    return axios.get('https://api.github.com/repos/stacsnssce/official-website/stats/contributors')
+      .then(async ({ data }) => {
+        /* eslint-disable no-console */
+        store.commit('Contributors', await Promise.all(data.map(async (element) => {
+          return await axios.get(element.author.url)
+            .then((res) => {
+              // eslint-disable-next-line
+              // console.log(mdf)
+              return {
+                attribute: res.data
+              }
+            })
+            // store.commit('Contributors', contributors)
+        })))
+      })
+      .then(() => {
+      })
+  },
+  computed: {
+    contributors () {
+      return this.$store.state.contributors
+    }
+  }
 }
 </script>
+<style lang="scss">
+.faculty-img {
+  width: 225px !important;
+  height: 225px !important;
 
-<style>
-
+  img {
+    width: 225px!important;
+    height: 225px!important;
+    object-fit: cover;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.card-panel {
+  border-radius: 16px 16px 16px 16px;
+  box-shadow: 0 4px 8px grey;
+  height: 400px;
+}
+.text {
+  text-align: center;
+  font-weight: bold;
+  font-size: 16px;
+}
+.middle {
+  position: absolute;
+  font-size: 28px;
+  overflow: hidden;
+  text-align: center;
+}
+.git{
+  color: #211F1F;
+}
 </style>

store/index.js

@@ -2,7 +2,8 @@ export const state = () => ({
   posts: [],
   activities: [],
   gallery: [],
-  awards: []
+  awards: [],
+  contributors: []
 })
 
 export const mutations = {
@@ -17,5 +18,8 @@ export const mutations = {
   },
   Awards (state, awd) {
     state.awards = awd
+  },
+  Contributors (state, contributors) {
+    state.contributors = contributors
   }
 }