widget help: podpress, podlove, css

static/style.css

@@ -1189,7 +1189,15 @@ pre {
   font-size: 85%;
   color: #333;
   margin: 0.5em 0;
-  padding: 0.5em 4em;
-  background-color: #ccc;
+  padding: 0.5em 1em;
+  background-color: white;
   overflow: auto;
-}
+}
+
+.toc {
+  list-style-type: none;
+  padding: 0.1em;
+  margin-left: 0.9em;
+  margin-right: 0.9em;
+  background: white;
+}

templates/help-widget.hamlet

@@ -3,12 +3,30 @@ $newline always
   <h2>Widgets
   <p>We provide easy to use JavaScript snippets for browser-side integration. They use the API.
 
-  <h3>Widget for Podpress
+  <h3>Contents
+  <ul .toc>
+    <li>
+      <a href="#podpress-plugin">Plugin for Podpress
+    <li>
+      <a href="#podpress">Manual installation for Podpress
+    <li>
+      <a href="#powerpress">Widget for Powerpress
+    <li>
+      <a href="#podlove">Native Support in Podlove
+    <li>
+      <a href="#what-else">What else?
+    <li>
+      <a href="#roll-your-own">Roll your own
+
+  <h3 #podpress-plugin>Plugin for Podpress
   <img src="/static/podpress-widget.png">
   <p>
-    Install #
-    <a href="http://plugins.trac.wordpress.org/browser/podpress/trunk/optional_files/bitlove_scripts_for_podpress/bitlove_scripts_for_podpress.php">the plugin by Tim Berger
-    or include the following snippet in your site's template:
+    Install
+    <a href="http://plugins.trac.wordpress.org/browser/podpress/trunk/optional_files/bitlove_scripts_for_podpress/bitlove_scripts_for_podpress.php">the plugin by Tim Berger.
+
+  <h3 #podpress>Manual installation for Podpress
+  <p>
+    Alternatively, include the following snippet in your site's template:
   <pre>&lt;script src="http://bitlove.org/widget/podpress.js" type="text/javascript"&gt;&lt;/script&gt;
   <p>
     Make sure you put it after jQuery. Contact #
@@ -18,20 +36,30 @@ $newline always
     The button is this image: #
     <a href="/static/bitlove-button.png"><img src="/static/bitlove-button.png">
 
-  <h3>Widget for Powerpress
+  <h3 #powerpress>Widget for Powerpress
   <img src="/static/powerpress-widget.png">
   <p>Include the following snippet in your site's template:
   <pre>&lt;script src="http://bitlove.org/widget/powerpress.js" type="text/javascript"&gt;&lt;/script&gt;
   <p>
     Please #
     <a href="mailto:mail@bitlove.org">contact us
     \ if you encounter any problems
-  <h3>What else?
+
+  <h3 #podlove>Native Support in Podlove
+  <img src="/static/podlove-widget.png">
+  <p>
+    Haven't decided what to use for podcast publishing? We recommend
+    <a href="http://wordpress.org/extend/plugins/podlove-podcasting-plugin-for-wordpress/">
+      Podlove Podcast Publisher.
+    One checkbox in its configuration enables built-in support for Bitlove downloads.
+
+  <h3 #what-else>What else?
   <p>
     It's trivial to come up with a snippet. #
     <a href="mailto:mail@bitlove.org">Tell us
     \ about your site and rainbows will happen.
-  <h3>Roll your own
+
+  <h3 #roll-your-own>Roll your own
   <p>Start with the following snippet:
   <pre>#{example}
   <p>