Contributor section missing js fix

website/gulpfile.js

@@ -94,6 +94,10 @@ getPaths = () => {
       mrare: {
         all: "js/mrare/**/*.js",
         index: "js/mrare/index.js",
+      },
+      custom: {
+        all: "js/custom/**/*.js",
+        index: "js/custom/index.js",
       }
     },
     scss: {
@@ -305,6 +309,59 @@ gulp.task('mrarejs', async (done) => {
   done();
 });
 
+gulp.task('customjs', async (done) => {
+  gulp.src(paths.js.custom.all)
+    .pipe(eslint())
+    .pipe(eslint.format());
+
+  let fileDest = 'custom.js';
+  const banner = `/*!
+  * Copyright 2020 responsively.app
+  */`;
+  const external = [];
+  const plugins = [
+    rollupCommonjs(),
+    rollupResolve({
+      browser: true,
+    }),
+    rollupBabel(babelConfig),
+    rollupUglify({
+      output: {
+        comments: "/^!/"
+      }
+    }),
+  ];
+  const globals = {};
+
+  const bundle = await rollup.rollup({
+    input: paths.js.custom.index,
+    external,
+    plugins,
+    onwarn: function (warning) {
+      // Skip certain warnings
+      if (warning.code === 'THIS_IS_UNDEFINED') {
+        return;
+      }
+      // console.warn everything else
+      console.warn(warning.message);
+    }
+  });
+
+  await bundle.write({
+    file: path.resolve(__dirname, `./${paths.dist.js}${path.sep}${fileDest}`),
+    banner,
+    globals,
+    format: 'umd',
+    name: 'custom',
+    sourcemap: true,
+    sourcemapFile: path.resolve(__dirname, `./${paths.dist.js}${path.sep}${fileDest}.map`),
+  });
+  // Reload Browsersync clients
+  reload();
+  done();
+});
+
+
 // Assets
 gulp.task('copy-assets', function () {
   return gulp.src(paths.assets.all, {
@@ -379,6 +436,11 @@ gulp.task('watch', function (done) {
     cwd: './'
   }, gulp.series('mrarejs'));
 
+  // Rebuild custom js if files change
+  gulp.watch([paths.js.custom.all], {
+    cwd: './'
+  }, gulp.series('customjs'));
+
   // Rebuild mrare js if files change
   const assetsWatcher = gulp.watch([paths.assets.all, ...paths.assets.allFolders], {
     cwd: './'
@@ -399,6 +461,6 @@ gulp.task('watch', function (done) {
 
 });
 
-gulp.task('default', gulp.series('clean:dist', 'copy-assets', gulp.series('html', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs'), gulp.series('serve', 'watch')));
+gulp.task('default', gulp.series('clean:dist', 'copy-assets', gulp.series('html', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs', 'customjs'), gulp.series('serve', 'watch')));
 
-gulp.task('build', gulp.series('clean:dist', 'copy-assets', gulp.series('html-minify', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs')));
+gulp.task('build', gulp.series('clean:dist', 'copy-assets', gulp.series('html-minify', 'sass', 'sass-min', 'bootstrapjs', 'mrarejs', 'customjs')));

website/js/custom/contributors.js

@@ -0,0 +1,37 @@
+const populateContributors = () => {
+  function profileHtmlString(to, title, style) {
+    return `<a href="${to}" title="${title}" target="_blank" class="github-contributors__avatar" style="${style}">&nbsp;</a>`;
+  }
+
+  function generateProfile(c) {
+    const to = `https://github.com/${c.login}`;
+    const title = `${c.contributions} contributions from ${c.login}`;
+    const style = `background-image: url('${c.avatar_url}&s=96');`;
+    return profileHtmlString(to, title, style);
+  }
+
+  function generateFooterRow(json) {
+    let html = '';
+    document.getElementById(
+      'github-contributors__thanks',
+    ).innerText = `Thanks to all of our ${json.length} contributors! 🎉👏`;
+    json.forEach((contributor) => {
+      html += generateProfile(contributor);
+    });
+    document.getElementById('github-contributors__users').innerHTML = html;
+  }
+
+  function getContr() {
+    fetch(
+      'https://api.github.com/repos/responsively-org/responsively-app/contributors',
+    )
+      .then((response) => response.text())
+      .then((text) => JSON.parse(text))
+      .then((json) => generateFooterRow(json))
+      .catch(() => { });
+  }
+
+  getContr();
+};
+
+export default populateContributors;

website/js/custom/index.js

@@ -0,0 +1,5 @@
+import populateContributors from './contributors';
+
+export default {
+  populateContributors,
+};

website/js/mrare/contributors.js

@@ -1,40 +0,0 @@
-var json = '';
-var html = '';
-
-function profileHtmlString(to, title, style) {
-    return `<a href="${to}" title="${title}" target="_blank" class="github-contributors__avatar" style="${style}">&nbsp;</a>`;
-}
-
-function generateProfile(c) {
-    var to = `https://github.com/${c.login}`;
-    var title = `${c.contributions} contributions from ${c.login}`;
-    var style = `background-image: url('${c.avatar_url}&s=64');`;
-    html += profileHtmlString(to, title, style);
-}
-
-function getContributorAmount() {
-    return json.length;
-}
-
-function generateFooterRow() {
-    document.getElementById('github-contributors__thanks').innerText = `Thanks to all of our ${getContributorAmount()} contributors!`;
-    for (var i = 0; i < json.length; i++) {
-        generateProfile(json[i]);
-    }
-    document.getElementById('github-contributors__users').innerHTML = html;
-}
-
-async function getContr() {
-    fetch('https://api.github.com/repos/responsively-org/responsively-app/contributors', {
-        method: 'GET',
-        headers: {
-            'User-Agent': 'responsively-app/website',
-        },
-    })
-        .then((response) => response.text())
-        .then((text) => json = JSON.parse(text))
-        .then((json) => generateFooterRow())
-        .catch((err) => console.error(err));
-}
-
-getContr();

website/pages/assets/css/custom.css

@@ -39,17 +39,23 @@ html {
   width: 300px;
 }
 
+#github-contributors__thanks {
+  padding: 0 2rem;
+  max-width: 40rem;
+  margin: auto;
+}
+
 #github-contributors__users {
   padding: 0 2rem;
   max-width: 40rem;
-  margin: 1rem auto;
+  margin: 2rem auto;
 }
 
 .github-contributors__avatar {
   overflow: hidden;
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
+  width: 48px;
+  height: 48px;
   margin: .1rem .2rem;
   display: inline-block;
   background-color: hsla(0, 0%, 100%, .1);

website/pages/download.html

@@ -306,6 +306,15 @@
     </div>
   </section>
 
+  <section>
+    <div class="justify-content-center text-center">
+      <h4 id="github-contributors__thanks"></h4>
+      <div id="github-contributors__users">
+      </div>
+    </div>
+  </section>
+  
+
     <!-- trusted section -->
     <footer id="Contact-Us" class="pb-1 bg-primary-3 text-light">
       <div class="container">
@@ -463,6 +472,12 @@
     <script type="text/javascript" src="assets/js/typed.min.js"></script>
     <!-- Required theme scripts (Do not remove) -->
     <script type="text/javascript" src="assets/js/theme.js"></script>
+    <!-- Loads github contributors -->
+    <script type="text/javascript" src="assets/js/custom.js"></script>
+    <script type="text/javascript">
+      window.custom.populateContributors();
+    </script>
+    
     <!-- Removes page load animation when window is finished loading -->
     <script type="text/javascript">
       window.addEventListener("load", function() {

website/pages/index.html

@@ -556,7 +556,7 @@
 
     <section>
       <div class="justify-content-center text-center">
-        <h3 id="github-contributors__thanks">Thanks to all of our contributors!</h3>
+        <h4 id="github-contributors__thanks"></h4>
         <div id="github-contributors__users">
         </div>
       </div>
@@ -735,9 +735,12 @@
     <script type="text/javascript" src="assets/js/typed.min.js"></script>
     <!-- Required theme scripts (Do not remove) -->
     <script type="text/javascript" src="assets/js/theme.js"></script>
-    <!-- Removes page load animation when window is finished loading -->
-    <script type="text/javascript" src="../js/mrare/contributors.js"></script>
     <!-- Loads github contributors -->
+    <script type="text/javascript" src="assets/js/custom.js"></script>
+    <script type="text/javascript">
+      window.custom.populateContributors();
+    </script>
+    <!-- Removes page load animation when window is finished loading -->
     <script type="text/javascript">
       window.addEventListener("load", function() {
         document.querySelector("body").classList.add("loaded");