Merge pull request #634 from marcpicaud/github-stars

⭐️GitHub stargazers count

Author: riyadhalnur

.env.example

@@ -0,0 +1,2 @@
+# Generate your GitHub Personnal Access Token here: https://github.com/settings/tokens
+GITHUB_PERSONAL_ACCESS_TOKEN=put_your_github_token_here

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.env
 .idea
 .build*
 _site

README.md

@@ -12,7 +12,13 @@ We ask that you make pull requests because changes to this repository will get d
 
 ## Running the entire app locally
 
-This is a static site with a build step, simply run `npm start`:
+This is a static site with a build step. The build step uses a [GitHub Personnal Access Token](https://github.com/settings/tokens) that you need to generate and put in a .env file. **Actually you don't need to configure any authorization on this access token**, it just serves the purpose of unleashing the GitHub API Rate Limit.
+
+```
+cp .env.example .env
+// then put your GitHub Personnal Access Token in the .env file
+```
+After that, simply run `npm start`:
 
 ```
 npm install
@@ -25,10 +31,10 @@ Please refer to the [nodeschool site](http://nodeschool.io/#workshoppers) for de
 
 - **Globally** (easiest)
 
-	Depending on the npm version, `npm packages` get installed in different routes. To have access to them globally. Do 
-	
+	Depending on the npm version, `npm packages` get installed in different routes. To have access to them globally. Do
+
 	`npm install -global package_name` or 	`npm install -g package_name`
-	
+
 	If you get a  `permission denied` **error**. Run the previous command with `sudo`.
 
 	`sudo npm install -g package_name`
@@ -52,10 +58,10 @@ If you would like to keep all the node_school workshop packages inside a custom
 ```
 ~ mkdir -p node_school
 cd node_school
-npm install javascripting 
+npm install javascripting
 ```
 
-From within the `node_school` directory now run `node_modules/learnyounode/bin/javascripting` to start it. 
+From within the `node_school` directory now run `node_modules/learnyounode/bin/javascripting` to start it.
 
 This is because you need to run the executable from within the directory itself since it's not available globally in your `$PATH`
 

index.html

@@ -201,7 +201,7 @@ <h4><a class="js-workshop-link" href="https://www.github.com/jlord/git-it-electr
             <p>Download the <a href="https://github.com/jlord/git-it-electron/releases" target="_blank" rel="noreferrer noopener">latest desktop app release</a>.</p>
           </div>
           <div id="elementary-electron" class="workshopper">
-            <h4><a href="https://www.github.com/maxogden/elementary-electron" target="_blank" rel="noreferrer noopener">Elementary Electron</a></h4>
+            <h4><a class="js-workshop-link" href="https://www.github.com/maxogden/elementary-electron" target="_blank" rel="noreferrer noopener">Elementary Electron</a></h4>
             <p data-i18n="workshopper-elementary-electron">Make a desktop application using Node and Chromium with Electron</p>
             <code>npm install -g elementary-electron</code>
           </div>
@@ -293,7 +293,7 @@ <h4><a class="js-workshop-link" href="https://github.com/stackgl/webgl-workshop"
           <code>npm install -g webgl-workshop</code>
         </div>
         <div id="esnext-generation" class="workshopper">
-          <h4><a href="https://github.com/jesstelford/esnext-generation" target="_blank" rel="noreferrer noopener">ESNext Generation</a></h4>
+          <h4><a class="js-workshop-link" href="https://github.com/jesstelford/esnext-generation" target="_blank" rel="noreferrer noopener">ESNext Generation</a></h4>
           <p data-i18n="workshopper-esnext-generation">Intro to ES6 Iterators, their use, and how they relate to Generators.</p>
           <code>npm install -g esnext-generation</code>
         </div>
@@ -416,7 +416,7 @@ <h4><a class="js-workshop-link" href="https://github.com/bevacqua/perfschool" ta
           <code>npm install -g perfschool</code>
         </div>
         <div id="web-audio-school" class="workshopper">
-          <h4><a href="https://github.com/mmckegg/web-audio-school" target="_blank" rel="noreferrer noopener">Web Audio School</a></h4>
+          <h4><a class="js-workshop-link" href="https://github.com/mmckegg/web-audio-school" target="_blank" rel="noreferrer noopener">Web Audio School</a></h4>
           <p data-i18n="workshopper-web-audio-school">Learn the Web Audio API by completing a series of interactive lessons with a focus on music.</p>
           <code>npm install -g web-audio-school</code>
         </div>
@@ -451,7 +451,7 @@ <h4><a class="js-workshop-link" href="https://github.com/excellalabs/js-best-pra
           <code>npm install -g js-best-practices</code>
         </div>
         <div id="scope-chains-closures" class="workshopper">
-            <h4><a href="https://www.github.com/workshopper/scope-chains-closures" target="_blank" rel="noreferrer noopener">Scope Chains & Closures</a></h4>
+            <h4><a class="js-workshop-link" href="https://www.github.com/workshopper/scope-chains-closures" target="_blank" rel="noreferrer noopener">Scope Chains & Closures</a></h4>
             <p data-i18n="workshopper-scope-chains-closures">Learn the details of Scope, Scope Chains, Closures, and Garbage Collection.</p>
             <code>npm i @workshoppers/scope-chains-closures -g</code><br>
             <code>scope-chains-closures</code>

package.json

@@ -34,8 +34,10 @@
   "devDependencies": {
     "after-all": "^2.0.1",
     "autoprefixer-stylus": "^0.9.4",
+    "axios": "^0.18.0",
     "browserify": "^12.0.1",
     "cheerio": "^0.19.0",
+    "dotenv": "^6.1.0",
     "gaze": "^0.5.1",
     "glob": "^6.0.3",
     "jsdom": "^7.1.0",

scripts/build-copy.js

@@ -15,21 +15,21 @@ function process(file) {
 	var output = Path.join('.build', file)
 	mkdirp.sync(Path.dirname(output))
 	Fs.createReadStream(file)
-	  .pipe(
-	  	Fs.createWriteStream(output)
-	  	  .on('end', function () {
-	  	  	delete processing[file]
-	  	  	if (waiting[file]) {
-	  	  		delete waiting[file]
-	  	  		process(file)
-	  	  	}
-	  	  })
-	  )
+		.pipe(
+			Fs.createWriteStream(output)
+				.on('end', function () {
+					delete processing[file]
+					if (waiting[file]) {
+						delete waiting[file]
+						process(file)
+					}
+				})
+		)
 }
 
 cmdwatcher('build-copy'
-	     , ['!(node_modules)/**/*.@(png|jpg|svg|css|gif|ico)','*.@(png|jpg|svg|css|gif|ico)', 'js/*', 'CNAME']
-	     , function processFiles(files)
+			 , ['!(node_modules)/**/*.@(png|jpg|svg|css|gif|ico)','*.@(png|jpg|svg|css|gif|ico|map)', 'js/*', 'CNAME']
+			 , function processFiles(files)
 {
 	files.forEach(process)
 })

scripts/build-html.js

@@ -4,60 +4,75 @@ const Path = require('path')
 const Fs = require('fs')
 const jsdom = require('jsdom')
 const mkdirp = require('mkdirp')
+const { performance } = require('perf_hooks');
 const cmdwatcher = require('./util/cmdwatcher')
 const LANGS = Path.join(__dirname, '../languages/languages.json')
 const FOOTER = Path.join(__dirname, '../footer.html')
 
+const env = require('dotenv').config();
+if (env.error) {
+	throw env.error;
+}
+
+if (!process.env.GITHUB_PERSONAL_ACCESS_TOKEN) {
+	throw new Error('GITHUB_PERSONAL_ACCESS_TOKEN environment variable is not found');
+}
+
+const axios = require('axios').create({
+	baseURL: 'https://api.github.com/',
+	headers: { 'Authorization': `token ${process.env.GITHUB_PERSONAL_ACCESS_TOKEN}` }
+});
+
 function createLangButton(dom, file, lang, langName) {
 var li = dom.createElement('li')
-  li.className = 'nav-lang-' + lang
-  li.innerHTML = '<a href="/' + (lang === 'en' ? '' : lang + '/') + (file === 'index.html' ? '' : file) + '" class="switch-lang" lang="' + lang + '">' + langName + '</a>'
-  return li
+	li.className = 'nav-lang-' + lang
+	li.innerHTML = '<a href="/' + (lang === 'en' ? '' : lang + '/') + (file === 'index.html' ? '' : file) + '" class="switch-lang" lang="' + lang + '">' + langName + '</a>'
+	return li
 }
 
 function createSkipButton(dom) {
-  var a = dom.createElement('a')
-  a.className = 'skip'
-  a.href = '#main'
-  a.innerHTML = 'Skip to Content'
-  return a
+	var a = dom.createElement('a')
+	a.className = 'skip'
+	a.href = '#main'
+	a.innerHTML = 'Skip to Content'
+	return a
 }
 
 function addTranslationNav(dom, file, languages) {
 	var items = []
-  var nav = dom.createElement('ul')
-  nav.className = "nav-lang"
-
-  Object.keys(languages).sort(function (a, b) {
-  	return languages[a] > languages[b] ? 1 : -1
-  }).forEach(function(lang) {
-  	var button = createLangButton(dom, file, lang, languages[lang])
-  	items.push(button.firstChild)
-    nav.appendChild(button)
-  })
-  var node = dom.querySelector('header > *:first-child')
-  if (node) {
-  	node.parentNode.insertBefore(createSkipButton(dom), node)
-  	node.parentNode.insertBefore(nav, node)
-  }
-  return items
+	var nav = dom.createElement('ul')
+	nav.className = "nav-lang"
+
+	Object.keys(languages).sort(function (a, b) {
+		return languages[a] > languages[b] ? 1 : -1
+	}).forEach(function(lang) {
+		var button = createLangButton(dom, file, lang, languages[lang])
+		items.push(button.firstChild)
+		nav.appendChild(button)
+	})
+	var node = dom.querySelector('header > *:first-child')
+	if (node) {
+		node.parentNode.insertBefore(createSkipButton(dom), node)
+		node.parentNode.insertBefore(nav, node)
+	}
+	return items
 }
 
 function createLanguageLink(dom, href, locale) {
-  var link = dom.createElement('link')
-  link.setAttribute('rel', 'alternate')
-  link.setAttribute('href', href)
-  link.setAttribute('hreflang', locale)
-  return link
+	var link = dom.createElement('link')
+	link.setAttribute('rel', 'alternate')
+	link.setAttribute('href', href)
+	link.setAttribute('hreflang', locale)
+	return link
 }
 
 function addLanguageLinks(dom, file, locales) {
-  var head = dom.querySelector('head')
-  return Object.keys(locales).map(function (locale) {
+	var head = dom.querySelector('head')
+	return Object.keys(locales).map(function (locale) {
 		var link = createLanguageLink(dom, (locale != 'en' ? '/' + locale : '') + '/' + (file === 'index.html' ? '' : file), locale)
 		head.appendChild(link)
 		return link
-  })
+	})
 }
 
 function getNodeByLanguage(nodes, lang) {
@@ -71,10 +86,54 @@ function getNodeByLanguage(nodes, lang) {
 	}
 }
 
+async function getStargazers(workshopElement) {
+	const url = require('url');
+	const githubUrl = workshopElement.getAttribute("href");
+	let response, parsedUrl;
+
+	if (!githubUrl) {
+		return 0;
+	}
+
+	try {
+		parsedUrl = url.parse(githubUrl);
+	} catch (e) {
+		throw e;
+	}
+
+	try {
+		response = await axios.get(`/repos${parsedUrl.path}?per_page=1`);
+	} catch (e) {
+		throw e;
+	}
+	writeStargazers(workshopElement, response.data.stargazers_count)
+}
+
+function writeStargazers(workshopElement, stargazersCount) {
+	const starIconSVG = `<svg style="vertical-align: middle" viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img"><path fill="currentColor" fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>`;
+	workshopElement.innerHTML = `
+		<span>${workshopElement.innerHTML}</span>
+		<span>(${starIconSVG}${kFormatter(stargazersCount)})<span>
+	`;
+}
+
+function kFormatter(number) {
+	return number > 999 ? (number / 1000).toFixed(1) + 'k' : number
+}
+
+async function isRateLimitReached(nbToPerform) {
+	const remaining = await axios.get('/rate_limit')
+	if (remaining.data.resources.core.remaining < nbToPerform) {
+		console.error(`💔 GitHub Rate Limit Reached. Reset at ${new Date(remaining.data.resources.core.reset * 1000).toLocaleTimeString()}`);
+		return true;
+	}
+	return false;
+}
+
 cmdwatcher('build-html'
-	     , '!(node_modules).html'
-	     , 'languages/**'
-	     , function processFiles(files)
+			 , '!(node_modules).html'
+			 , 'languages/**'
+			 , function processFiles(files)
 {
 	var languages
 	try {
@@ -85,7 +144,7 @@ cmdwatcher('build-html'
 	var translations = {}
 	Object.keys(languages).forEach(function (lang) {
 		var raw
-		  , translationPath = Path.join(__dirname, '../languages/', lang + '.json')
+			, translationPath = Path.join(__dirname, '../languages/', lang + '.json')
 		try {
 			raw = Fs.readFileSync(translationPath, 'utf8')
 		} catch (e) {
@@ -102,17 +161,26 @@ cmdwatcher('build-html'
 		}
 	})
 	languages['en'] = 'English'
-	files.forEach(function (file) {
+	files.forEach(async function (file) {
 		var raw
-		  , dom
-		  , original
+			, dom
+			, original
 		try {
 			raw = Fs.readFileSync(file, 'utf8')
 		} catch(e) {
 			return console.log('Error while reading %s:\n%s', file, e)
 		}
 		try {
 			dom = jsdom.jsdom(raw)
+			if (file === 'index.html') {
+				const t0 = performance.now();
+				const workshops = dom.getElementsByClassName('js-workshop-link');
+				await isRateLimitReached(workshops.length);
+				const githubPromises = Array.from(workshops).map(getStargazers);
+				await Promise.all(githubPromises);
+				const t1 = performance.now();
+				console.log(`⭐️ GitHub Stargazers fetched in ${((t1 - t0) / 1000).toFixed(1)}s`)
+			}
 		} catch(e) {
 			return console.log('Error while domify %s:\n%s', file, e)
 		}
@@ -122,7 +190,7 @@ cmdwatcher('build-html'
 			var footerHtml = Fs.readFileSync(FOOTER, 'utf8')
 			footer.innerHTML = footerHtml
 		}
-		
+
 		var list = dom.querySelectorAll('[data-i18n]')
 		if (list) {
 			original = {}
@@ -141,9 +209,9 @@ cmdwatcher('build-html'
 
 		Object.keys(languages).forEach(function (lang) {
 			var translation = translations[lang]
-			  , outputPath = Path.join('.build/', (lang === 'en' ? '' : lang + '/'), file)
-			  , outputDir = Path.dirname(outputPath)
-			  , output
+				, outputPath = Path.join('.build/', (lang === 'en' ? '' : lang + '/'), file)
+				, outputDir = Path.dirname(outputPath)
+				, output
 			html.setAttribute('lang', lang)
 			if (list) {
 				try {

scripts/build.sh

@@ -3,4 +3,4 @@ npm run build-chapters -- $@
 npm run generate-css
 npm run build-dependencies
 npm run build-copy -- $@
-npm run build-html -- $@
+npm run build-html -- $@

scripts/deploy.sh

@@ -14,9 +14,9 @@ rm -rf "$BUILD_FOLDER"
 # Checkout the current repo
 if [[ -z $GITHUB_PERSONAL_ACCESS_TOKEN ]]
 then
-  git clone -b master git@github.com:nodeschool/nodeschool.github.io.git .build
+	git clone -b master git@github.com:nodeschool/nodeschool.github.io.git .build
 else
-  git clone -b master https://$GITHUB_USER:$GITHUB_PERSONAL_ACCESS_TOKEN@github.com/nodeschool/nodeschool.github.io.git .build
+	git clone -b master https://$GITHUB_USER:$GITHUB_PERSONAL_ACCESS_TOKEN@github.com/nodeschool/nodeschool.github.io.git .build
 fi
 
 npm run build

styles/style.styl

@@ -455,7 +455,8 @@ span.no-break { display:inline-block; }
     font-family: Source Code Pro, monospace;
     font-weight: 500;
     text-decoration: none;
-    display: block;
+    display: flex;
+    justify-content: space-between;
     border: none;
   }