webdocs: enhance support for UML and FLOW diagrams

Change-Id: Id346b30e8a1f8705d0f42f6d2e1254c0cf926221
Signed-off-by: Stephane Desneux <stephane.desneux@iot.bzh>

8 files changed, 47 insertions, 196 deletions

diff --git a/site/_includes/head.html b/site/_includes/head.html
index 87596c7..1a1aaad 100644
--- a/site/_includes/head.html
+++ b/site/_includes/head.html
@@ -51,7 +51,7 @@
         <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
-    <script type="text/javascript">
+    <script defer type="text/javascript">
         var disqus_developer = {{ site.disqus.devmode }}; // this would set it to developer mode
     </script>
 
diff --git a/site/_layouts/README b/site/_layouts/README
new file mode 100644
index 0000000..08bcee8
--- /dev/null
+++ b/site/_layouts/README
@@ -0,0 +1,12 @@
+Layout hierarchy:
+-----------------
+
+base
+  |
+  `--> withindex --> <generated sections layouts>
+  |
+  `--> agl --> page
+                |
+                `--> contribute
+                |
+                `--> blog --> post --> umlpost
diff --git a/site/_layouts/base.html b/site/_layouts/base.html
index db0c8c7..1ccb6b5 100644
--- a/site/_layouts/base.html
+++ b/site/_layouts/base.html
@@ -11,7 +11,7 @@ analytics_id: {{ site.ganalytics }}
     {% include algolia.html %}
             
     {% for script in layout.scripts %}
-        <script src="{{ site.baseurl }}/static/js/{{script}}"></script>
+        <script defer src="{{ site.baseurl }}/static/js/{{script}}"></script>
     {% endfor %}
 
 </body>
diff --git a/site/_layouts/umlflowdoc.html b/site/_layouts/umlflowdoc.html
deleted file mode 100644
index ba1c32e..0000000
--- a/site/_layouts/umlflowdoc.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: base
-
-scripts: 
-  - lib/raphael-min.js
-  - lib/underscore-min.js
-  - lib/sequence-diagram-min.js
-  - lib/flowchart-latest.js
-  - process-uml.js
----
-
-<div class="techdoc"> 
-    <img class="icone" src="{{site.assets.icone}}">
-    <h1>{{ page.title }}</h1> 
-    <div class="technical-doc">
-      {{ content }}
-    </div>
-</div>
diff --git a/site/_layouts/umlpost.html b/site/_layouts/umlpost.html
index 9125136..dac8efe 100644
--- a/site/_layouts/umlpost.html
+++ b/site/_layouts/umlpost.html
@@ -77,6 +77,3 @@ scripts:
     </div>
 </div>
 
-{% for script in layout.scripts %}
-    <script src="{{ site.baseurl }}/static/js/{{script}}"></script>
-{% endfor %}
diff --git a/site/_posts/2016-07-02-markdown-tuto.md b/site/_posts/2016-07-02-markdown-tuto.md
index 387c58a..c1a689a 100644
--- a/site/_posts/2016-07-02-markdown-tuto.md
+++ b/site/_posts/2016-07-02-markdown-tuto.md
@@ -15,9 +15,10 @@ Basic reference for Markdown documentation with:
 <!--more-->
 
 **References**:
-- Kramdown http://kramdown.gettalong.org/quickref.html
-- UML diagrams http://bramp.github.io/js-sequence-diagrams/
-- Flow charts http://adrai.github.io/flowchart.js/
+
+- Kramdown [http://kramdown.gettalong.org/quickref.html]
+- UML diagrams [http://bramp.github.io/js-sequence-diagrams/]
+- Flow charts [http://adrai.github.io/flowchart.js/]
 
 
 Markdown Extra
@@ -34,11 +35,10 @@ StackEdit supports **Markdown Extra**, which extends **Markdown** syntax with so
 
 **Markdown Extra** has a special syntax for tables:
 
-Item     | Value
--------- | ---
-Computer | $1600
-Phone    | $12
-Pipe     | $1
+| Item     | Value
+| Computer | $1600
+| Phone    | $12
+| Pope     | $1
 
 You can specify column alignment with one or two colons:
 
@@ -49,6 +49,30 @@ You can specify column alignment with one or two colons:
 | Pipe     | $1    |  234  |
 
 
+|-----------------+------------+-----------------+----------------|
+| Default aligned |Left aligned| Center aligned  | Right aligned  |
+|-----------------|:-----------|:---------------:|---------------:|
+| First body part |Second cell | Third cell      | fourth cell    |
+| Second line     |foo         | **strong**      | baz            |
+| Third line      |quux        | baz             | bar            |
+|-----------------+------------+-----------------+----------------|
+| Second body     |            |                 |                |
+| 2 line          |            |                 |                |
+|=================+============+=================+================|
+| Footer row      |            |                 |                |
+|-----------------+------------+-----------------+----------------|
+
+| Header1 | Header2 | Header3 |
+|:--------|:-------:|--------:|
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|----
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|=====
+| Foot1   | Foot2   | Foot3
+{: rules="groups"}
+
 ### Definition Lists
 
 **Markdown Extra** has a special syntax for definition lists too:
diff --git a/site/misc/demo/index.md b/site/misc/demo/index.md
deleted file mode 100644
index 196e9ad..0000000
--- a/site/misc/demo/index.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-
-title: Test Markdown to UML
-author: Fulup Ar Foll (IoT.bzh)
-date: 2016-06-30
-
-categories: [architecture, appfw]
-tags: [architecture, signal, message]
-layout: umlflowdoc
-
----
-
-Markdown Extra
---------------------
-
-StackEdit supports **Markdown Extra**, which extends **Markdown** syntax with some nice features.
-
-> **Tip:** You can disable any **Markdown Extra** feature in the **Extensions** tab of the <i class="icon-cog"></i> **Settings** dialog.
-
-> **Note:** You can find more information about **Markdown** syntax [here][2] and **Markdown Extra** extension [here][3].
-
-
-### Tables
-
-**Markdown Extra** has a special syntax for tables:
-
-Item     | Value
--------- | ---
-Computer | $1600
-Phone    | $12
-Pipe     | $1
-
-You can specify column alignment with one or two colons:
-
-| Item     | Value | Qty   |
-| :------- | ----: | :---: |
-| Computer | $1600 |  5    |
-| Phone    | $12   |  12   |
-| Pipe     | $1    |  234  |
-
-
-### Definition Lists
-
-**Markdown Extra** has a special syntax for definition lists too:
-
-Term 1
-Term 2
-:   Definition A
-:   Definition B
-
-Term 3
-
-:   Definition C
-
-:   Definition D
-
-	> part of definition D
-
-
-### Fenced code blocks
-
-GitHub's fenced code blocks are also supported with **Highlight.js** syntax highlighting:
-
-```
-// Foo
-var bar = 0;
-```
-
-> **Tip:** To use **Prettify** instead of **Highlight.js**, just configure the **Markdown Extra** extension in the <i class="icon-cog"></i> **Settings** dialog.
-
-> **Note:** You can find more information:
-
-> - about **Prettify** syntax highlighting [here][5],
-> - about **Highlight.js** syntax highlighting [here][6].
-
-
-### Footnotes
-
-You can create footnotes like this[^footnote].
-
-  [^footnote]: Here is the *text* of the **footnote**.
-
-
-### SmartyPants
-
-SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:
-
-|                  | ASCII                        | HTML              |
- ----------------- | ---------------------------- | ------------------
-| Single backticks | `'Isn't this fun?'`            | 'Isn't this fun?' |
-| Quotes           | `"Isn't this fun?"`            | "Isn't this fun?" |
-| Dashes           | `-- is en-dash, --- is em-dash` | -- is en-dash, --- is em-dash |
-
-
-### Table of contents
-
-You can insert a table of contents using the marker `[TOC]`:
-
-1. TOC
-{:toc}
-
-
-### UML diagrams
-
-You can also render sequence diagrams like this:
-
-~~~ 
-Alice->Bob: Hello Bob, how are you?
-Note right of Bob: Bob thinks
-Bob-->Alice: I am good thanks!
-~~~
-
-~~~ UML
- Alice->Bob: Hello Bob, how are you?
- Note right of Bob: Bob thinks
- Bob-->Alice: I am good thanks!
-~~~
-
-``` UML-hand
-Alice->Bob: Hello Bob, how are you?
-Note right of Bob: Bob thinks
-Bob-->Alice: I am good thanks!
-```
-
-And flow charts like this:
-
-```
- st=>start: Start
- e=>end
- op=>operation: My Operation
- cond=>condition: Yes or No?
-
- st->op->cond
- cond(yes)->e
- cond(no)->op
-```
-
-``` FLOW
-st=>start: Start
-e=>end
-op=>operation: My Operation
-cond=>condition: Yes or No?
-
-st->op->cond
-cond(yes)->e
-cond(no)->op
-```
-
-
-> **Note:** You can find more information:
-
-> - about **Sequence diagrams** syntax [here][7],
-> - about **Flow charts** syntax [here][8].
-
-
-  [1]: http://math.stackexchange.com/
-  [2]: http://daringfireball.net/projects/markdown/syntax "Markdown"
-  [3]: https://github.com/jmcmanus/pagedown-extra "Pagedown Extra"
-  [4]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
-  [5]: https://code.google.com/p/google-code-prettify/
-  [6]: http://highlightjs.org/
-  [7]: http://bramp.github.io/js-sequence-diagrams/
-  [8]: http://adrai.github.io/flowchart.js/
diff --git a/site/static/js/process-uml.js b/site/static/js/process-uml.js
index 8937612..ea640a0 100644
--- a/site/static/js/process-uml.js
+++ b/site/static/js/process-uml.js
@@ -56,14 +56,13 @@ $(document).ready(function() {
             element.appendChild (iDiv);
                 
             try {
-            var diagram=parser.parse (source);
+                var diagram=parser.parse (source);
                 diagram.drawSVG(iDiv, {theme: style});               
             } catch (err) {
                 element.classList.add ("error");
                 element.innerText="<p>Fail to process UML/Flow<p>" + source + "<br>" +err;
                 console.log ("Error[%s]: class=%s err=%s diagram=%s", subclass[1], element.className, err, source);               
             }
-
         }        
     }