From 3ea07b131aa2162fbad323bdc78e5f0af2f018a3 Mon Sep 17 00:00:00 2001
From: Damien Cassou <damien.cassou@gmail.com>
Date: Wed, 17 Sep 2014 14:17:38 +0200
Subject: [PATCH] Working on annotated paragraphs

---
 PillarChap/Pillar.pillar                  | 49 ++++++++++++++++++++++-
 _support/html/css/annotated-paragraph.css | 32 +++++++++++----
 _support/html/js/annotated-paragraphs.js  |  7 ++++
 _support/templates/chapter.html.template  |  3 ++
 4 files changed, 83 insertions(+), 8 deletions(-)
 create mode 100644 _support/html/js/annotated-paragraphs.js

diff --git a/PillarChap/Pillar.pillar b/PillarChap/Pillar.pillar
index 04e5b42..0e4ea04 100644
--- a/PillarChap/Pillar.pillar
+++ b/PillarChap/Pillar.pillar
@@ -266,7 +266,54 @@ generates a todo annotation
 
 @@todo this is a todo annotation
 
-The annotation (e.g., ==todo== and ==note==) can be any word that is meaningful to the author. In HTML, annotated paragraphs triggers the generation of a  paragraph with the annotation as the paragraph class. In LaTeX, an environment with the annotation name is generated.
+The annotation (e.g., ==todo== and ==note==) can be any word that is meaningful to the author. In HTML, annotated paragraphs triggers the generation of a  paragraph with the annotation as the paragraph class. In LaTeX, an environment with the annotation name is generated. In HTML, you can tweak the output to make it look nice, for example with such JavaScript code:
+
+[[[language=javascript
+// Wraps paragraphs with class pClass inside a div and adds an H4 element with pTitle.
+function transformAnnotatedParagraphs(pClass, pTitle) {
+    $("p." + pClass).wrap( "<div class='annotated-paragraph "
+                           + pClass + "' />" ).prepend("<h4>"+ pTitle +"</h4>");
+}
+
+transformAnnotatedParagraphs("note", "Note");
+transformAnnotatedParagraphs("todo", "To do");
+]]]
+
+Above code will prepend the titles "Note" and "To do" to the ==@@note== and ==@@todo== paragraphs. You can make that looks nice using a little bit of CSS:
+
+[[[language=css
+.annotated-paragraph {
+    margin: 20px 0;
+    padding: 15px 30px 15px 15px;
+    border-left: 5px solid #eee;
+}
+
+.annotated-paragraph h4 {
+  margin-top: 0;
+}
+
+.annotated-paragraph p:last-child {
+    margin-bottom: 0;
+}
+
+.note {
+    background-color: #f0f7fd;
+    border-color: #d0e3f0;
+}
+
+.note h4 {
+    color: #3a87ad;
+}
+
+.todo {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.todo h4 {
+    color: #3c763d;
+}
+]]]
 
 !!!Lists
 
diff --git a/_support/html/css/annotated-paragraph.css b/_support/html/css/annotated-paragraph.css
index d868a75..ad4c26e 100644
--- a/_support/html/css/annotated-paragraph.css
+++ b/_support/html/css/annotated-paragraph.css
@@ -1,13 +1,31 @@
-p.todo {
+.annotated-paragraph {
     margin: 20px 0;
     padding: 15px 30px 15px 15px;
     border-left: 5px solid #eee;
-    color: #3A87AD;
 }
 
-p.note {
-    margin: 20px 0;
-    padding: 15px 30px 15px 15px;
-    border-left: 5px solid #eee;
-    color: #B94A48;
+.annotated-paragraph h4 {
+  margin-top: 0;
+}
+
+.annotated-paragraph p:last-child {
+    margin-bottom: 0;
+}
+
+.note {
+    background-color: #f0f7fd;
+    border-color: #d0e3f0;
+}
+
+.note h4 {
+    color: #3a87ad;
+}
+
+.todo {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.todo h4 {
+    color: #3c763d;
 }
\ No newline at end of file
diff --git a/_support/html/js/annotated-paragraphs.js b/_support/html/js/annotated-paragraphs.js
new file mode 100644
index 0000000..80f7ebc
--- /dev/null
+++ b/_support/html/js/annotated-paragraphs.js
@@ -0,0 +1,7 @@
+function transformAnnotatedParagraphs(pClass, pTitle) {
+    $("p." + pClass).wrap( "<div class='annotated-paragraph "
+                           + pClass + "' />" ).prepend("<h4>"+ pTitle +"</h4>");
+}
+
+transformAnnotatedParagraphs("note", "Note");
+transformAnnotatedParagraphs("todo", "To do");
diff --git a/_support/templates/chapter.html.template b/_support/templates/chapter.html.template
index e26704e..7042c45 100644
--- a/_support/templates/chapter.html.template
+++ b/_support/templates/chapter.html.template
@@ -40,5 +40,8 @@
     <!-- Syntax highlighting of code blocks -->
     <script>hljs.initHighlightingOnLoad();</script>
 
+    <!-- Prettify annotated paragraphs-->
+    <script src="../_support/html/js/annotated-paragraphs.js"></script>
+
   </body>
 </html>