1. Added html5 video with flash fallback.

2. Added Rack support
3. Disqus support
4. Improved Readme
5. Improved Syntax flexibility and styling
6. Improved blockquote styling
This commit is contained in:
Brandon Mathis 2011-06-24 17:17:35 -04:00
parent a128d4990b
commit ef3ff431e5
56 changed files with 207 additions and 39 deletions

1
.gitignore vendored
View File

@ -3,7 +3,6 @@
.sass-cache
_gist_cache
_code_cache
_assets
_deploy
public
source/_stash

View File

@ -1,6 +1,7 @@
source "http://rubygems.org"
gem 'rake'
gem 'rack'
gem 'jekyll'
gem 'rdiscount'
gem 'RedCloth'

View File

@ -21,6 +21,7 @@ GEM
liquid (2.2.2)
maruku (0.6.0)
syntax (>= 1.0.0)
rack (1.3.0)
rake (0.9.0)
rb-fsevent (0.4.0)
rdiscount (1.6.8)
@ -36,6 +37,7 @@ DEPENDENCIES
compass (>= 0.11)
haml (>= 3.1)
jekyll
rack
rake
rb-fsevent
rdiscount

View File

@ -2,7 +2,7 @@
2. **Code blogging is easy and beautiful.** Embed code (with [Solarized](http://ethanschoonover.com/solarized) styling) in your posts from gists or from your filesystem.
3. **Third party integration is simple** with built-in support for Twitter, Pinboard, Delicious, Disqus Comments, and Google Analytics.
4. **It's easy to use.** A collection of rake tasks simplifies development and makes deploying a cinch.
5. **Get curated plugins.** Plugins are hand selected from the Jekyll community then tested and improved.
5. **Ships with great plugins** some original and others from the Jekyll community — tested and improved.
## Getting Started
@ -10,8 +10,6 @@
open up a terminal and follow along. If you plan to host your site on [Github Pages](http://pages.github.com) for a user or organization, make sure the
repository is named `your_username.github.com` or `your_organization.github.com`.
### Setting up Git
mkdir my_octopress_site
cd my_octopress_site
git init
@ -26,8 +24,7 @@ repository is named `your_username.github.com` or `your_organization.github.com`
git push origin source
### Setting up Octopress
<span>Next</span>, setup an [RVM](http://beginrescueend.com/) and install dependencies.
Next, setup an [RVM](http://beginrescueend.com/) and install dependencies.
rvm rvmrc trust
bundle install

View File

@ -4,8 +4,9 @@ destination: public
code_dir: downloads/code
port: 4000
url: http://dev.octopress.org
title: Octopress
url: http://yoursite.com
title: My Octopress Blog
permalink: /blog/:year/:month/:day/:title
subtitle: A blogging framework for hackers.
author: Your Name
subscribe_rss: /atom.xml
@ -13,7 +14,8 @@ subscribe_email:
markdown: rdiscount
pygments: true
posts_per_page: 10
#posts_per_page: 10
paginate: 5
recent_posts: 5
simple_search: http://google.com/search
@ -23,7 +25,7 @@ simple_search: http://google.com/search
email:
# Twitter
twitter_user: imathis
twitter_user:
twitter_tweet_count: 4
twitter_show_replies: false
twitter_follow_button: true
@ -31,7 +33,7 @@ twitter_show_follower_count: false
twitter_tweet_button: true
# Pinboard
#pinboard_user: imathis
pinboard_user:
pinboard_count: 3
# Delicious

35
config.ru Normal file
View File

@ -0,0 +1,35 @@
require 'rubygems'
require 'bundler/setup'
require 'rack'
# The project root directory
$root = ::File.dirname(__FILE__)
# Common Rack Middleware
use Rack::ShowStatus # Nice looking 404s and other messages
use Rack::ShowExceptions # Nice looking errors
#
# From Rack::DirectoryIndex:
# https://github.com/craigmarksmith/rack-directory-index/
#
module Rack
class DirectoryIndex
def initialize(app)
@app = app
end
def call(env)
index_path = ::File.join($root, 'public', Rack::Request.new(env).path.split('/'), 'index.html')
if ::File.exists?(index_path)
return [200, {"Content-Type" => "text/html"}, [::File.read(index_path)]]
else
@app.call(env)
end
end
end
end
use Rack::DirectoryIndex
run Rack::Directory.new($root + '/public')

View File

@ -48,7 +48,7 @@ module OctopressFilters
else
case number.to_i % 10
when 1; "#{number}<span>st</span>"
when 2; "#{number}<span>nd<span>"
when 2; "#{number}<span>nd</span>"
when 3; "#{number}<span>rd</span>"
else "#{number}<span>th</span>"
end

View File

@ -1,8 +1,12 @@
$max-width: 1200px !default;
// Padding used for layout margins
$pad-min: 18px !default;
$pad-narrow: 25px !default;
$pad-medium: 35px !default;
$pad-wide: 55px !default;
// Sidebar widths used in media queries
$sidebar-width-medium: 240px !default;
$sidebar-pad-medium: 15px !default;
$sidebar-pad-wide: 20px !default;
@ -15,7 +19,7 @@ body {
max-width: $max-width;
position: relative;
margin: 0 auto;
> header, > nav, > footer, #articles > article {
> header, > nav, > footer, #articles > article, #articles > nav {
@extend .group;
padding-left: $pad-min;
padding-right: $pad-min;

View File

@ -53,7 +53,7 @@ h6, section h5, section section h4, section section section h3 {
}
p, blockquote, ul, ol { margin-bottom: 1.5em; }
ul{ list-style-type: disc; }
ul{ list-style-type: circle; }
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
ul ul, ol ol { margin-left: 1.75em; }

View File

@ -46,7 +46,6 @@ $border: inline-image('dotted-border.png');
background: $border bottom left repeat-x;
p.meta { position: static; }
}
}
h1.feature {
padding-top: .5em;
@ -58,12 +57,15 @@ $border: inline-image('dotted-border.png');
}
.entry-content {
img, video { max-width: 100%; height: auto; }
video { display: block; margin-bottom: 1.5em;
video {
width: 100%; display: block; margin-bottom: 1.5em;
padding: .8em; background: #fff; border: 1px solid #eee;
@include box-sizing(border-box);
}
.flash-video {
max-width: 100%;
margin-bottom: 1.5em;
@include box-sizing(border-box);
padding: .8em; background: #fff; border: 1px solid #eee;
> div {
position: relative;
@ -82,12 +84,7 @@ $border: inline-image('dotted-border.png');
}
}
}
#disqus_thread { }
iframe.twitter-share-button {
//display: block;
//margin-top: .5em;
//padding: .2em 0;
position: relative;
top: .3em;
padding-left: .5em;

View File

@ -2,7 +2,6 @@ html {
background: $page-bg inline-image('line-tile.png') top left;
}
body {
border: 0 0 1px 0 solid darken($page-bg, 5);
> div {
background-color: $sidebar-bg;
border-bottom: 1px solid $page-border-bottom;
@ -12,7 +11,3 @@ body {
}
}
}
@media only screen and (min-width: 1400px) {
body { border: 0 1px 0 solid darken($page-bg, 5); }
}

View File

@ -51,17 +51,20 @@ html .gist .gist-file {
}
}
pre {
background: #fff;
border: 1px solid #ddd;
background: #333;
@include border-radius(.4em);
@extend .mono;
line-height: 1.45em;
font-size: .8em;
margin-bottom: 1.5em;
padding: .8em 1em;
color: #555;
color: #ccc;
overflow: auto;
}
h3.filename {
@extend .code-title;
+ pre { @include border-top-radius(0px); }
}
p code {
@extend .mono;
@ -172,16 +175,14 @@ figure {
}
.highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; }
}
h3.filename { @extend .code-title; }
.code-title {
text-align: center;
font-size: 13px;
line-height: 2em;
text-shadow: #cbcccc 0 1px 0;
color: #474747;
font-style: normal;
font-weight: normal;
margin-bottom: 0;
@include border-top-radius(5px);
font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
background: #aaaaaa image-url("code_bg.png") top repeat-x;

View File

@ -3,7 +3,7 @@
var disqus_shortname = '{{ site.disqus_short_name }}';
var disqus_identifier = '{{ site.url }}{{ page.url }}';
var disqus_url = '{{ site.url }}{{ page.url }}';
var disqus_developer = 1;
//var disqus_developer = 1;
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';

View File

@ -26,7 +26,7 @@
<link href="/images/favicon.png" rel="shortcut icon" />
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="http://s3.amazonaws.com/ender-js/jeesh.min.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>

View File

@ -0,0 +1,6 @@
{% if page.author %}
{% assign author = page.author %}
{% else %}
{% assign author = site.author %}
{% endif %}
{% if author %}<span class="byline author vcard">Posted by <span class="fn">{{ author }}</span></span>{% endif %}

View File

@ -0,0 +1,6 @@
{% 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 %}

View File

@ -0,0 +1 @@
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 636 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 835 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 442 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 816 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 334 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 465 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

View File

@ -0,0 +1,115 @@
<?xml version="1.0"?>
<skin version="1.1" name="Glow" author="LongTail Video">
<settings>
<setting name="backcolor" value="0x000000" />
<setting name="frontcolor" value="0xeeeeee" />
<setting name="lightcolor" value="0xeeeeee" />
<setting name="screencolor" value="0x000000" />
</settings>
<components>
<component name="controlbar">
<settings>
<setting name="margin" value="0" />
<setting name="fontsize" value="11" />
<setting name="fontcolor" value="0xEEEEEE" />
<setting name="buttoncolor" value="0xEEEEEE" />
</settings>
<layout>
<group position="left">
<button name="play" />
<text name="elapsed" />
</group>
<group position="center">
<slider name="time" />
</group>
<group position="right">
<text name="duration" />
<button name="blank" />
<button name="mute" />
<button name="fullscreen" />
</group>
</layout>
<elements>
<element name="background" src="background.png" />
<element name="capLeft" src="divider.png" />
<element name="capRight" src="divider.png" />
<element name="divider" src="divider.png" />
<element name="blankButton" src="blankButton.png" />
<element name="fullscreenButton" src="fullscreenButton.png" />
<element name="fullscreenButtonOver" src="fullscreenButtonOver.png" />
<element name="muteButton" src="muteButton.png" />
<element name="muteButtonOver" src="muteButtonOver.png" />
<element name="pauseButton" src="pauseButton.png" />
<element name="pauseButtonOver" src="pauseButtonOver.png" />
<element name="playButton" src="playButton.png" />
<element name="playButtonOver" src="playButtonOver.png" />
<element name="timeSliderBuffer" src="timeSliderBuffer.png" />
<element name="timeSliderCapLeft" src="timeSliderCapLeft.png" />
<element name="timeSliderCapRight" src="timeSliderCapRight.png" />
<element name="timeSliderProgress" src="timeSliderProgress.png" />
<element name="timeSliderRail" src="timeSliderRail.png" />
<element name="normalscreenButton" src="normalscreenButton.png" />
<element name="normalscreenButtonOver" src="normalscreenButtonOver.png" />
<element name="unmuteButton" src="unmuteButton.png" />
<element name="unmuteButtonOver" src="unmuteButtonOver.png" />
<element name="volumeSliderRail" src="divider.png" />
<element name="volumeSliderProgress" src="divider.png" />
</elements>
</component>
<component name="display">
<settings>
<setting name="bufferinterval" value="250" />
<setting name="bufferrotation" value="90" />
</settings>
<elements>
<element name="background" src="background.png" />
<element name="playIcon" src="playIcon.png" />
<element name="muteIcon" src="muteIcon.png" />
<element name="errorIcon" src="bufferIcon.png" />
<element name="bufferIcon" src="bufferIcon.png" />
</elements>
</component>
<component name="dock">
<settings>
<setting name="fontcolor" value="0xFFFFFF" />
</settings>
<elements>
<element name="button" src="button.png" />
</elements>
</component>
<component name="playlist">
<settings>
<setting name="fontcolor" value="0xEEEEEE" />
<setting name="overcolor" value="0xFFFFFF" />
<setting name="activecolor" value="0xFFFFFF" />
<setting name="backgroundcolor" value="0x333333" />
</settings>
<elements>
<element name="item" src="item.png" />
<element name="itemOver" src="itemOver.png" />
<element name="sliderCapBottom" src="sliderCapBottom.png" />
<element name="sliderCapTop" src="sliderCapTop.png" />
<element name="sliderRail" src="sliderRail.png" />
<element name="sliderThumb" src="sliderThumb.png" />
</elements>
</component>
<component name="sharing">
<elements>
<element name="embedIcon" src="embedIcon.png" />
<element name="embedScreen" src="embedScreen.png" />
<element name="shareIcon" src="shareIcon.png" />
<element name="shareScreen" src="shareScreen.png" />
</elements>
</component>
</components>
</skin>

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 749 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 589 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

View File

@ -3,12 +3,21 @@ layout: default
blog_index: true
---
{% assign index = true %}
{% for page in site.posts limit:site.posts_per_page %}
{% for page in paginator.posts %}
{% assign content = page.content %}
<article>
{% include article.html %}
</article>
{% endfor %}
<nav role="pagination">
{% if paginator.next_page %}
<a href="/page{{paginator.next_page}}/">&larr; Older</a>
{% endif %}
<a href="/archive.html">Blog Archive</a>
{% if paginator.previous_page %}
<a href="/page{{paginator.previous_page}}/">Newer &rarr;</a>
{% endif %}
</nav>
{% if site.disqus_short_name %}
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_short_name }}';

View File

@ -74,7 +74,7 @@ function flashVideoFallback(){
id = 'video_'+Math.round(1 + Math.random()*(100000)),
width = video.attr('width'),
height = parseInt(video.attr('height')) + 30;
video.after('<div class="flash-video" style="width: '+width+'px; height: '+height+'px;"><div><div id='+id+'>');
video.after('<div class="flash-video"><div><div id='+id+'>');
swfobject.embedSWF(flashplayerlocation, id, width, height + 30, "9.0.0",
{ file : src, image : video.attr('poster'), skin : flashplayerskin } ,
{ movie : src, wmode : "opaque", allowfullscreen : "true" });
@ -101,8 +101,8 @@ function wrapFlashVideos(){
$.domReady(function(){
testFeatures();
flashVideoFallback();
wrapFlashVideos();
flashVideoFallback();
addCodeLineNumbers();
getNav();
addSidebarToggler();
@ -141,5 +141,3 @@ b=j.userAgent.toLowerCase(),d=j.platform.toLowerCase(),g=d?/win/.test(d):/win/.t
10),e[1]=parseInt(c.replace(/^.*\.(.*)\s.*$/,"$1"),10),e[2]=/[a-zA-Z]/.test(c)?parseInt(c.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}else if(typeof v.ActiveXObject!=l)try{var f=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");if(f&&(c=f.GetVariable("$version")))k=!0,c=c.split(" ")[1].split(","),e=[parseInt(c[0],10),parseInt(c[1],10),parseInt(c[2],10)]}catch(h){}return{w3:a,pv:e,wk:b,ie:k,win:g,mac:d}}();return{embedSWF:function(a,b,d,i,k,e,c,f,h){var j={success:!1,id:b};if(g.w3&&!(g.wk&&g.wk<312)&&
a&&b&&d&&i&&k){d+="";i+="";var p={};if(f&&typeof f===o)for(var m in f)p[m]=f[m];p.data=a;p.width=d;p.height=i;a={};if(c&&typeof c===o)for(var n in c)a[n]=c[n];if(e&&typeof e===o)for(var r in e)typeof a.flashvars!=l?a.flashvars+="&"+r+"="+e[r]:a.flashvars=r+"="+e[r];if(t(k))b=s(p,a,b),j.success=!0,j.ref=b}h&&h(j)},ua:g,getFlashPlayerVersion:function(){return{major:g.pv[0],minor:g.pv[1],release:g.pv[2]}},hasFlashPlayerVersion:t,createSWF:function(a,b,d){if(g.w3)return s(a,b,d)},getQueryParamValue:function(a){var b=
i.location.search||i.location.hash;if(b){/\?/.test(b)&&(b=b.split("?")[1]);if(a==null)return u(b);for(var b=b.split("&"),d=0;d<b.length;d++)if(b[d].substring(0,b[d].indexOf("="))==a)return u(b[d].substring(b[d].indexOf("=")+1))}return""}}}();