Working on the index.

df2/doc_resources/script/script.js

@@ -0,0 +1,25 @@
+(function()
+{
+  var h1_height = 0;
+  var side_panel = null;
+  var side_panel_top = -1;
+  var set_sidepanel_top = function()
+  {
+    var scroll_top = document.documentElement.scrollTop;
+    var top = scroll_top > h1_height ? 0 : h1_height - scroll_top;
+    if (top != side_panel_top)
+    {
+      side_panel_top = top;
+      side_panel.style.top = top + "px";
+    }
+  };
+
+  window.onload = function()
+  {
+    var h1 = document.querySelector("h1");
+    h1_height = h1 && parseInt(h1.offsetHeight);
+    side_panel = document.querySelector(".sidepanel");
+    set_sidepanel_top();
+    window.addEventListener("scroll", set_sidepanel_top, false);
+  };
+})();

df2/doc_resources/style/style.css

@@ -37,6 +37,18 @@ a:hover
   text-decoration: underline;
 }
 
+pre a,
+pre a:hover
+{
+  text-decoration: none;
+  color: hsl(0, 0%, 0%);
+}
+
+.message .doc
+{
+  color: hsl(0, 0%, 30%);
+}
+
 
 .last-created
 {
@@ -81,9 +93,12 @@ h1
 .sidepanel
 {
   padding: 10px;
-  float: left;
   width: 230px;
   border-right: 1px solid hsl(0, 0%, 70%);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
 }
 
 .main-view
@@ -100,7 +115,7 @@ h1
   margin-left: 20px;
 }
 
-.field
+x.field
 {
   margin: 0;
   padding-top: 1px;
@@ -133,40 +148,44 @@ x.field:last-of-type
   margin: 5px 0;
 }
 
-.message-description
-{
-  xmargin: 0 5x;
-}
 
-.field .doc
+.keyword
 {
-  xbackground-color: hsl(0, 0%, 95%);
+  color: #DD1144;
+  font-weight: bold;
 }
 
-.field-description,
-.enum-description
+.qualifier,
+.enum-name,
+.enum-key
 {
-  xbackground-color: hsl(0, 0%, 92%);
-  xborder-radius: 3px;
-  margin: 0;
-  xpadding: 1px 0;
+  color: #DD1144;
 }
 
-.keyword
+.field-name
 {
-  color: #DD1144;
   font-weight: bold;
 }
 
-.qualifier
+.proto-key,
+.since-version
 {
-  color: #DD1144;
+  color: hsl(0, 0%, 60%);
 }
 
-.field-name,
-.enum-name
+.note
 {
+  display: inline-block;
+  background-color: hsl(0, 0%, 60%);
+  content: "i";
+  color: #fff;
   font-weight: bold;
+  font-family: serif;
+  font-style: italic;
+  width: 14px;
+  height: 14px;
+  text-align: center;
+  border-radius: 7px;
 }
 
 code
@@ -185,27 +204,31 @@ h3
   padding-left: 20px;
 }
 
-li.selected .event::before,
-li.selected .command::before
+:target::after
 {
   content: ' ';
   display: block;
-  float: left;
+  float: right;
   width: 14px;
   height: 14px;
   margin-top: 0px;
   margin-left: -18px;
   margin-bottom: -20px;
-  background-image: linear-gradient(45deg, hsl(0, 0%, 25%) 0px,
-                                             hsl(0, 0%, 25%) 4px,
+  background-image: linear-gradient(-45deg, #DD1144 0px,
+                                             #DD1144 4px,
                                              transparent 4px),
-                   linear-gradient(135deg, hsl(0, 0%, 25%) 0px,
-                                             hsl(0, 0%, 25%) 4px,
+                   linear-gradient(-135deg, #DD1144 0px,
+                                             #DD1144 4px,
                                              transparent 4px),
-                   linear-gradient(0deg, hsl(0, 0%, 25%) 0px,
-                                            hsl(0, 0%, 25%) 0px);
-  background-position: 7px 1px, 7px 8px, 0px 6px;
+                   linear-gradient(0deg, #DD1144 0px,
+                                           #DD1144 0px);
+  background-position: 0px 1px, 0px 8px, 6px 6px;
   background-size: 7px 7px, 7px 7px, 7px 4px;
   background-repeat: no-repeat;
 }
 
+h2:target::after
+{
+  margin-top: 3px;
+}
+

df2/minirest.py

@@ -121,10 +121,7 @@ class SinceProcessor(object):
     def process(self, lines, ctx_node):
         count = len(lines)
         match = self.re.match(lines[0])
-        if match:
-            line = lines.pop(0)
-            div = ctx_node.append(node.Element("div", "Added in version %s" % match.group(self.VERSION)))
-            div.set_attr("class", "since-version")
+        if match: ctx_node.append(node.Element("p", lines.pop(0)))
         return len(lines) < count
 
 class ParagraphProcessor(object):
@@ -195,6 +192,33 @@ class EmTextProcessor(TextProcessor):
     END = -1
     REPLACE = r"\*", "*"
 
+class SinceTextProcessor(TextProcessor):
+    re = reg_exp(r"@since(\s*[\d.]+)")
+    name = "span"
+    START = 6
+    END = None
+    REPLACE = None
+
+    def handle(self, text_node, match):
+        span = TextProcessor.handle(self, text_node, match)
+        span.text_content = "Added in version " + span.text_content.strip()
+        span.set_attr("class", "since-version")
+        return span
+
+class NoteTextProcessor(TextProcessor):
+    re = reg_exp(r"@note")
+    name = "span"
+    START = None
+    END = None
+    REPLACE = None
+
+    def handle(self, text_node, match):
+        span = TextProcessor.handle(self, text_node, match)
+        span.text_content = ""
+        span.set_attr("class", "note")
+        return span
+
+
 class LinkTextProcessor(TextProcessor):
     re = reg_exp(r"[^ ]{4,5}://[^ ]+")
     name = "a"
@@ -231,7 +255,9 @@ def handle(self, text_node, match):
                    EmTextProcessor(),
                    CodeTextProcessor(),
                    SpecialTextProcessor(),
-                   LinkTextProcessor()]
+                   LinkTextProcessor(),
+                   SinceTextProcessor(),
+                   NoteTextProcessor()]
 
 def process(lines):
     root = node.Root()

df2/protoobjects.py

@@ -191,6 +191,18 @@ def version(self):
         try: return self.options.version.value.strip("\"")
         except AttributeError: return ""
 
+    @property
+    def command_names(self):
+        cmds = map(lambda c: c.name, self.commands)
+        cmds.sort()
+        return cmds
+
+    @property
+    def event_names(self):
+        evs = map(lambda e: e.name, self.events)
+        evs.sort()
+        return evs
+
     def __getattr__(self, key):
         for t in [self.commands, self.events]:
             for m in t: