move scripts to bottom of html, minify assets, style changes

assets/blog.css

@@ -1,55 +1,23 @@
-body { background-color: #f7f7f7
+body { margin: 0
-     ; font-family: 'DejaVu Serif', 'xHoefler Text', Georgia, serif
-     ; margin: 0
      ; padding: 0
      }
 
-body > header { display: block
+h1 { margin: 0
-              ; background-color: #a6bcdf
-              ; border-bottom: solid 1em #eee
-                /* some browsers have trouble with 100% for the height so use em units :/ */
-              ; -moz-border-bottom-left-radius: 500px 7em
-              ; -webkit-border-bottom-left-radius: 500px 7em
-              ; border-bottom-left-radius: 500px 7em
-              }
-
-h1 { text-align: right
-   ; font-size: 4em
-   ; font-weight: normal
-   ; margin: 0
    ; padding: 0.2em
    ; color: #9ab
    }
 
-h1 a { color: #f7f7f7
+#breadcrumbs { margin: 0.3em
-     ; border-bottom: none
+             ; position: relative
-     ; text-decoration: none
-     ; text-shadow: #999 1px 1px 3px
-     }
-
-a#sjs:hover { color: #f7f7a7 }
-
-a { color: #22c }
-
-a.img { border: none }
-
-#breadcrumbs { font-size: 1.5em
-             ; color: #444
-             ; margin: 0.3em
              }
 
-#breadcrumbs a { text-shadow: none
-               ; color: #444
-               ; border: none
-               ; text-decoration: underline
-               }
-
 .center { text-align: center
         ; font-size: 1.2em
         }
 
-#index { display: none
+.hidden { display: none }
-       ; width: 80%
+
+#index { width: 80%
        ; min-width: 200px
        ; max-width: 800px
        ; border: solid 1px #999
@@ -69,15 +37,15 @@ a.img { border: none }
 
 .date { float: right }
 
-#posts { border-left: solid 0.15em #999
+div#posts { border-left: solid 0.15em #999
-       ; width: 80%
+          ; width: 80%
-       ; min-width: 400px
+          ; min-width: 400px
-       ; max-width: 680px
+          ; max-width: 680px
-       ; margin: 4em auto 2em
+          ; margin: 4em auto 2em
-       ; padding: 0 5%
+          ; padding: 0 5%
-       ; font-size: 1.2em
+          ; font-size: 1.2em
-       ; line-height: 1.4em
+          ; line-height: 1.4em
-       }
+          }
 
 article { color: #222
         ; padding-bottom: 1em
@@ -89,7 +57,7 @@ article:last-child { padding-bottom: 0
 
 article h1 { text-align: left
            ; font-size: 2em
-	   ; line-height: 1.1em
+           ; line-height: 1.1em
            ; font-weight: normal
            ; color: #222
            ; margin: 1em 0
@@ -122,6 +90,18 @@ time { color: #444
      ; font-size: 1.2em
      }
 
+ul#tags { width: 100%
+        ; padding-top: 1em
+        ; border-top: solid 1px #ccc
+        ; text-align: center
+        }
+
+ul#tags li { display: inline
+           ; padding: 0.3em 1em
+           }
+
+ul#tags a { color: #999 }
+
 .gist { font-size: 0.8em }
 
 #around { width: 80%
@@ -208,12 +188,19 @@ textarea:focus { border: solid 1px #333 }
 textarea { height: 100px }
 
 input[type=submit] { font-size: 1.1em
-		   ; cursor: pointer
+                   ; cursor: pointer
-		   }
+                   }
 
-footer { text-align: center
+#tag-groups { width: 82.5%
-       ; font-size: 1.2em
+            ; margin: 0 auto
-       ; margin: 0
+            }
+
+ul.tags { width: 27%
+        ; float: left
+        ; margin: 1em 1.25% 3em
+        }
+
+footer { margin: 0
        ; padding: 1em 0
        ; background-color: #cdf
        ; border-top: solid 1px #bbb

assets/ie7.css

@@ -1,2 +1 @@
-li.ie-bullet { display: inline }
 ul#projects li { list-style-type: none }

assets/mobile.css

@@ -4,25 +4,17 @@
        only screen and (device-width:320px)
 {
   ul.nav { padding: 0.5em
-         ; width: 80%
+         ; width: 60%
-         ; max-width: 400px
+         ; max-width: 600px
          }
   
   ul.nav li { display: block
             ; font-size: 1.5em
-            ; line-height: 1.6em
+            ; line-height: 1.8em
             }
 
   ul.nav li:after { content: '' }
 
-  ul#projects { width: 60%
-              ; max-width: 600px
-              }
-
-  ul#projects li { display: block
-                 ; line-height: 1.8em
-                 }
-
   #browse { display: none }
 }
 
@@ -48,14 +40,6 @@
 
   footer { font-size: 1em }
 
-  /* blog*/
-  #blog > header { border-bottom: solid 2px #eee
-                  /* some browsers have trouble with 100% for the height so use em units :/ */
-                ; -moz-border-bottom-left-radius: 200px 4em
-                ; -webkit-border-bottom-left-radius: 200px 4em
-                ; border-bottom-left-radius: 200px 4em
-                }
-
   #blog > header > h1 { margin-top: 0 }
 
   #blog img { max-width: 100% }
@@ -71,28 +55,30 @@
 
   #blog article h1 { font-size: 1.2em }
 
-  #posts { min-width: 300px
+  div#posts { margin: 0
-         ; max-width: 900px
+            ; padding: 0
-         ; margin: 0
+            ; border-left: none
-         ; padding: 0
+            ; padding-left: 10px
-         ; border-left: none
+            }
-         ; padding-left: 10px
-         }
 
-  article { width: 100%
+  article { margin: 0
-          ; min-width: 100px
-          ; max-width: 800px
-          ; font-size: 0.8em
-          ; margin: 0
           ; padding: 0
+          ; font-size: 0.8em
           }
 
+  ul#tags { margin: 0
+          ; padding: 0
+          ; display: none
+          }
+
+  ul#tags li { padding: 0.2em 0.3em }
+  
   time { font-size: 1.1em }
 
   .sep { font-size: 1em }
 
   #around { min-width: 300px
-          ; max-width: 900px
+          ; max-width: 400px
           ; margin: 0 auto
           ; padding: 0 0.2em
           }

assets/proj-common.css

@@ -0,0 +1,10 @@
+td { font-size: 1.5em
+   ; line-height: 1.6em
+   }
+
+td:nth-child(2) { padding: 0 10px }
+
+.highlight { background-image: -webkit-gradient(radial, 50% 50%, 5, 50% 50%, 15, from(#ffa), to(#f7f7f7))
+           ; background-image: -moz-radial-gradient(center 45deg, circle contain, #ffa 0%, #f7f7f7 100%)
+           ; font-size: 1.2em
+           }

assets/proj.css

@@ -1,8 +1,3 @@
-#browse { text-align: center
-        ; font-size: 1.4em
-        ; margin: 1.6em
-        }
-
 #info { text-align: center
       ; margin: 1em auto
       ; padding: 1em
@@ -45,6 +40,11 @@ h4 { margin: 0.5em 0 0.7em }
 
 #contributors-box a { line-height: 1.8em }
 
+#browse { text-align: center
+        ; font-size: 1.4em
+        ; margin: 1.6em
+        }
+
 
 /*
  * Github Finder
@@ -53,7 +53,7 @@ h4 { margin: 0.5em 0 0.7em }
 
 #gh-finder { font-size: 12px; font-family: Helvetica, Verdana, sans-serif; margin: 3em auto 1em; padding: 0; width: 92% }
 #gh-finder .clear { clear:both }
-#gh-finder a { color: #22a; text-decoration: none; border-bottom: none }
+#gh-finder a { color: #0E539C; text-decoration: none; border-bottom: none }
 #gh-finder a:active { outline: none }
 #gh-finder :focus { -moz-outline-style: none; outline: none;}
 #gh-finder .p { padding: 10px; }

assets/style.css

@@ -17,10 +17,7 @@ h2 { text-align: center
    ; padding: 0
    }
 
-a { color: #22a
+a { color: #0E539C }
-  ; text-decoration: none
-  ; border-bottom: dashed 1px #22a
-  }
 
 a.img { border: none }
 
@@ -33,16 +30,19 @@ a.img { border: none }
 
 #breadcrumbs a { text-shadow: none
                ; color: #222
-               ; border: none
-               ; text-decoration: underline
                }
 
+#forkme { position: absolute
+        ; top: 0
+        ; right: 0
+        ; border: none
+        }
+
 ul.nav { text-align: center
+       ; max-width: 400px
        ; margin: 0 auto
        ; padding: 1em
        ; border: solid 1px #ccc
-       ; width: 90%
-       ; max-width: 950px
        ; background-color: #fff
        ; -moz-border-radius: 20px
        ; -webkit-border-radius: 20px
@@ -51,41 +51,27 @@ ul.nav { text-align: center
        ; behavior: url(../assets/border-radius.htc)
        }
 
-ul.nav li { display: inline
+ul.nav li { display: block
           ; font-size: 1.6em
+          ; line-height: 1.8em
           ; margin: 0
           ; padding: 0
           }
 
-ul.nav li:after { content: ' •' }
-ul.nav li:last-child:after { content: '' }
-
-
 ul.nav li a { padding: 5px
+            ; text-decoration: none
+            ; border-bottom: dashed 1px #0E539C
             ; text-shadow: #999 5px 5px 5px
             ; -webkit-transition: all 0.5s ease-out
             }
 ul.nav li a:visited { color: #227 }
 
 ul.nav li a:hover,
-ul.nav li a:active { color: #000
+ul.nav li a:active { text-shadow: #aa7 5px 5px 5px
-            ; text-shadow: #aa7 5px 5px 5px
+                   ; border-bottom: dashed 1px #000
-            ; border-bottom: dashed 1px #000
+                   }
-            }
 
-ul#projects { width: 40%
+ul.nav li a:active { text-shadow: none }
-            ; max-width: 400px
-            }
-
-ul#projects li { display: block
-               ; line-height: 1.8em
-               }
-
-ul.nav li.ie-bullet,
-ul#projects li.ie-bullet { display: none }
-
-ul.nav li.last:after,
-ul#projects li:after { content: '' }
 
 footer { text-align: center
        ; font-size: 1.2em
@@ -94,26 +80,8 @@ footer { text-align: center
 
 footer a { border-bottom: none }
 
-#forkme { position: absolute
-        ; top: 0
-        ; right: 0
-        ; border: none
-        }
-
 #promote-js { margin-top: 3em
              ; text-align: center
              }
 
 #promote-js img { border: none }
-
-td { font-size: 1.5em
-   ; line-height: 1.6em
-   }
-
-td:nth-child(2) { padding: 0 10px }
-
-
-.highlight { background-image: -webkit-gradient(radial, 50% 50%, 5, 50% 50%, 15, from(#ffa), to(#f7f7f7))
-           ; background-image: -moz-radial-gradient(center 45deg, circle contain, #ffa 0%, #f7f7f7 100%)
-           ; font-size: 1.2em
-           }

blog.rb

@@ -7,6 +7,8 @@ require 'json'
 require 'mustache'
 require 'rdiscount'
 
+DefaultKeywords = ['sjs', 'sami samhuri', 'sami', 'samhuri', 'samhuri.net', 'blog']
+
 def main
   srcdir = ARGV.shift.to_s
   destdir = ARGV.shift.to_s
@@ -19,6 +21,7 @@ def main
   puts 'subtitle: ' + b.subtitle
   puts 'url: ' + b.url
   puts "#{b.posts.size} posts"
+  puts "#{b.tag_names.size} tags"
   b.generate!
   puts 'done blog'
 end
@@ -39,33 +42,37 @@ class Blag
   def generate!
     generate_posts
     generate_index
+    generate_tags
     generate_rss
     generate_posts_json
   end
 
   def generate_index
-    template = File.read(File.join('templates', 'blog', 'index.html'))
     # generate landing page
     index_template = File.read(File.join('templates', 'blog', 'index.html'))
-    index_html = Mustache.render(index_template, { :posts => posts,
+    values = { :posts => posts,
-                                                   :post => posts.first,
+               :post => posts.first,
-                                                   :previous => posts[1],
+               :article => Mustache.render(article_template, posts.first),
-                                                   :filename => posts.first[:filename],
+               :previous => posts[1],
-                                                   :comments => posts.first[:comments]
+               :filename => posts.first[:filename],
-                                 })
+               :comments => posts.first[:comments]
+             }
+    index_html = Mustache.render(index_template, values)
     File.open(File.join(@dest, 'index.html'), 'w') {|f| f.puts(index_html) }
   end
 
   def generate_posts
     template = File.read(File.join('templates', 'blog', 'post.html'))
     posts.each_with_index do |post, i|
-      post[:html] = Mustache.render(template, { :title => post[:title],
+      values = { :title => post[:title],
-                                                :post => post,
+                 :article => Mustache.render(article_template, post),
-                                                :previous => i < posts.length - 1 && posts[i + 1],
+                 :previous => i < posts.length - 1 && posts[i + 1],
-                                                :next => i > 0 && posts[i - 1],
+                 :next => i > 0 && posts[i - 1],
-                                                :filename => post[:filename],
+                 :filename => post[:filename],
-                                                :comments => post[:comments]
+                 :comments => post[:comments],
-                                              })
+                 :keywords => (DefaultKeywords + post[:tags]).join(',')
+               }
+      post[:html] = Mustache.render(template, values)
       File.open(File.join(@dest, post[:filename]), 'w') {|f| f.puts(post[:html]) }
     end
   end
@@ -76,7 +83,40 @@ class Blag
   end
 
   def generate_rss
+    # posts rss
     File.open(rss_file, 'w') { |f| f.puts(rss.target!) }
+
+    # tags rss
+    Dir.mkdir(tags_dir) unless File.exists?(tags_dir)
+    tag_names.each do |tag|
+      Dir.mkdir(tag_dir(tag)) unless File.exists?(tag_dir(tag))
+      File.open(rss_tag_file(tag), 'w') { |f| f.puts(rss_for_tag(tag).target!) }
+    end
+  end
+
+  def generate_tags
+    Dir.mkdir(tags_dir) unless File.exists?(tags_dir)
+
+    # tag index
+    File.open(tag_index_file, 'w') do |f|
+      groups = chunk(tag_names).map do |ns|
+        { :tags => ns.map do |t|
+            { :name => t }
+          end
+        }
+      end
+      values = { :tag_groups => groups }
+      f.puts(Mustache.render(tags_template, values))
+    end
+
+    # tag pages
+    tag_names.each do |tag|
+      posts = tags[tag]
+      Dir.mkdir(tag_dir(tag)) unless File.exists?(tag_dir(tag))
+      File.open(tag_html_file(tag), 'w') do |f|
+        f.puts(Mustache.render(tag_template, { :tag => tag, :posts => posts }))
+      end
+    end
   end
 
   def posts
@@ -97,8 +137,10 @@ class Blag
         end
       end
       post[:content] = lines.join
+      post[:rss_html] = Mustache.render(post_rss_template, {:post => post})
       post[:body] = RDiscount.new(post[:content]).to_html
       post[:rfc822] = Time.parse(post[:date]).rfc822
+      post[:tags] = (post[:tags] || '').split(/\s*,\s*/).map(&:strip)
       post[:url] = @url + '/' + post[:filename]
       # comments on by default
       post[:comments] = true if post[:comments].nil?
@@ -107,38 +149,46 @@ class Blag
   end
 
   def rss
-    template = File.read(File.join('templates', 'blog', 'post.rss.html'))
+    rss_for_posts
-    xml = Builder::XmlMarkup.new
+  end
-    xml.instruct! :xml, :version => '1.0'
-    xml.instruct! 'xml-stylesheet', :href => 'http://samhuri.net/assets/blog.css', :type => 'text/css'
-    xml.rss :version => '2.0' do
-      xml.channel do
-        xml.title @title
-        xml.description @subtitle
-        xml.link @url
-        xml.pubDate @posts.first[:rfc822]
 
-        posts.each do |post|
+  def rss_for_tag(tag)
-          xml.item do
+    rss_for_posts :title => tag + ' :: ' + @title,
-            xml.title post[:title]
+                  :subtitle => tag,
-            xml.description Mustache.render(template, {:post => post})
+                  :url => tag_url(tag),
-            xml.pubDate post[:rfc822]
+                  :posts => tags[tag]
-            xml.author post[:author]
+  end
-            xml.link post[:url]
+
-            xml.guid post[:url]
+  def tag_names
-          end
+    @tag_names ||= tags.keys.sort
-        end
+  end
+
+  def tags
+    return @tags if @tags
+    @tags = {}
+    posts.each do |post|
+      post[:tags].each do |tag|
+        @tags[tag] ||= []
+        @tags[tag] << post
       end
     end
-    xml
+    @tags
   end
 
   private
 
+  def article_template
+    @article_template ||= File.read(File.join('templates', 'blog', 'article.mustache'))
+  end
+
   def blog_file
     File.join(@src, 'blog.json')
   end
 
+  def post_rss_template
+    @post_rss_template ||= File.read(File.join('templates', 'blog', 'post.rss.html'))
+  end
+
   def read_blog
     blog = JSON.parse(File.read(blog_file))
     @title = blog['title']
@@ -150,6 +200,87 @@ class Blag
     File.join(@dest, 'sjs.rss')
   end
 
+  def rss_for_posts(options = {})
+    title = options[:title] || @title
+    subtitle = options[:subtitle] || @subtitle
+    url = options[:url] || @url
+    posts ||= options[:posts] || method(:posts).call
+
+    xml = Builder::XmlMarkup.new
+    xml.instruct! :xml, :version => '1.0'
+    xml.instruct! 'xml-stylesheet', :href => 'http://samhuri.net/assets/blog-all.min.css', :type => 'text/css'
+    xml.rss :version => '2.0' do
+      xml.channel do
+        xml.title title
+        xml.description subtitle
+        xml.link url
+        xml.pubDate posts.first[:rfc822]
+
+        posts.each do |post|
+          xml.item do
+            xml.title post[:title]
+            xml.description post[:rss_html]
+            xml.pubDate post[:rfc822]
+            xml.author post[:author]
+            xml.link post[:url]
+            xml.guid post[:url]
+          end
+        end
+      end
+    end
+    xml
+  end
+
+  def rss_tag_file(tag)
+    File.join(@dest, 'tags', tag, 'index.rss')
+  end
+
+  def rss_tags_file(tag)
+    File.join(@dest, 'tags.rss')
+  end
+
+  def tag_dir(tag)
+    File.join(@dest, 'tags', tag)
+  end
+
+  def tags_dir
+    @tag_dir ||= File.join(@dest, 'tags')
+  end
+
+  def tag_html_file(tag)
+    File.join(@dest, 'tags', tag, 'index.html')
+  end
+
+  def tag_index_file
+    File.join(@dest, 'tags', 'index.html')
+  end
+
+  def tag_template
+    @tag_template ||= File.read(File.join('templates', 'blog', 'tags', 'tag.html'))
+  end
+
+  def tags_template
+    @tags_template ||= File.read(File.join('templates', 'blog', 'tags', 'index.html'))
+  end
+
+  def tag_url(tag)
+    @url + '/tags/' + tag
+  end
+
+  def chunk(array, pieces=3)
+    len = array.length;
+    mid = (len/pieces)
+    chunks = []
+    start = 0
+    1.upto(pieces) do |i|
+      last = start+mid
+      last = last-1 unless len%pieces >= i
+      chunks << array[start..last] || []
+      start = last+1
+    end
+    chunks
+  end
+  
 end
 
 main if $0 == __FILE__

build.js

@@ -33,9 +33,7 @@ function main() {
           if (err && err.errno !== EEXIST) throw err
           fs.unlink(index, function(err) {
             if (err && err.errno !== ENOENT) throw err
-            var vals = { names: names.slice(0, -1)
+            var vals = { names: names }
-                       , lastName: names[names.length-1]
-                       }
               , html = mustache.to_html(tpl.toString(), vals)
             fs.writeFile(index, html, function(err) {
               if (err) throw err

combine.sh

@@ -1,10 +1,31 @@
 #!/usr/bin/env zsh
 
+
+### javascript ###
+
+# blog
 echo "request,showdown,strftime,tmpl,jquery-serializeObject,blog -> assets/blog-all.min.js"
 cat assets/{request,showdown,strftime,tmpl,jquery-serializeObject,blog}.min.js >|assets/blog-all.min.js
 
+# project index
+echo "gitter.store -> assets/proj-index-all.min.js"
+cat assets/{gitter,store}.min.js >|assets/proj-index-all.min.js
+
+# projects
 echo "gitter.store,proj,ghfinder,code_highlighter -> assets/proj-all.min.js"
 cat assets/{gitter,store,proj,ghfinder,code_highlighter}.min.js >|assets/proj-all.min.js
 
-echo "style,proj -> assets/proj-all.min.css"
+
-cat assets/{style,proj}.min.css >|assets/proj-all.min.css
+### css ###
+
+# blog
+echo "style,blog -> assets/blog-all.min.css"
+cat assets/{style,blog}.min.css >|assets/blog-all.min.css
+
+# project index
+echo "style,proj-common,proj-index -> assets/proj-index-all.min.css"
+cat assets/{style,proj-common,proj-index}.min.css >|assets/proj-index-all.min.css
+
+# projects
+echo "style,proj-common,proj -> assets/proj-all.min.css"
+cat assets/{style,proj-common,proj}.min.css >|assets/proj-all.min.css

index.html

@@ -6,25 +6,13 @@
   <link rel=icon type=image/gif href=assets/s.gif>
   <link rel=stylesheet href=assets/style.min.css>
   <!-- minifying CSS breaks the @media queries for iPhone and iPad, hrmph -->
-  <link rel=stylesheet media=screen href=assets/mobile.css>
+  <link rel=stylesheet media=screen href=assets/mobile.min.css>
   <!--[if lt IE 7]>
   <link rel=stylesheet href=assets/ie6.min.css>
   <![endif]-->
   <!--[if lt IE 8]>
   <link rel=stylesheet href=assets/ie7.min.css>
   <![endif]-->
-  <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>
 </head>
 <header>
   <h1>samhuri.net</h1>
@@ -48,3 +36,16 @@
 <p id=promote-js>
   <a class=img href=https://developer.mozilla.org/en/JavaScript/Guide title='JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript'><img src=assets/promotejshs.png height=150 width=180 alt='JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript'></a>
 </p>
+
+<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>

templates/blog/index.html

@@ -3,46 +3,16 @@
 <meta name=viewport content=width=device-width>
 <title>sjs' blog</title>
 <link rel=icon type=image/gif href=../assets/s.gif>
-<link rel=stylesheet href=../assets/blog.min.css>
+<link rel=stylesheet href=../assets/blog-all.min.css>
-<link rel=stylesheet media=screen href=../assets/mobile.css>
+<link rel=stylesheet media=screen href=../assets/mobile.min.css>
 <link rel=alternate type=application/rss+xml href=http://samhuri.net/blog/sjs.rss title="sjs' blog">
-<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
-<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);
-})();
-
-jQuery(function($) {
-  var hidden = true
-    , index = $('#index')
-  $('#index-toggle').click(function() {
-    index.toggle()
-    hidden = !hidden
-    $(this).html(hidden ? '&darr; show posts &darr;' : '&uarr; hide posts &uarr;')
-  })
-})
-</script>
-{{#comments}}
-<script>
-window.SJS = window.SJS || {}
-SJS.filename = "{{filename}}"
-</script>
-<script src=../assets/blog-all.min.js></script>
-{{/comments}}
 <body id=blog>
 <header>
   <h1><a href=index.html>sjs' blog</a></h1>
 </header>
 <nav id=breadcrumbs><a href=../>samhuri.net</a></nav>
 <div class=center><a id=index-toggle href=#>&darr; show posts &darr;</a></div>
-<nav id=index>
+<nav id=index class=hidden>
   <ul>
     {{#posts}}
     <li><a href={{filename}}>{{title}}</a> <span class=date>{{date}}</span></li>
@@ -50,16 +20,7 @@ SJS.filename = "{{filename}}"
   </ul>
 </nav>
 <div id=posts>
-  {{! TODO extract a post partial used here and in post.html }}
+  {{{article}}}
-  <article>
-    {{#post}}
-    <header>
-      <h1><a href={{filename}}>{{title}}</a></h1>
-      <time>{{date}}</time>
-    </header>
-    {{{body}}}
-    {{/post}}
-  </article>
 </div>
 <p class=sep>&#x0f04;</p>
 <div id=around>
@@ -104,4 +65,34 @@ SJS.filename = "{{filename}}"
 <footer>
   <a href=https://twitter.com/_sjs>@_sjs</a>
 </footer>
+<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
+<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);
+})();
+
+jQuery(function($) {
+  var hidden = true
+    , index = $('#index')
+  $('#index-toggle').click(function() {
+    index.toggle()
+    hidden = !hidden
+    $(this).html(hidden ? '&darr; show posts &darr;' : '&uarr; hide posts &uarr;')
+  })
+})
+</script>
+{{#comments}}
+<script>
+window.SJS = window.SJS || {}
+SJS.filename = "{{filename}}"
+</script>
+<script src=../assets/blog-all.min.js></script>
+{{/comments}}
 </body>

templates/blog/post.html

@@ -1,47 +1,19 @@
 <!doctype html>
 <meta charset=utf-8>
-<meta name=viewport content=width=device-width>
+<meta name=viewport content='width=device-width'>
 <title>{{title}} :: samhuri.net</title>
+<meta name=keywords content="{{keywords}}">
 <link rel=icon type=image/gif href=../assets/s.gif>
-<link rel=stylesheet href=../assets/blog.min.css>
+<link rel=stylesheet href=../assets/blog-all.min.css>
-<link rel=stylesheet media=screen href=../assets/mobile.css>
+<link rel=stylesheet media=screen href=../assets/mobile.min.css>
 <link rel=alternate type=application/rss+xml href=http://samhuri.net/blog/sjs.rss title="sjs' blog">
-<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>
-{{#comments}}
-<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
-<script>
-window.SJS = window.SJS || {}
-SJS.filename = "{{filename}}"
-</script>
-<script src=../assets/blog-all.min.js></script>
-{{/comments}}
 <body id=blog>
 <header>
   <h1><a href=index.html>sjs' blog</a></h1>
 </header>
 <nav id=breadcrumbs><a href=../>samhuri.net</a> &rarr; <a href=index.html>blog</a></nav>
 <div id=posts>
-  {{! TODO extract a post partial used here and in index.html }}
+  {{{article}}}
-  <article>
-    {{#post}}
-    <header>
-      <h1><a href={{filename}}>{{title}}</a></h1>
-      <time>{{date}}</time>
-    </header>
-    {{{body}}}
-    {{/post}}
-  </article>
 </div>
 <p class=sep>&#x0f04;</p>
 <div id=around>
@@ -86,4 +58,24 @@ SJS.filename = "{{filename}}"
 <footer>
   <a href=https://twitter.com/_sjs>@_sjs</a>
 </footer>
+<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>
+{{#comments}}
+<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
+<script>
+window.SJS = window.SJS || {}
+SJS.filename = "{{filename}}"
+</script>
+<script src=../assets/blog-all.min.js></script>
+{{/comments}}
 </body>

templates/proj/index.html

@@ -4,8 +4,8 @@
   <meta name=viewport content=width=device-width>
   <title>projects :: samhuri.net</title> 
   <link rel=icon type=image/gif href=../assets/s.gif>
-  <link rel=stylesheet href=../assets/style.min.css>
+  <link rel=stylesheet href=../assets/proj-index-all.min.css>
-  <link rel=stylesheet media=screen href=../assets/mobile.css>
+  <link rel=stylesheet media=screen href=../assets/mobile.min.css>
   <!--[if IE 6]>
   <link rel=stylesheet href=../assets/ie6.min.css>
   <![endif]-->
@@ -19,99 +19,19 @@
     #gh img { border: none }
     span { padding: 5px }
   </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=../assets/gitter.min.js></script>
-  <script src=../assets/store.min.js></script>
-  <script>
-  if (typeof console === 'undefined') {
-    console = {log:function(){}}
-  }
-
-  (function() {
-    if (document.addEventListener) {
-      document.addEventListener('DOMContentLoaded', ready, false)
-    } else if (window.attachEvent) {
-      window.attachEvent('onload', ready)
-    }
-
-    function ready() {
-      function addClass(el, name) {
-        var c = el.className || name
-        if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
-      }
-
-      var body = document.getElementsByTagName('body')[0]
-        , text
-      if ('innerText' in body) {
-        text = function(id, text) {
-          document.getElementById(id).innerText = text
-        }
-      } else {
-        text = function(id, text) {
-          document.getElementById(id).textContent = text
-        }
-      }
-
-      function highlight(id) {
-        document.getElementById(id).style.className = ' highlight'
-      }
-      function textHighlight(id, t) {
-        text(id, t)
-        document.getElementById(id).className = ' highlight'
-      }
-      function updateN(name, things) {
-        textHighlight('n' + name, things.length)
-      }
-
-      var data = createObjectStore('proj')
-        , t = data.get('t-proj')
-        , names = ['followers', 'following', 'repos', 'watched']
-      if (!t || +new Date() - t > 3600 * 1000) {
-        console.log('stale ' + String(t))
-        data.set('t-proj', +new Date())
-        names.forEach(function(name) {
-          GITR[name]('samsonjs', function(err, things) {
-            if (err) {
-              text('n' + name, '?')
-            } else {
-              data.set(name, things)
-              updateN(name, things)
-            }
-          })
-        })
-      } else {
-        console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
-        names.forEach(function(name) {
-          updateN(name, data.get(name))
-        })
-      }
-    }
-  }())
-  </script>
 </head>
 <nav id=breadcrumbs><a href=../>samhuri.net</a></nav>
 <a href=https://github.com/samsonjs><img id=forkme src=../assets/forkme.png alt="Fork me on GitHub"></a>
 <header>
   <h1>projects</h1>
 </header>
-<ul class=nav id=projects>
+<nav>
-  {{#names}}
+  <ul class=nav id=projects>
-  <li><a href={{.}}>{{.}}</a></li>
+    {{#names}}
-  <li class=ie-bullet>&bull;</li>
+    <li><a href={{.}}>{{.}}</a></li>
-  {{/names}}
+    {{/names}}
-  <li class=last><a href={{lastName}}>{{lastName}}</a></li>
+  </ul>
-</ul>
+</nav>
 <p id=gh>
   <a class=img href=https://github.com/samsonjs><img src=../assets/gh.png alt=GitHub></a>
 </p>
@@ -133,3 +53,82 @@
 <p id=promote-js>
   <a class=img href=https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function title='JS Function arity'><img src=../assets/promotejsh.gif height=150 width=180 alt='JS Function arity'/></a>
 </p>
+<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=../assets/proj-index-all.min.js></script>
+<script>
+if (typeof console === 'undefined') {
+  console = {log:function(){}}
+}
+
+(function() {
+  if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded', ready, false)
+  } else if (window.attachEvent) {
+    window.attachEvent('onload', ready)
+  }
+
+  function ready() {
+    function addClass(el, name) {
+      var c = el.className || name
+      if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
+    }
+
+    var body = document.getElementsByTagName('body')[0]
+      , text
+    if ('innerText' in body) {
+      text = function(id, text) {
+        document.getElementById(id).innerText = text
+      }
+    } else {
+      text = function(id, text) {
+        document.getElementById(id).textContent = text
+      }
+    }
+
+    function highlight(id) {
+      document.getElementById(id).style.className = ' highlight'
+    }
+    function textHighlight(id, t) {
+      text(id, t)
+      document.getElementById(id).className = ' highlight'
+    }
+    function updateN(name, things) {
+      textHighlight('n' + name, things.length)
+    }
+
+    var data = createObjectStore('proj')
+      , t = data.get('t-proj')
+      , names = ['followers', 'following', 'repos', 'watched']
+    if (!t || +new Date() - t > 3600 * 1000) {
+      console.log('stale ' + String(t))
+      data.set('t-proj', +new Date())
+      names.forEach(function(name) {
+        GITR[name]('samsonjs', function(err, things) {
+          if (err) {
+            text('n' + name, '?')
+          } else {
+            data.set(name, things)
+            updateN(name, things)
+          }
+        })
+      })
+    } else {
+      console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
+      names.forEach(function(name) {
+        updateN(name, data.get(name))
+      })
+    }
+  }
+}())
+</script>

templates/proj/proj/index.html

@@ -5,44 +5,7 @@
   <title>{{name}} :: samhuri.net</title>
   <link rel=icon type=image/gif href=../../assets/s.gif>
   <link rel=stylesheet href=../../assets/proj-all.min.css>
-  <link rel=stylesheet media=screen href=../../assets/mobile.css>
+  <link rel=stylesheet media=screen href=../../assets/mobile.min.css>
-  <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>
-  <!--[if lt IE 8]>
-  <script src=http://d1eqzjbvoh1rux.cloudfront.net/json2.min.js></script>
-  <script src=../../assets/storage-polyfill.min.js></script>
-  <![endif]-->
-  <script src=http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js></script>
-  <script src=../../assets/proj-all.min.js></script>
-  <script>
-    (function() {
-      SJS.proj('{{name}}')
-
-      if (document.addEventListener) {
-        document.addEventListener('DOMContentLoaded', ready, false)
-      } else if (window.attachEvent) {
-        window.attachEvent('onload', ready)
-      }
-      function ready() {
-        var bl = document.getElementById('browse-link')
-        bl.onclick = function() {
-          document.getElementById('browse').style.display = 'none'
-          window.f = new Finder({ user_id: 'samsonjs', repository: 'compiler', id: 'gh-finder' })
-          return false
-        }
-      }
-    }())
-  </script>
 </head>
 <nav id=breadcrumbs><a href=../../>samhuri.net</a> &rarr; <a href=../>projects</a></nav>
 <a href=https://github.com/samsonjs/{{name}}><img id=forkme src=../../assets/forkme.png alt="Fork me on GitHub"></a>
@@ -75,3 +38,40 @@
 <footer>
   <a href=https://twitter.com/_sjs>@_sjs</a>
 </footer>
+<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>
+<!--[if lt IE 8]>
+<script src=http://d1eqzjbvoh1rux.cloudfront.net/json2.min.js></script>
+<script src=../../assets/storage-polyfill.min.js></script>
+<![endif]-->
+<script src=http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js></script>
+<script src=../../assets/proj-all.min.js></script>
+<script>
+  (function() {
+    SJS.proj('{{name}}')
+
+    if (document.addEventListener) {
+      document.addEventListener('DOMContentLoaded', ready, false)
+    } else if (window.attachEvent) {
+      window.attachEvent('onload', ready)
+    }
+    function ready() {
+      var bl = document.getElementById('browse-link')
+      bl.onclick = function() {
+        document.getElementById('browse').style.display = 'none'
+        window.f = new Finder({ user_id: 'samsonjs', project: '{{name}}', id: 'gh-finder' })
+        return false
+      }
+    }
+  }())
+</script>