devapp/static/gophercon/index.html - build - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>GopherCon 2017 Contribution Dashboard</title>
 <meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1">
 <style>
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 a:link,
 a:visited {
   color: #fff;
 }
 .Site {
   background-color: #2a2a2a;
   color: #fff;
   display: flex;
   flex-direction: column;
   font: 14px 'Helvetica-Neue', Helvetica, sans-serif;
   height: 100vh;
   text-rendering: optimizeLegibility;
 }
 .Site-body {
   display: flex;
   flex: 1;
 }
 .Site-content {
   border-right: 1px solid #3a3939;
   overflow: hidden;
   padding: 1.5em;
   width: 60%;
 }
 .Site-activity {
   background-color: #323232;
   flex: 1;
   overflow: scroll;
 }
 .Site-logo {
   height: 60px;
   margin-right: 2em;
 }
 .Site-pointsTitle,
 .Site-points {
   text-align: center;
 }
 .Site-pointsTitle {
   font-size: 4vh;
   letter-spacing: 1px;
   text-transform: uppercase;
 }
 .Site-points {
   font-size: 30vh;
 }
 .u-avatar {
   border-radius: 50%;
 }
 .AvatarGroup {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 .AvatarGroup-avatar {
   height: 6vh;
   margin: 0 .5em .5em 0;
   width: 6vh;
 }
 .Activity {
   align-items: flex-start;
   background-color: #323232;
   border-bottom: 1px solid #2d2d2d;
   border-top: 1px solid #404040;
   display: flex;
   font-size: 2vw;
   padding: 1em;
 }
 .Activity-avatar {
   height: 2.5em;
   margin-right: .75em;
   width: 2.5em;
 }
 .Activity-main {
   flex: 1;
   margin-right: .15em;
 }
 .Activity-points {
   color: #85ebf9;
   font-size: .85em;
   margin-top: .25em;
 }
 .Activity-icon {
   font-size: 2em;
 }
 .Site-footer {
   align-items: center;
   background: #3a3737;
   display: flex;
   justify-content: space-between;
   padding: 1em 1.5em;
 }
 </style>
 <body class="Site">
   <div class="Site-body">
     <main class="Site-content">
       <div class="Site-pointsTitle">Total points</div>
       <div class="Site-points js-totalPoints">0</div>
       <div class="AvatarGroup js-avatarGroup"></div>
     </main>
     <aside class="Site-activity js-activityList"></aside>
   </div>
   <footer class="Site-footer">
     <img class="Site-logo" src="https://github.com/ashleymcnamara/gophers/raw/master/GoCommunity.png" alt="Go Community">
     <div>
       Gopher artwork by <a href="https://github.com/ashleymcnamara/gophers" target="_blank">Ashley McNamara</a>
       based on the original artwork by the amazing
       <a href="https://reneefrench.blogspot.com/" target="_blank">Renee French</a>.
       Licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.</a>
     </div>
   </footer>
 </body>

 <template class="activityTemplate">
   <div class="Activity">
     <img class="u-avatar Activity-avatar js-avatar">
     <div class="Activity-main">
       <div class="Activity-body js-body"></div>
       <div class="Activity-points js-points"></div>
     </div>
     <div class="Activity-icon js-icon"></div>
   </div>
 </template>

 <script>
 (function() {
   'use strict';

   const ActivityType = {
     AMEND_CHANGE: 'AMEND_CHANGE',
     CREATE_CHANGE: 'CREATE_CHANGE',
     MERGE_CHANGE: 'MERGE_CHANGE',
     REGISTER: 'REGISTER',
   };

   const iconMap = {};
   iconMap.AMEND_CHANGE = '👍';
   iconMap.CREATE_CHANGE = '👏';
   iconMap.MERGE_CHANGE = '🤘';
   iconMap.REGISTER = '🎉';

   let lastUpdateMs = 0;
   getActivities(lastUpdateMs);
   startUpdateLoop();

   function getActivities(since) {
     const url = `/_/activities?since=${since}`;
     fetch(url).then(resp => {
       resp.json().then(obj => {
         processAll(obj.activities);
         updatePoints(obj.totalPoints);
       });
     }).catch(err => {
       console.error(err);
     });
   }

   function startUpdateLoop() {
     window.setInterval(() => {
       getActivities(lastUpdateMs);
     }, 5000);
   }

   // Username => img element.
   let avatarMap = {};

   function processAll(activities) {
     const activityListEl = document.querySelector('.js-activityList');
     const avatarGroupEl = document.querySelector('.js-avatarGroup');
     activities.forEach(activity => {
       if (!avatarMap[activity.gitHubUser]) {
         const el = createAvatarEl(activity.gitHubUser);
         el.classList.add('AvatarGroup-avatar');
         avatarMap[activity.gitHubUser] = el;
       }
       avatarGroupEl.insertBefore(avatarMap[activity.gitHubUser],
           avatarGroupEl.firstChild);
       const activityEl = createActivityEl(activity);
       activityListEl.insertBefore(activityEl, activityListEl.firstChild);
     });
     if (activities.length > 0) {
       lastUpdateMs = new Date(activities[activities.length - 1].created).getTime();
     }
   }

   function updatePoints(points) {
     document.querySelector('.js-totalPoints').textContent = points;
   }

   function createAvatarEl(username) {
     let img = document.createElement('IMG');
     img.classList.add('u-avatar');
     img.src = avatarSrc(username);
     img.alt = avatarAlt(username);
     return img;
   }

   function avatarSrc(username) {
     return `https://github.com/${encodeURIComponent(username)}.png?size=100`;
   }

   function avatarAlt(username) {
     return `Avatar for ${username}`;
   }

   function activityBody(type, username) {
     switch (type) {
       case ActivityType.AMEND_CHANGE:
       return `${username} just amended a change!`;

       case ActivityType.CREATE_CHANGE:
       return `${username} just created a change!`;

       case ActivityType.MERGE_CHANGE:
       return `${username} just merged a change!`;

       case ActivityType.REGISTER:
       return `${username} just registered!`;
     }
   }

   function pointsStr(points) {
     return `+${points} Point` + (points > 1 ? 's' : '');
   }

   function createActivityEl(activity) {
     const tmpl = document.querySelector('.activityTemplate');
     const imgEl = tmpl.content.querySelector('.js-avatar');
     imgEl.src = avatarSrc(activity.gitHubUser);
     imgEl.alt = avatarAlt(activity.gitHubUser);
     tmpl.content.querySelector('.js-icon').textContent = iconMap[activity.type];
     tmpl.content.querySelector('.js-body').textContent =
         activityBody(activity.type, activity.gitHubUser);
     tmpl.content.querySelector('.js-points').textContent =
         pointsStr(activity.points);
     return document.importNode(tmpl.content, true);
   }
 })();
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>GopherCon 2017 Contribution Dashboard</title>
	<meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1">
	<style>
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	a:link,
	a:visited {
	color: #fff;
	}
	.Site {
	background-color: #2a2a2a;
	color: #fff;
	display: flex;
	flex-direction: column;
	font: 14px 'Helvetica-Neue', Helvetica, sans-serif;
	height: 100vh;
	text-rendering: optimizeLegibility;
	}
	.Site-body {
	display: flex;
	flex: 1;
	}
	.Site-content {
	border-right: 1px solid #3a3939;
	overflow: hidden;
	padding: 1.5em;
	width: 60%;
	}
	.Site-activity {
	background-color: #323232;
	flex: 1;
	overflow: scroll;
	}
	.Site-logo {
	height: 60px;
	margin-right: 2em;
	}
	.Site-pointsTitle,
	.Site-points {
	text-align: center;
	}
	.Site-pointsTitle {
	font-size: 4vh;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
	.Site-points {
	font-size: 30vh;
	}
	.u-avatar {
	border-radius: 50%;
	}
	.AvatarGroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	.AvatarGroup-avatar {
	height: 6vh;
	margin: 0 .5em .5em 0;
	width: 6vh;
	}
	.Activity {
	align-items: flex-start;
	background-color: #323232;
	border-bottom: 1px solid #2d2d2d;
	border-top: 1px solid #404040;
	display: flex;
	font-size: 2vw;
	padding: 1em;
	}
	.Activity-avatar {
	height: 2.5em;
	margin-right: .75em;
	width: 2.5em;
	}
	.Activity-main {
	flex: 1;
	margin-right: .15em;
	}
	.Activity-points {
	color: #85ebf9;
	font-size: .85em;
	margin-top: .25em;
	}
	.Activity-icon {
	font-size: 2em;
	}
	.Site-footer {
	align-items: center;
	background: #3a3737;
	display: flex;
	justify-content: space-between;
	padding: 1em 1.5em;
	}
	</style>
	<body class="Site">
	<div class="Site-body">
	<main class="Site-content">
	<div class="Site-pointsTitle">Total points</div>
	<div class="Site-points js-totalPoints">0</div>
	<div class="AvatarGroup js-avatarGroup"></div>
	</main>
	<aside class="Site-activity js-activityList"></aside>
	</div>
	<footer class="Site-footer">
	<img class="Site-logo" src="https://github.com/ashleymcnamara/gophers/raw/master/GoCommunity.png" alt="Go Community">
	<div>
	Gopher artwork by <a href="https://github.com/ashleymcnamara/gophers" target="_blank">Ashley McNamara</a>
	based on the original artwork by the amazing
	<a href="https://reneefrench.blogspot.com/" target="_blank">Renee French</a>.
	Licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.</a>
	</div>
	</footer>
	</body>

	<template class="activityTemplate">
	<div class="Activity">
	<img class="u-avatar Activity-avatar js-avatar">
	<div class="Activity-main">
	<div class="Activity-body js-body"></div>
	<div class="Activity-points js-points"></div>
	</div>
	<div class="Activity-icon js-icon"></div>
	</div>
	</template>

	<script>
	(function() {
	'use strict';

	const ActivityType = {
	AMEND_CHANGE: 'AMEND_CHANGE',
	CREATE_CHANGE: 'CREATE_CHANGE',
	MERGE_CHANGE: 'MERGE_CHANGE',
	REGISTER: 'REGISTER',
	};

	const iconMap = {};
	iconMap.AMEND_CHANGE = '👍';
	iconMap.CREATE_CHANGE = '👏';
	iconMap.MERGE_CHANGE = '🤘';
	iconMap.REGISTER = '🎉';

	let lastUpdateMs = 0;
	getActivities(lastUpdateMs);
	startUpdateLoop();

	function getActivities(since) {
	const url = `/_/activities?since=${since}`;
	fetch(url).then(resp => {
	resp.json().then(obj => {
	processAll(obj.activities);
	updatePoints(obj.totalPoints);
	});
	}).catch(err => {
	console.error(err);
	});
	}

	function startUpdateLoop() {
	window.setInterval(() => {
	getActivities(lastUpdateMs);
	}, 5000);
	}

	// Username => img element.
	let avatarMap = {};

	function processAll(activities) {
	const activityListEl = document.querySelector('.js-activityList');
	const avatarGroupEl = document.querySelector('.js-avatarGroup');
	activities.forEach(activity => {
	if (!avatarMap[activity.gitHubUser]) {
	const el = createAvatarEl(activity.gitHubUser);
	el.classList.add('AvatarGroup-avatar');
	avatarMap[activity.gitHubUser] = el;
	}
	avatarGroupEl.insertBefore(avatarMap[activity.gitHubUser],
	avatarGroupEl.firstChild);
	const activityEl = createActivityEl(activity);
	activityListEl.insertBefore(activityEl, activityListEl.firstChild);
	});
	if (activities.length > 0) {
	lastUpdateMs = new Date(activities[activities.length - 1].created).getTime();
	}
	}

	function updatePoints(points) {
	document.querySelector('.js-totalPoints').textContent = points;
	}

	function createAvatarEl(username) {
	let img = document.createElement('IMG');
	img.classList.add('u-avatar');
	img.src = avatarSrc(username);
	img.alt = avatarAlt(username);
	return img;
	}

	function avatarSrc(username) {
	return `https://github.com/${encodeURIComponent(username)}.png?size=100`;
	}

	function avatarAlt(username) {
	return `Avatar for ${username}`;
	}

	function activityBody(type, username) {
	switch (type) {
	case ActivityType.AMEND_CHANGE:
	return `${username} just amended a change!`;

	case ActivityType.CREATE_CHANGE:
	return `${username} just created a change!`;

	case ActivityType.MERGE_CHANGE:
	return `${username} just merged a change!`;

	case ActivityType.REGISTER:
	return `${username} just registered!`;
	}
	}

	function pointsStr(points) {
	return `+${points} Point` + (points > 1 ? 's' : '');
	}

	function createActivityEl(activity) {
	const tmpl = document.querySelector('.activityTemplate');
	const imgEl = tmpl.content.querySelector('.js-avatar');
	imgEl.src = avatarSrc(activity.gitHubUser);
	imgEl.alt = avatarAlt(activity.gitHubUser);
	tmpl.content.querySelector('.js-icon').textContent = iconMap[activity.type];
	tmpl.content.querySelector('.js-body').textContent =
	activityBody(activity.type, activity.gitHubUser);
	tmpl.content.querySelector('.js-points').textContent =
	pointsStr(activity.points);
	return document.importNode(tmpl.content, true);
	}
	})();
	</script>