From f77db80077d739077becc1618b87818ea42f145c Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Sun, 19 Jun 2011 15:14:01 -0400 Subject: [PATCH] 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 --- Gemfile | 2 +- Gemfile.lock | 4 +- _config.yml | 5 +- themes/classic/_plugins/blockquote.rb | 24 +++---- themes/classic/_plugins/custom_filters.rb | 16 +++-- themes/classic/_plugins/include_file.rb | 31 ++++++++++ themes/classic/_plugins/pullquote.rb | 42 +++++++++++++ .../sass/default/core/_typography.scss | 26 +++++++- .../classic/sass/default/partials/_blog.scss | 62 +++++++++++++------ .../sass/default/partials/_syntax.scss | 1 + themes/classic/source/_includes/article.html | 23 +++---- .../classic/source/_includes/post_meta.html | 7 +++ themes/classic/source/_layouts/default.html | 2 +- themes/classic/source/index.html | 5 +- 14 files changed, 191 insertions(+), 59 deletions(-) create mode 100644 themes/classic/_plugins/include_file.rb create mode 100644 themes/classic/_plugins/pullquote.rb create mode 100644 themes/classic/source/_includes/post_meta.html diff --git a/Gemfile b/Gemfile index 6cd962b..15c570b 100644 --- a/Gemfile +++ b/Gemfile @@ -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' diff --git a/Gemfile.lock b/Gemfile.lock index af57fc6..04fb1b5 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -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 diff --git a/_config.yml b/_config.yml index 6f17702..7a877eb 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/themes/classic/_plugins/blockquote.rb b/themes/classic/_plugins/blockquote.rb index 8048f47..094e4bc 100644 --- a/themes/classic/_plugins/blockquote.rb +++ b/themes/classic/_plugins/blockquote.rb @@ -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 %} +# ... +#
+#

Wheeee!

+#
+# 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 %} - # ... - #
- #

Wheeee!

- #
- # class Blockquote < Liquid::Block FullCiteWithTitle = /([\w\s]+)(https?:\/\/)(\S+\s)([\w\s]+)/i FullCite = /([\w\s]+)(https?:\/\/)(\S+)/i diff --git a/themes/classic/_plugins/custom_filters.rb b/themes/classic/_plugins/custom_filters.rb index 158586a..0d24d72 100644 --- a/themes/classic/_plugins/custom_filters.rb +++ b/themes/classic/_plugins/custom_filters.rb @@ -1,11 +1,16 @@ #custom filters for Octopress module OctopressFilters - def exerpt(input, url, url_text="Reade more…", permalink_text=false) + def auto_exerpt(input, url, url_text="Read more …") if input.index(//i) - input.split(//i)[0] + "

#{url_text}

" - elsif permalink_text - input + "

#{permalink_text}

" + input.split(//i)[0] + "

#{url_text}

" + else + input + end + end + def exerpt(input) + if input.index(//i) + input.split(//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 - diff --git a/themes/classic/_plugins/include_file.rb b/themes/classic/_plugins/include_file.rb new file mode 100644 index 0000000..3862228 --- /dev/null +++ b/themes/classic/_plugins/include_file.rb @@ -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) + diff --git a/themes/classic/_plugins/pullquote.rb b/themes/classic/_plugins/pullquote.rb new file mode 100644 index 0000000..2b8544a --- /dev/null +++ b/themes/classic/_plugins/pullquote.rb @@ -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... +#

+# +# 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. +# +#

+# + +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 + "#{output.join.gsub(/\{"\s*|\s*"\}/, '')}" + else + return "Surround your pullquote like this {! text to be quoted !}" + end + end + end +end + +Liquid::Template.register_tag('pullquote', Jekyll::PullquoteTag) diff --git a/themes/classic/sass/default/core/_typography.scss b/themes/classic/sass/default/core/_typography.scss index 78abb6e..1328d9b 100644 --- a/themes/classic/sass/default/core/_typography.scss +++ b/themes/classic/sass/default/core/_typography.scss @@ -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; +} + diff --git a/themes/classic/sass/default/partials/_blog.scss b/themes/classic/sass/default/partials/_blog.scss index 1f1a4a8..be6239a 100644 --- a/themes/classic/sass/default/partials/_blog.scss +++ b/themes/classic/sass/default/partials/_blog.scss @@ -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; } } } diff --git a/themes/classic/sass/default/partials/_syntax.scss b/themes/classic/sass/default/partials/_syntax.scss index 22f5eb0..05a9708 100644 --- a/themes/classic/sass/default/partials/_syntax.scss +++ b/themes/classic/sass/default/partials/_syntax.scss @@ -60,6 +60,7 @@ pre { margin-bottom: 1.5em; padding: .4em .8em; color: #555; + overflow: auto; } p code { diff --git a/themes/classic/source/_includes/article.html b/themes/classic/source/_includes/article.html index 764e36d..c0a9782 100644 --- a/themes/classic/source/_includes/article.html +++ b/themes/classic/source/_includes/article.html @@ -10,22 +10,19 @@ {% else %}

{{ page.title | titlecase }}

{% endif %} - {% unless page.no_meta %} -

- {% if page.date %} - - {% endif %} - {% if page.updated %} - - {% endif %} - {% if author %}By {{ author }}{% endif %} -

- {% endunless %} + {% unless page.no_meta or !index %}

{% include post_meta.html %}

{% endunless %} {% endunless %} {% if index %} -
{{ content | exerpt(content, page.url, 'Continue reading »') | smart_quotes }}
+
{{ content | exerpt | smart_quotes }}
+ {% else %}
{{ content | smart_quotes }}
{% endif %} - diff --git a/themes/classic/source/_includes/post_meta.html b/themes/classic/source/_includes/post_meta.html new file mode 100644 index 0000000..2476825 --- /dev/null +++ b/themes/classic/source/_includes/post_meta.html @@ -0,0 +1,7 @@ +{% if page.date %} + +{% endif %} +{% if page.updated %} + +{% endif %} +{% if author %}{{ author }}{% endif %} diff --git a/themes/classic/source/_layouts/default.html b/themes/classic/source/_layouts/default.html index dc69ef8..4e4f81a 100644 --- a/themes/classic/source/_layouts/default.html +++ b/themes/classic/source/_layouts/default.html @@ -4,7 +4,7 @@
-
{{ content }}
+
{{ content }}
{% unless page.sidebar == 'none' %} {% endunless %} diff --git a/themes/classic/source/index.html b/themes/classic/source/index.html index 09eb8d1..f151e06 100644 --- a/themes/classic/source/index.html +++ b/themes/classic/source/index.html @@ -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 %}
{% include article.html %}