A basic Publisher layout and style.

chook.rb

@@ -33,8 +33,8 @@ def book_action(action, options = {})
 # UPLOADING
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
-get '/publish' do
-  erb :publish, :layout => false
+get '/' do
+  erb :publish
 end
 
 
@@ -129,7 +129,9 @@ def book_action(action, options = {})
 # Viewing and editing the HTML.
 #
 get '/:book_id/html' do
-  book_action(:html)
+  book_action(:html) {
+    @content = IO.read(@ook.system_path(@ook.id, 'index.html'))
+  }
 end
 
 

lib/epub.rb

@@ -76,7 +76,7 @@ def build_oebps_container
     def build_ncx
       x = 0
       curse = lambda { |xml, section|
-        if cmpt = url_for_node(section.heading || section.node)
+        if cmpt = url_for_node(section.heading, section.node)
           xml.navPoint(:id => "navPoint#{x+=1}", :playOrder => x) {
             xml.navLabel { xml.text_(section.heading_text) }
             xml.content(:src => cmpt)
@@ -147,7 +147,7 @@ def write_components
       outline_html = outliner.to_html { |section, below|
         heading = section.heading_text
         if heading
-          url = url_for_node(section.heading || section.node)
+          url = url_for_node(section.heading, section.node)
           heading = '<a href="'+url+'">'+heading+'</a>'
         elsif section.respond_to?(:container) && section.container && !below.empty?
           heading = '<br class="anon" />'
@@ -327,7 +327,9 @@ def componentizer
       end
 
 
-      def url_for_node(node)
+      def url_for_node(*nodes)
+        node = nodes.compact.detect { |n| n['id'] && !n['id'].empty? }
+        node ||= nodes.first
         return nil  unless node
 
         n = node

lib/ochook.rb

@@ -125,7 +125,8 @@ def destroy
 
     def toc_html(path = '')
       link_to_section = lambda { |sxn, heading|
-        sid = sxn.heading['id'] || sxn.node['id']
+        sid = sxn.heading['id']  if sxn.heading
+        sid ||= sxn.node['id']  if sxn.node
         return heading  unless sid && !sid.empty?
         '<a href="'+path+'#'+sid+'">'+heading+'</a>'
       }

public/book_data.css

@@ -1,13 +1,107 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
+}
+
 p.warn {
   background: #C55;
   color: white;
   padding: 0.5em 1em;
 }
 
+h1 {
+  background: #676767;
+  margin: 0;
+  padding: 0.5em 0;
+  font-family: Futura, Tahoma, sans-serif;
+}
+
+h1 a {
+  padding: 0 10px;
+  color: #DDD;
+  text-decoration: none;
+  text-shadow: -2px -1px 0px #333;
+}
+
+ul#toolbar {
+  margin: 0;
+  padding: 10px 0 0 10px;
+  overflow: hidden;
+  list-style: none;
+  background-color: #777;
+}
+
+ul#toolbar li {
+  float: left;
+  margin: 0 3px 0 0;
+}
+
+ul#toolbar a {
+  display: block;
+  margin-top: 0.5em;
+  padding: 0.5em 0.5em 0.3em;
+  background: #EEE;
+  border: 2px solid white;
+  border-bottom: 1px solid #DDD;
+  box-shadow: 0 -1px 2px #333;
+  -webkit-box-shadow: 0 -1px 2px #333;
+  -moz-box-shadow: 0 -1px 2px #333;
+  -webkit-border-top-left-radius: 10px;
+  -webkit-border-top-right-radius: 10px;
+  -moz-border-radius-topleft: 10px;
+  -moz-border-radius-topright: 10px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  text-decoration: none;
+  color: #333;
+}
+
+ul#toolbar a.mainTool {
+  padding-top: 1em;
+  margin-top: 0;
+  font-weight: bold;
+}
+
+ul#toolbar a.active {
+  background: white;
+  color: #000;
+  border-bottom: 1px solid white;
+}
+
+div#internals {
+  margin-top: 1px;
+  padding: 1em;
+}
+
+
+/* BOOK INDEX */
+div.zhookRepublish {
+  float: right;
+}
+
+div#zhookCover img {
+  width: 200px;
+}
+
+
+/* CONTENTS */
+.toc ol {
+  padding-left: 1em;
+  counter-reset: item;
+}
+.toc ol li {
+  display: block;
+}
+.toc ol li:before {
+  content: counters(item, ".") " ";
+  counter-increment: item;
+}
+
+
 /* METADATA */
 table.meta {
   border-collapse: collapse;
-  font: 9pt Lucide Grande, Tahoma, Verdana, sans-serif;
 }
 
 table.meta th, table.meta td {
@@ -35,3 +129,10 @@ textarea#code {
   width: 80%;
   height: 98%;
 }
+
+pre#code {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}

views/book_index.erb

@@ -1,23 +1,4 @@
-<% @page_title = "#{@ook.id}: #{h @ook.metadata('title')}" %>
-
-<div class="zhookReaderLink">
-  <a href="/<%= @ook.id %>/read">View in Zhook Reader</a>
-</div>
-
-<div class="ochookReaderLink">
-  <a href="/book/<%= @ook.id %>/">View as Ochook</a>
-</div>
-
-<div class="epubDownloadLink">
-  <a href="/<%= @ook.id %>/format/epub">Download EPUB</a>
-</div>
-
-<!--
-<div class="zhookDownloadLink">
-  <a href="/<%= @ook.id %>/format/zhook">Download Zhook</a>
-</div>
--->
-
+<% @page_title = "#{@ook.id}: #{h @ook.metadata('title')}"; @active = 1 %>
 
 <% if @ook.private? %>
   <div class="zhookRepublish">
@@ -41,3 +22,28 @@
     </form>
   </div>
 <% end %>
+
+
+<div id="zhookCover">
+  <img src="/book/<%= @ook.id %>/cover.png" />
+</div>
+
+<div class="zhookReaderLink">
+  <a href="/<%= @ook.id %>/read">View in Zhook Reader</a>
+</div>
+
+<div class="ochookReaderLink">
+  <a href="/book/<%= @ook.id %>/">View as Ochook</a>
+</div>
+
+<div class="epubDownloadLink">
+  <a href="/<%= @ook.id %>/format/epub">Download EPUB</a>
+</div>
+
+<!--
+<div class="zhookDownloadLink">
+  <a href="/<%= @ook.id %>/format/zhook">Download Zhook</a>
+</div>
+-->
+
+

views/contents.erb

@@ -1,12 +1,12 @@
-<% @page_title = "Contents: #{@ook.id}" %>
+<% @page_title = "Contents: #{@ook.id}"; @active = 2 %>
 
-<div>
+<div class="toc">
   <h2>Table of Contents</h2>
   <%= @ook.toc_html("/book/#{@ook.id}/") %>
 </div>
 
 <% if loi = @ook.loi_html("/book/#{@ook.id}/") %>
-  <div>
+  <div class="toc">
     <h2>List of Illustrations</h2>
     <%= loi %>
   </div>

views/html.erb

@@ -1,4 +1,7 @@
-<% @page_title = "Edit HTML: #{@ook.id}" %>
-
-<textarea id="code"><%= @ook.index_document.to_html %></textarea>
+<% @page_title = "Edit HTML: #{@ook.id}"; @active = 4 %>
 
+<% if false and @ook.private? %>
+  <textarea id="code"><%= h @content %></textarea>
+<% else %>
+  <pre id="code"><%= h @content %></pre>
+<% end %>

views/layout.erb

@@ -7,14 +7,20 @@
   </head>
   <body>
 
-    <ul>
-      <li><a href="/<%= @ook.id %>"><%= h @ook.metadata('title') %></a></li>
-      <li><a href="/<%= @ook.id %>/contents">Contents</a></li>
-      <li><a href="/<%= @ook.id %>/metadata">Metadata</a></li>
-      <li><a href="/<%= @ook.id %>/html">HTML</a></li>
-    </ul>
+    <h1><a href="/">Zhook Publisher</a></h1>
 
-    <%= yield %>
+    <% if @ook %>
+      <ul id="toolbar">
+        <li><a class="mainTool <%= "active" if @active == 1 %>" href="/<%= @ook.id %>"><%= h @ook.metadata('title') %></a></li>
+        <li><a class="<%= "active" if @active == 2 %>" href="/<%= @ook.id %>/contents">Contents</a></li>
+        <li><a class="<%= "active" if @active == 3 %>" href="/<%= @ook.id %>/metadata">Metadata</a></li>
+        <li><a class="<%= "active" if @active == 4 %>" href="/<%= @ook.id %>/html">HTML</a></li>
+      </ul>
+    <% end %>
+
+    <div id="internals">
+      <%= yield %>
+    </div>
 
   </body>
 </html>

views/metadata.erb

@@ -1,3 +1,5 @@
+<% @page_title = "Metadata: #{@ook.id}"; @active = 3 %>
+
 <% known_names = [
   'title',
   'identifier',

views/publish.erb

@@ -1,39 +1,25 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Publish an Ochook</title>
-    <style type="text/css">
-      p.warn {
-        background: #C55;
-        color: white;
-        padding: 0.5em 1em;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Publish an Ochook</h1>
-    <form action="/publish" method="POST" enctype="multipart/form-data">
-      <% if @ook && @ook.invalidity %>
-        <p class="warn">
-          <%= Rack::Utils.escape_html(@ook.invalidity.inspect) %>
-        </p>
-      <% end %>
-      <fieldset>
-        <legend>Upload a Zhook</legend>
-        <p>
-          <input type="file" name="file" />
-        </p>
-        <p>
-          <select name="security">
-            <option value="private">Private</option>
-            <option value="public">Public</option>
-          </select>
-        </p>
-        <p>
-          <input type="submit" value="Publish" />
-        </p>
-      </fieldset>
-    </form>
-  </body>
-</html>
+<% @page_title = "Zhook Publisher" %>
+
+<h2>Publish an Ochook</h2>
+<form action="/publish" method="POST" enctype="multipart/form-data">
+  <% if @ook && @ook.invalidity %>
+    <p class="warn">
+      <%= Rack::Utils.escape_html(@ook.invalidity.inspect) %>
+    </p>
+  <% end %>
+  <fieldset>
+    <legend>Upload a Zhook</legend>
+    <p>
+      <input type="file" name="file" />
+    </p>
+    <p>
+      <select name="security">
+        <option value="private">Private</option>
+        <option value="public">Public</option>
+      </select>
+    </p>
+    <p>
+      <input type="submit" value="Publish" />
+    </p>
+  </fieldset>
+</form>