NanocStarterSet

NanocStarterSet is a gem that makes it easy to start a Nanoc site with sensible defaults and some handy batteries included. It uses:

  • kramdown for Markdown parsing with fenced code blocks.
  • compass for SCSS and a large library of helpful mixins / helpers.
  • rainpress for compressing CSS.
  • uglifier for compressing JavaScript.
  • typogruby for nice typography.

I recommend using prettify if you want to syntax-highlight Markdown's fenced code blocks.

The included helpers and nanoc rules give you things like:

  • A /css/all.css file that contains a joined and compressed copy of all your CSS files.
  • A /js/all.js file that contains a joined and compressed copy of all your JavaScript files.
  • ERB processing of your source files, if you suffix it with ".erb"

Installation

% gem install nanoc_starter_set
% nanoc create-site my_site

Usage

In your site's root, create a Gemfile:

source "https://rubygems.org"
gem 'nanoc_starter_set'

Install the gems:

$ bundle install

Add the following to lib/default.rb:

require 'nanoc_starter_set/setup'

And in your Rules file, at the top:

eval NanocStarterSet.asset_rules

Eval is necessary here because nanoc does some instance_eval hackery here that breaks our ability to just 'load' or 'include' or 'require' the code.

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content="nanoc <%= Nanoc::VERSION %>"> 

    <title><%= @item[:title] %></title>

    <link rel="stylesheet" href="/css/all.css">
  </head>
  <body class="<%= body_class %>">
    <div id="main">
      <%= yield %>
    </div>
    <script src="/js/all.js"></script>
    <script>
      /* Highlight all <pre> tags with a <code> child */
      var preTags = document.getElementsByTagName( "pre" );
      for (var i = 0; i < preTags.length; i += 1) {
        var preTag = preTags[i];
        var codeTag = preTag.children[0];
        if ( codeTag && codeTag.tagName == "CODE" ) {
          preTag.className += " prettyprint";
        }
      }
      prettyPrint();
    </script>
  </body>
</html>

Markdown

Kramdown does fenced code blocks like this:

~~~ css
.my-example {
  color: red;
}
~~~

CSS

Create an 'all' CSS file:

$ mkdir -p content/css
$ touch content/css/all.scss.erb

With these contents:

---
all: true
---

<% asset_items( :css ).each do |item| %>
  <%= item.compiled_content %>
<% end %>

You can change the order of files by prefixing a number to their name: "01_reset.css", etc.

JS

Create an 'all' JS file:

$ mkdir -p content/js
$ touch content/js/all.js.erb

With these contents:

---
all: true
---

<% asset_items( :js ).each do |item| %>
  <%= item.compiled_content %>
<% end %>

You can change the order of files by prefixing a number to their name: "01_jquery.js", etc.

Read the source of the gem to see what other functions it gives you. Setup and integration and documentation could be much easier, of course. It's just a hack to make my life easier.