Fetch GitHub API via JavaScript

Works around our PHP version on server being older than supported TLS1.2.

Author: philwareham

package-lock.json

@@ -9,7 +9,8 @@
     // Load objects as variables.
 
     var code = document.querySelectorAll('pre code'),
-        navmenu = document.getElementById('site-navigation');
+        navmenu = document.getElementById('site-navigation'),
+        starbubble = document.getElementById('starbubble');
 
     // Syntax highlighting, via 'Prism'.
     // Applies syntax highlighting to `code` HTML elements.
@@ -32,4 +33,47 @@
         });
     }
 
+    // GitHub star count.
+
+    if (starbubble) {
+        var githubStars = function (callback) {
+        	var xmlhttp = new XMLHttpRequest(),
+        		url = ['https://api.github.com/repos/textpattern/textpattern'],
+        		useCallback = (typeof(callback) === 'function');
+
+        	function countStars(response) {
+        		if (!(response instanceof Array)) {
+        			response = [response];
+        		}
+        		var stars = 0;
+        		for (var i in response) {
+                    if (response.hasOwnProperty(i)) {
+                        stars += parseInt(response[i].stargazers_count);
+                    }
+                }
+        		return stars;
+        	}
+
+        	if (useCallback) {
+        		xmlhttp.onreadystatechange = function() {
+        			if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+        				callback(countStars(JSON.parse(xmlhttp.responseText)));
+        			}
+        		};
+        	}
+
+        	xmlhttp.open('GET', url, useCallback);
+        	xmlhttp.setRequestHeader('Accept', 'application/vnd.github.v3+json');
+        	xmlhttp.send();
+
+        	if (!useCallback) {
+        		return countStars(JSON.parse(xmlhttp.responseText));
+        	}
+        };
+
+        githubStars(function(stars) {
+            starbubble.innerHTML = '<a id="starcount" class="count-bubble" rel="external" href="https://github.com/textpattern/textpattern/stargazers" title="Stargazers on GitHub">'+stars+'</a>';
+        });
+    }
+
 })();

src/assets/js/main.js

@@ -118,7 +118,7 @@ <h1 class="cta"><span>The small content management system that can handle big id
                         </p>
                         <p>
                             <a class="button" rel="external" href="https://github.com/textpattern/textpattern/" title="Stars on GitHub"><span class="ui-icon ui-extra-icon-github">GitHub</span> <strong>Stars</strong></a>
-                            <a class="count-bubble" rel="external" href="https://github.com/textpattern/textpattern/stargazers" title="Stargazers on GitHub">300</a>
+                            <span id="starbubble"></span>
                         </p>
 
                     </div><!-- /.container -->

src/mockups/index.html

@@ -75,28 +75,7 @@
                     </p>
                     <p>
                         <a class="button" rel="external" href="https://github.com/textpattern/textpattern/" title="Stars on GitHub"><span class="ui-icon ui-extra-icon-github">GitHub</span> <strong>Stars</strong></a>
-                        <txp:etc_cache id="github-stars" time="-3600">
-                            <txp:php>
-$curl1 = curl_init();
-
-curl_setopt_array($curl1, array(
-    CURLOPT_RETURNTRANSFER => 1,
-    CURLOPT_URL => 'https://api.github.com/repos/textpattern/textpattern',
-    CURLOPT_USERAGENT => 'Textpattern CMS',
-));
-
-$response1 = curl_exec($curl1);
-
-if (curl_error($curl1)) {
-    // Do nothing.
-} else {
-    $json = json_decode($response1);
-    echo '<a class="count-bubble" rel="external" href="https://github.com/textpattern/textpattern/stargazers" title="Stargazers on GitHub">'.$json->stargazers_count.'</a>';
-}
-
-curl_close($curl1);
-                            </txp:php>
-                        </txp:etc_cache>
+                        <span id="starbubble"></span>
                     </p>
                 </div>
             </div>