New layout for articles
This commit is contained in:
Yann Esposito (Yogsototh)
parent
f1587091c8
commit
f8dce07adf
6 changed files with 279 additions and 99 deletions
6
Rules
6
Rules
|
|
@ -56,7 +56,11 @@ compile '/html/*' do
|
|||
# filter :yabbreviations
|
||||
filter :footnotes
|
||||
|
||||
layout 'default' unless item[:layout] == "none"
|
||||
if item[:kind] == 'article'
|
||||
layout 'article'
|
||||
else
|
||||
layout 'default' unless item[:layout] == "none"
|
||||
end
|
||||
end
|
||||
|
||||
route '/html/*' do
|
||||
|
|
|
|||
|
|
@ -23,6 +23,12 @@ translations:
|
|||
langue:
|
||||
fr: "langue"
|
||||
en: "language"
|
||||
switchTo:
|
||||
fr: "lire en Français"
|
||||
en: "switch to English"
|
||||
clickForComment:
|
||||
fr: "Cliquez ici pour commenter"
|
||||
en: "Click me Comment"
|
||||
liens:
|
||||
fr: "liens"
|
||||
en: "links"
|
||||
|
|
|
|||
218
layouts/article.html
Normal file
218
layouts/article.html
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
-----
|
||||
-----
|
||||
<%
|
||||
# -- init variables --
|
||||
class LocalConf
|
||||
attr_accessor :blog, :article, :languages, :language, :indent
|
||||
def to_s
|
||||
instance_variables.map{ |x|
|
||||
if instance_variable_get(x).class == Array
|
||||
%{#{x.intern}= [#{instance_variable_get(x).join(', ')}]}
|
||||
else
|
||||
%{#{x.intern}= #{instance_variable_get(x)}}
|
||||
end
|
||||
}
|
||||
end
|
||||
end
|
||||
|
||||
conf=LocalConf.new
|
||||
|
||||
language=@item_rep.path.sub(/\/Scratch\//,'').sub(/\/.*$/,'')
|
||||
conf.language=language
|
||||
|
||||
# the current item is an article
|
||||
article=( ( not @item[:kind].nil? ) && @item[:kind] == 'article' )
|
||||
conf.article=article
|
||||
|
||||
# the current item is a blog entry page
|
||||
blog=( ( not @item[:kind].nil? ) && @item[:kind] == 'blog' )
|
||||
conf.blog=blog
|
||||
|
||||
# all supported languages
|
||||
languages=@config[:languages]
|
||||
conf.languages=languages
|
||||
|
||||
self.instance_variable_set(:@conf, conf)
|
||||
|
||||
# puts '--- conf ---'
|
||||
# puts conf.to_s
|
||||
|
||||
%><?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<% t=tags %>
|
||||
<% if t.length > 0 %>
|
||||
<meta name="keywords" content="<%= t %>">
|
||||
<% end %>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/Scratch/img/favicon.ico" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/twilight.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/layout.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/shadows.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/gen.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocom<%= language %>"/>
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/js.css" /> <%
|
||||
languages.each do |lang|
|
||||
item_for_lang=item_of_language(lang)
|
||||
if not item_for_lang.nil? %>
|
||||
<link rel="alternate" lang="<%= lang %>" xml:lang="<%= lang %>" title="<%= item_for_lang[:title] %>" type="text/html" hreflang="<%= lang %>" href="<%= item_for_lang.reps[0].path %>" /> <%
|
||||
end
|
||||
end %>
|
||||
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
||||
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
||||
<title><%= @item[:title] %> ARTICLE</title>
|
||||
</head>
|
||||
<body lang="<%= language %>">
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="<%= tradOf(:loading) %>"/></div>');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<div id="content">
|
||||
<div id="choix">
|
||||
<%= tradOf(:langue) %>
|
||||
<div id="choixlang">
|
||||
<ul>
|
||||
<% languages.each do |l| %>
|
||||
<% dest=@item_rep.path.sub(/^\/Scratch\/..\//, %{/Scratch/#{l}/}) %>
|
||||
<% if @item_rep.path != dest %>
|
||||
<li><a href="<%=dest%>" onclick="setLanguage('<%=l%>')"><%= tradOfKeywordIn(:switchTo,l) %></a></li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="titre">
|
||||
<h1>
|
||||
<%= @item[:title] %>
|
||||
</h1>
|
||||
<% unless @item[:subtitle].nil? %>
|
||||
<h2>
|
||||
<%= @item[:subtitle] %>
|
||||
</h2>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flush"></div>
|
||||
|
||||
<% if @item[:content_for_summary] %>
|
||||
<div class="corps summary">
|
||||
<% @item[:content_for_summary] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= generateSubMenu %>
|
||||
|
||||
<div class="flush"></div>
|
||||
<div id="afterheader">
|
||||
<div class="corps">
|
||||
<%= yield %>
|
||||
<div class="return"><a href="#entete" onclick="fastShowMenu()">↑</a></div>
|
||||
</div>
|
||||
<% depth = depthOf(@item) %>
|
||||
<% if depth > 2 or ( depth == 2 and @item.children.length > 0 ) %>
|
||||
<div class="navigation">
|
||||
<div class="navigationprev"><%= previousFor(@item) %></div>
|
||||
<div class="navigationnext"><%= nextFor(@item) %></div>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
<% end %>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('#comment').hide();
|
||||
$('#clickcomment').click(showComments);
|
||||
});
|
||||
function showComments() {
|
||||
$('#comment').show();
|
||||
$('#clickcomment').fadeOut();
|
||||
}
|
||||
document.write('<div id="clickcomment"><%= tradOf(:clickForComment) %></div>');
|
||||
</script>
|
||||
<div class="corps" id="comment">
|
||||
<h2 class="first"><%= tradOf(:comment) %></h2>
|
||||
<%= generateIntenseDebateThread %>
|
||||
</div>
|
||||
|
||||
<div id="entete">
|
||||
<div id="liens">
|
||||
<%= generateMenu %>
|
||||
</div>
|
||||
<div id="choixrss">
|
||||
<div id="rss">
|
||||
<span>
|
||||
<a href="http://feeds.feedburner.com/yannespositocom<%= language %>">
|
||||
<%= tradOf(:subscribe) %>
|
||||
<img src="/Scratch/img/menu/rss-128.png" alt="rss" height="32"/>
|
||||
</a>
|
||||
<sup>
|
||||
<a href="/Scratch/<%=language%>/rss"><%= tradOf(:whatsthis) %></a>
|
||||
</sup>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div id="next_before_articles">
|
||||
<div id="previous_articles">
|
||||
<%= tradOf(:previousArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(-n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="previous_article">
|
||||
<%= link_to('← ' + a[:title], a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div id="next_articles">
|
||||
<%= tradOf(:nextArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="next_article">
|
||||
<%= link_to(a[:title] + '→ ', a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="bottom">
|
||||
<div>
|
||||
<%= tradOf(:entirely_done_with) %>
|
||||
<a href="http://www.vim.org">Vim</a>
|
||||
<%= tradOf(:and) %>
|
||||
<a href="http://nanoc.stoneship.org">nanoc</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/Scratch/<%=language%>/validation/">Validation</a>
|
||||
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
|
||||
.
|
||||
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
|
||||
.
|
||||
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/<%=language%>/blog/feed/feed.xml">[rss]</a>
|
||||
</div>
|
||||
<div>
|
||||
<%=tradOf(:copyright) %>
|
||||
</div>
|
||||
<div id="lastmod">
|
||||
<%=tradOf(:created_at)%>: <%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %> <br/>
|
||||
<%=tradOf(:last_modified)%>: <%= @item.mtime.strftime(@config[:dateFormat][language.intern]) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -52,9 +52,6 @@ self.instance_variable_set(:@conf, conf)
|
|||
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/layout.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/shadows.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/gen.css" />
|
||||
<% if article %>
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
||||
<% end %>
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocom<%= language %>"/>
|
||||
<link rel="stylesheet" type="text/css" href="/Scratch/css/js.css" /> <%
|
||||
languages.each do |lang|
|
||||
|
|
@ -66,6 +63,7 @@ self.instance_variable_set(:@conf, conf)
|
|||
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
||||
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
||||
<script type="text/javascript" src="/Scratch/js/menu.js"></script>
|
||||
<title><%= @item[:title] %></title>
|
||||
</head>
|
||||
<body lang="<%= language %>">
|
||||
|
|
@ -89,13 +87,12 @@ self.instance_variable_set(:@conf, conf)
|
|||
</span>
|
||||
</div>
|
||||
<div id="choix">
|
||||
<%= tradOf(:langue) %>
|
||||
<div id="choixlang">
|
||||
<ul>
|
||||
<% languages.each do |l| %>
|
||||
<% dest=@item_rep.path.sub(/^\/Scratch\/..\//, %{/Scratch/#{l}/}) %>
|
||||
<% if @item_rep.path != dest %>
|
||||
<li><a href="<%=dest%>" onclick="setLanguage('<%=l%>')"><%= l %></a></li>
|
||||
<li><a href="<%=dest%>" onclick="setLanguage('<%=l%>')"><%= tradOfKeywordIn(:switchTo,l) %></a></li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
|
@ -105,38 +102,6 @@ self.instance_variable_set(:@conf, conf)
|
|||
<div id="liens">
|
||||
<%= generateMenu %>
|
||||
</div>
|
||||
<% if article %>
|
||||
<hr/>
|
||||
<div id="next_before_articles">
|
||||
<div id="previous_articles">
|
||||
<%= tradOf(:previousArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(-n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="previous_article">
|
||||
<%= link_to('← ' + a[:title], a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div id="next_articles">
|
||||
<%= tradOf(:nextArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="next_article">
|
||||
<%= link_to(a[:title] + '→ ', a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div id="titre">
|
||||
|
|
@ -166,21 +131,6 @@ self.instance_variable_set(:@conf, conf)
|
|||
<%= yield %>
|
||||
<div class="return"><a href="#entete" onclick="fastShowMenu()">↑</a></div>
|
||||
</div>
|
||||
<% if article %>
|
||||
<% depth = depthOf(@item) %>
|
||||
<% if depth > 2 or ( depth == 2 and @item.children.length > 0 ) %>
|
||||
<div class="navigation">
|
||||
<div class="navigationprev"><%= previousFor(@item) %></div>
|
||||
<div class="navigationnext"><%= nextFor(@item) %></div>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
<% end %>
|
||||
|
||||
<div class="corps" id="comment">
|
||||
<h2 class="first"><%= tradOf(:comment) %></h2>
|
||||
<%= generateIntenseDebateThread %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div id="bottom">
|
||||
<div>
|
||||
<%= tradOf(:entirely_done_with) %>
|
||||
|
|
@ -200,9 +150,6 @@ self.instance_variable_set(:@conf, conf)
|
|||
<%=tradOf(:copyright) %>
|
||||
</div>
|
||||
<div id="lastmod">
|
||||
<% if article %>
|
||||
<%=tradOf(:created_at)%>: <%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %> <br/>
|
||||
<% end %>
|
||||
<%=tradOf(:last_modified)%>: <%= @item.mtime.strftime(@config[:dateFormat][language.intern]) %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -113,48 +113,6 @@ function detectiPhone() {
|
|||
}
|
||||
|
||||
|
||||
// initialisation du menu
|
||||
var decalageTop = 10;
|
||||
function entete_height() {
|
||||
return $('#entete').height() - $('#menuMessage').height() + decalageTop;
|
||||
}
|
||||
function fastHideMenu() {
|
||||
$('#entete').css({opacity: .2});
|
||||
}
|
||||
function hideMenu() {
|
||||
$('#entete').animate({opacity: .2}, 3000 );
|
||||
}
|
||||
function showMenu() {
|
||||
$('#entete').animate({opacity:1}, 200 );
|
||||
last+=1;
|
||||
autoHideMenu(last);
|
||||
}
|
||||
function fastShowMenu() {
|
||||
$('#entete').css({opacity:1});
|
||||
last+=1;
|
||||
autoHideMenu(last);
|
||||
}
|
||||
function toggleMenu() {
|
||||
if ( $('#entete').css('top')==entete_height() ) {
|
||||
showMenu();
|
||||
} else {
|
||||
hideMenu();
|
||||
}
|
||||
}
|
||||
var last=0;
|
||||
function autoHideMenu(value) {
|
||||
setTimeout(function(){
|
||||
if ( last == value ) {
|
||||
hideMenu();
|
||||
}
|
||||
},2000);
|
||||
}
|
||||
function initMenu() {
|
||||
$('#titre').css({top: -entete_height});
|
||||
$('#entete').hover(showMenu);
|
||||
$('#entete').hover(function(){last+=1;}, function(){autoHideMenu(last);});
|
||||
autoHideMenu(0);
|
||||
}
|
||||
|
||||
function setSpecificCss() {
|
||||
var userAgent = navigator.userAgent.toLowerCase();
|
||||
|
|
@ -171,7 +129,6 @@ $(document).ready( function() {
|
|||
setSpecificCss();
|
||||
detectIE();
|
||||
detectiPhone();
|
||||
initMenu();
|
||||
initCode();
|
||||
// affiche la page une fois propre et la langue choisie
|
||||
if ( alertLanguage() ) {
|
||||
|
|
|
|||
48
output/Scratch/js/menu.js
Normal file
48
output/Scratch/js/menu.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// initialisation du menu
|
||||
var decalageTop = 10;
|
||||
function entete_height() {
|
||||
return $('#entete').height() - $('#menuMessage').height() + decalageTop;
|
||||
}
|
||||
function fastHideMenu() {
|
||||
$('#entete').css({opacity: .2});
|
||||
}
|
||||
function hideMenu() {
|
||||
$('#entete').animate({opacity: .2}, 3000 );
|
||||
}
|
||||
function showMenu() {
|
||||
$('#entete').animate({opacity:1}, 200 );
|
||||
last+=1;
|
||||
autoHideMenu(last);
|
||||
}
|
||||
function fastShowMenu() {
|
||||
$('#entete').css({opacity:1});
|
||||
last+=1;
|
||||
autoHideMenu(last);
|
||||
}
|
||||
function toggleMenu() {
|
||||
if ( $('#entete').css('top')==entete_height() ) {
|
||||
showMenu();
|
||||
} else {
|
||||
hideMenu();
|
||||
}
|
||||
}
|
||||
var last=0;
|
||||
function autoHideMenu(value) {
|
||||
setTimeout(function(){
|
||||
if ( last == value ) {
|
||||
hideMenu();
|
||||
}
|
||||
},2000);
|
||||
}
|
||||
function initMenu() {
|
||||
$('#titre').css({top: -entete_height});
|
||||
$('#entete').hover(showMenu);
|
||||
$('#entete').hover(function(){last+=1;}, function(){autoHideMenu(last);});
|
||||
autoHideMenu(0);
|
||||
}
|
||||
|
||||
|
||||
// Ce que l'on va lancer à l'init.
|
||||
$(document).ready( function() {
|
||||
initMenu();
|
||||
});
|
||||
Loading…
Reference in a new issue