Intégration HTML avec nanoc

Encore un petit outil sympathique fait en Ruby : nanoc.
Nanoc est un outil qui permet de réaliser un site web statique. D’ailleurs leur site est réalisé avec nanoc et vous pouvez télécharger les sources

Mais pour ma part je préfère l’utiliser dans le cas d’intégration HTML et que je dois livrer à des clients une version statique. Comme les frameworks MVC évolués, il gère un layout, des partial.

pour l’installation de nanoc, un petit coup de gem :

$ gem install nanoc

pour commencer le site, avec toute l’architecture :

$ nanoc create_site monsite
      create  config.yaml
      create  Rakefile
      create  Rules
      create  content/index.html
      create  content/stylesheet.css
      create  layouts/default.html
Created a blank nanoc site at 'monsite'. Enjoy!

$ cd monsite
$ ls -l
-rw-r--r-- 1 1000 1000 2090 mai 27 10:18 config.yaml
drwxr-xr-x 2 1000 1000 4096 mai 27 10:18 content
drwxr-xr-x 2 1000 1000 4096 mai 27 10:18 layouts
drwxr-xr-x 2 1000 1000 4096 mai 27 10:18 lib
drwxr-xr-x 2 1000 1000 4096 mai 27 10:18 output
-rw-r--r-- 1 1000 1000   22 mai 27 10:18 Rakefile
-rw-r--r-- 1 1000 1000  692 mai 27 10:18 Rules

Ensuite soit vous voulez une version statique de votre site :

$ nanoc compile
Loading site data...
Compiling site...
      create  [0.00s]  output/style.css
      create  [0.04s]  output/index.html

Site compiled in 0.21s.

ok mais moi, je veux développer, intégrer, modifier sans avoir à recompiler .. bah il y a le autocompile.
L’option autocompile lance un serveur web (comme webrick avec rails) et à chaque requête vérifie les timestamps des fichiers, recompile si nécéssaire et envoie la version statique via le serveur web.

$ nanoc autocompile
Running on http://0.0.0.0:3000/

Il suffit de regarder dans le navigateur à l’adresse http://0.0.0.0:3000/ et comme ça ldéveloppeur Rails n’est pas dépaysé !

Si vous ne souhaitez pas utiliser l’autocompile et encore moins le compile, mais juste voir le site via un serveur web rapidement il y la commande view :

$ nanoc view
Running on http://0.0.0.0:3000/

Bon ça c’est le cas simple du tutoriel. Pour réaliser l’intégration, j’ai du apporter mon lot de configuration tiré des sources du site de nanoc lui-même :

Il faut faut savoir que tout ce qui est dans content et layout est compilé par nanoc, et donc peut modifier les feuilles de style, déplacer les images.

Personnellement, je veux juste qu’il me génère mes pages HTML. J’ai donc mis mes feuilles de style et toutes les images de style et autre fichiers JS dans un dossier static

$ cd monsite
$ mkdir static

Editer le fichier config.yaml et ajouter le dossier static comme étant de type ‘static’

  ....
    layouts_root: /
  -
    type: static
    items_root: /static/

le type static n’existe pas dans nanoc. Il faut le déclarer soit-même et créer un data_source. Dans le dossier lib/data_sources, il faut créer le fichier static.rb :

require 'digest'

module Nanoc3::DataSources

  class Static < Nanoc3::DataSource

    identifier :static

    def items
      # Get prefix
      prefix = config[:prefix] || 'static'

      # Get all files under prefix dir
      filenames = Dir[prefix + '/**/*'].select { |f| File.file?(f) }

      # Convert filenames to items
      filenames.map do |filename|
        attributes = {
          :extension => File.extname(filename)[1..-1],
          :filename  => filename,
        }
        identifier = filename[(prefix.length+1)..-1] + '/'

        mtime      = File.mtime(filename)
        checksum   = checksum_for(filename)

        Nanoc3::Item.new(
          filename,
          attributes,
          identifier,
          :binary => true, :mtime => mtime, :checksum => checksum
        )
      end
    end

  private

    # Returns a checksum of the given filenames
    # TODO un-duplicate this somewhere
    def checksum_for(*filenames)
      filenames.flatten.map do |filename|
        digest = Digest::SHA1.new
        File.open(filename, 'r') do |io|
          until io.eof
            data = io.readpartial(2**10)
            digest.update(data)
          end
        end
        digest.hexdigest
      end.join('-')
    end

  end

end

Ce qui aura pour effet que de copier les fichiers dans le dossier output sans traitement particulier.
Note : Ce fichier est contenu dans les sources du site nanoc.

Il faut également modifier le fichier Rules, qui sert traiter les routes et à indiquer quels dossiers et fichiers doivent être compilé (vous pouvez compiler également des feuilles de style) :

#!/usr/bin/env ruby

route '/static/*' do
  # /static/foo.html/ → /foo.html
  item.identifier[7..-2]
end

compile '/static/*' do
end

compile '/stylesheet/' do
  # don’t filter or layout
end

compile '*' do
  filter :erb
  layout 'default'
end

route '/stylesheet/' do
  '/style.css'
end

route '*' do
  item.identifier + 'index.html'
end

layout '*', :erb

Maintenant vous pouvez travailler sur le layout :layouts/default.html, et sur le contenu d’une page : content/index.html.

Pour réaliser un partial style Rails :

1. dans layouts, crééer le fichier : monpartial.html.erb
2. dans la page de content :

   <%= render 'monpartial' %>
   

Voilà au moins le minimum pour pouvoir intégrer sereinement, et en plus vous êtes plusieurs sur l’intégration (ce qui est rare) SVN ou Git sont vos amis.