docs: fetch contributors from github

docs/script.js

@@ -530,36 +530,6 @@ const emeriti = [
   },
 ];
 
-// curl https://api.github.com/repos/nostalgic-css/NES.css/contributors | jq '.[].login'
-const contributors = [
-  '4k1k0',
-  'sombreroEnPuntas',
-  'Divoolej',
-  'soph-iest',
-  'montezume',
-  'sazzadsazib',
-  'KeevanDance',
-  'jdvivar',
-  'IngwiePhoenix',
-  'jjspace',
-  'Baldomo',
-  'DanSnow',
-  'ernestomancebo',
-  'Ilyeo',
-  'Kartones',
-  'rrj-dev',
-  'vicainelli',
-  'stewartrule',
-  'kenshinji',
-  'youngkaneda',
-  'Takumi0901',
-  'loo41',
-  'alexgleason',
-  'agarzola',
-  'fleeting',
-  'JamesIves',
-];
-
 new Vue({
   el: '#nescss',
   data() {
@@ -567,7 +537,7 @@ new Vue({
       collection: sampleCollection,
       coreteam,
       emeriti,
-      contributors,
+      contributors: [],
       animateOctocat: false,
       copiedBalloon: {
         display: 'none',
@@ -584,6 +554,9 @@ new Vue({
       return val.charAt(0).toUpperCase() + val.slice(1);
     },
   },
+  created() {
+    this.fetchContributors();
+  },
   mounted() {
     document.addEventListener('scroll', () => {
       this.scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
@@ -592,13 +565,6 @@ new Vue({
     [].forEach.call(document.querySelectorAll('dialog'), (a) => {
       dialogPolyfill.registerDialog(a);
     });
-
-    setTimeout(() => {
-      Array.from(document.querySelectorAll('img.lazy')).forEach((img) => {
-        img.src = img.dataset.src;
-        img.classList.remove('lazy');
-      });
-    }, 500);
   },
   methods: {
     share(media) {
@@ -648,5 +614,26 @@ new Vue({
         this.copiedBalloon.display = 'none';
       }, 1000);
     },
+    async fetchContributors() {
+      try {
+        const res = await fetch('https://api.github.com/repos/nostalgic-css/NES.css/contributors');
+        const json = await res.json();
+
+        const coreMembers = [...this.coreteam, ...this.emeriti].map(a => a.github);
+        this.contributors = json.filter(a => !coreMembers.includes(a.login)).map(a => a.login);
+      } catch (e) {
+        console.error(e);
+        return;
+      }
+
+      await this.$nextTick();
+      this.replaceImages();
+    },
+    replaceImages() {
+      Array.from(document.querySelectorAll('img.lazy')).forEach((img) => {
+        img.onload = () => img.classList.remove('lazy');
+        img.src = img.dataset.src;
+      });
+    },
   },
 });

docs/style.css

@@ -282,8 +282,8 @@ h3.topic-title > i {
   transform: rotateZ(90deg);
 }
 
-.lazy {
+img.lazy {
-  background-color: #006bb3;
+  background-color: #D3D3D3;
 }
 
 @media screen and (max-width: calc(980px - 4rem)) {