First cut

Signed-off-by: Kaustav Das Modak <[email protected]>
applait · May 26, 2015 · 903e16c · 903e16c
commit 903e16c
Show file tree

Hide file tree

Showing 8 changed files with 674 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+# Friends of Applait
+
+This is the codebase that powers "Friends of Applait", the list of superbly brilliant people that are part of Applait or have helped Applait at some time during their lifetime.
+
+This is our way of hi5-ing!
+
+## Adding a name
+
+Add a name to the `friends.json` file. The structure looks like:
+
+```javascript
+{
+  "name": "Ananda Sen",
+  "email": "[email protected]",
+  "facebook": "anandasen", // Facebook ID
+  "twitter": "anandasen", // Twitter ID
+  "github": "anandasen", // Github ID
+  "contributions": ["code", "graphics", "documentation"] // Array of areas of contribution
+}
+```
+
+## Thanks!
+
+Contributions appreciated!
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,84 @@
+body {
+  font-family: "Helvetia Neue", "Liberation Sans", "Georgia", "Helvetica", sans;
+  font-size: 16px;
+  color: #000;
+}
+
+#header {
+  background-color: #fafafa;
+  padding: 0.5rem;
+  border-bottom: 2px solid #ccc;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+#header > a {
+  width: 2rem;
+  height: 2rem;
+}
+
+#header h1 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+  color: #333;
+  text-align: center;
+  flex-grow: 1;
+  font-size: 1.25rem;
+  line-height: 2rem;
+}
+
+#description {
+  padding: 1rem;
+  margin: 0;
+  text-align: center;
+  background-color: #f3f3f3;
+}
+
+#friends {
+  padding: 0.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: top;
+}
+
+.item {
+  margin: 1rem;
+  padding: 0.5rem;
+  text-align: center;
+  width: 200px;
+  background-color: #f1f1f1;
+}
+
+.item h2 {
+  font-size: 1rem;
+  font-weight: normal;
+  text-align: center;
+  margin-bottom: 0.25rem;
+}
+
+.contributions {
+  font-size: 0.75rem;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.social-links {
+  text-align: center;
+  margin: 1rem 0 0 0;
+  padding: 0;
+}
+
+.social-links a {
+  font-size: 0.9rem;
+  color: #333;
+  text-decoration: none;
+}
+
+.social-links span {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
diff --git a/friends.json b/friends.json
@@ -0,0 +1,37 @@
+[
+    {
+        "name": "Kaustav Das Modak",
+        "email": "[email protected]",
+        "twitter": "kaustavdm",
+        "github": "kaustavdm",
+        "contributions": ["code", "documentation", "marketing"]
+    },
+    {
+        "name": "Soumya Deb",
+        "email": "[email protected]",
+        "twitter": "debloper",
+        "github": "debloper",
+        "contributions": ["code", "graphics", "marketing"]
+    },
+    {
+        "name": "Nayanika Chattopadhyay",
+        "email": "[email protected]",
+        "twitter": "pawzoned",
+        "github": "pawzoned",
+        "contributions": ["graphics", "marketing"]
+    },
+    {
+        "name": "Moumita Banerjee",
+        "email": "[email protected]",
+        "twitter": false,
+        "github": false,
+        "contributions": ["legal"]
+    },
+    {
+        "name": "Jaipradeesh J",
+        "email": "[email protected]",
+        "twitter": "dolftax",
+        "github": "dolftax",
+        "contributions": ["code"]
+    }
+]
diff --git a/img/applait-32.png b/img/applait-32.png
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+
+<html lang="en">
+
+
+    <head>
+        <title>Friends of Applait</title>
+        <meta charset="utf-8">
+        <meta name="description" content="The people who have been a part of Applait">
+
+        <link href="vendor/css/normalize.css" rel="stylesheet" type="text/css">
+        <link href="css/style.css" rel="stylesheet" type="text/css">
+    </head>
+
+    <body>
+        <div id="header">
+            <a href="http://applait.com"><img src="img/applait-32.png" alt="Applait"></a>
+            <h1>Friends of Applait</h1>
+        </div>
+
+        <p id="description">
+            This is our way of hi5-ing all those brilliant people who have helped Applait grow with their contributions!
+        </p>
+
+        <div id="friends"></div>
+
+        <script src="vendor/js/md5.js" type="text/javascript"></script>
+        <script src="js/script.js" type="text/javascript"></script>
+    </body>
+
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,69 @@
+window.addEventListener("DOMContentLoaded", function () {
+
+    var req = new XMLHttpRequest(),
+        container = document.getElementById("friends");
+
+    var listElement = function (item) {
+        var output = document.createElement("div"),
+            email_md5 = CryptoJS.MD5(item.email).toString(),
+            str = [];
+
+        output.setAttribute("class", "item");
+
+        str.push("<img src='http://www.gravatar.com/avatar/" + email_md5 + "?d=monsterid&s=200' alt='" +
+                 item.name + "'>");
+        str.push("<h2>" + item.name + "</h2>");
+
+        if (item.contributions && item.contributions.length) {
+            str.push("<p class='contributions'>");
+            str.push(item.contributions.join(", "));
+            str.push("</p>");
+        }
+
+        if (item.twitter || item.github) {
+            str.push("<p class='social-links'>");
+            if (item.twitter) {
+                str.push("<span class='twitter'><a href='https://twitter.com/" +
+                         item.twitter + "'>Twitter</a></span>");
+            }
+            if (item.github) {
+                str.push("<span class='github'><a href='https://github.com/" +
+                         item.github + "'>Github</a></span>");
+            }
+            str.push("</p>");
+        }
+
+        output.innerHTML = str.join("");
+
+        return output;
+    };
+
+    var render = function (list) {
+        var i;
+
+        list.sort(function (a, b){
+            if(a.name < b.name) return -1;
+            if(a.name > b.name) return 1;
+            return 0;
+        });
+
+        for (i in list) {
+            container.appendChild(listElement(list[i]));
+        }
+    };
+
+    req.onload = function () {
+
+        try {
+            var list = JSON.parse(this.responseText);
+        } catch (e) {
+            container.innerHTML = "Cannot load friends list :-(";
+        }
+
+        list.length && render(list);
+    };
+
+    req.open("GET", "friends.json", true);
+    req.send();
+
+});