Determine team members at compile time

Also tweak the nav bar

content/team.json

@@ -2,13 +2,25 @@
 	"name": "gdkchan",
 	"github": "gdkchan",
 	"avatar": "https://avatars2.githubusercontent.com/u/5624669",
-	"title": "Project Lead"
+	"title": "Lead Developer"
 },
 {
 	"name": "Ac_K",
 	"github": "AcK77",
 	"avatar": "https://avatars3.githubusercontent.com/u/4905390",
-	"title": "Secondary Developer"
+	"title": "Developer"
+},
+{
+	"name": "Thog",
+	"github": "Thog",
+	"avatar": "https://avatars3.githubusercontent.com/u/1760003",
+	"title": "Developer"
+},
+{
+	"name": "riperiperi",
+	"github": "riperiperi",
+	"avatar": "https://avatars3.githubusercontent.com/u/6294155",
+	"title": "Developer"
 },
 {
 	"name": "LDj3SNuD",
@@ -23,21 +35,21 @@
 	"title": "Developer"
 },
 {
-	"name": "MerryMage",
+	"name": "»jD«",
-	"github": "MerryMage",
+	"github": "jduncanator",
-	"avatar": "https://avatars2.githubusercontent.com/u/8682882",
+	"avatar": "https://avatars1.githubusercontent.com/u/1518948",
 	"title": "Developer"
 },
 {
-	"name": "MS-DOS1999",
+	"name": "Xpl0itR",
-	"github": "MS-DOS1999",
+	"github": "Xpl0itR",
-	"avatar": "https://avatars3.githubusercontent.com/u/23052366",
+	"avatar": "https://avatars3.githubusercontent.com/u/7204422",
 	"title": "Developer"
 },
 {
-	"name": "Thog",
+	"name": "Moosehunter",
-	"github": "Thog",
+	"github": "Thealexbarney",
-	"avatar": "https://avatars3.githubusercontent.com/u/1760003",
+	"avatar": "https://avatars0.githubusercontent.com/u/601603?v=4",
 	"title": "Developer"
 },
 {
@@ -50,5 +62,5 @@
 	"name": "Dr. Hacknik",
 	"github": "drhacknik",
 	"avatar": "https://avatars1.githubusercontent.com/u/7658605",
-	"title": "Discord Maintainer, Web Designer"
+	"title": "Discord Maintainer"
 }]

gridsome.server.js

@@ -1,4 +1,5 @@
 const nodeExternals = require('webpack-node-externals')
+const fs = require('fs')
 
 module.exports = function (api) {
   api.chainWebpack((config, { isServer }) => {
@@ -10,4 +11,17 @@ module.exports = function (api) {
       ])
     }
   })
+
+  api.loadSource(async actions => {
+    const teamList = JSON.parse(fs.readFileSync("./content/team.json"))
+    const teamCollection = actions.addCollection({
+      typeName: 'Team'
+    })
+
+    for (const teamMember of teamList) {
+
+      teamMember.description = teamMember.description | ""
+      teamCollection.addNode(teamMember)
+    }
+  })
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ryujinx_website",
   "version": "2.0.0",
-	"description": "Ryujinx Website",
+  "description": "Ryujinx Website",
   "private": true,
   "scripts": {
     "build": "gridsome build",
@@ -9,6 +9,9 @@
     "explore": "gridsome explore"
   },
   "dependencies": {
+    "@gridsome/source-filesystem": "^0.6.2",
+    "@gridsome/transformer-json": "^0.2.1",
+    "axios": "^0.19.2",
     "gridsome": "^0.7.0",
     "vuetify": "^1.0.0"
   },

src/layouts/Default.vue

@@ -35,15 +35,12 @@
         <v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx">
           <v-icon>fab fa-github</v-icon>
         </v-btn>
-        <v-btn flat color="red" href="https://yt.ryujinx.org/">
+        <v-btn flat color="blue" href="https://twitter.com/RyujinxEmu">
-          <v-icon>fab fa-youtube</v-icon>
+          <v-icon>fab fa-twitter</v-icon>
         </v-btn>
-        <v-btn flat color="blue" href="https://discord.gg/VkQYXAZ">
+        <v-btn flat color="#7289DA" href="https://discord.gg/VkQYXAZ">
           <v-icon>fab fa-discord</v-icon>
         </v-btn>
-        <v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx">
-          <v-icon>fab fa-reddit</v-icon>
-        </v-btn>
       </v-toolbar-items>
       <v-toolbar-items class="hidden-md-and-down">
         <v-btn flat exact to="/">Home</v-btn>
@@ -63,15 +60,12 @@
         <v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx">
           <v-icon>fab fa-github</v-icon>
         </v-btn>
-        <v-btn flat color="red" href="https://yt.ryujinx.org/">
+        <v-btn flat color="blue" href="https://twitter.com/RyujinxEmu">
-          <v-icon>fab fa-youtube</v-icon>
+          <v-icon>fab fa-twitter</v-icon>
         </v-btn>
-        <v-btn flat color="blue" href="https://discord.gg/VkQYXAZ">
+        <v-btn flat color="#7289DA" href="https://discord.gg/VkQYXAZ">
           <v-icon>fab fa-discord</v-icon>
         </v-btn>
-        <v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx">
-          <v-icon>fab fa-reddit</v-icon>
-        </v-btn>
       </v-toolbar-items>
       <v-toolbar-items class="ml-0 mr-2">
         <v-btn flat @click.stop="toggleDarkMode()">
@@ -148,28 +142,20 @@
         </v-list-tile>
 
         <!-- YouTube -->
-        <v-list-tile color="red" href="https://yt.ryujinx.org/">
+        <v-list-tile color="blue" href="https://twitter.com/RyujinxEmu">
           <v-list-tile-action>
-            <v-icon color="red">fab fa-youtube</v-icon>
+            <v-icon color="blue">fab fa-twitter</v-icon>
           </v-list-tile-action>
-          <v-list-tile-title>YouTube</v-list-tile-title>
+          <v-list-tile-title>Twitter</v-list-tile-title>
         </v-list-tile>
 
         <!-- Discord -->
-        <v-list-tile color="blue" href="https://discord.gg/VkQYXAZ">
+        <v-list-tile color="#7289DA" href="https://discord.gg/VkQYXAZ">
           <v-list-tile-action>
-            <v-icon color="blue">fab fa-discord</v-icon>
+            <v-icon>fab fa-discord</v-icon>
           </v-list-tile-action>
           <v-list-tile-title>Discord</v-list-tile-title>
         </v-list-tile>
-
-        <!-- Reddit -->
-        <v-list-tile color="red" href="https://www.reddit.com/r/Ryujinx">
-          <v-list-tile-action>
-            <v-icon color="red">fab fa-reddit</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-title>Reddit</v-list-tile-title>
-        </v-list-tile>
       </v-list>
     </v-navigation-drawer>
     <v-footer fixed app class="text-xs-center">

src/pages/Index.vue

@@ -168,25 +168,25 @@
               </v-flex>
             </v-layout>
             <v-layout row wrap align-start justify-center>
-              <v-flex xs12 sm4 md2 v-for="member in team" :key="member.name">
+              <v-flex xs12 sm4 md2 v-for="member in $page.teams.edges" :key="member.node.id">
                 <v-card class="elevation-0 transparent">
                   <v-card-text class="text-xs-center">
                     <v-avatar size="72">
-                      <img :src="member.avatar" />
+                      <img :src="member.node.avatar" />
                     </v-avatar>
                   </v-card-text>
                   <v-card-title primary-title class="layout justify-center">
                     <a
-                      v-if="member.github"
+                      v-if="member.node.github"
-                      :href="`https://github.com/${member.github}`"
+                      :href="`https://github.com/${member.node.github}`"
                       target="_blank"
                       class="headline text-xs-center"
-                    >{{ member.name }}</a>
+                    >{{ member.node.name }}</a>
                     <p v-else class="headline text-xs-center">{{ member.name }}</p>
                   </v-card-title>
                   <v-card-text class="text-xs-center">
-                    <p class="title">{{ member.title }}</p>
+                    <p class="title">{{ member.node.title }}</p>
-                    <em v-if="member.description">{{ member.description }}</em>
+                    <em v-if="member.node.description">{{ member.node.description }}</em>
                   </v-card-text>
                 </v-card>
               </v-flex>
@@ -198,27 +198,26 @@
   </Layout>
 </template>
 
+<page-query>
+query {
+  teams: allTeam(order: ASC) {
+    edges {
+      node {
+        id
+        name
+        github
+        avatar
+        title
+      }
+    }
+  }
+}
+</page-query>
+
 <script>
 export default {
   metaInfo: {
     title: "Nintendo Switch Emulator"
-  },
-  data() {
-    return {
-      loading: true,
-      team: []
-    };
-  },
-  methods: {
-    async fetchTeamMembers() {
-      let _t = await fetch("/public/team.json");
-      this.team = await _t.json();
-
-      this.loading = false;
-    }
-  },
-  mounted() {
-    this.fetchTeamMembers();
   }
 };
 </script>