use a template for projects

2026-03-25 09:05:47 +00:00 · 2010-11-26 21:14:37 -08:00 · 2010-11-26 21:14:37 -08:00 · 513e18fe43
commit 513e18fe43
parent 37136eae8a
10 changed files with 1052 additions and 117 deletions
--- a/2
+++ b/2
@ -1,7 +1,7 @@
 TODO
 ====

- * use a template for project pages, generate static html
+ * promote JS links on project pages (the only ones that mention javascript so far!)

 * integrate github finder into project pages

--- a/proj/batteries/index.html
+++ b/proj/batteries/index.html
@ -2,14 +2,13 @@
 <head>
  <meta charset=utf-8>
  <meta name=viewport content=width=device-width>
-  <title>batteries for node</title>
+  <title>batteries</title>
  <link rel=stylesheet href=../../style.css>
  <style>
    #forkme { position: absolute
            ; top: 0
            ; right: 0
            }
-
    #info { text-align: center
          ; margin: 0 auto
          ; padding: 1em
@ -21,9 +20,7 @@
          ; -webkit-border-radius: 20px
          ; -moz-border-radius: 20px
          }
-
    h4 { margin: 0.5em 0 0.7em }
-
    #info > div { text-align: center
                ; font-size: 1.3em
                ; width: 32%
@ -32,7 +29,6 @@
                ; padding: 0.5em 0.2em
                ; border-left: dashed 1px #aaa
                }
-
    #info > div:first-child { border-left: none }
    
    #info div:last-child { clear: both
@ -48,7 +44,6 @@
  _gaq.push( ['_setAccount', 'UA-214054-5']
           , ['_trackPageview']
           );
-
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
@ -80,51 +75,43 @@
    function hide(id) {
      document.getElementById(id).style.display = 'none'
    }
-
    function branchLink(b) {
      return '<a href=https://github.com/samsonjs/batteries/tree/' + b + '>' + b + '</a>'
    }
-
    function userLink(u) {
      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
    }
-
    function langsByUsage(langs) {
      return Object.keys(langs).sort(function(a, b) {
        return langs[a] < langs[b] ? -1 : 1
      })
    }
-
    function updateBranches(branches) {
      html('branches', Object.keys(branches).map(branchLink).join('<br>'))
    }
-
    function updateContributors(contributors) {
      html('contributors', contributors.map(userLink).join('<br>'))
    }
-
    function updateLangs(langs) {
      html('langs', langsByUsage(langs).join('<br>'))
    }
-
    function updateN(name, things) {
      textHighlight('n' + name, things.length)
      if (things.length === 1) hide(name.charAt(0) + 'plural')
    }
-
    document.addEventListener('DOMContentLoaded', ready, false)
-
+    var data = createObjectStore('batteries')
    function ready() {
-      var t = ObjectStore.get('t-batteries')
+      var t = data.get('t-batteries')
      if (!t || +new Date() - t > 86400000) {
        console.log('stale ' + String(t))
-        ObjectStore.set('t-batteries', +new Date())
+        data.set('t-batteries', +new Date())
        GITR.repo('samsonjs/batteries')
          .getBranches(function(err, branches) {
            if (err) {
              text('branches', '(oops)')
            } else {
-              ObjectStore.set('branches', branches)
+              data.set('branches', branches)
              updateBranches(branches)
            }
          })
@ -133,14 +120,14 @@
              text('langs', '(oops)')
              return
            }
-            ObjectStore.set('langs', langs)
+            data.set('langs', langs)
            updateLangs(langs)
          })
          .getContributors(function(err, users) {
            if (err) {
              text('contributors', '(oops)')
            } else {
-              ObjectStore.set('contributors', users)
+              data.set('contributors', users)
              updateContributors(users)
            }
          })
@ -148,7 +135,7 @@
            if (err) {
              text('nwatchers', '?')
            } else {
-              ObjectStore.set('watchers', users)
+              data.set('watchers', users)
              updateN('watchers', users)
            }
          })
@ -156,17 +143,17 @@
            if (err) {
              text('nforks', '?')
            } else {
-              ObjectStore.set('forks', repos)
+              data.set('forks', repos)
              updateN('forks', repos)
            }
          })
      } else {
        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
-        updateBranches(ObjectStore.get('branches'))
-        updateLangs(ObjectStore.get('langs'))
-        updateContributors(ObjectStore.get('contributors'))
-        updateN('watchers', ObjectStore.get('watchers'))
-        updateN('forks', ObjectStore.get('forks'))
+        updateBranches(data.get('branches'))
+        updateLangs(data.get('langs'))
+        updateContributors(data.get('contributors'))
+        updateN('watchers', data.get('watchers'))
+        updateN('forks', data.get('forks'))
      }
    }
  }())
@ -176,7 +163,7 @@
 <p><a class=up href=../>&larr; projects</a></p>
 <a href=https://github.com/samsonjs/batteries><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
 <h1>batteries</h1>
-<h2>useful stuff for node</h2>
+<h2>a general purpose node library</h2>
 <table align=center>
  <tr>
    <td align=right><span id=nwatchers><img src=../spinner.gif></span> watcher<span id=wplural>s</span></td>
--- a/proj/build.js
+++ b/proj/build.js
@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+var constants
+  , fs = require('fs')
+  , path = require('path')
+  , mustache = require('mustache')
+  , EEXIST
+  , ENOENT
+  , _template
+  , _n = 0
+
+try {
+  constants = require('constants')
+} catch (e) {
+  constants = process
+}
+EEXIST = constants.EEXIST
+ENOENT = constants.ENOENT
+
+function main() {
+  fs.readFile(path.join(__dirname, 'template', 'index.html'), function(err, html) {
+    if (err) throw err
+    _template = html.toString()
+    fs.readFile(path.join(__dirname, 'projects.json'), function(err, json) {
+      if (err) throw err
+      var projects = JSON.parse(json)
+      Object.keys(projects).forEach(function(name) {
+        _n += 1
+        buildProject(name, projects[name])
+      })
+    })
+  })
+}
+
+function buildProject(name, project) {
+  var dir = path.join(__dirname, name)
+    , index = path.join(dir, 'index.html')
+  fs.mkdir(dir, 0775, function(err) {
+    if (err && err.errno !== EEXIST) throw err
+    fs.unlink(index, function(err) {
+      if (err && err.errno !== ENOENT) throw err
+      project.name = name
+      fs.writeFile(index, mustache.to_html(_template, project), function(err) {
+        _n -= 1
+        console.log('* ' + name)
+        if (_n === 0) console.log('done')
+      })
+    })
+  })
+}
+
+if (module == require.main) main()
--- a/proj/format/index.html
+++ b/proj/format/index.html
@ -1,19 +1,188 @@
 <!doctype html>
-<meta charset=utf-8>
-<title>printf for JavaScript</title>
-<script>
-var _gaq = _gaq || [];
-_gaq.push( ['_setAccount', 'UA-214054-5']
-         , ['_trackPageview']
-         );
-
-(function() {
-  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-<p align=center>
-  printf for JavaScript<br>
-  <a href="http://github.com/samsonjs/strftime">github project</a>
-</p>
+<head>
+  <meta charset=utf-8>
+  <meta name=viewport content=width=device-width>
+  <title>format</title>
+  <link rel=stylesheet href=../../style.css>
+  <style>
+    #forkme { position: absolute
+            ; top: 0
+            ; right: 0
+            }
+    #info { text-align: center
+          ; margin: 0 auto
+          ; padding: 1em
+          ; border: solid 1px #ccc
+          ; width: 90%
+          ; max-width: 950px
+          ; background-color: #fff
+          ; border-radius: 20px
+          ; -webkit-border-radius: 20px
+          ; -moz-border-radius: 20px
+          }
+    h4 { margin: 0.5em 0 0.7em }
+    #info > div { text-align: center
+                ; font-size: 1.3em
+                ; width: 32%
+                ; max-width: 400px
+                ; float: left
+                ; padding: 0.5em 0.2em
+                ; border-left: dashed 1px #aaa
+                }
+    #info > div:first-child { border-left: none }
+    
+    #info div:last-child { clear: both
+                         ; float: none
+                         ; border: none
+                         ; height: 0
+                         ; width: 0
+                         ; padding: 0
+                         }
+  </style>
+  <script>
+  var _gaq = _gaq || [];
+  _gaq.push( ['_setAccount', 'UA-214054-5']
+           , ['_trackPageview']
+           );
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+  </script>
+  <script src=../gitter.js></script>
+  <script src=../store.js></script>
+  <script>
+  (function() {
+    function addClass(el, name) {
+      var c = el.className || name
+      if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
+    }
+    function html(id, h) {
+      document.getElementById(id).innerHTML = h
+    }
+    function text(id, text) {
+      document.getElementById(id).innerText = text
+    }
+    function highlight(id) {
+      document.getElementById(id).style.className = ' highlight'
+    }
+    function textHighlight(id, text) {
+      var el = document.getElementById(id)
+      el.innerText = text
+      el.className = ' highlight'
+    }
+    function hide(id) {
+      document.getElementById(id).style.display = 'none'
+    }
+    function branchLink(b) {
+      return '<a href=https://github.com/samsonjs/format/tree/' + b + '>' + b + '</a>'
+    }
+    function userLink(u) {
+      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
+    }
+    function langsByUsage(langs) {
+      return Object.keys(langs).sort(function(a, b) {
+        return langs[a] < langs[b] ? -1 : 1
+      })
+    }
+    function updateBranches(branches) {
+      html('branches', Object.keys(branches).map(branchLink).join('<br>'))
+    }
+    function updateContributors(contributors) {
+      html('contributors', contributors.map(userLink).join('<br>'))
+    }
+    function updateLangs(langs) {
+      html('langs', langsByUsage(langs).join('<br>'))
+    }
+    function updateN(name, things) {
+      textHighlight('n' + name, things.length)
+      if (things.length === 1) hide(name.charAt(0) + 'plural')
+    }
+    document.addEventListener('DOMContentLoaded', ready, false)
+    var data = createObjectStore('format')
+    function ready() {
+      var t = data.get('t-format')
+      if (!t || +new Date() - t > 86400000) {
+        console.log('stale ' + String(t))
+        data.set('t-format', +new Date())
+        GITR.repo('samsonjs/format')
+          .getBranches(function(err, branches) {
+            if (err) {
+              text('branches', '(oops)')
+            } else {
+              data.set('branches', branches)
+              updateBranches(branches)
+            }
+          })
+          .getLanguages(function(err, langs) {
+            if (err) {
+              text('langs', '(oops)')
+              return
+            }
+            data.set('langs', langs)
+            updateLangs(langs)
+          })
+          .getContributors(function(err, users) {
+            if (err) {
+              text('contributors', '(oops)')
+            } else {
+              data.set('contributors', users)
+              updateContributors(users)
+            }
+          })
+          .getWatchers(function(err, users) {
+            if (err) {
+              text('nwatchers', '?')
+            } else {
+              data.set('watchers', users)
+              updateN('watchers', users)
+            }
+          })
+          .getNetwork(function(err, repos) {
+            if (err) {
+              text('nforks', '?')
+            } else {
+              data.set('forks', repos)
+              updateN('forks', repos)
+            }
+          })
+      } else {
+        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
+        updateBranches(data.get('branches'))
+        updateLangs(data.get('langs'))
+        updateContributors(data.get('contributors'))
+        updateN('watchers', data.get('watchers'))
+        updateN('forks', data.get('forks'))
+      }
+    }
+  }())
+  </script>
+</head>
+<a class=up href=../../>&larr; samhuri.net</a>
+<p><a class=up href=../>&larr; projects</a></p>
+<a href=https://github.com/samsonjs/format><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
+<h1>format</h1>
+<h2>printf for JavaScript</h2>
+<table align=center>
+  <tr>
+    <td align=right><span id=nwatchers><img src=../spinner.gif></span> watcher<span id=wplural>s</span></td>
+    <td>&mdash;</td>
+    <td align=left><span id=nforks><img src=../spinner.gif></span> fork<span id=fplural>s</span></td>
+  </tr>
+</table>
+<div id=info>
+  <div>
+    <h4>branches</h4>
+    <span id=branches><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>languages</h4>
+    <span id=langs><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>contributors</h4>
+    <span id=contributors><img src=../spinner.gif></span>
+  </div>
+  <div></div>
+</div>
--- a/proj/gitter/index.html
+++ b/proj/gitter/index.html
@ -1,19 +1,188 @@
 <!doctype html>
-<meta charset=utf-8>
-<title>gitter for node</title>
-<script>
-var _gaq = _gaq || [];
-_gaq.push( ['_setAccount', 'UA-214054-5']
-         , ['_trackPageview']
-         );
-
-(function() {
-  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-<p align=center>
-  GitHub client for Node, v2 API<br>
-  <a href="http://github.com/samsonjs/gitter">github project</a>
-</p>
+<head>
+  <meta charset=utf-8>
+  <meta name=viewport content=width=device-width>
+  <title>gitter</title>
+  <link rel=stylesheet href=../../style.css>
+  <style>
+    #forkme { position: absolute
+            ; top: 0
+            ; right: 0
+            }
+    #info { text-align: center
+          ; margin: 0 auto
+          ; padding: 1em
+          ; border: solid 1px #ccc
+          ; width: 90%
+          ; max-width: 950px
+          ; background-color: #fff
+          ; border-radius: 20px
+          ; -webkit-border-radius: 20px
+          ; -moz-border-radius: 20px
+          }
+    h4 { margin: 0.5em 0 0.7em }
+    #info > div { text-align: center
+                ; font-size: 1.3em
+                ; width: 32%
+                ; max-width: 400px
+                ; float: left
+                ; padding: 0.5em 0.2em
+                ; border-left: dashed 1px #aaa
+                }
+    #info > div:first-child { border-left: none }
+    
+    #info div:last-child { clear: both
+                         ; float: none
+                         ; border: none
+                         ; height: 0
+                         ; width: 0
+                         ; padding: 0
+                         }
+  </style>
+  <script>
+  var _gaq = _gaq || [];
+  _gaq.push( ['_setAccount', 'UA-214054-5']
+           , ['_trackPageview']
+           );
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+  </script>
+  <script src=../gitter.js></script>
+  <script src=../store.js></script>
+  <script>
+  (function() {
+    function addClass(el, name) {
+      var c = el.className || name
+      if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
+    }
+    function html(id, h) {
+      document.getElementById(id).innerHTML = h
+    }
+    function text(id, text) {
+      document.getElementById(id).innerText = text
+    }
+    function highlight(id) {
+      document.getElementById(id).style.className = ' highlight'
+    }
+    function textHighlight(id, text) {
+      var el = document.getElementById(id)
+      el.innerText = text
+      el.className = ' highlight'
+    }
+    function hide(id) {
+      document.getElementById(id).style.display = 'none'
+    }
+    function branchLink(b) {
+      return '<a href=https://github.com/samsonjs/gitter/tree/' + b + '>' + b + '</a>'
+    }
+    function userLink(u) {
+      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
+    }
+    function langsByUsage(langs) {
+      return Object.keys(langs).sort(function(a, b) {
+        return langs[a] < langs[b] ? -1 : 1
+      })
+    }
+    function updateBranches(branches) {
+      html('branches', Object.keys(branches).map(branchLink).join('<br>'))
+    }
+    function updateContributors(contributors) {
+      html('contributors', contributors.map(userLink).join('<br>'))
+    }
+    function updateLangs(langs) {
+      html('langs', langsByUsage(langs).join('<br>'))
+    }
+    function updateN(name, things) {
+      textHighlight('n' + name, things.length)
+      if (things.length === 1) hide(name.charAt(0) + 'plural')
+    }
+    document.addEventListener('DOMContentLoaded', ready, false)
+    var data = createObjectStore('gitter')
+    function ready() {
+      var t = data.get('t-gitter')
+      if (!t || +new Date() - t > 86400000) {
+        console.log('stale ' + String(t))
+        data.set('t-gitter', +new Date())
+        GITR.repo('samsonjs/gitter')
+          .getBranches(function(err, branches) {
+            if (err) {
+              text('branches', '(oops)')
+            } else {
+              data.set('branches', branches)
+              updateBranches(branches)
+            }
+          })
+          .getLanguages(function(err, langs) {
+            if (err) {
+              text('langs', '(oops)')
+              return
+            }
+            data.set('langs', langs)
+            updateLangs(langs)
+          })
+          .getContributors(function(err, users) {
+            if (err) {
+              text('contributors', '(oops)')
+            } else {
+              data.set('contributors', users)
+              updateContributors(users)
+            }
+          })
+          .getWatchers(function(err, users) {
+            if (err) {
+              text('nwatchers', '?')
+            } else {
+              data.set('watchers', users)
+              updateN('watchers', users)
+            }
+          })
+          .getNetwork(function(err, repos) {
+            if (err) {
+              text('nforks', '?')
+            } else {
+              data.set('forks', repos)
+              updateN('forks', repos)
+            }
+          })
+      } else {
+        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
+        updateBranches(data.get('branches'))
+        updateLangs(data.get('langs'))
+        updateContributors(data.get('contributors'))
+        updateN('watchers', data.get('watchers'))
+        updateN('forks', data.get('forks'))
+      }
+    }
+  }())
+  </script>
+</head>
+<a class=up href=../../>&larr; samhuri.net</a>
+<p><a class=up href=../>&larr; projects</a></p>
+<a href=https://github.com/samsonjs/gitter><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
+<h1>gitter</h1>
+<h2>a GitHub client for Node (v2 API)</h2>
+<table align=center>
+  <tr>
+    <td align=right><span id=nwatchers><img src=../spinner.gif></span> watcher<span id=wplural>s</span></td>
+    <td>&mdash;</td>
+    <td align=left><span id=nforks><img src=../spinner.gif></span> fork<span id=fplural>s</span></td>
+  </tr>
+</table>
+<div id=info>
+  <div>
+    <h4>branches</h4>
+    <span id=branches><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>languages</h4>
+    <span id=langs><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>contributors</h4>
+    <span id=contributors><img src=../spinner.gif></span>
+  </div>
+  <div></div>
+</div>
--- a/proj/projects.json
+++ b/proj/projects.json
@ -0,0 +1,6 @@
+{ "batteries" : { "description" : "a general purpose node library" }
+, "format"    : { "description" : "printf for JavaScript" }
+, "gitter"    : { "description" : "a GitHub client for Node (v2 API)" }
+, "repl-edit" : { "description" : "edit Node repl commands with your text editor" }
+, "strftime"  : { "description" : "strftime for JavaScript" }
+}
--- a/proj/repl-edit/index.html
+++ b/proj/repl-edit/index.html
@ -1,19 +1,188 @@
 <!doctype html>
-<meta charset=utf-8>
-<title>repl-edit for node</title>
-<script>
-var _gaq = _gaq || [];
-_gaq.push( ['_setAccount', 'UA-214054-5']
-         , ['_trackPageview']
-         );
-
-(function() {
-  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-<p align=center>
-  Use your text editor to edit commands in Node's repl.<br>
-  <a href="http://github.com/samsonjs/repl-edit">github project</a>
-</p>
+<head>
+  <meta charset=utf-8>
+  <meta name=viewport content=width=device-width>
+  <title>repl-edit</title>
+  <link rel=stylesheet href=../../style.css>
+  <style>
+    #forkme { position: absolute
+            ; top: 0
+            ; right: 0
+            }
+    #info { text-align: center
+          ; margin: 0 auto
+          ; padding: 1em
+          ; border: solid 1px #ccc
+          ; width: 90%
+          ; max-width: 950px
+          ; background-color: #fff
+          ; border-radius: 20px
+          ; -webkit-border-radius: 20px
+          ; -moz-border-radius: 20px
+          }
+    h4 { margin: 0.5em 0 0.7em }
+    #info > div { text-align: center
+                ; font-size: 1.3em
+                ; width: 32%
+                ; max-width: 400px
+                ; float: left
+                ; padding: 0.5em 0.2em
+                ; border-left: dashed 1px #aaa
+                }
+    #info > div:first-child { border-left: none }
+    
+    #info div:last-child { clear: both
+                         ; float: none
+                         ; border: none
+                         ; height: 0
+                         ; width: 0
+                         ; padding: 0
+                         }
+  </style>
+  <script>
+  var _gaq = _gaq || [];
+  _gaq.push( ['_setAccount', 'UA-214054-5']
+           , ['_trackPageview']
+           );
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+  </script>
+  <script src=../gitter.js></script>
+  <script src=../store.js></script>
+  <script>
+  (function() {
+    function addClass(el, name) {
+      var c = el.className || name
+      if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
+    }
+    function html(id, h) {
+      document.getElementById(id).innerHTML = h
+    }
+    function text(id, text) {
+      document.getElementById(id).innerText = text
+    }
+    function highlight(id) {
+      document.getElementById(id).style.className = ' highlight'
+    }
+    function textHighlight(id, text) {
+      var el = document.getElementById(id)
+      el.innerText = text
+      el.className = ' highlight'
+    }
+    function hide(id) {
+      document.getElementById(id).style.display = 'none'
+    }
+    function branchLink(b) {
+      return '<a href=https://github.com/samsonjs/repl-edit/tree/' + b + '>' + b + '</a>'
+    }
+    function userLink(u) {
+      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
+    }
+    function langsByUsage(langs) {
+      return Object.keys(langs).sort(function(a, b) {
+        return langs[a] < langs[b] ? -1 : 1
+      })
+    }
+    function updateBranches(branches) {
+      html('branches', Object.keys(branches).map(branchLink).join('<br>'))
+    }
+    function updateContributors(contributors) {
+      html('contributors', contributors.map(userLink).join('<br>'))
+    }
+    function updateLangs(langs) {
+      html('langs', langsByUsage(langs).join('<br>'))
+    }
+    function updateN(name, things) {
+      textHighlight('n' + name, things.length)
+      if (things.length === 1) hide(name.charAt(0) + 'plural')
+    }
+    document.addEventListener('DOMContentLoaded', ready, false)
+    var data = createObjectStore('repl-edit')
+    function ready() {
+      var t = data.get('t-repl-edit')
+      if (!t || +new Date() - t > 86400000) {
+        console.log('stale ' + String(t))
+        data.set('t-repl-edit', +new Date())
+        GITR.repo('samsonjs/repl-edit')
+          .getBranches(function(err, branches) {
+            if (err) {
+              text('branches', '(oops)')
+            } else {
+              data.set('branches', branches)
+              updateBranches(branches)
+            }
+          })
+          .getLanguages(function(err, langs) {
+            if (err) {
+              text('langs', '(oops)')
+              return
+            }
+            data.set('langs', langs)
+            updateLangs(langs)
+          })
+          .getContributors(function(err, users) {
+            if (err) {
+              text('contributors', '(oops)')
+            } else {
+              data.set('contributors', users)
+              updateContributors(users)
+            }
+          })
+          .getWatchers(function(err, users) {
+            if (err) {
+              text('nwatchers', '?')
+            } else {
+              data.set('watchers', users)
+              updateN('watchers', users)
+            }
+          })
+          .getNetwork(function(err, repos) {
+            if (err) {
+              text('nforks', '?')
+            } else {
+              data.set('forks', repos)
+              updateN('forks', repos)
+            }
+          })
+      } else {
+        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
+        updateBranches(data.get('branches'))
+        updateLangs(data.get('langs'))
+        updateContributors(data.get('contributors'))
+        updateN('watchers', data.get('watchers'))
+        updateN('forks', data.get('forks'))
+      }
+    }
+  }())
+  </script>
+</head>
+<a class=up href=../../>&larr; samhuri.net</a>
+<p><a class=up href=../>&larr; projects</a></p>
+<a href=https://github.com/samsonjs/repl-edit><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
+<h1>repl-edit</h1>
+<h2>edit Node repl commands with your text editor</h2>
+<table align=center>
+  <tr>
+    <td align=right><span id=nwatchers><img src=../spinner.gif></span> watcher<span id=wplural>s</span></td>
+    <td>&mdash;</td>
+    <td align=left><span id=nforks><img src=../spinner.gif></span> fork<span id=fplural>s</span></td>
+  </tr>
+</table>
+<div id=info>
+  <div>
+    <h4>branches</h4>
+    <span id=branches><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>languages</h4>
+    <span id=langs><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>contributors</h4>
+    <span id=contributors><img src=../spinner.gif></span>
+  </div>
+  <div></div>
+</div>
--- a/proj/store.js
+++ b/proj/store.js
@ -1,22 +1,33 @@
 (function() {
  if (typeof localStorage === 'undefined') return
  var global = this
-  global.ObjectStore = {
-    clear: function() {
-      localStorage.clear()
-    },
-    get: function(key) {
-      var val = localStorage.getItem(key)
-      return typeof val === 'string' ? JSON.parse(val) : val
-    },
-    key: function(n) {
-      return localStorage.key(n)
-    },
-    set: function(key, val) {
-      localStorage.setItem(key, JSON.stringify(val))
-    },
-    remove: function(key) {
-      localStorage.remove(key)
+  global.createObjectStore = function(namespace) {
+    function makeKey(k) {
+      return '--' + namespace + '-' + (k || '')
+    }
+    return {
+      clear: function() {
+        var i = localStorage.length
+          , k
+          , prefix = new RegExp('^' + makeKey())
+        while (--i) {
+          k = localStorage.key(i)
+          if (k.match(prefix)) {
+            localStorage.remove(k)
+          }
+        }
+      },
+      get: function(key) {
+        var val = localStorage.getItem(makeKey(key))
+        return typeof val === 'string' ? JSON.parse(val) : val
+      },
+      set: function(key, val) {
+        localStorage.setItem(makeKey(key), JSON.stringify(val))
+      },
+      remove: function(key) {
+        localStorage.removeItem(makeKey(key))
+      }
    }
  }
+  global.ObjectStore = global.createObjectStore('default')
 }())
--- a/proj/strftime/index.html
+++ b/proj/strftime/index.html
@ -1,19 +1,188 @@
 <!doctype html>
-<meta charset=utf-8>
-<title>strftime for JavaScript</title>
-<script>
-var _gaq = _gaq || [];
-_gaq.push( ['_setAccount', 'UA-214054-5']
-         , ['_trackPageview']
-         );
-
-(function() {
-  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-<p align=center>
-  strftime for JavaScript<br>
-  <a href="http://github.com/samsonjs/strftime">github project</a>
-</p>
+<head>
+  <meta charset=utf-8>
+  <meta name=viewport content=width=device-width>
+  <title>strftime</title>
+  <link rel=stylesheet href=../../style.css>
+  <style>
+    #forkme { position: absolute
+            ; top: 0
+            ; right: 0
+            }
+    #info { text-align: center
+          ; margin: 0 auto
+          ; padding: 1em
+          ; border: solid 1px #ccc
+          ; width: 90%
+          ; max-width: 950px
+          ; background-color: #fff
+          ; border-radius: 20px
+          ; -webkit-border-radius: 20px
+          ; -moz-border-radius: 20px
+          }
+    h4 { margin: 0.5em 0 0.7em }
+    #info > div { text-align: center
+                ; font-size: 1.3em
+                ; width: 32%
+                ; max-width: 400px
+                ; float: left
+                ; padding: 0.5em 0.2em
+                ; border-left: dashed 1px #aaa
+                }
+    #info > div:first-child { border-left: none }
+    
+    #info div:last-child { clear: both
+                         ; float: none
+                         ; border: none
+                         ; height: 0
+                         ; width: 0
+                         ; padding: 0
+                         }
+  </style>
+  <script>
+  var _gaq = _gaq || [];
+  _gaq.push( ['_setAccount', 'UA-214054-5']
+           , ['_trackPageview']
+           );
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+  </script>
+  <script src=../gitter.js></script>
+  <script src=../store.js></script>
+  <script>
+  (function() {
+    function addClass(el, name) {
+      var c = el.className || name
+      if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
+    }
+    function html(id, h) {
+      document.getElementById(id).innerHTML = h
+    }
+    function text(id, text) {
+      document.getElementById(id).innerText = text
+    }
+    function highlight(id) {
+      document.getElementById(id).style.className = ' highlight'
+    }
+    function textHighlight(id, text) {
+      var el = document.getElementById(id)
+      el.innerText = text
+      el.className = ' highlight'
+    }
+    function hide(id) {
+      document.getElementById(id).style.display = 'none'
+    }
+    function branchLink(b) {
+      return '<a href=https://github.com/samsonjs/strftime/tree/' + b + '>' + b + '</a>'
+    }
+    function userLink(u) {
+      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
+    }
+    function langsByUsage(langs) {
+      return Object.keys(langs).sort(function(a, b) {
+        return langs[a] < langs[b] ? -1 : 1
+      })
+    }
+    function updateBranches(branches) {
+      html('branches', Object.keys(branches).map(branchLink).join('<br>'))
+    }
+    function updateContributors(contributors) {
+      html('contributors', contributors.map(userLink).join('<br>'))
+    }
+    function updateLangs(langs) {
+      html('langs', langsByUsage(langs).join('<br>'))
+    }
+    function updateN(name, things) {
+      textHighlight('n' + name, things.length)
+      if (things.length === 1) hide(name.charAt(0) + 'plural')
+    }
+    document.addEventListener('DOMContentLoaded', ready, false)
+    var data = createObjectStore('strftime')
+    function ready() {
+      var t = data.get('t-strftime')
+      if (!t || +new Date() - t > 86400000) {
+        console.log('stale ' + String(t))
+        data.set('t-strftime', +new Date())
+        GITR.repo('samsonjs/strftime')
+          .getBranches(function(err, branches) {
+            if (err) {
+              text('branches', '(oops)')
+            } else {
+              data.set('branches', branches)
+              updateBranches(branches)
+            }
+          })
+          .getLanguages(function(err, langs) {
+            if (err) {
+              text('langs', '(oops)')
+              return
+            }
+            data.set('langs', langs)
+            updateLangs(langs)
+          })
+          .getContributors(function(err, users) {
+            if (err) {
+              text('contributors', '(oops)')
+            } else {
+              data.set('contributors', users)
+              updateContributors(users)
+            }
+          })
+          .getWatchers(function(err, users) {
+            if (err) {
+              text('nwatchers', '?')
+            } else {
+              data.set('watchers', users)
+              updateN('watchers', users)
+            }
+          })
+          .getNetwork(function(err, repos) {
+            if (err) {
+              text('nforks', '?')
+            } else {
+              data.set('forks', repos)
+              updateN('forks', repos)
+            }
+          })
+      } else {
+        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
+        updateBranches(data.get('branches'))
+        updateLangs(data.get('langs'))
+        updateContributors(data.get('contributors'))
+        updateN('watchers', data.get('watchers'))
+        updateN('forks', data.get('forks'))
+      }
+    }
+  }())
+  </script>
+</head>
+<a class=up href=../../>&larr; samhuri.net</a>
+<p><a class=up href=../>&larr; projects</a></p>
+<a href=https://github.com/samsonjs/strftime><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
+<h1>strftime</h1>
+<h2>strftime for JavaScript</h2>
+<table align=center>
+  <tr>
+    <td align=right><span id=nwatchers><img src=../spinner.gif></span> watcher<span id=wplural>s</span></td>
+    <td>&mdash;</td>
+    <td align=left><span id=nforks><img src=../spinner.gif></span> fork<span id=fplural>s</span></td>
+  </tr>
+</table>
+<div id=info>
+  <div>
+    <h4>branches</h4>
+    <span id=branches><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>languages</h4>
+    <span id=langs><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>contributors</h4>
+    <span id=contributors><img src=../spinner.gif></span>
+  </div>
+  <div></div>
+</div>
--- a/proj/template/index.html
+++ b/proj/template/index.html
@ -0,0 +1,203 @@
+<!doctype html>
+<head>
+  <meta charset=utf-8>
+  <meta name=viewport content=width=device-width>
+  <title>{{name}}</title>
+  <link rel=stylesheet href=../../style.css>
+  <style>
+    #forkme { position: absolute
+            ; top: 0
+            ; right: 0
+            }
+
+    #info { text-align: center
+          ; margin: 0 auto
+          ; padding: 1em
+          ; border: solid 1px #ccc
+          ; width: 90%
+          ; max-width: 950px
+          ; background-color: #fff
+          ; border-radius: 20px
+          ; -webkit-border-radius: 20px
+          ; -moz-border-radius: 20px
+          }
+
+    h4 { margin: 0.5em 0 0.7em }
+
+    #info > div { text-align: center
+                ; font-size: 1.3em
+                ; width: 32%
+                ; max-width: 400px
+                ; float: left
+                ; padding: 0.5em 0.2em
+                ; border-left: dashed 1px #aaa
+                }
+
+    #info > div:first-child { border-left: none }
+    
+    #info div:last-child { clear: both
+                         ; float: none
+                         ; border: none
+                         ; height: 0
+                         ; width: 0
+                         ; padding: 0
+                         }
+  </style>
+  <script>
+  var _gaq = _gaq || [];
+  _gaq.push( ['_setAccount', 'UA-214054-5']
+           , ['_trackPageview']
+           );
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+  </script>
+  <script src=../gitter.js></script>
+  <script src=../store.js></script>
+  <script>
+  (function() {
+    function addClass(el, name) {
+      var c = el.className || name
+      if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
+    }
+    function html(id, h) {
+      document.getElementById(id).innerHTML = h
+    }
+    function text(id, text) {
+      document.getElementById(id).innerText = text
+    }
+    function highlight(id) {
+      document.getElementById(id).style.className = ' highlight'
+    }
+    function textHighlight(id, text) {
+      var el = document.getElementById(id)
+      el.innerText = text
+      el.className = ' highlight'
+    }
+    function hide(id) {
+      document.getElementById(id).style.display = 'none'
+    }
+
+    function branchLink(b) {
+      return '<a href=https://github.com/samsonjs/{{name}}/tree/' + b + '>' + b + '</a>'
+    }
+
+    function userLink(u) {
+      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
+    }
+
+    function langsByUsage(langs) {
+      return Object.keys(langs).sort(function(a, b) {
+        return langs[a] < langs[b] ? -1 : 1
+      })
+    }
+
+    function updateBranches(branches) {
+      html('branches', Object.keys(branches).map(branchLink).join('<br>'))
+    }
+
+    function updateContributors(contributors) {
+      html('contributors', contributors.map(userLink).join('<br>'))
+    }
+
+    function updateLangs(langs) {
+      html('langs', langsByUsage(langs).join('<br>'))
+    }
+
+    function updateN(name, things) {
+      textHighlight('n' + name, things.length)
+      if (things.length === 1) hide(name.charAt(0) + 'plural')
+    }
+
+    document.addEventListener('DOMContentLoaded', ready, false)
+
+    var data = createObjectStore('{{name}}')
+
+    function ready() {
+      var t = data.get('t-{{name}}')
+      if (!t || +new Date() - t > 86400000) {
+        console.log('stale ' + String(t))
+        data.set('t-{{name}}', +new Date())
+        GITR.repo('samsonjs/{{name}}')
+          .getBranches(function(err, branches) {
+            if (err) {
+              text('branches', '(oops)')
+            } else {
+              data.set('branches', branches)
+              updateBranches(branches)
+            }
+          })
+          .getLanguages(function(err, langs) {
+            if (err) {
+              text('langs', '(oops)')
+              return
+            }
+            data.set('langs', langs)
+            updateLangs(langs)
+          })
+          .getContributors(function(err, users) {
+            if (err) {
+              text('contributors', '(oops)')
+            } else {
+              data.set('contributors', users)
+              updateContributors(users)
+            }
+          })
+          .getWatchers(function(err, users) {
+            if (err) {
+              text('nwatchers', '?')
+            } else {
+              data.set('watchers', users)
+              updateN('watchers', users)
+            }
+          })
+          .getNetwork(function(err, repos) {
+            if (err) {
+              text('nforks', '?')
+            } else {
+              data.set('forks', repos)
+              updateN('forks', repos)
+            }
+          })
+      } else {
+        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
+        updateBranches(data.get('branches'))
+        updateLangs(data.get('langs'))
+        updateContributors(data.get('contributors'))
+        updateN('watchers', data.get('watchers'))
+        updateN('forks', data.get('forks'))
+      }
+    }
+  }())
+  </script>
+</head>
+<a class=up href=../../>&larr; samhuri.net</a>
+<p><a class=up href=../>&larr; projects</a></p>
+<a href=https://github.com/samsonjs/{{name}}><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
+<h1>{{name}}</h1>
+<h2>{{description}}</h2>
+<table align=center>
+  <tr>
+    <td align=right><span id=nwatchers><img src=../spinner.gif></span> watcher<span id=wplural>s</span></td>
+    <td>&mdash;</td>
+    <td align=left><span id=nforks><img src=../spinner.gif></span> fork<span id=fplural>s</span></td>
+  </tr>
+</table>
+<div id=info>
+  <div>
+    <h4>branches</h4>
+    <span id=branches><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>languages</h4>
+    <span id=langs><img src=../spinner.gif></span>
+  </div>
+  <div>
+    <h4>contributors</h4>
+    <span id=contributors><img src=../spinner.gif></span>
+  </div>
+  <div></div>
+</div>