Browse code

1. Switched back to Rdiscount 2. Improved Blockquote comment header 3. Added Include File and Pullquote plugins 4. Improved blog typography 5. Simplified "Read more" link

Brandon Mathis authored on 19/06/2011 at 19:14:01
Showing 14 changed files
... ...
@@ -2,7 +2,7 @@ source "http://rubygems.org"
2 2
 
3 3
 gem 'rake'
4 4
 gem 'jekyll'
5
-gem 'kramdown'
5
+gem 'rdiscount'
6 6
 gem 'RedCloth'
7 7
 gem 'haml', '>= 3.1'
8 8
 gem 'compass', '>= 0.11'
... ...
@@ -18,12 +18,12 @@ GEM
18 18
       directory_watcher (>= 1.1.1)
19 19
       liquid (>= 1.9.0)
20 20
       maruku (>= 0.5.9)
21
-    kramdown (0.13.3)
22 21
     liquid (2.2.2)
23 22
     maruku (0.6.0)
24 23
       syntax (>= 1.0.0)
25 24
     rake (0.9.0)
26 25
     rb-fsevent (0.4.0)
26
+    rdiscount (1.6.8)
27 27
     rubypants (0.2.0)
28 28
     sass (3.1.2)
29 29
     syntax (1.0.0)
... ...
@@ -36,7 +36,7 @@ DEPENDENCIES
36 36
   compass (>= 0.11)
37 37
   haml (>= 3.1)
38 38
   jekyll
39
-  kramdown
40 39
   rake
41 40
   rb-fsevent
41
+  rdiscount
42 42
   rubypants
... ...
@@ -11,9 +11,10 @@ author: Your Name
11 11
 subscribe_rss: /atom.xml
12 12
 subscribe_email:
13 13
 
14
-markdown: kramdown
14
+markdown: rdiscount
15 15
 pygments: true
16
-recent_posts: 1
16
+posts_per_page: 10
17
+recent_posts: 5
17 18
 simple_search: http://google.com/search
18 19
 
19 20
 # Optional configurations
... ...
@@ -2,21 +2,21 @@
2 2
 # Author: Brandon Mathis
3 3
 # Based on the work of: Josediaz Gonzalez - https://github.com/josegonzalez/josediazgonzalez.com/blob/master/_plugins/blockquote.rb
4 4
 #
5
+# Outputs a string with a given attribution as a quote
6
+#
7
+#   {% blockquote Bobby Willis http://google.com/blah the search for bobby's mom %}
8
+#   Wheeee!
9
+#   {% endblockquote %}
10
+#   ...
11
+#   <blockquote>
12
+#     <p>Wheeee!</p>
13
+#     <footer>
14
+#     <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a>
15
+#   </blockquote>
16
+#
5 17
 require './_plugins/titlecase.rb'
6 18
 module Jekyll
7 19
 
8
-  # Outputs a string with a given attribution as a quote
9
-  #
10
-  #   {% blockquote Bobby Willis http://google.com/blah the search for bobby's mom %}
11
-  #   Wheeee!
12
-  #   {% endblockquote %}
13
-  #   ...
14
-  #   <blockquote>
15
-  #     <p>Wheeee!</p>
16
-  #     <footer>
17
-  #     <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a>
18
-  #   </blockquote>
19
-  #
20 20
   class Blockquote < Liquid::Block
21 21
     FullCiteWithTitle = /([\w\s]+)(https?:\/\/)(\S+\s)([\w\s]+)/i
22 22
     FullCite = /([\w\s]+)(https?:\/\/)(\S+)/i
... ...
@@ -1,11 +1,16 @@
1 1
 #custom filters for Octopress
2 2
 
3 3
 module OctopressFilters
4
-  def exerpt(input, url, url_text="Reade more&hellip;", permalink_text=false)
4
+  def auto_exerpt(input, url, url_text="Read more &hellip;")
5 5
     if input.index(/<!--\s?more\s?-->/i)
6
-      input.split(/<!--\s?more\s?-->/i)[0] + "<p><a href='#{url}'>#{url_text}</a></p>"
7
-    elsif permalink_text
8
-      input + "<p><a href='#{url}'>#{permalink_text}</a></p>"
6
+      input.split(/<!--\s?more\s?-->/i)[0] + "<p><a rel='full-article' href='#{url}'>#{url_text}</a></p>"
7
+    else
8
+      input
9
+    end
10
+  end
11
+  def exerpt(input)
12
+    if input.index(/<!--\s*more\s*-->/i)
13
+      input.split(/<!--\s*more\s*-->/i)[0]
9 14
     else
10 15
       input
11 16
     end
... ...
@@ -35,7 +40,7 @@ module OctopressFilters
35 35
   end
36 36
   def ordinalize(date)
37 37
     date = datetime(date)
38
-    "#{date.strftime('%B')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}"
38
+    "#{date.strftime('%b')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}"
39 39
   end
40 40
   def ordinal(number)
41 41
     if (11..13).include?(number.to_i % 100)
... ...
@@ -56,4 +61,3 @@ module OctopressFilters
56 56
   end
57 57
 end
58 58
 Liquid::Template.register_filter OctopressFilters
59
-
60 59
new file mode 100644
... ...
@@ -0,0 +1,31 @@
0
+require 'pathname'
1
+
2
+module Jekyll
3
+
4
+  class IncludePartialTag < Liquid::Tag
5
+    def initialize(tag_name, file, tokens)
6
+      super
7
+      @file = file.strip
8
+    end
9
+
10
+    def render(context)
11
+      file_dir = (context.registers[:site].source || 'source')
12
+      file_path = Pathname.new(file_dir).expand_path
13
+      file = file_path + @file
14
+
15
+      unless file.file?
16
+        return "File #{file} could not be found"
17
+      end
18
+
19
+      Dir.chdir(file_path) do
20
+        partial = Liquid::Template.parse(file.read)
21
+        context.stack do
22
+          partial.render(context)
23
+        end
24
+      end
25
+    end
26
+  end
27
+end
28
+
29
+Liquid::Template.register_tag('include_partial', Jekyll::IncludePartialTag)
30
+
0 31
new file mode 100644
... ...
@@ -0,0 +1,42 @@
0
+#
1
+# Author: Brandon Mathis
2
+# Based on the sematic pullquote technique by Maykel Loomans at http://miekd.com/articles/pull-quotes-with-html5-and-css/
3
+#
4
+# Outputs a span with a data-pullquote attribute set from the marked pullquote. Example:
5
+#
6
+#   {% pullquote %}
7
+#     When writing longform posts, I find it helpful to include pullquotes, which help those scanning a post discern whether or not a post is helpful.
8
+#     It is important to note, {" pullquotes are merely visual in presentation and should not appear twice in the text. "} That is why it is prefered
9
+#     to use a CSS only technique for styling pullquotes.
10
+#   {% endpullquote %}
11
+#   ...will output...
12
+#   <p>
13
+#     <span data-pullquote="pullquotes are merely visual in presentation and should not appear twice in the text.">
14
+#       When writing longform posts, I find it helpful to include pullquotes, which help those scanning a post discern whether or not a post is helpful.
15
+#       It is important to note, pullquotes are merely visual in presentation and should not appear twice in the text. This is why a CSS only approach #       for styling pullquotes is prefered.
16
+#     </span>
17
+#   </p>
18
+#
19
+
20
+module Jekyll
21
+
22
+  class PullquoteTag < Liquid::Block
23
+    PullQuoteMarkup = /\{(.+)\}/i
24
+
25
+    def initialize(tag_name, markup, tokens)
26
+      super
27
+    end
28
+
29
+    def render(context)
30
+      output = super
31
+      if output.join =~ /\{"\s*(.+)\s*"\}/
32
+        @quote = $1
33
+        "<span class='has-pullquote' data-pullquote='#{@quote}'>#{output.join.gsub(/\{"\s*|\s*"\}/, '')}</span>"
34
+      else
35
+        return "Surround your pullquote like this {! text to be quoted !}"
36
+      end
37
+    end
38
+  end
39
+end
40
+
41
+Liquid::Template.register_tag('pullquote', Jekyll::PullquoteTag)
... ...
@@ -31,8 +31,11 @@ body {
31 31
 }
32 32
 h1 {
33 33
   font-size: 3.2em;
34
-  line-height: 1.2em
34
+  line-height: 1.2em;
35
+  @media only screen and (max-width: 768px) { font-size: 2.2em; }
35 36
 }
37
+
38
+
36 39
 h2, section h1 {
37 40
   font-size: 1.5em;
38 41
 }
... ...
@@ -116,3 +119,24 @@ blockquote {
116 116
     a { font-style: italic; }
117 117
   }
118 118
 }
119
+
120
+.has-pullquote:before {
121
+  /* Reset metrics. */
122
+  padding: 0;
123
+  border: none;
124
+
125
+  /* Content */
126
+  content: attr(data-pullquote);
127
+
128
+  /* Pull out to the right, modular scale based margins. */
129
+  float: right;
130
+  width: 45%;
131
+  margin: 1em 0 1em 1.5em;
132
+
133
+  /* Baseline correction */
134
+  position: relative;
135
+  top: 6px;
136
+  font-size: 1.4em;
137
+  line-height: 1.45em;
138
+}
139
+
... ...
@@ -14,16 +14,17 @@ $border: inline-image('dotted-border.png');
14 14
         padding-top: 0;
15 15
       }
16 16
     }
17
-    .byline + time:before, .byline + time +time:before {
17
+    time + .byline:before, .byline + time +time:before {
18 18
       content: "\2022 ";
19 19
       padding: 0 .3em 0 .2em;
20 20
       display: inline-block;
21 21
       @include opacity(.5);
22 22
     }
23 23
     header {
24
+      position: relative;
24 25
       padding-top: 2em;
25 26
       margin-bottom: 1.5em;
26
-      padding-bottom: 1.5em;
27
+      padding-bottom: 1em;
27 28
       background: $border bottom left repeat-x;
28 29
       h1 {
29 30
         margin: 0;
... ...
@@ -33,11 +34,24 @@ $border: inline-image('dotted-border.png');
33 33
       p {
34 34
         font-size: .9em;
35 35
         color: $type-color-light;
36
-        border: none;
37
-        padding-top: 0;
38 36
         margin: 0;
39
-        font-style: italic;
40 37
         @extend .sans;
38
+        &.meta {
39
+          text-transform: uppercase;
40
+          position: absolute;
41
+          top: 0;
42
+        }
43
+      }
44
+      @media only screen and (max-width: 768px) {
45
+        padding-bottom: 1em;
46
+        margin-bottom: 1em;
47
+        background: $border bottom left repeat-x;
48
+        p.meta { position: static; }
49
+      }
50
+
51
+      &.feature h1 {
52
+        font-size: 2.0em; font-style: italic;
53
+        line-height: 1.3em;
41 54
       }
42 55
     }
43 56
     .entry-content {
... ...
@@ -66,23 +80,33 @@ $border: inline-image('dotted-border.png');
66 66
         }
67 67
       }
68 68
     }
69
-    header.feature h1 {
70
-      font-size: 2.0em; font-style: italic;
71
-      line-height: 1.3em;
72
-    }
73 69
     #disqus_thread { }
74
-    .meta {
75
-      border-bottom: 1px dashed #dddddd;
76
-      text-transform: uppercase;
77
-      color: #777777;
78
-      padding: 8px 0 5px;
79
-      margin-bottom: 1.5em;
80
-      font-size: 75%;
81
-      letter-spacing: 1px;
82
-    }
83 70
 
84
-    .footer {
71
+    footer {
85 72
       padding-top: 15px;
73
+      time, .author { color: $light-text; }
74
+    }
75
+  }
76
+}
77
+article + article {
78
+  background: $border top left repeat-x;
79
+}
80
+#articles.blog-index {
81
+  article header { background: none; padding-bottom: 0; }
82
+  article h1 {
83
+    font-size: 2.2em;
84
+    a { color: inherit; &:hover{ color: $link-color-hover; } }
85
+  }
86
+  a[rel=full-article] {
87
+    background: darken($main-bg, 5);
88
+    display: inline-block;
89
+    padding: .4em .8em;
90
+    margin-right: .5em;
91
+    text-decoration: none;
92
+    @include transition(background-color, .5s);
93
+    &:hover {
94
+      background: $link-color-hover;
95
+      color: $main-bg;
86 96
     }
87 97
   }
88 98
 }
... ...
@@ -60,6 +60,7 @@ pre {
60 60
   margin-bottom: 1.5em;
61 61
   padding: .4em .8em;
62 62
   color: #555;
63
+  overflow: auto;
63 64
 }
64 65
 
65 66
 p code {
... ...
@@ -10,22 +10,19 @@
10 10
     {% else %}
11 11
       <h1 class="entry-title">{{ page.title | titlecase }}</h1>
12 12
     {% endif %}
13
-    {% unless page.no_meta %}
14
-      <p>
15
-        {% if page.date %}
16
-          <time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time>
17
-        {% endif %}
18
-        {% if page.updated %}
19
-          <time class="updated" datetime="{{ page.updated | datetime }}"></time>
20
-        {% endif %}
21
-        {% if author %}<span class="byline author vcard">By <span class="fn">{{ author }}</span></span>{% endif %}
22
-      </p>
23
-    {% endunless %}
13
+    {% unless page.no_meta or !index %}<p class="meta">{% include post_meta.html %}</p>{% endunless %}
24 14
   </header>
25 15
 {% endunless %}
26 16
 {% if index %}
27
-<div class="entry-content">{{ content | exerpt(content, page.url, 'Continue reading &raquo;') | smart_quotes }}</div>
17
+<div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
18
+<footer>
19
+  <p>
20
+  {% if content contains "<!-- more -->" or content contains "<!--more-->" %}
21
+    <a rel="full-article" href="{{ page.url }}">Read more &hellip;</a>
22
+  {% endif %}
23
+  {% include post_meta.html %}
24
+  </p>
25
+</footer>
28 26
 {% else %}
29 27
 <div class="entry-content">{{ content | smart_quotes }}</div>
30 28
 {% endif %}
31
-
32 29
new file mode 100644
... ...
@@ -0,0 +1,7 @@
0
+{% if page.date %}
1
+<time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time>
2
+{% endif %}
3
+{% if page.updated %}
4
+<time class="updated" datetime="{{ page.updated | datetime }}"></time>
5
+{% endif %}
6
+{% if author %}<span class="byline author vcard"><span class="fn">{{ author }}</span></span>{% endif %}
... ...
@@ -4,7 +4,7 @@
4 4
   <nav>{% include navigation.html %}</nav>
5 5
   <div>
6 6
     <div>
7
-      <div id="articles">{{ content }}</div>
7
+      <div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div>
8 8
       {% unless page.sidebar == 'none' %}
9 9
         <aside>{% include sidebar.html %}</aside>
10 10
       {% endunless %}
... ...
@@ -1,9 +1,10 @@
1 1
 ---
2 2
 layout: default
3
+blog_index: true
3 4
 ---
4
-{% for page in site.posts limit:3 %}
5
-{% assign content = page.content %}
6 5
 {% assign index = true %}
6
+{% for page in site.posts limit:site.posts_per_page %}
7
+{% assign content = page.content %}
7 8
   <article>
8 9
     {% include article.html %}
9 10
   </article>