Added a page on org-info-js.

This is primarily a test of my first Worg contribution.

NOTE that I've put in an initial attempt on how you might use Worg to
manage bugs and feature requests for org-info-js.

Essentially there are two sequences, one for features the other for
bugs.  Bugs progress like so:

BUGREPORT -> BUG -> FIXED

Features like this:

SUGGESTION -> TOIMPLEMENT -> IMPLEMENTED

If it's a crazy idea, then feel free to ignore, delete, or edit it.

Also added Sebastian's demonstration of org-info-js as powerpoint.

code/org-info-js/org-slides/slides.css

@@ -0,0 +1,331 @@
+body
+{
+  width:100%;
+  padding:0px 0px 0px 0px;
+  margin:0px 0px 0px 0px;
+  line-height:1.4em;
+  color:#333333;
+  font-size:14pt;
+  font-family:"DejaVu Sans",Verdana,Arial,sans-serif; /*"Bitstream Vera Serif", serif;*/
+  background-image:url(img/bg.gif);
+  background-attachment:fixed;
+  background-repeat:repeat-x;
+}
+
+code, pre
+{
+  font-family:"DejaVu Sans Mono","Bitstream Vera Sans Mono",mono-space;
+}
+
+h1,h2,h3,h4,h5,h6
+{
+  font-family:"DejaVu Sans",Verdana,Arial,sans-serif;
+  font-size:18pt;
+  font-weight:bold;
+  color:#104d8c;
+  text-align:left;
+}
+
+div
+{
+  text-align:left;
+}
+
+a
+{
+  text-decoration:none;
+  cursor:pointer;
+  color:#0000AA;
+  font-style:italic;
+}
+
+a:hover
+{
+  text-decoration:underline;
+  cursor:pointer;
+  color:#0000AA;
+}
+
+a:visited
+{
+  text-decoration:none;
+  cursor:pointer;
+  color:#0000AA;
+}
+
+img, a img
+{
+  text-decoration:none;
+  border-style:none;
+}
+
+
+#title
+{
+  text-align: center;
+  vertical-align:middle;
+  height:90px;
+  width:100%;
+  line-height:2.8em;
+  background-image:url(img/unicorn.png);
+  background-attachment:fixed;
+  background-repeat:no-repeat;
+  background-position:30px 15px;
+  position:absolute;
+  top:0px;
+}
+
+#table-of-contents{ }
+
+.outline-1{}
+.outline-2{}
+.outline-3{}
+.outline-4{}
+
+ul
+{
+  padding-left:0px;
+  margin-left:2em;
+}
+
+li
+{
+  margin-right:5ex;
+  text-align:justify;
+}
+
+dt
+{
+  font-weight:bold;
+}
+
+dd
+{
+  margin-left:3em;
+}
+
+p
+{
+  text-align:justify;
+}
+
+.todo
+{
+  color: red;
+}
+
+.done
+{
+  color: green;
+}
+
+.timestamp
+{
+  color: grey;
+}
+
+.timestamp-kwd
+{
+  color: CadetBlue;
+}
+
+.tag
+{
+  font-size:12pt;
+  font-weight:normal;
+  font-style:italic;
+  color:orange;
+}
+
+table
+{
+  border-collapse: collapse;
+  border-bottom:1px solid black;
+}
+
+th
+{
+  white-space:nowrap;
+}
+
+td, th
+{
+  vertical-align: top;
+}
+
+pre, code.pre
+{
+  /* width:80%; */
+  margin-left:2%;
+  margin-top:1em;
+  margin-bottom:1em;
+  padding:0.3em;
+  background-color:#eeeeee;
+  border:1px solid #cccccc;
+  overflow:show;
+}
+
+
+li pre, li code.pre
+{
+  /* width:90%; */
+  margin-left:0em;
+  margin-top:1em;
+  margin-bottom:1em;
+  padding:0.3em;
+  background-color:#eeeeee;
+  border:1px solid #cccccc;
+}
+
+
+p pre
+{
+  margin:0px;
+  padding:0px;
+}
+
+div.backlinks
+{
+  clear:both;
+  text-align:right;
+  margin-top:1em;
+}
+.backlinks a
+{
+  padding-top:0.1em;
+  padding-bottom:0.1em;
+  padding-left:0.3em;
+  padding-right:0.3em;
+  text-align:right;
+  background-color:#DDDDFF;
+  color:#6666CC;
+  font-family:sans-serif;
+  text-decoration:none;
+  cursor:pointer;
+}
+
+div.zitat
+{
+  width:80%;
+  margin-left:3em;
+  margin-top:1em;
+  margin-bottom:1em;
+  padding:1em;
+  background-color:#ffeeee;
+  border:1px solid #cccccc;
+}
+
+div.leftColumn
+{
+  width:48%;
+  float:left;
+}
+
+div.rightColumn
+{
+  width:48%;
+  float:right;
+}
+
+
+li
+{
+}
+
+
+/* footer */
+
+div#postamble
+{
+  clear:both;
+  padding-top:0.6em;
+  padding-bottom:1em;
+  margin-top:3em;
+  border-top:1px solid #333333;
+}
+
+#postamble p
+{
+  width:100%;
+  text-align:center;
+  font-size:0.8em;
+  color:#666666;
+}
+
+#postamble p.date
+{
+  width:40%;
+  padding-left:2ex;
+  float:left;
+  text-align:left;
+  font-size:0.8em;
+  color:#999999;
+}
+#postamble p.author
+{
+  clear:both;
+  width:40%;
+  padding-right:2ex;
+  float:right;
+  font-size:0.8em;
+  color:#999999;
+  text-align:right;
+  white-space:nowrap;
+}
+
+/* Styles for org-info.js */
+
+
+
+#org-info-js-window
+{
+  position:absolute;
+  top:140px;
+  left:20%;
+}
+
+.org-info-js_info-navigation
+{
+  border-style:none;
+}
+
+#org-info-js_console
+{
+  color:#333333;
+  margin:0px;
+  background-color:#ffffff;
+}
+
+#org-info-js_console-input
+{
+  background-color:#ffffff;
+  border-style:none;
+  color:#333333;
+  padding-left:10px;
+  vertical-align:middle;
+}
+
+#org-info-js_console-label
+{
+  font-size:11px;
+  font-weight:bold;
+  padding-left:10px;
+  font-family:Verdana,Arial,sans-serif;
+  vertical-align:middle;
+}
+
+.org-info-js_console-label-warning
+{
+  color:#cc0000;
+}
+
+#org-info-js_console-container
+{
+  border:1px solid #cccccc;
+}
+
+.org-info-js_search-highlight
+{
+  background-color:#adefef; /* emacs default */
+  color:#000000;
+}

code/org-info-js/org-slides/slides.html

@@ -0,0 +1,456 @@
+<!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="en" xml:lang="en">
+<head>
+<title>Slides with Org-Mode and JavaScript</title>
+<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
+<meta name="generator" content="Org-mode"/>
+<meta name="generated" content="2008-08-28 00:06:02 CEST"/>
+<meta name="author" content="Sebastian Rose"/>
+<style type="text/css">
+  html { font-family: Times, serif; font-size: 12pt; }
+  .title  { text-align: center; }
+  .todo   { color: red; }
+  .done   { color: green; }
+  .tag    { background-color:lightblue; font-weight:normal }
+  .target { }
+  .timestamp { color: grey }
+  .timestamp-kwd { color: CadetBlue }
+  p.verse { margin-left: 3% }
+  pre {
+    border: 1pt solid #AEBDCC;
+    background-color: #F3F5F7;
+    padding: 5pt;
+    font-family: courier, monospace;
+        font-size: 90%;
+        overflow:auto;
+  }
+  table { border-collapse: collapse; }
+  td, th { vertical-align: top; }
+  dt { font-weight: bold; }
+
+  .org-info-js_info-navigation { border-style:none; }
+  #org-info-js_console-label { font-size:10px; font-weight:bold;
+                               white-space:nowrap; }
+  .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
+                                 font-weight:bold; }
+
+</style><link rel="stylesheet"                type="text/css" href="slides.css" />
+<script type="text/javascript" language="JavaScript" src="org-info.js"></script>
+<script type="text/javascript" language="JavaScript">
+/* <![CDATA[ */
+org_html_manager.set("TOC_DEPTH", "3");
+org_html_manager.set("LINK_HOME", "http://orgmode.org");
+org_html_manager.set("LINK_UP", "http://orgmode.org/worg/");
+org_html_manager.set("LOCAL_TOC", "0");
+org_html_manager.set("VIEW_BUTTONS", "0");
+org_html_manager.set("MOUSE_HINT", "underline");
+org_html_manager.set("FIXED_TOC", "0");
+org_html_manager.set("TOC", "0");
+org_html_manager.set("VIEW", "slide");
+org_html_manager.setup();  // activate after the parameterd are set
+/* ]]> */
+</script>
+</head><body>
+<h1 id="title">Slides with Org-Mode and JavaScript</h1>
+
+
+<div id="table-of-contents">
+<h2>Table of Contents</h2>
+<div id="text-table-of-contents">
+<ul>
+<li><a href="#sec-1">Welcome to Org-mode and Slides</a></li>
+<li><a href="#sec-2">Overview</a></li>
+<li><a href="#sec-3">Overview</a></li>
+<li><a href="#sec-4">Overview</a></li>
+<li><a href="#sec-5">Create the Org-mode file</a></li>
+<li><a href="#sec-6">Export the Org-mode file to XHTML</a></li>
+<li><a href="#sec-7">Create a stylesheet for slides</a></li>
+<li><a href="#sec-8">Create a stylesheet for slides</a></li>
+<li><a href="#sec-9">Create a stylesheet for slides</a></li>
+<li><a href="#sec-10">Create a stylesheet for slides</a></li>
+<li><a href="#sec-11">Create a stylesheet for slides</a>
+<ul>
+<li><a href="#sec-11.1">CSS - body</a></li>
+<li><a href="#sec-11.2">CSS - headlines</a></li>
+<li><a href="#sec-11.3">CSS - org-info-js</a></li>
+</ul>
+</li>
+<li><a href="#sec-12">TODOS</a></li>
+<li><a href="#sec-13">TODOS</a></li>
+<li><a href="#sec-14">TODOS</a></li>
+</ul>
+</div>
+</div>
+
+<div id="outline-container-1" class="outline-2">
+<h2 id="sec-1">Welcome to Org-mode and Slides</h2>
+<div id="text-1">
+
+
+<ul>
+<li>
+Navigate back and and forth on doubleclick and click.
+</li>
+<li>
+Turn around from last to first section.
+</li>
+<li>
+Turn around from first to last section.
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-2" class="outline-2">
+<h2 id="sec-2">Overview</h2>
+<div id="text-2">
+
+
+<ul>
+<li>
+Create the Org-mode file
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-3" class="outline-2">
+<h2 id="sec-3">Overview</h2>
+<div id="text-3">
+
+
+<ul>
+<li>
+Create the Org-mode file
+</li>
+<li>
+Export the Org-mode file to XHTML
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-4" class="outline-2">
+<h2 id="sec-4">Overview</h2>
+<div id="text-4">
+
+
+<ul>
+<li>
+Create the Org-mode file
+</li>
+<li>
+Export the Org-mode file to XHTML
+</li>
+<li>
+Create a stylesheet for slides
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-5" class="outline-2">
+<h2 id="sec-5">Create the Org-mode file</h2>
+<div id="text-5">
+
+
+<p>
+<b>Structure for slides</b>
+</p>
+<p>
+<pre class="example">
+ * Overview
+
+   + Create the Org-mode file
+
+ * Overview
+
+   + Create the Org-mode file
+   + Export the Org-mode file to XHTML
+</pre>
+</p>
+</div>
+
+</div>
+
+<div id="outline-container-6" class="outline-2">
+<h2 id="sec-6">Export the Org-mode file to XHTML</h2>
+<div id="text-6">
+
+
+<p>
+<code>view:slide</code>
+</p>
+<p>
+<pre class="example">
+#+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
+
+
+* COMMENT html style specifications
+# Local Variables:
+# org-export-html-style: "&lt;link rel=\"stylesheet\" \
+#                type=\"text/css\" href=\"slides.css\" /&gt;"
+# End:
+</pre>
+</p>
+
+</div>
+
+</div>
+
+<div id="outline-container-7" class="outline-2">
+<h2 id="sec-7">Create a stylesheet for slides</h2>
+<div id="text-7">
+
+
+<ul>
+<li>
+Stylesheets for slides are different.
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-8" class="outline-2">
+<h2 id="sec-8">Create a stylesheet for slides</h2>
+<div id="text-8">
+
+
+<ul>
+<li>
+Stylesheets for slides are different.
+</li>
+<li>
+The body uses the whole width.
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-9" class="outline-2">
+<h2 id="sec-9">Create a stylesheet for slides</h2>
+<div id="text-9">
+
+
+<ul>
+<li>
+Stylesheets for slides are different.
+</li>
+<li>
+The body uses the whole width.
+</li>
+<li>
+Use the same style for all headlines.
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-10" class="outline-2">
+<h2 id="sec-10">Create a stylesheet for slides</h2>
+<div id="text-10">
+
+
+<ul>
+<li>
+Stylesheets for slides are different.
+</li>
+<li>
+The body uses the whole width.
+</li>
+<li>
+Use the same style for all headlines.
+</li>
+<li>
+The postamble will be hidden automatically.
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-11" class="outline-2">
+<h2 id="sec-11">Create a stylesheet for slides</h2>
+<div id="text-11">
+
+
+<ul>
+<li>
+Stylesheets for slides are different.
+</li>
+<li>
+The body uses the whole width.
+</li>
+<li>
+Use the same style for all headlines.
+</li>
+<li>
+The postamble will be hidden automatically.
+</li>
+<li>
+Position org-info.js's window.
+</li>
+</ul>
+
+
+
+</div>
+
+<div id="outline-container-11.1" class="outline-3">
+<h3 id="sec-11.1">CSS - body</h3>
+<div id="text-11.1">
+
+
+<p>
+Choose a big font!
+</p>
+<p>
+<pre class="example">
+body
+{
+  width:100%;
+  padding:0px 0px 0px 0px;
+  margin:0px 0px 0px 0px;
+  background-image:url(img/bg.gif);
+  background-attachment:fixed;
+  background-repeat:repeat-x;
+  /* ... etc. */
+}
+</pre>
+</p>
+</div>
+
+</div>
+
+<div id="outline-container-11.2" class="outline-3">
+<h3 id="sec-11.2">CSS - headlines</h3>
+<div id="text-11.2">
+
+
+<p>
+Set all headlines to the same size:
+</p>
+<p>
+<pre class="example">
+h1,h2,h3,h4,h5,h6
+{
+  font-size: 18pt;
+  font-weight:bold;
+  color:#104d8c;
+  /* ... etc. */
+}
+</pre>
+</p>
+</div>
+
+</div>
+
+<div id="outline-container-11.3" class="outline-3">
+<h3 id="sec-11.3">CSS - org-info-js</h3>
+<div id="text-11.3">
+
+
+<p>
+Position the org-info.js window.
+</p>
+<p>
+<pre class="example">
+#org-info-js-window
+{
+  position:absolute;
+  top:140px;
+  left:20%;
+}
+</pre>
+</p>
+
+</div>
+</div>
+
+</div>
+
+<div id="outline-container-12" class="outline-2">
+<h2 id="sec-12">TODOS</h2>
+<div id="text-12">
+
+
+<ul>
+<li id="sec-12.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
+
+</li>
+</ul>
+</div>
+
+</div>
+
+<div id="outline-container-13" class="outline-2">
+<h2 id="sec-13">TODOS</h2>
+<div id="text-13">
+
+
+<ul>
+<li id="sec-13.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
+</li>
+<li id="sec-13.2"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
+
+</li>
+</ul>
+</div>
+
+</div>
+
+<div id="outline-container-14" class="outline-2">
+<h2 id="sec-14">TODOS</h2>
+<div id="text-14">
+
+
+<ul>
+<li id="sec-14.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
+</li>
+<li id="sec-14.2"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
+
+<p>
+
+<hr/>
+</p>
+</li>
+<li id="sec-14.3"><span class="todo">TODO</span> Have Fun with Org-mode and all the tools around.<br/>
+
+
+
+</li>
+</ul>
+</div>
+</div>
+<div id="postamble"><p class="author"> Author: Sebastian Rose
+<a href="mailto:sebastian_rose@gmx.de">&lt;sebastian_rose@gmx.de&gt;</a>
+</p>
+<p class="date"> Date: 2008-08-28 00:06:02 CEST</p>
+<p>HTML generated by org-mode 6.06b in emacs 23<p>
+</div></body>
+</html>

code/org-info-js/org-slides/slides.org

@@ -0,0 +1,153 @@
+#+STARTUP: align fold nodlcheck hidestars oddeven lognotestate
+#+TITLE: Slides with Org-Mode and JavaScript
+#+AUTHOR: Sebastian Rose
+#+EMAIL: sebastian_rose@gmx.de
+#+LANGUAGE: en
+#+OPTIONS:   H:3 num:nil toc:nil \n:nil @:t ::t |:t ^:t -:t f:t *:t TeX:t LaTeX:nil skip:nil d:t tags:not-in-toc
+#+INFOJS_OPT: path:org-info.js
+#+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
+#+INFOJS_OPT: up:http://orgmode.org/worg/
+#+INFOJS_OPT: home:http://orgmode.org buttons:nil
+
+
+
+* Welcome to Org-mode and Slides
+
+  + Navigate back and and forth on doubleclick and click.
+  + Turn around from last to first section.
+  + Turn around from first to last section.
+
+* Overview
+
+  + Create the Org-mode file
+
+* Overview
+
+  + Create the Org-mode file
+  + Export the Org-mode file to XHTML
+
+* Overview
+
+  + Create the Org-mode file
+  + Export the Org-mode file to XHTML
+  + Create a stylesheet for slides
+
+* Create the Org-mode file
+
+  *Structure for slides*
+
+  : * Overview
+  :
+  :   + Create the Org-mode file
+  :
+  : * Overview
+  :
+  :   + Create the Org-mode file
+  :   + Export the Org-mode file to XHTML
+
+* Export the Org-mode file to XHTML
+
+  =view:slide=
+
+  :#+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
+  :
+  :
+  :* COMMENT html style specifications
+  :# Local Variables:
+  :# org-export-html-style: "<link rel=\"stylesheet\" \
+  :#                type=\"text/css\" href=\"slides.css\" />"
+  :# End:
+
+
+* Create a stylesheet for slides
+
+  + Stylesheets for slides are different.
+
+* Create a stylesheet for slides
+
+  + Stylesheets for slides are different.
+  + The body uses the whole width.
+
+* Create a stylesheet for slides
+
+  + Stylesheets for slides are different.
+  + The body uses the whole width.
+  + Use the same style for all headlines.
+
+* Create a stylesheet for slides
+
+  + Stylesheets for slides are different.
+  + The body uses the whole width.
+  + Use the same style for all headlines.
+  + The postamble will be hidden automatically.
+
+* Create a stylesheet for slides
+
+  + Stylesheets for slides are different.
+  + The body uses the whole width.
+  + Use the same style for all headlines.
+  + The postamble will be hidden automatically.
+  + Position org-info.js's window.
+
+** CSS - body
+
+   Choose a big font!
+
+   :body
+   :{
+   :  width:100%;
+   :  padding:0px 0px 0px 0px;
+   :  margin:0px 0px 0px 0px;
+   :  background-image:url(img/bg.gif);
+   :  background-attachment:fixed;
+   :  background-repeat:repeat-x;
+   :  /* ... etc. */
+   :}
+
+** CSS - headlines
+
+   Set all headlines to the same size:
+
+   :h1,h2,h3,h4,h5,h6
+   :{
+   :  font-size: 18pt;
+   :  font-weight:bold;
+   :  color:#104d8c;
+   :  /* ... etc. */
+   :}
+
+** CSS - org-info-js
+
+   Position the org-info.js window.
+
+   :#org-info-js-window
+   :{
+   :  position:absolute;
+   :  top:140px;
+   :  left:20%;
+   :}
+
+
+* TODOS
+
+**** TODO Load stylsheets dynamically.
+
+* TODOS
+
+**** TODO Load stylsheets dynamically.
+**** TODO Drop lot's of mails with bugs and wishes.
+
+* TODOS
+
+**** TODO Load stylsheets dynamically.
+**** TODO Drop lot's of mails with bugs and wishes.
+
+     ------
+
+**** TODO Have Fun with Org-mode and all the tools around.
+
+
+* COMMENT html style specifications
+# Local Variables:
+# org-export-html-style: "<link rel=\"stylesheet\" type=\"text/css\" href=\"slides.css\" />"
+# End:

org-info-js.org

@@ -0,0 +1,72 @@
+#+STARTUP:    align fold nodlcheck hidestars oddeven lognotestate
+#+SEQ_TODO:   SUGGESTION(s) TOIMPLEMENT(t) IMPLEMENTED(i)
+#+SEQ_TODO:   BUGREPORT(r) BUG(b) FIXED(f)
+#+TITLE:      org-info-js
+#+AUTHOR:     Worg people
+#+LANGUAGE:   en
+#+CATEGORY:   org-info-js
+#+OPTIONS:    H:3 num:nil toc:nil \n:nil @:t ::t |:t ^:t -:t f:t *:t TeX:t LaTeX:t skip:nil d:(HIDE) tags:not-in-toc
+
+* org-info-js by Sebastian Rose
+
+org-info-js is a great javascript tool to navigate through a HTML page
+(as exported by Org) the way you navigate through an Org or an info
+manual, i.e. supporting folding, previous/next buttons, etc.
+
+** org-info-js as powerpoint
+
+It was [[http://www.mail-archive.com/emacs-orgmode@gnu.org/msg07820.html][noticed]] that files exported by org-info-js were similar to [[http://meyerweb.com/eric/tools/s5/][s5]]
+the simple standards-based Slide Show System.  After some hacking,
+Sebastian Rose added some features to allow org-mode and org-info-js
+to be used to create simple slide shows and presentations.
+
+An example org-info-js presentation can be found [[file:code/org-info-js/org-slides][here]]
+
+*** SUGGESTION #+TITLE's shouldn't display on every slide by default
+
+The title for each slide should (by default) be the slides heading.
+
+*** SUGGESTION Name for org-info-js slide show extension(s)
+
+Some suggested names for this functionality.
+
+- org-present
+- org-point
+- org-note (as in keynote)
+- present-org
+
+*** SUGGESTION Use properties to reveal bullet points
+
+To have bullet points reveal themselves one by one in org-info-js you
+need to replicate the slide many times, e.g.
+
+#+BEGIN_SRC org
+,* Overview
+
+,+ The first point
+
+,* Overview
+
+,+ The first point
+,+ The second point revealed
+
+,* Overview
+
+,+ The first point
+,+ The second point revealed
+,+ The third point (note the duplication of the slide)
+#+END_SRC
+
+Rather than this, we might (assuming properties can be exported) be
+able to support a syntax like the following:
+
+#+BEGIN_SRC org
+,* Overview
+, :PROPERTIES:
+, :reveal:   t
+, :END:
+
+, + Revealed properties
+, + Appear one after the other
+, + But this time only need to be stated once!
+#+END_SRC