Permalink
Browse files

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
  • Loading branch information...
1 parent 105ba14 commit f77db80077d739077becc1618b87818ea42f145c @imathis imathis committed Jun 19, 2011
View
@@ -2,7 +2,7 @@ source "http://rubygems.org"
gem 'rake'
gem 'jekyll'
-gem 'kramdown'
+gem 'rdiscount'
gem 'RedCloth'
gem 'haml', '>= 3.1'
gem 'compass', '>= 0.11'
View
@@ -18,12 +18,12 @@ GEM
directory_watcher (>= 1.1.1)
liquid (>= 1.9.0)
maruku (>= 0.5.9)
- kramdown (0.13.3)
liquid (2.2.2)
maruku (0.6.0)
syntax (>= 1.0.0)
rake (0.9.0)
rb-fsevent (0.4.0)
+ rdiscount (1.6.8)
rubypants (0.2.0)
sass (3.1.2)
syntax (1.0.0)
@@ -36,7 +36,7 @@ DEPENDENCIES
compass (>= 0.11)
haml (>= 3.1)
jekyll
- kramdown
rake
rb-fsevent
+ rdiscount
rubypants
View
@@ -11,9 +11,10 @@ author: Your Name
subscribe_rss: /atom.xml
subscribe_email:
-markdown: kramdown
+markdown: rdiscount
pygments: true
-recent_posts: 1
+posts_per_page: 10
+recent_posts: 5
simple_search: http://google.com/search
# Optional configurations
@@ -2,21 +2,21 @@
# Author: Brandon Mathis
# Based on the work of: Josediaz Gonzalez - https://github.com/josegonzalez/josediazgonzalez.com/blob/master/_plugins/blockquote.rb
#
+# Outputs a string with a given attribution as a quote
+#
+# {% blockquote Bobby Willis http://google.com/blah the search for bobby's mom %}
+# Wheeee!
+# {% endblockquote %}
+# ...
+# <blockquote>
+# <p>Wheeee!</p>
+# <footer>
+# <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a>
+# </blockquote>
+#
require './_plugins/titlecase.rb'
module Jekyll
- # Outputs a string with a given attribution as a quote
- #
- # {% blockquote Bobby Willis http://google.com/blah the search for bobby's mom %}
- # Wheeee!
- # {% endblockquote %}
- # ...
- # <blockquote>
- # <p>Wheeee!</p>
- # <footer>
- # <strong>John Paul Jones</strong><cite><a href="http://google.com/blah">The Search For Bobby's Mom</a>
- # </blockquote>
- #
class Blockquote < Liquid::Block
FullCiteWithTitle = /([\w\s]+)(https?:\/\/)(\S+\s)([\w\s]+)/i
FullCite = /([\w\s]+)(https?:\/\/)(\S+)/i
@@ -1,11 +1,16 @@
#custom filters for Octopress
module OctopressFilters
- def exerpt(input, url, url_text="Reade more&hellip;", permalink_text=false)
+ def auto_exerpt(input, url, url_text="Read more &hellip;")
if input.index(/<!--\s?more\s?-->/i)
- input.split(/<!--\s?more\s?-->/i)[0] + "<p><a href='#{url}'>#{url_text}</a></p>"
- elsif permalink_text
- input + "<p><a href='#{url}'>#{permalink_text}</a></p>"
+ input.split(/<!--\s?more\s?-->/i)[0] + "<p><a rel='full-article' href='#{url}'>#{url_text}</a></p>"
+ else
+ input
+ end
+ end
+ def exerpt(input)
+ if input.index(/<!--\s*more\s*-->/i)
+ input.split(/<!--\s*more\s*-->/i)[0]
else
input
end
@@ -35,7 +40,7 @@ def datetime(date)
end
def ordinalize(date)
date = datetime(date)
- "#{date.strftime('%B')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}"
+ "#{date.strftime('%b')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}"
end
def ordinal(number)
if (11..13).include?(number.to_i % 100)
@@ -56,4 +61,3 @@ def yearly_posts(site)
end
end
Liquid::Template.register_filter OctopressFilters
-
@@ -0,0 +1,31 @@
+require 'pathname'
+
+module Jekyll
+
+ class IncludePartialTag < Liquid::Tag
+ def initialize(tag_name, file, tokens)
+ super
+ @file = file.strip
+ end
+
+ def render(context)
+ file_dir = (context.registers[:site].source || 'source')
+ file_path = Pathname.new(file_dir).expand_path
+ file = file_path + @file
+
+ unless file.file?
+ return "File #{file} could not be found"
+ end
+
+ Dir.chdir(file_path) do
+ partial = Liquid::Template.parse(file.read)
+ context.stack do
+ partial.render(context)
+ end
+ end
+ end
+ end
+end
+
+Liquid::Template.register_tag('include_partial', Jekyll::IncludePartialTag)
+
@@ -0,0 +1,42 @@
+#
+# Author: Brandon Mathis
+# Based on the sematic pullquote technique by Maykel Loomans at http://miekd.com/articles/pull-quotes-with-html5-and-css/
+#
+# Outputs a span with a data-pullquote attribute set from the marked pullquote. Example:
+#
+# {% pullquote %}
+# 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.
+# 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
+# to use a CSS only technique for styling pullquotes.
+# {% endpullquote %}
+# ...will output...
+# <p>
+# <span data-pullquote="pullquotes are merely visual in presentation and should not appear twice in the text.">
+# 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.
+# 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.
+# </span>
+# </p>
+#
+
+module Jekyll
+
+ class PullquoteTag < Liquid::Block
+ PullQuoteMarkup = /\{(.+)\}/i
+
+ def initialize(tag_name, markup, tokens)
+ super
+ end
+
+ def render(context)
+ output = super
+ if output.join =~ /\{"\s*(.+)\s*"\}/
+ @quote = $1
+ "<span class='has-pullquote' data-pullquote='#{@quote}'>#{output.join.gsub(/\{"\s*|\s*"\}/, '')}</span>"
+ else
+ return "Surround your pullquote like this {! text to be quoted !}"
+ end
+ end
+ end
+end
+
+Liquid::Template.register_tag('pullquote', Jekyll::PullquoteTag)
@@ -31,8 +31,11 @@ body {
}
h1 {
font-size: 3.2em;
- line-height: 1.2em
+ line-height: 1.2em;
+ @media only screen and (max-width: 768px) { font-size: 2.2em; }
}
+
+
h2, section h1 {
font-size: 1.5em;
}
@@ -116,3 +119,24 @@ blockquote {
a { font-style: italic; }
}
}
+
+.has-pullquote:before {
+ /* Reset metrics. */
+ padding: 0;
+ border: none;
+
+ /* Content */
+ content: attr(data-pullquote);
+
+ /* Pull out to the right, modular scale based margins. */
+ float: right;
+ width: 45%;
+ margin: 1em 0 1em 1.5em;
+
+ /* Baseline correction */
+ position: relative;
+ top: 6px;
+ font-size: 1.4em;
+ line-height: 1.45em;
+}
+
@@ -14,16 +14,17 @@ $border: inline-image('dotted-border.png');
padding-top: 0;
}
}
- .byline + time:before, .byline + time +time:before {
+ time + .byline:before, .byline + time +time:before {
content: "\2022 ";
padding: 0 .3em 0 .2em;
display: inline-block;
@include opacity(.5);
}
header {
+ position: relative;
padding-top: 2em;
margin-bottom: 1.5em;
- padding-bottom: 1.5em;
+ padding-bottom: 1em;
background: $border bottom left repeat-x;
h1 {
margin: 0;
@@ -33,11 +34,24 @@ $border: inline-image('dotted-border.png');
p {
font-size: .9em;
color: $type-color-light;
- border: none;
- padding-top: 0;
margin: 0;
- font-style: italic;
@extend .sans;
+ &.meta {
+ text-transform: uppercase;
+ position: absolute;
+ top: 0;
+ }
+ }
+ @media only screen and (max-width: 768px) {
+ padding-bottom: 1em;
+ margin-bottom: 1em;
+ background: $border bottom left repeat-x;
+ p.meta { position: static; }
+ }
+
+ &.feature h1 {
+ font-size: 2.0em; font-style: italic;
+ line-height: 1.3em;
}
}
.entry-content {
@@ -66,23 +80,33 @@ $border: inline-image('dotted-border.png');
}
}
}
- header.feature h1 {
- font-size: 2.0em; font-style: italic;
- line-height: 1.3em;
- }
#disqus_thread { }
- .meta {
- border-bottom: 1px dashed #dddddd;
- text-transform: uppercase;
- color: #777777;
- padding: 8px 0 5px;
- margin-bottom: 1.5em;
- font-size: 75%;
- letter-spacing: 1px;
- }
- .footer {
+ footer {
padding-top: 15px;
+ time, .author { color: $light-text; }
+ }
+ }
+}
+article + article {
+ background: $border top left repeat-x;
+}
+#articles.blog-index {
+ article header { background: none; padding-bottom: 0; }
+ article h1 {
+ font-size: 2.2em;
+ a { color: inherit; &:hover{ color: $link-color-hover; } }
+ }
+ a[rel=full-article] {
+ background: darken($main-bg, 5);
+ display: inline-block;
+ padding: .4em .8em;
+ margin-right: .5em;
+ text-decoration: none;
+ @include transition(background-color, .5s);
+ &:hover {
+ background: $link-color-hover;
+ color: $main-bg;
}
}
}
@@ -60,6 +60,7 @@ pre {
margin-bottom: 1.5em;
padding: .4em .8em;
color: #555;
+ overflow: auto;
}
p code {
@@ -10,22 +10,19 @@ <h1 class="entry-title"><a href="{{ page.url }}">{{ page.title | titlecase }}</a
{% else %}
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
{% endif %}
- {% unless page.no_meta %}
- <p>
- {% if page.date %}
- <time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time>
- {% endif %}
- {% if page.updated %}
- <time class="updated" datetime="{{ page.updated | datetime }}"></time>
- {% endif %}
- {% if author %}<span class="byline author vcard">By <span class="fn">{{ author }}</span></span>{% endif %}
- </p>
- {% endunless %}
+ {% unless page.no_meta or !index %}<p class="meta">{% include post_meta.html %}</p>{% endunless %}
</header>
{% endunless %}
{% if index %}
-<div class="entry-content">{{ content | exerpt(content, page.url, 'Continue reading &raquo;') | smart_quotes }}</div>
+<div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
+<footer>
+ <p>
+ {% if content contains "<!-- more -->" or content contains "<!--more-->" %}
+ <a rel="full-article" href="{{ page.url }}">Read more &hellip;</a>
+ {% endif %}
+ {% include post_meta.html %}
+ </p>
+</footer>
{% else %}
<div class="entry-content">{{ content | smart_quotes }}</div>
{% endif %}
-
@@ -0,0 +1,7 @@
+{% if page.date %}
+<time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time>
+{% endif %}
+{% if page.updated %}
+<time class="updated" datetime="{{ page.updated | datetime }}"></time>
+{% endif %}
+{% if author %}<span class="byline author vcard"><span class="fn">{{ author }}</span></span>{% endif %}
@@ -4,7 +4,7 @@
<nav>{% include navigation.html %}</nav>
<div>
<div>
- <div id="articles">{{ content }}</div>
+ <div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div>
{% unless page.sidebar == 'none' %}
<aside>{% include sidebar.html %}</aside>
{% endunless %}
@@ -1,9 +1,10 @@
---
layout: default
+blog_index: true
---
-{% for page in site.posts limit:3 %}
-{% assign content = page.content %}
{% assign index = true %}
+{% for page in site.posts limit:site.posts_per_page %}
+{% assign content = page.content %}
<article>
{% include article.html %}
</article>

0 comments on commit f77db80

Please sign in to comment.