From f561617d6c23556113b1ec4ad925a434124c07b3 Mon Sep 17 00:00:00 2001
From: Sami Samhuri <sami.samhuri@gmail.com>
Date: Fri, 26 Nov 2010 23:21:31 -0800
Subject: [PATCH] extract js and css from project html (better caching, less
 building)

---
 proj/batteries/index.html | 152 ++-----------------------------------
 proj/format/index.html    | 152 ++-----------------------------------
 proj/gitter/index.html    | 152 ++-----------------------------------
 proj/index.html           |  13 ++--
 proj/proj.css             |  51 +++++++++++++
 proj/proj.js              | 115 ++++++++++++++++++++++++++++
 proj/repl-edit/index.html | 152 ++-----------------------------------
 proj/strftime/index.html  | 152 ++-----------------------------------
 proj/template/index.html  | 153 +-------------------------------------
 9 files changed, 214 insertions(+), 878 deletions(-)
 create mode 100644 proj/proj.css
 create mode 100644 proj/proj.js

diff --git a/proj/batteries/index.html b/proj/batteries/index.html
index d743c3f..d5f17ad 100644
--- a/proj/batteries/index.html
+++ b/proj/batteries/index.html
@@ -4,41 +4,7 @@
   <meta name=viewport content=width=device-width>
   <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
-          ; 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>
+  <link rel=stylesheet href=../proj.css>
   <script>
   var _gaq = _gaq || [];
   _gaq.push( ['_setAccount', 'UA-214054-5']
@@ -52,115 +18,10 @@
   </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/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 = data.get('t-batteries')
-      if (!t || +new Date() - t > 86400000) {
-        console.log('stale ' + String(t))
-        data.set('t-batteries', +new Date())
-        GITR.repo('samsonjs/batteries')
-          .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>
+  <script src=../proj.js></script>
+  <script> SJS.proj('batteries') </script>
 </head>
-<a class=up href=../../>&larr; samhuri.net</a>
-<p><a class=up href=../>&larr; projects</a></p>
+<a class=up href=../../>samhuri.net</a> &rarr; <a class=up href=../>projects</a>
 <a href=https://github.com/samsonjs/batteries><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>
 <h1>batteries</h1>
 <h2>a general purpose node library</h2>
@@ -185,4 +46,7 @@
     <span id=contributors><img src=../spinner.gif></span>
   </div>
   <div></div>
-</div>
\ No newline at end of file
+</div>
+<p id=sjs>
+  <a href=https://twitter.com/_sjs>@_sjs</a>
+</p>
\ No newline at end of file
diff --git a/proj/format/index.html b/proj/format/index.html
index 70828b7..d56f347 100644
--- a/proj/format/index.html
+++ b/proj/format/index.html
@@ -4,41 +4,7 @@
   <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>
+  <link rel=stylesheet href=../proj.css>
   <script>
   var _gaq = _gaq || [];
   _gaq.push( ['_setAccount', 'UA-214054-5']
@@ -52,115 +18,10 @@
   </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>
+  <script src=../proj.js></script>
+  <script> SJS.proj('format') </script>
 </head>
-<a class=up href=../../>&larr; samhuri.net</a>
-<p><a class=up href=../>&larr; projects</a></p>
+<a class=up href=../../>samhuri.net</a> &rarr; <a class=up href=../>projects</a>
 <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>
@@ -185,4 +46,7 @@
     <span id=contributors><img src=../spinner.gif></span>
   </div>
   <div></div>
-</div>
\ No newline at end of file
+</div>
+<p id=sjs>
+  <a href=https://twitter.com/_sjs>@_sjs</a>
+</p>
\ No newline at end of file
diff --git a/proj/gitter/index.html b/proj/gitter/index.html
index 1b885ad..73984fa 100644
--- a/proj/gitter/index.html
+++ b/proj/gitter/index.html
@@ -4,41 +4,7 @@
   <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>
+  <link rel=stylesheet href=../proj.css>
   <script>
   var _gaq = _gaq || [];
   _gaq.push( ['_setAccount', 'UA-214054-5']
@@ -52,115 +18,10 @@
   </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>
+  <script src=../proj.js></script>
+  <script> SJS.proj('gitter') </script>
 </head>
-<a class=up href=../../>&larr; samhuri.net</a>
-<p><a class=up href=../>&larr; projects</a></p>
+<a class=up href=../../>samhuri.net</a> &rarr; <a class=up href=../>projects</a>
 <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>
@@ -185,4 +46,7 @@
     <span id=contributors><img src=../spinner.gif></span>
   </div>
   <div></div>
-</div>
\ No newline at end of file
+</div>
+<p id=sjs>
+  <a href=https://twitter.com/_sjs>@_sjs</a>
+</p>
\ No newline at end of file
diff --git a/proj/index.html b/proj/index.html
index 9065661..50b9c9a 100644
--- a/proj/index.html
+++ b/proj/index.html
@@ -5,13 +5,7 @@
   <title>samhuri.net</title> 
   <link rel=stylesheet href=../style.css>
   <style>
-    #forkme { position: absolute
-            ; top: 0
-            ; right: 0
-            }
-  
     #gh { text-align: center }
-
     span { padding: 5px }
   </style>
   <script>
@@ -77,7 +71,7 @@
   }())
   </script>
 </head>
-<a class=up href=../>&larr; samhuri.net</a>
+<a class=up href=../>samhuri.net</a>
 <a href=https://github.com/samsonjs><img id=forkme src=forkme.png alt="Fork me on GitHub"></a>
 <h1>projects</h1>
 <ul>
@@ -102,6 +96,9 @@
     <td align=left>following <span id=nfollowing><img src=spinner.gif></span> people</td>
   </tr>
 </table>
-<p id=promoteJS>
+<p id=sjs>
+  <a href=https://twitter.com/_sjs>@_sjs</a>
+</p>
+<p id=promote-js>
   <a class=img href=https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function title='JS Function arity'><img src=http://static.jsconf.us/promotejsh.gif height=150 width=180 alt='JS Function arity'/></a>
 </p>
diff --git a/proj/proj.css b/proj/proj.css
new file mode 100644
index 0000000..036eff4
--- /dev/null
+++ b/proj/proj.css
@@ -0,0 +1,51 @@
+#forkme { position: absolute
+        ; top: 0
+        ; right: 0
+        }
+
+#info { text-align: center
+      ; margin: 1em 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
+                     }
+
+@media only screen and (max-device-width:480px) {
+  #info { width: 80%
+        ; max-width: 400px
+        ; padding: 0 1em
+        }
+
+  #info > div { clear: left
+              ; width: 100%
+              ; max-width: 100%
+              ; padding: 0.5em 0.2em 1em
+              ; border-left: none
+              }
+}
diff --git a/proj/proj.js b/proj/proj.js
new file mode 100644
index 0000000..1824e15
--- /dev/null
+++ b/proj/proj.js
@@ -0,0 +1,115 @@
+(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 langsByUsage(langs) {
+    return Object.keys(langs).sort(function(a, b) {
+      return langs[a] < langs[b] ? -1 : 1
+    })
+  }
+
+  function updateBranches(name, branches) {
+    function branchLink(b) {
+      return '<a href=https://github.com/samsonjs/' + name + '/tree/' + b + '>' + b + '</a>'
+    }
+    html('branches', Object.keys(branches).map(branchLink).join('<br>'))
+  }
+
+  function updateContributors(contributors) {
+    function userLink(u) {
+      return '<a href=https://github.com/' + u.login + '>' + u.name + '</a>'
+    }
+    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')
+  }
+
+  var global = this
+  global.SJS = {
+    proj: function(name) {
+      var data = createObjectStore(name)
+      document.addEventListener('DOMContentLoaded', ready, false)
+      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(name, 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(name, data.get('branches'))
+          updateLangs(data.get('langs'))
+          updateContributors(data.get('contributors'))
+          updateN('watchers', data.get('watchers'))
+          updateN('forks', data.get('forks'))
+        }
+      }
+    }
+  }
+}())
diff --git a/proj/repl-edit/index.html b/proj/repl-edit/index.html
index ddf4eb1..e5046c6 100644
--- a/proj/repl-edit/index.html
+++ b/proj/repl-edit/index.html
@@ -4,41 +4,7 @@
   <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>
+  <link rel=stylesheet href=../proj.css>
   <script>
   var _gaq = _gaq || [];
   _gaq.push( ['_setAccount', 'UA-214054-5']
@@ -52,115 +18,10 @@
   </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>
+  <script src=../proj.js></script>
+  <script> SJS.proj('repl-edit') </script>
 </head>
-<a class=up href=../../>&larr; samhuri.net</a>
-<p><a class=up href=../>&larr; projects</a></p>
+<a class=up href=../../>samhuri.net</a> &rarr; <a class=up href=../>projects</a>
 <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>
@@ -185,4 +46,7 @@
     <span id=contributors><img src=../spinner.gif></span>
   </div>
   <div></div>
-</div>
\ No newline at end of file
+</div>
+<p id=sjs>
+  <a href=https://twitter.com/_sjs>@_sjs</a>
+</p>
\ No newline at end of file
diff --git a/proj/strftime/index.html b/proj/strftime/index.html
index 8dddd13..57d035d 100644
--- a/proj/strftime/index.html
+++ b/proj/strftime/index.html
@@ -4,41 +4,7 @@
   <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>
+  <link rel=stylesheet href=../proj.css>
   <script>
   var _gaq = _gaq || [];
   _gaq.push( ['_setAccount', 'UA-214054-5']
@@ -52,115 +18,10 @@
   </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>
+  <script src=../proj.js></script>
+  <script> SJS.proj('strftime') </script>
 </head>
-<a class=up href=../../>&larr; samhuri.net</a>
-<p><a class=up href=../>&larr; projects</a></p>
+<a class=up href=../../>samhuri.net</a> &rarr; <a class=up href=../>projects</a>
 <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>
@@ -185,4 +46,7 @@
     <span id=contributors><img src=../spinner.gif></span>
   </div>
   <div></div>
-</div>
\ No newline at end of file
+</div>
+<p id=sjs>
+  <a href=https://twitter.com/_sjs>@_sjs</a>
+</p>
\ No newline at end of file
diff --git a/proj/template/index.html b/proj/template/index.html
index 99892d1..7263ad9 100644
--- a/proj/template/index.html
+++ b/proj/template/index.html
@@ -4,40 +4,7 @@
   <meta name=viewport content=width=device-width>
   <title>{{name}}</title>
   <link rel=stylesheet href=../../style.css>
-  <style>
-    #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>
+  <link rel=stylesheet href=../proj.css>
   <script>
   var _gaq = _gaq || [];
   _gaq.push( ['_setAccount', 'UA-214054-5']
@@ -52,122 +19,8 @@
   </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>
+  <script src=../proj.js></script>
+  <script> SJS.proj('{{name}}') </script>
 </head>
 <a class=up href=../../>samhuri.net</a> &rarr; <a class=up href=../>projects</a>
 <a href=https://github.com/samsonjs/{{name}}><img id=forkme src=../forkme.png alt="Fork me on GitHub"></a>