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
This commit is contained in:
Brandon Mathis 2011-06-19 15:14:01 -04:00
parent 105ba14343
commit f77db80077
14 changed files with 191 additions and 59 deletions

View File

@ -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 File

@ -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 File

@ -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

View File

@ -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

View File

@ -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 @@ module OctopressFilters
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 @@ module OctopressFilters
end
end
Liquid::Template.register_filter OctopressFilters

View File

@ -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)

View File

@ -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)

View File

@ -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;
}

View File

@ -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;
}
}
}

View File

@ -60,6 +60,7 @@ pre {
margin-bottom: 1.5em;
padding: .4em .8em;
color: #555;
overflow: auto;
}
p code {

View File

@ -10,22 +10,19 @@
{% 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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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>