Skip to content

Commit

Permalink
Small tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@mjackson
mjackson committed Jan 27, 2012
1 parent 2558daf commit 403f9a9
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 104 deletions.
52 changes: 41 additions & 11 deletions assets/application.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,37 @@
(function ($) {
(function ($, undefined) {
// Put custom repo URL's in this object, keyed by repo name.
var repoUrls = {
"bootstrap": "http://twitter.github.com/bootstrap/",
"hogan.js": "http://twitter.github.com/hogan.js/"
};

function repoUrl(repo) {
return repoUrls[repo.name] || repo.html_url;
}

// Put custom repo descriptions in this object, keyed by repo name.
var repoDescriptions = {
"bootstrap": "Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.",
"chainsaw": "Chainsaw is a thin Scala wrapper on top of SLF4J. It provides support for var-args and for lazy args, and for easily creating Logger instances.",
"configgy": "Configgy is a library for handling config files and logging for a scala daemon. The idea is that it should be simple and straightforward, allowing you to plug it in and get started quickly.",
"finagle": "Finagle is an asynchronous network stack for the JVM that you can use to build asynchronous Remote Procedure Call (RPC) clients and servers in Java, Scala, or any JVM-hosted language. Finagle provides a rich set of tools that are protocol independent.",
"flockdb": "FlockDB is a distributed directed graph store built with Gizzard on MySQL. It's useful for storing and retrieving relationship edges between entities and their intersections. Twitter uses it to store user to user, user to tweet, and tweet to tweet relationships.",
"gizzard": "Gizzard is a flexible sharding framework for creating eventually-consistent distributed datastores. It allows for easier scaling of any data storage system, e.g. MySQL or Redis. Twitter uses it to store tweets, relationships, and timeline data.",
"gizzmo": "Gizzmo is a command line tool for managing Gizzard clusters. It is used to create tables, sharding structures and topologies in Gizzard. Twitter uses it to manage all our clusters.",
"haplocheirus": "Haplocheirus is a Redis-backed storage engine for timelines.",
"kestrel-client": "kestrel-client is a library that allows you to talk to a Kestrel queue server from ruby. As Kestrel uses the memcache protocol, kestrel-client is implemented as a wrapper around the memcached gem.",
"naggati2": 'Naggati (Inuktitut for "make fit") is a protocol builder for netty, using scala 2.8.',
"pycascading": "PyCascading is a Python wrapper for Cascading that allows you to control the full data processing workflow from Python.",
"sbt-scrooge": "sbt-scrooge is an sbt plugin that adds a mixin for doing thrift code auto-generation during your compile phase."
};

function repoDescription(repo) {
return repoDescriptions[repo.name] || repo.description;
}

function addRecentlyUpdatedRepo(repo) {
var $item = $("<li>");
$item.append('<span class="name"><a href="' + repo.html_url + '">' + repo.name + '</a></span>');
$item.append('<span class="name"><a href="' + repoUrl(repo) + '">' + repo.name + '</a></span>');
$item.append('<span class="time"><a href="' + repo.html_url + '/commits">' + strftime("%h %e, %Y", repo.pushed_at) + '</a></span>');
$item.append('<span class="bullet">&sdot;</span>');
$item.append('<span class="watchers"><a href="' + repo.html_url + '/watchers">' + repo.watchers + ' watchers</a></span>');
Expand All @@ -10,13 +40,13 @@
$item.appendTo("#recently-updated-repos");
}

function addProject(project) {
var $project = $("<div>").addClass("project grid-1");
$project.addClass(project.language.toLowerCase());
$project.append('<h2>' + project.name + '</h2>');
$project.append('<h3>' + project.language + '</h3>');
$project.append('<p>' + project.description + '</p>');
$project.appendTo("#projects");
function addRepo(repo) {
var $item = $("<li>").addClass("repo grid-1 " + repo.language.toLowerCase());
var $link = $("<a>").attr("href", repoUrl(repo)).appendTo($item);
$link.append($("<h2>").text(repo.name));
$link.append($("<h3>").text(repo.language));
$link.append($("<p>").text(repoDescription(repo)));
$item.appendTo("#repos");
}

$.getJSON("https://api.github.com/users/twitter/repos?callback=?", function (result) {
Expand All @@ -30,15 +60,15 @@
repo.pushed_at = new Date(repo.pushed_at);
});

// Sort by most # of watchers.
// Sort by highest # of watchers.
repos.sort(function (a, b) {
if (a.watchers < b.watchers) return 1;
if (b.watchers < a.watchers) return -1;
return 0;
});

$.each(repos, function (i, repo) {
addProject(repo);
addRepo(repo);
});

// Sort by most-recently pushed to.
Expand Down
67 changes: 0 additions & 67 deletions assets/grid.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
body {
min-width: 960px;
}

.grid-1, .grid-2, .grid-3, .grid-4 {
display:inline;
float: left;
Expand All @@ -10,13 +6,6 @@ body {
margin-right: 10px;
}

.push-1, .pull-1,
.push-2, .pull-2,
.push-3, .pull-3,
.push-4, .pull-4 {
position: relative;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) */

.alpha {
Expand Down Expand Up @@ -45,62 +34,6 @@ body {
width: 940px;
}

/* Prefix Extra Space >> 4 Columns */

.grid .prefix-1 {
padding-left: 240px;
}

.grid .prefix-2 {
padding-left: 480px;
}

.grid .prefix-3 {
padding-left: 720px;
}

/* Suffix Extra Space >> 4 Columns */

.grid .suffix-1 {
padding-right: 240px;
}

.grid .suffix-2 {
padding-right: 480px;
}

.grid .suffix-3 {
padding-right: 720px;
}

/* Push Space >> 4 Columns */

.grid .push-1 {
left: 240px;
}

.grid .push-2 {
left: 480px;
}

.grid .push-3 {
left: 720px;
}

/* Pull Space >> 4 Columns */

.grid .pull-1 {
left: -240px;
}

.grid .pull-2 {
left: -480px;
}

.grid .pull-3 {
left: -720px;
}

/* http://sonspring.com/journal/clearing-floats */

.clear {
Expand Down
56 changes: 34 additions & 22 deletions assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ body {
font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.4;
color: #666;
min-width: 960px;
}

h1 {
Expand Down Expand Up @@ -40,12 +41,12 @@ a:hover {
text-align: center;
}

#main, div.header, div.project {
#main, div.header, li.repo {
background: white;
background: rgba(255, 255, 255, 0.7);
-moz-box-shadow: 0px 0px 5px 0px #eee;
-webkit-box-shadow: 0px 0px 5px 0px #eee;
box-shadow: 0px 0px 5px 0px #eee;
-moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
}

Expand Down Expand Up @@ -94,6 +95,10 @@ div.header h1 {
line-height: 15px;
}

#statistics a:link, #statistics a:visited {
color: inherit;
}

#statistics p.email {
margin-top: 6px;
font-size: 11px;
Expand Down Expand Up @@ -132,36 +137,42 @@ div.header h1 {
color: #999;
}

div.project {
li.repo {
height: 250px;
}

div.project h2, div.project h3, div.project p {
li.repo > a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-decoration: none;
color: inherit;
}

li.repo a:hover {
background: #efefef;
background: rgba(0, 0, 0, 0.05);
}

li.repo h2, li.repo h3, li.repo p {
margin: 10px 15px;
}

div.project h2 {
li.repo h2 {
margin-bottom: 2px;
max-width: 160px;
overflow: hidden;
}

div.project h3 {
li.repo h3 {
font-size: 11px;
margin-top: 2px;
margin-bottom: 15px;
color: #999;
}

div.project-title {
height: 30px;
}

.project-description {

}

.project::after {
.repo::after {
content: '';
position: absolute;
right: 0;
Expand All @@ -171,24 +182,25 @@ div.project-title {
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid red;
pointer-events: none;
}

.project.javascript::after {
.repo.javascript::after {
border-right-color: #0080b0;
}

.project.scala::after {
.repo.scala::after {
border-right-color: #7ac9de;
}

.project.ruby::after {
.repo.ruby::after {
border-right-color: #b60202;
}

.project.java::after {
.repo.java::after {
border-right-color: brown;
}

.project.python::after {
.repo.python::after {
border-right-color: #6aad2d;
}
7 changes: 3 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
</head>
<body>
<div id="wrapper" class="grid clearfix">

<div id="main" class="grid-1">
<div id="logo"><h1>Twitter Open Source</h1></div>
<h1>Twitter is built on open source software.</h1>
Expand All @@ -25,9 +24,9 @@ <h1>Twitter is built on open source software.</h1>
<div id="statistics" class="grid-1 alpha header">
<h1>Statistics</h1>
<p>
<span id="num-repos">&nbsp;</span> public repos
<a href="https://github.com/twitter/repositories"><span id="num-repos">&nbsp;</span> public repos</a>
<br>
<span id="num-members">&nbsp;</span> members
<a href="https://github.com/twitter"><span id="num-members">&nbsp;</span> members</a>
</p>
<p class="email"><a href="mailto:opensource@twitter.com">opensource@twitter.com</a></p>
</div>
Expand All @@ -38,7 +37,7 @@ <h1>Recently updated <a href="https://github.com/twitter/repositories">View All
</div>
</div>

<div id="projects"></div>
<ol id="repos"></ol>
</div>
</body>
</html>

0 comments on commit 403f9a9

Please sign in to comment.