Created a Metamask docs contributor list via github api (MetaMask#162)

* Reworded and simplified the Getting Started and Browser Detection verbage.

* Adding metamask docs contributor list

* pushing contributors page

* moved fetch call to the created()

* Use mounted instead of created

Co-authored-by: Tim Woodson <[email protected]>
Co-authored-by: unknown <[email protected]>
Co-authored-by: Whymarrh Whitby <[email protected]>

docs/.vuepress/components/GithubContributor.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>
+      <div v-for="contributor in metaMaskContributorList" class="card">
+        <img :src="contributor.avatar_url" width="100px" />
+        <h4>
+          <a :href="contributor.html_url" target="_blank">
+            {{ contributor.login }}
+          </a>
+        </h4>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.card {
+  display: inline-block;
+  min-width: 175px;
+  text-align: center;
+}
+h4 {
+  margin-top: 0;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    repoName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      metaMaskContributorList: [],
+    };
+  },
+  mounted() {
+    fetch(`https://api.github.com/repos/MetaMask/${this.repoName}/contributors`)
+      .then((response) => response.json())
+      .then((data) => {
+        this.metaMaskContributorList = data;
+      });
+  },
+};
+</script>

docs/.vuepress/config.js

@@ -131,6 +131,7 @@ function getGuideSidebar(guide, api, bestPractices, mobile, resources) {
       collapsable: false,
       children: [
         'create-dapp',
+        'contributors'
       ]
     }
   ]

docs/guide/contributors.md

@@ -0,0 +1,31 @@
+# Contributors
+
+## MetaMask Repositories
+:::: tabs :options="{ useUrlFragment: false }"
+
+::: tab Extension
+
+<GithubContributor
+  repoName="metamask-extension"
+/>
+
+:::
+
+::: tab Mobile
+
+<GithubContributor
+  repoName="metamask-mobile"
+/>
+
+:::
+
+::: tab Documentation
+
+<GithubContributor
+  repoName="metamask-docs"
+/>
+
+:::
+
+::::
+