diff --git a/docs/script.js b/docs/script.js index f9e4fd78..a2c18f5a 100644 --- a/docs/script.js +++ b/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; + }); + }, }, }); diff --git a/docs/style.css b/docs/style.css index c2e41e0b..263469d8 100644 --- a/docs/style.css +++ b/docs/style.css @@ -282,8 +282,8 @@ h3.topic-title > i { transform: rotateZ(90deg); } -.lazy { - background-color: #006bb3; +img.lazy { + background-color: #D3D3D3; } @media screen and (max-width: calc(980px - 4rem)) {