contributors

.github/workflows/deploy-to-gh-pages.yml

@@ -22,6 +22,8 @@ jobs:
           npm ci
           npm run pre-build
           npm run build-ci
+        env:
+          NODE_ENV: production
 
       - name: Deploy 📦
         uses: JamesIves/[email protected]

Gruntfile.js

@@ -134,6 +134,8 @@ module.exports = function(grunt) {
     siteName: 'ThreeJSFundamentals',
     siteThumbnail: 'threejsfundamentals.jpg',  // in rootFolder/lessons/resources
     templatePath: 'build/templates',
+    owner: 'gfxfundamentals',
+    repo: 'threejsfundamentals',
     thumbnailOptions: {
       thumbnailBackground: 'threejsfundamentals-background.jpg',
       text: [

build/templates/index.template

@@ -107,6 +107,14 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 {{{include "build/templates/repobanner.template"}}}
 <iframe class="background" src="/threejs/background.html"></iframe>
 </body>
+<script>
+const settings = {
+  contribTemplate: {{{stringify names="langInfo.contribTemplate,originalLangInfo.contribTemplate"}}},
+  owner: {{{stringify names="settings.owner"}}},
+  repo: {{{stringify names="settings.repo"}}},
+};
+</script>
+<script src="/contributors.js"></script>
 <script src="/3rdparty/jquery-3.3.1.slim.min.js"></script>
 <script src="/threejs/lessons/resources/lesson.js"></script>
 {{{include "build/templates/analytics.template" }}}

build/templates/lesson.template

@@ -146,6 +146,14 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   </div>
 </div>
 </body>
+<script>
+const settings = {
+  contribTemplate: {{{stringify names="langInfo.contribTemplate,originalLangInfo.contribTemplate"}}},
+  owner: {{{stringify names="settings.owner"}}},
+  repo: {{{stringify names="settings.repo"}}},
+};
+</script>
+<script src="/contributors.js"></script>
 <script src="/3rdparty/jquery-3.3.1.slim.min.js"></script>
 <script src="/threejs/lessons/resources/prettify.js"></script>
 <script src="/threejs/lessons/resources/lesson.js"></script>

build/templates/repobanner.template

@@ -1,30 +1,39 @@
 <style>
-#forkongithub a {
+#forkongithub>div {
     background: #000;
     color: #fff;
-    text-decoration: none;
     font-family: arial,sans-serif;
     text-align: center;
     font-weight: bold;
     padding: 5px 40px;
     font-size: 0.9rem;
-    line-height: 2rem;
+    line-height: 1.3rem;
     position: relative;
     transition: 0.5s;
     display: block;
-    width: 300px;
+    width: 400px;
     position: absolute;
     top: 0;
     right: 0;
-    transform: translateX(150px) rotate(45deg) translate(10px,70px);
+    transform: translateX(200px) rotate(45deg) translate(10px,70px);
     box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
     pointer-events: auto;
 }
-#forkongithub a:hover {
+#forkongithub a {
+  text-decoration: none;
+  color: #fff;
+}
+#forkongithub>div:hover {
     background: #c11;
     color: #fff;
 }
-#forkongithub a::before,#forkongithub a::after {
+#forkongithub .contributors {
+  font-size: 0.75rem;
+  background: rgba(255,255,255,0.2);
+  line-height: 1.2;
+  padding: 0.1em;
+}
+#forkongithub>div::before,#forkongithub>div::after {
     content: "";
     width: 100%;
     display: block;
@@ -34,7 +43,7 @@
     height: 1px;
     background: #fff;
 }
-#forkongithub a::after {
+#forkongithub>div::after {
     bottom: 1px;
     top: auto;
 }
@@ -55,8 +64,15 @@
   height: 1em;
   vertical-align: middle;
 }
+#forkongithub img {
+  width: 1em;
+  height: 1em;
+  border-radius: 100%;
+  vertical-align: middle;
+}
+
 @media (max-width: 900px) {
-    #forkongithub a{
+    #forkongithub>div {
         line-height: 1.2rem;
     }
 }
@@ -66,11 +82,11 @@
   }
 }
 @media (max-width: 410px) {
-    #forkongithub a{
+    #forkongithub>div {
         font-size: 0.7rem;
         transform: translateX(150px) rotate(45deg) translate(20px,40px);
     }
 }
 
 </style>
-<div id="forkongithub"><a href="https://github.com/gfxfundamentals/threejsfundamentals">Fix, Fork, Contribute {{{include "build/templates/octocat-icon.svg"}}}</a></div>
+<div id="forkongithub"><div><div><a href="https://github.com/gfxfundamentals/threejsfundamentals">Fix, Fork, Contribute {{{include "build/templates/octocat-icon.svg"}}}</a></div></div></div>

threejs/lessons/langinfo.hanson

@@ -18,11 +18,12 @@
     </div>
   `,
   missing: `
-     Sorry this article has not been translated yet. 
+     Sorry this article has not been translated yet.
      [Translations Welcome](https://github.com/gfxfundamentals/threejsfundamentals)! 😄
      
      [Here's the original English article for now]({{{origLink}}}).
   `,
+  contribTemplate: 'Thank you <a href="${html_url}"><img src="${avatar_url}"> ${login}</a><br>for <a href="https://github.com/${owner}/${repo}/commits?author=${login}">${contributions} contributions</a>',
   toc: 'Table of Contents',
   categoryMapping: {
     'basics': 'Basics',

threejs/lessons/resources/index.css

@@ -9,6 +9,7 @@ iframe.background {
     position: fixed;
     width: 100%;
     height: 100%;
+    max-width: 100% !important;
     border: none;
     top: 0;
     z-index: -1000;

threejs/lessons/resources/lesson.js

@@ -1,21 +1,41 @@
 // Licensed under a BSD license. See license.html for license
+/* eslint-disable strict */
 'use strict';  // eslint-disable-line
 
-/* global jQuery */
+/* global jQuery, settings, contributors */
 
 (function($){
+
 function getQueryParams() {
-  const params = {};
-  if (window.location.search) {
-    window.location.search.substring(1).split('&').forEach(function(pair) {
-      const keyValue = pair.split('=').map(function(kv) {
-        return decodeURIComponent(kv);
-      });
-      params[keyValue[0]] = keyValue[1];
-    });
+  return Object.fromEntries(new URLSearchParams(window.location.search).entries());
+}
+
+//
+function replaceParams(str, subs) {
+  return str.replace(/\${(\w+)}/g, function(m, key) {
+    return subs[key];
+  });
+}
+
+function showContributors() {
+  // contribTemplate: 'Thank you
+  // <a href="${html_url}">
+  // <img src="${avatar_url}">${login}<a/>
+  //  for <a href="https://github.com/${owner}/${repo}/commits?author=${login}">${contributions} contributions</a>',
+  try {
+    const subs = {...settings, ...contributors[Math.random() * contributors.length | 0]};
+    const template = settings.contribTemplate;
+    const html = replaceParams(template, subs);
+    const parent = document.querySelector('#forkongithub>div');
+    const div = document.createElement('div');
+    div.className = 'contributors';
+    div.innerHTML = html;
+    parent.appendChild(div);
+  } catch (e) {
+    console.error(e);
   }
-  return params;
 }
+showContributors();
 
 $(document).ready(function($){
   const supportedLangs = {