projects / ikiwiki.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7517d34)
use html5 semantic markup in page.tmpl
authorJoey Hess <joey@kitenet.net>
Sun, 2 May 2010 19:09:33 +0000 (15:09 -0400)
committerJoey Hess <joey@kitenet.net>
Sun, 2 May 2010 19:09:33 +0000 (15:09 -0400)
This is a first pass, it avoids needing to change style.css
except where it refers to tag types.

This goes a bit off the rails at the pageheader with its nested header.
Semantically, there should be an article around the whole page
header, content, and footer. Just as there will be an article around a
whole comment or inlined page header, content, and footer.

But that will mean changing the css that currently refers to pageheader to
refer to the enclosing article instead.

debian/changelog patch | blob | history
doc/style.css patch | blob | history
templates/page.tmpl patch | blob | history

diff --git a/debian/changelog b/debian/changelog
index c9fc2e65790dd047f6b8307405666813d00faa19..789fda1cea207ac3df60fae704303e9008fcb7c6 100644 (file)
--- a/debian/changelog
+++ b/debian/changelog
@@ -3,6 +3,9 @@ ikiwiki (3.20100502) UNRELEASED; urgency=low
   * Add parameter to displaytime to specify that it is a pubdate,
     and in html5 mode, use time tag.
   * Add placeholder text in search form (in html5 mode only).
+  * In html5 mode, use all the nice new semantic tags. Care was taken
+    to not change the id/class named used in the CSS, so only CSS
+    that refers to tag types needed to be changed.
 
  -- Joey Hess <joeyh@debian.org>  Sun, 02 May 2010 13:22:50 -0400
 
diff --git a/doc/style.css b/doc/style.css
index 7ffcf9fe27d32eb18307c68e0d1419e006d250fa..69c7f80d8085fdae3d4eacbffa3ab393d49a855a 100644 (file)
--- a/doc/style.css
+++ b/doc/style.css
@@ -60,15 +60,12 @@ div.inlinecontent {
        clear: both;
 }
 
-.tags {
-}
-
 #pageinfo {
        margin: 1em 0;
        border-top: 1px solid #000;
 }
 
-div.tags {
+.tags {
        margin-top: 1em;
 }
 
diff --git a/templates/page.tmpl b/templates/page.tmpl
index 661d4a51501d6ba7706312a5af1dea477860322f..0176b0116287aa769d343e2cd1807f87927e78c3 100644 (file)
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -5,7 +5,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 </TMPL_IF>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<TMPL_IF HTML5><meta charset="utf-8" /><TMPL_ELSE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></TMPL_IF>
 <meta http-equiv="Cache-Control" content="must-revalidate" />
 <title><TMPL_VAR TITLE></title>
 <TMPL_IF NAME="FAVICON">
@@ -26,8 +26,8 @@
 </head>
 <body>
 
-<div class="pageheader">
-<div class="header">
+<TMPL_IF HTML5><article class="pageheader"><TMPL_ELSE><div class="pageheader"></TMPL_IF>
+<TMPL_IF HTML5><header class="header"><TMPL_ELSE><div class="header"></TMPL_IF>
 <span>
 <span class="parentlinks">
 <TMPL_LOOP NAME="PARENTLINKS">
@@ -40,14 +40,14 @@
 &nbsp;(<TMPL_VAR NAME="PERCENTTRANSLATED">%)
 </TMPL_IF>
 </span>
-</span><!--.header-->
+</span>
 <TMPL_IF NAME="SEARCHFORM">
 <TMPL_VAR SEARCHFORM>
 </TMPL_IF>
-</div>
+<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF>
 
 <TMPL_IF NAME="HAVE_ACTIONS">
-<div class="actions">
+<TMPL_IF HTML5><nav class="actions"><TMPL_ELSE><div class="actions"></TMPL_IF>
 <ul>
 <TMPL_IF NAME="EDITURL">
 <li><a href="<TMPL_VAR EDITURL>" rel="nofollow">Edit</a></li>
@@ -72,11 +72,11 @@
 </TMPL_IF>
 </TMPL_IF>
 </ul>
-</div>
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
 </TMPL_IF>
 
 <TMPL_IF NAME="OTHERLANGUAGES">
-<div id="otherlanguages">
+<TMPL_IF HTML5><nav class="otherlanguages"><TMPL_ELSE><div class="otherlanguages"></TMPL_IF>
 <ul>
 <TMPL_LOOP NAME="OTHERLANGUAGES">
 <li>
@@ -89,23 +89,22 @@
 </li>
 </TMPL_LOOP>
 </ul>
-</div> <!-- #otherlanguages -->
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
 </TMPL_IF>
 
-</div> <!-- .pageheader -->
+<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF>
 
 <TMPL_IF SIDEBAR>
-<div class="sidebar">
+<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF>
 <TMPL_VAR SIDEBAR>
-</div>
+<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
 </TMPL_IF>
 
-<div id="content">
+<TMPL_IF HTML5><article id="content"><TMPL_ELSE><div id="content"></TMPL_IF>
 <TMPL_VAR CONTENT>
-</div>
 
 <TMPL_IF COMMENTS>
-<div id="comments">
+<TMPL_IF HTML5><aside id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
 <TMPL_VAR COMMENTS>
 <TMPL_IF ADDCOMMENTURL>
 <div class="addcomment">
@@ -114,23 +113,25 @@
 <TMPL_ELSE>
 <div class="addcomment">Comments on this page are closed.</div>
 </TMPL_IF>
-</div>
+<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
 </TMPL_IF>
 
-<div id="footer" class="pagefooter">
-<div id="pageinfo">
+<TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF>
+
+<TMPL_IF HTML5><footer id="footer" class="pagefooter"><TMPL_ELSE><div id="footer" class="pagefooter"></TMPL_IF>
+<TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>
 
 <TMPL_IF NAME="TAGS">
-<div class="tags">
+<TMPL_IF HTML5><nav class="tags"><TMPL_ELSE><div class="tags"></TMPL_IF>
 Tags:
 <TMPL_LOOP NAME="TAGS">
 <TMPL_VAR LINK>
 </TMPL_LOOP>
-</div>
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
 </TMPL_IF>
 
 <TMPL_IF NAME="BACKLINKS">
-<div id="backlinks">
+<TMPL_IF HTML5><nav id="backlinks"><TMPL_ELSE><div id="backlinks"></TMPL_IF>
 Links:
 <TMPL_LOOP NAME="BACKLINKS">
 <a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>
@@ -144,7 +145,7 @@ Links:
 </span>
 </span>
 </TMPL_IF>
-</div><!-- #backlinks -->
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
 </TMPL_IF>
 
 <TMPL_IF COPYRIGHT>
@@ -166,10 +167,10 @@ Last edited <TMPL_VAR MTIME>
 <!-- Created <TMPL_VAR CTIME> -->
 </div>
 
-</div><!-- #pageinfo -->
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
 <TMPL_IF EXTRAFOOTER><TMPL_VAR EXTRAFOOTER></TMPL_IF>
 <!-- from <TMPL_VAR WIKINAME> -->
-</div><!-- .pagefooter #footer -->
+<TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF>
 
 </body>
 </html>
Ikiwiki is a compiler for VCS-based (Git, Subversion, ...) wikis.