chapters

.gitignore

@@ -6,4 +6,5 @@ vendor/gems/*
 !vendor/gems/cache/
 .sass-cache/*
 foreman.env
-.env
+.env
+log

Gemfile

@@ -11,9 +11,7 @@ gem 'padrino', :github => "padrino/padrino-framework"
 gem 'unicorn', '4.6.2'
 gem 'twitter', :git => "https://github.com/sferik/twitter.git"
 gem 'hashie'
-#gem 'dropbox-sdk', :require =>'dropbox_sdk'
 gem 'dropbox-api'
-gem 'dalli'
 gem 'resque', '1.24.1'
 gem 'mongoid'
 gem 'zurb-foundation'

Procfile.dev

@@ -1,3 +1,2 @@
-compass: bundle exec compass watch
 web: bundle exec unicorn -p 4141 -c ./unicorn.rb
 worker: bundle exec rake resque:work QUEUE=web

app/app.rb

@@ -2,8 +2,8 @@ class Sketching < Padrino::Application
   register Padrino::Rendering
   register Padrino::Mailer
   register Padrino::Helpers
-  register Padrino::Cache  
-  
+  register Padrino::Cache
+
   enable :caching
   set :cache, Padrino::Cache::Store::Memcache.new(::Dalli::Client.new(ENV["MEMCACHE_SERVERS"] || '127.0.0.1:11211', :exception_retry_limit => 1))
 
@@ -13,8 +13,8 @@ class Sketching < Padrino::Application
   configure do
     HireFire::Initializer.initialize!
   end
-  
+
   before do
-    headers 'Cache-Control' => 'public, max-age=300' 
+    headers 'Cache-Control' => 'public, max-age=300'
   end
 end

app/controllers/chapters.rb

@@ -0,0 +1,18 @@
+# encoding: utf-8
+
+Sketching.controllers :chapters do
+
+  get :index, :map=>"/book" do
+    #expires_in 30
+    @chapters = Chapter.all.order_by([[:published_at, :desc]])
+    @chapter = @chapters.first
+    haml :"chapters/index", :layout => !request.xhr?
+  end
+
+  get :show, :map => "/book/:slug" do
+    #expires_in 30
+    not_found unless @chapter = Chapter.where(:slug => params[:slug]).first
+    haml :"chapters/show", :layout => !request.xhr?
+  end
+
+end

app/controllers/hacks.rb

@@ -5,6 +5,7 @@
     @hacks = Hack.all.order_by([[:published_at, :desc]])
     @hack = @hacks.first
     @screengrabs = Screengrab.all
+
     haml :"hacks/index", :layout => !request.xhr?
   end
 

app/controllers/posts.rb

@@ -15,10 +15,6 @@
     haml :"posts/show", :layout => !request.xhr?
   end
 
-  get :book, :map => "/book" do
-    haml :"pages/book", :layout => !request.xhr?
-  end
-
   post :refresh, :map => "/posts/refresh" do
     Resque.enqueue(PostFetching)
     Resque.enqueue(ScreengrabFetching)

app/stylesheets/application.scss

@@ -422,10 +422,12 @@ summary {
 }
 
 nav {
+  display: block;
+  clear: both;
   text-align: center;
+  @include trailer(2);
   ul {
-    @include leader(-2);
-    @include trailer(2);
+
     @include inline-list();
     li {
       display: inline-block;
@@ -436,6 +438,52 @@ nav {
   }
 }
 
+.next-prev {
+  @include leader(4);
+  @include at-breakpoint(30em 12) {
+    .prev {
+      @include span-columns(5, 10);
+    }
+    .next {
+      @include span-columns(5 omega, 10);
+      text-align: right;
+    }
+  }
+  a {
+    display: block;
+    @include adjust-font-size-to($base-font-size * 1.5, $lines:1);
+    text-decoration: none;
+  }
+}
+
+.chapter-list {
+  @include clearfix();
+  clear: both;
+  @include leader(4);
+  @include trailer(4);
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      margin: 0;
+      padding: 0;
+      border-top: 1px solid #eee;
+      list-style-type: none;
+      a {
+        @include adjust-font-size-to($base-font-size * 1.5, $lines:2);
+        text-decoration: none;
+        display: block;
+        &.active {
+          color: #222;
+        }
+      }
+      text-align: center;
+      width: 100%;
+      display: block;
+    }
+  }
+}
+
 form {
   padding: 1em;
   background-color: #f6f6f6;

app/views/chapters/index.haml

@@ -0,0 +1,37 @@
+- # coding: utf-8
+
+- @post = Post.last
+- hue = @post.hue
+- content_for :header do
+  %a.back_link{:href=>"/"} Sketching with Code
+  .mega{:style=>"background-color:hsl(#{hue},50%,75%);"}
+    %h1
+      Words in progress
+
+
+%article
+  %p
+    Over the next few weeks you'll see some of my writing about hacking, some things edited from what I've published, some new material, published here.
+
+  %p
+    It's an experiment in writing for the web. Is it a "web book"? I don't know yet, but I'm sure it's going to be interesting.
+
+  %p
+    %strong
+      Add your email for updates
+  :plain
+    <div id="mc_embed_signup">
+    <form action="http://makeshift.us6.list-manage.com/subscribe/post?u=c14f3f1491719e4e90f5612c9&amp;id=042a791f81" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+
+    <div class="mc-field-group">
+      <label for="mce-EMAIL">Your email </label>
+      <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
+      <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
+    </div>
+    <div id="mce-responses" class="clear">
+      <div class="response" id="mce-error-response" style="display:none"></div>
+      <div class="response" id="mce-success-response" style="display:none"></div>
+    </div>
+    </form>
+    </div>
+

app/views/chapters/show.haml

@@ -0,0 +1,53 @@
+- # coding: utf-8
+- require "compass"
+- hue = @chapter.hue
+- @hide_footer = true
+
+- content_for :scripts do
+  %script{:src => "http://disqus.com/forums/sketchingwithcode/embed.js", :type => "text/javascript"}
+- content_for :sass do
+  :sass
+    $article-link-color: hsl(#{hue},50%,50%)
+    body.#{@chapter.slug}
+      a
+        color: $article-link-color
+        &:hover
+          color: lighten($article-link-color, 10)
+
+- content_for :sass do
+  - Chapter.all.each do |chapter|
+    :sass
+      body.#{@chapter.slug}
+        a.#{chapter.slug}
+          color: #aaa
+          &:hover
+            color: lighten(hsl(#{chapter.hue},50%,50%), 0)
+
+- content_for :header do
+  %a.back_link{:href=>"/"} Sketching with Code
+  .mega{:style=>"background-color:hsl(#{hue},50%,75%);"}
+    %h1= @chapter.title
+%article
+  = @chapter.content_html.html_safe
+  .next-prev
+    .prev
+      - if @chapter.previous_chapter
+        %a{:href=>"/book/#{@chapter.previous_chapter}"}
+          ⇠
+          = @chapter.previous_chapter.title
+    .next
+      - if @chapter.next_chapter
+        %a{:href=>"/book/#{@chapter.next_chapter}"}
+          = @chapter.next_chapter.title
+          ⇢
+  - if false
+    %footer#comments
+      #disqus_thread
+      %noscript
+        %a{:href => "http://sketchingwithcode.disqus.com/?url=ref"} View the discussion thread.
+
+.chapter-list
+  %ul
+    - Chapter.all.order_by([[:ordering, :asc]]).each do |chapter|
+      %li
+        %a{:class => [chapter.slug, @chapter == chapter ? "active" : ""], :href=>"/book/#{chapter.slug}"}= chapter.title

app/views/layouts/application.haml

@@ -45,52 +45,53 @@
         })();
     = yield_content :sass
 
-  %body{:id=>(request.path.split("/")[1] rescue ""), :class => @post ? @post.slug : ""}
+  %body{:id=>(request.path.split("/")[1] rescue ""), :class => [@post ? @post.slug : "", @chapter ? @chapter.slug : ""] }
     .page.grid
       .header
         = yield_content :header
       .content
         = yield
-      %footer.footer
-        .top_footer
-          .left_footer
-            %a{:href=>"http://stef.io", :rel => "me"}
-              %img{:src=>"/images/stef_square.png", :alt => "A square photo of Stef Lewandowski"}
+      - unless defined?(@hide_footer)
+        %footer.footer
+          .top_footer
+            .left_footer
+              %a{:href=>"http://stef.io", :rel => "me"}
+                %img{:src=>"/images/stef_square.png", :alt => "A square photo of Stef Lewandowski"}
 
-          .right_footer
+            .right_footer
 
-            %h2
-              %a{:href=>"http://stef.io"} Stef Lewandowski
-            %p
-              %em
-                Cofounder at
-                = succeed(".") do
-                  %a{:href=>"http://makeshift.io"} Makeshift
-              %span#follow_button
-                <a href="https://twitter.com/stef" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#FFFFFF" data-show-count="false">Follow @stef</a>
-            %p
-              I'm a designer, technologist and startup person - a hacker for short.
+              %h2
+                %a{:href=>"http://stef.io"} Stef Lewandowski
+              %p
+                %em
+                  Cofounder at
+                  = succeed(".") do
+                    %a{:href=>"http://makeshift.io"} Makeshift
+                %span#follow_button
+                  <a href="https://twitter.com/stef" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#FFFFFF" data-show-count="false">Follow @stef</a>
+              %p
+                I'm a designer, technologist and startup person - a hacker for short.
 
 
-        .bottom_footer
-          %p
-            This is my ongoing research into rapidly developing digital ideas through a "hack, play, learn" approach. "Sketching with code" is how I describe how I work.
-          %p
-            Have a look at the
-            %a{:href=>"http://stef.io/hacks"} hacks
-            and
-            %a{:href=>"https://github.com/stefl/sketchingwithcode"} source code
-            to the app that serves up these
-            = Post.all.sum(&:word_count) rescue 0
-            words.
+          .bottom_footer
+            %p
+              This is my ongoing research into rapidly developing digital ideas through a "hack, play, learn" approach. "Sketching with code" is how I describe how I work.
+            %p
+              Have a look at the
+              %a{:href=>"http://stef.io/hacks"} hacks
+              and
+              %a{:href=>"https://github.com/stefl/sketchingwithcode"} source code
+              to the app that serves up these
+              = Post.all.sum(&:word_count) rescue 0
+              words.
 
-          %p
-            With
-            = succeed(".") do
-              %a{:href=>"/thanks"} thanks
-              to everyone who's helped
-          %p
-            = button_to "Refresh", url_for(:posts, :refresh), :method => :post
+            %p
+              With
+              = succeed(".") do
+                %a{:href=>"/thanks"} thanks
+                to everyone who's helped
+            %p
+              = button_to "Refresh", url_for(:posts, :refresh), :method => :post
   = yield_content :scripts
   %script{:src=>"//platform.twitter.com/widgets.js", :charset=>"utf-8", :type=>"text/javascript"}
 

app/views/pages/book.haml

@@ -6,14 +6,14 @@
   %a.back_link{:href=>"/"} Sketching with Code
   .mega{:style=>"background-color:hsl(#{hue},50%,75%);"}
     %h1
-      Hack, play, learn… write?
-
-%h1
-  I'm publishing this as a web book
+      Work in progress in progress
 
 %article
   %p
-    I'm not yet sure what that means, but over the next few weeks you'll see some of the posts I've published turned into a short web book.
+    Over the next few weeks you'll see some of my writing about hacking, some things edited from what I've published, some new material, published here.
+
+  %p
+    It's an experiment in writing for the web. Is it a "web book"? I don't know yet, but I'm sure it's going to be interesting.
 
   %p
     %strong
@@ -33,3 +33,4 @@
     </div>
     </form>
     </div>
+

app/views/posts/index.haml

@@ -7,8 +7,6 @@
       Sketching with Code
   %nav
     %ul
-      %li
-        %a{:href=>"/"} Thoughts
       %li
         %a{:href=>"/book"} Book
       %li