refactor; add basic gallery support

.gitignore

@@ -1,3 +1,4 @@
-_layouts/private-*
+/_layouts/private-*
-_site
+/_site
-private
+/asset
+/private

_config.yml

@@ -1,4 +1,4 @@
 markdown: redcarpet
 paginate: 7
 pygments: true
-safe: true
+safe: false

_includes/disqus.html

@@ -0,0 +1,17 @@
+<div class="disqus screen-only">
+    <div id="disqus_thread"></div>
+    <script type="text/javascript">
+        var disqus_shortname = 'dpb587';
+        var disqus_identifier = '{{ page.id }}';
+        var disqus_title = '{{ page.title|replace:"'":"\\'" }}';
+        var disqus_url = 'http://dpb587.me{{ page.url }}';
+
+        (function() {
+            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+        })();
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+</div>

_includes/header.html

@@ -11,6 +11,10 @@
         <link href="/include/site/print.css" media="print" rel="stylesheet" type="text/css" />
         <link href="/blog/atom.xml" type="application/atom+xml" rel="alternate" title="Danny Berger (blog)" />
 
+        {% if page.path %}
+            <meta property="jekyll-source" content="https://raw.githubusercontent.com/dpb587/dpb587.github.com/master/{{ page.path }}" />
+        {% endif %}
+
         <meta property="twitter:site" content="dpb587" />
         <meta property="twitter:creator" content="dpb587" />
 

_layouts/gallery-photo.html

@@ -0,0 +1,82 @@
+{% include header.html %}
+<section>
+    <header>
+        <div class="timeline">
+            {% if page.date %}
+                <time datetime="{{ page.date|date_to_xmlschema }}" title="{{ page.date|date_to_xmlschema }}"><strong>{{ page.date|date:"%b %d"|upcase }}</strong><br />{{ page.date|date:"%Y" }}</time>
+            {% endif %}
+            {% if page.location %}
+                <a href="https://maps.google.com/maps?hl=en&amp;ll={{ page.location.latitude }},{{ page.location.longitude }}&amp;t=w&amp;z=12"><img alt="map" height="49" src="https://maps.googleapis.com/maps/api/staticmap?center={{ page.location.latitude }},{{ page.location.longitude }}&amp;zoom=9&amp;size=98x98&amp;sensor=false" title="{{ page.location.title }}" width="49" /></a>
+            {% endif %}
+            {% if page.code %}
+                <a href="{{ page.code }}"><img alt="code" height="49" src="/include/icons/code.png" width="49" /></a>
+            {% endif %}
+        </div>
+        <div class="social screen-only">
+            
+        </div>
+        <h1>
+            {{ page.title }}
+            <small class="print-only">{{ page.date|date:'%A, %B %d, %Y' }}</small>
+        </h1>
+    </header>
+    <section class="post-content">
+        <p style="text-align:center;">
+            <a href="/asset{{ page.url|replace:".html","~1280.jpg" }}"><img alt="Photo: {{ page.title }}" src="/asset{{ page.url|replace:".html","~640.jpg" }}" style="max-width:630px;" /></a>
+        </p>
+
+        {{ content }}
+    </section>
+    <div class="meta">
+        <div class="meta-properties">
+            <div style="float:left;width:359px;">
+                <dl style="margin-top:0;">
+                    <dt>Date</dt>
+                    <dd>{{ page.date|date:'%A, %B %d, %Y at %I:%M %p'|replace:' 0',' '|replace:' AM',' am'|replace:' PM',' pm' }}
+
+                    <dt>Camera</dt>
+                    <dd>{{ page.exif.make }} {{ page.exif.model }}
+
+                    <dt>Aperture</dt>
+                    <dd>{{ page.exif.aperture }}</dd>
+
+                    <dt>Exposure</dt>
+                    <dd>{{ page.exif.exposure }}</dd>
+                </dl>
+            </div>
+
+            {% if page.location %}
+                <div style="float:left;line-height:0;width:280px;">
+                    <a href="https://maps.google.com/maps?hl=en&amp;ll={{ page.location.latitude }},{{ page.location.longitude }}&amp;t=w&amp;z=12"><img alt="map" height="173" src="https://maps.googleapis.com/maps/api/staticmap?center={{ page.location.latitude }},{{ page.location.longitude }}&amp;zoom=13&amp;size=280x173&amp;markers=size:mid%7Ccolor:orange%7C{{ page.location.latitude }},{{ page.location.longitude }}&amp;sensor=false" title="{{ page.location.title }}" width="280" /></a>
+                </div>
+            {% endif %}
+
+            <div style="clear:left;"></div>
+        </div>
+        <div class="meta-navigate screen-only">
+            {% if page.next %}
+                <div style="float:right;">
+                    <a href="{{ page.next }}.html" rel="next">Next Photo &raquo;</a>
+                </div>
+            {% endif %}
+
+            {% if page.previous %}
+                <div style="float:left;">
+                    <a href="{{ page.previous }}.html" rel="prev">&laquo; Previous</a>
+                </div>
+            {% endif %}
+
+            <div style="padding:0 120px;">
+                <a href="./" rel="contents">Gallery List</a>
+            </div>
+
+            <div style="clear:both;"></div>
+        </div>
+        <div class="meta-social screen-only">
+            <a href="https://twitter.com/share" class="twitter-share-button" data-via="dpb587">Tweet</a>
+            <div class="g-plusone" data-size="medium" data-width="300"></div>
+        </div>
+    </div>
+    {% include disqus.html %}
+</section>
+{% include footer.html %}

_layouts/post.html

@@ -2,12 +2,14 @@
 <section>
     <header>
         <div class="timeline">
-            <time datetime="{{ page.date|date_to_xmlschema }}" title="{{ page.date|date_to_xmlschema }}"><strong>{{ page.date|date:"%b %d"|upcase }}</strong><br />{{ page.date|date:"%Y" }}</time>
+            {% if page.date %}
+                <time datetime="{{ page.date|date_to_xmlschema }}" title="{{ page.date|date_to_xmlschema }}"><strong>{{ page.date|date:"%b %d"|upcase }}</strong><br />{{ page.date|date:"%Y" }}</time>
+            {% endif %}
             {% if page.location %}
                 <a href="https://maps.google.com/maps?hl=en&ll={{ page.location.latitude }},{{ page.location.longitude }}&t=w&z=12"><img alt="map" height="49" src="https://maps.googleapis.com/maps/api/staticmap?center={{ page.location.latitude }},{{ page.location.longitude }}&zoom=9&size=98x98&sensor=false" title="{{ page.location.title }}" width="49" /></a>
             {% endif %}
             {% if page.code %}
-                <a href="{{ page.code }}"><img alt="code" height="49" src="/include/icons/code.png" title="{{ page.location.title }}" width="49" /></a>
+                <a href="{{ page.code }}"><img alt="code" height="49" src="/include/icons/code.png" width="49" /></a>
             {% endif %}
         </div>
         <div class="social screen-only">
@@ -21,26 +23,12 @@
     <section class="post-content">
         {{ content }}
     </section>
-    <div class="meta meta-social screen-only">
+    <div class="meta">
-        <a href="https://twitter.com/share" class="twitter-share-button" data-via="dpb587">Tweet</a>
+        <div class="meta-social screen-only">
-        <div class="g-plusone" data-size="medium" data-width="300"></div>
+            <a href="https://twitter.com/share" class="twitter-share-button" data-via="dpb587">Tweet</a>
-    </div>
+            <div class="g-plusone" data-size="medium" data-width="300"></div>
-    <div class="disqus screen-only">
+        </div>
-        <div id="disqus_thread"></div>
-        <script type="text/javascript">
-            var disqus_shortname = 'dpb587';
-            var disqus_identifier = '{{ page.id }}';
-            var disqus_title = '{{ page.title|replace:"'":"\\'" }}';
-            var disqus_url = 'http://dpb587.me{{ page.url }}';
-
-            (function() {
-                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-                dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
-                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-            })();
-        </script>
-        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-        <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
     </div>
+    {% include disqus.html %}
 </section>
 {% include footer.html %}

_plugins/loopdir.rb

@@ -0,0 +1,85 @@
+# inspired by
+# - https://gist.github.com/jgatjens/8925165
+# - http://simon.heimlicher.com/articles/2012/02/01/jekyll-directory-listing
+
+module Jekyll
+  class Loopdir < Liquid::Block
+    include Liquid::StandardFilters
+    Syntax = /(#{Liquid::QuotedFragment}+)?/
+ 
+    def initialize(tag_name, markup, tokens)
+      @attributes = {}
+ 
+      @attributes['path'] = nil;
+      @attributes['parse'] = 'true';
+      @attributes['match'] = '*';
+      @attributes['sort'] = 'asc';
+ 
+      markup.scan(Liquid::TagAttributes) do | key, value |
+        @attributes[key] = value
+      end
+
+      if @attributes['path'].nil?
+        raise SyntaxError.new("The `path` attribute is missing for `loopdir` tag.")
+      end
+
+      if 'true' == @attributes['parse']
+        @attributes['parse'] = true
+      else
+        @attributes['parse'] = false
+      end
+ 
+      super
+    end
+ 
+    def render(context)
+      context.registers[:loopdir] ||= Hash.new(0)
+ 
+      files = Dir.glob(File.join(@attributes['path'], @attributes['match']))
+
+      if @attributes['sort'].casecmp('desc') == 0
+        files.sort! do | x, y |
+          y <=> x
+        end
+      else
+        files.sort!
+      end
+ 
+      result = []
+ 
+      context.stack do
+        files.each do |pathname|
+          if @attributes['parse']
+            data = {}
+
+            content = File.read(pathname)
+
+            if content =~ /^(---\s*\n.*?\n?)^(---\s*$\n?)/m
+              content = $POSTMATCH
+
+              begin
+                data = YAML.load($1)
+              rescue => e
+                puts "YAML Exception reading #{name}: #{e.message}"
+              end
+            end
+
+            data['name'] = File.basename(pathname, @attributes['match'].sub('*', ''))
+            data['path'] = pathname
+            data['content'] = content
+
+            context['item'] = data
+          else
+            context['item'] = pathname
+          end
+
+          result << render_all(@nodelist, context)
+        end
+   
+        result
+      end
+    end
+  end
+end
+ 
+Liquid::Template.register_tag('loopdir', Jekyll::Loopdir)

include/site/default.css

@@ -232,6 +232,13 @@ dl dd {
     padding: 2px 0 0 146px;
 }
 
+.meta-properties {
+    border-top: #F0F0F0 solid 1px;
+    margin-left: -8px;
+    margin-right: -8px;
+    padding: 10px 8px;
+}
+
 .meta-social {
     border-top: #F0F0F0 solid 1px;
     margin-left: -8px;
@@ -239,6 +246,16 @@ dl dd {
     padding: 32px 6px 0;
 }
 
+.meta-navigate {
+    border-top: #F0F0F0 solid 1px;
+    font-size: 15px;
+    font-weight: 400;
+    margin-left: -8px;
+    margin-right: -8px;
+    padding: 10px;
+    text-align: center;
+}
+
 .disqus {
     border-top: #F0F0F0 solid 1px;
     margin: 28px -8px 0;
@@ -291,3 +308,16 @@ blockquote {
     margin: 14px 16px;
     padding: 1px 18px;
 }
+
+.list-gallery {
+    line-height: 0;
+}
+
+    .list-gallery img {
+        padding: 2px !important;
+        margin: 8px 7px 0 0;
+    }
+
+    .list-gallery img:hover {
+        border: #999999 solid 1px !important;
+    }