added workflow example

_data/sidebars/product2_sidebar.yml

@@ -36,10 +36,6 @@ entries:
       url: /p2_sample2/
       output: web, pdf
 
-  - title: Another heading
-    output: web, pdf
-    folderitems:
-
     - title: Sample 3
       url: /p2_sample3/
       output: web, pdf
@@ -48,14 +44,14 @@ entries:
       url: /p2_sample4/
       output: web, pdf
 
-  - title: Another heading
-    output: web, pdf
-    folderitems:
-
     - title: Sample 5
       url: /p2_sample5/
       output: web, pdf
 
+  - title: Another heading
+    output: web, pdf
+    folderitems:
+
     - title: Sample 6
       url: /p2_sample6/
       output: web, pdf

_includes/custom/usermap.html

@@ -0,0 +1,16 @@
+
+<div id="userMap">
+    
+            <div class="content"><a href="{{site.data.urls.p2_sample1.url}}"><div class="box box1">Connect to ADB</div></a></div>
+            <div class="arrow">→</div>
+            <div class="content"><a href="{{site.data.urls.p2_sample2.url}}"><div class="box box2">Download and Build the Starter Kit</div></a></div>
+            <div class="arrow">→</div>
+            <div class="content"><a href="{{site.data.urls.p2_sample3.url}}"><div class="box box3">Take a Tour</div></a></div>
+            <div class="arrow">→</div>
+            <div class="content"><a href="{{site.data.urls.p2_sample4.url}}"><div class="box box4">Load Your Widgets</div></a></div>
+            <div class="arrow">→</div>
+            <div class="content"><a href="{{site.data.urls.p2_sample5.url}}"><div class="box box5">Query for Something</div></a></div>
+<div class="clearfix"></div>
+    
+</div>
+

_includes/custom/usermap.md

@@ -1,22 +0,0 @@
-
-<div id="userMap">
- 
-    <table>
-        <tr>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box1">Connect to ADB</div></a></td>
-            <td>→</td>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box2">Download and Build the Starter Kit</div></a></td>
-            <td>→</td>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box3">Take a Tour</div></a></td>
-            <td>→</td>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box4">Load Your Widgets</div></a></td>
-            <td>→</td>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box5">Query for Something</div></a></td>
-            <td>→</td>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box6">Filter for Something</div></a></td>
-            <td>→</td>
-            <td><a href="{{site.data.urls.p2_sample1.url}}"><div class="box7">Configure this Gizmo</div></a></td>
-        </tr>
-    </table>
-</div>
-

_layouts/page.html

@@ -6,6 +6,18 @@ layout: default
    <h1 class="post-title-main">{% if page.homepage == true %} {{site.homepage_title}} {% else %}{{ page.title }}{% endif %}</h1>
 </div>
 
+{% if page.map == true %}
+
+<script>
+    $(document).ready ( function(){
+        $('.box{{page.box_number}}').addClass('active');
+    });
+</script>
+
+{% include custom/{{page.map_name}}.html %}
+
+{% endif %}
+
 <div class="post-content">
 
    {% if page.summary %}

css/customstyles.css

@@ -1036,24 +1036,27 @@ table thead th code.highlighter-rouge {
 }
 
 
-.box, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12  {
+.box {
-    padding: 15px;
+    padding: 10px;
     border: 1px solid #888;
     box-shadow: 2px 2px 4px #dedede;
-    margin: 5px 5px;
     width: 100px;
     height: 80px;
     background-color: #f5f5f5;
     font-family: Arial;
     font-size: 12px;
     hyphens: auto;
+    float: left;
+    font-size: 12px;
+}
 
+.box:hover {
+    background-color: #f0f0f0;
 }
 
 #userMap {
-    max-width: 900px;
+    /*overflow-x: scroll;*/
-    overflow-x: scroll;
+    /*overflow-y: hidden;*/
-    overflow-y: hidden;
     padding: 20px;
 }
 
@@ -1067,16 +1070,39 @@ h2.userMapTitle {
     font-family: Arial;
 }
 
-#userMap table td {
-    vertical-align: middle;
-    font-size: x-large;
-}
-
 #userMap a:hover {
     text-decoration: none;
   }
 
-.box: hover {
+div.arrow {
-    background-color: #444444;
+    max-width: 50px;
-    color: white;
+    margin-left: 15px;
+    margin-right: 15px;
+    font-size: 20px;
+}
+
+div.content {
+    max-width: 110px
+}
+
+#userMap div.arrow, #userMap div.content {
+    float: left;
+}
+
+.clearfix {
+    clear: both;
+}
+
+
+#userMap div.arrow {
+    position: relative;
+    top: 30px;
+}
+
+.box1 {
+    margin-left:0px;
+}
+
+div.box.box1 {
+    margin-left: -20px;
 }

index.md

@@ -18,9 +18,6 @@ If you're used to running Jekyll sites, you can type the normal jekyll command,
 
 ## Customize the Gemfile
 
-
-
-## 
 Open the Gemfile (in any text editor) in the Jekyll doc theme project:
 
 ```

product2/p2_sample1.md

@@ -4,15 +4,11 @@ keywords: sample
 summary: "This is just a sample topic..."
 sidebar: product2_sidebar
 permalink: /p2_sample1/
+map: true
+map_name: usermap
+box_number: 1
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box1').addClass('active');
-});
-</script>
-
-{% include custom/usermap.md %}
 
 ## Sample Content
 

product2/p2_sample2.md

@@ -4,15 +4,12 @@ keywords: sample
 summary: "This is just a sample topic..."
 sidebar: product2_sidebar
 permalink: /p2_sample2/
+map: true
+map_name: usermap
+box_number: 2
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box2').addClass('active');
-});
-</script>
 
-{% include custom/usermap.md %}
 
 ## Sample Content
 

product2/p2_sample3.md

@@ -4,16 +4,11 @@ keywords: sample
 summary: "This is just a sample topic..."
 sidebar: product2_sidebar
 permalink: /p2_sample3/
+map: true
+map_name: usermap
+box_number: 3
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box3').addClass('active');
-});
-</script>
-
-{% include custom/usermap.md %}
-
 ## Sample Content
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

product2/p2_sample4.md

@@ -4,16 +4,11 @@ keywords: sample
 summary: "This is just a sample topic..."
 sidebar: product2_sidebar
 permalink: /p2_sample4/
+map: true
+map_name: usermap
+box_number: 4
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box4').addClass('active');
-});
-</script>
-
-{% include custom/usermap.md %}
-
 ## Sample Content
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

product2/p2_sample5.md

@@ -4,17 +4,11 @@ keywords: sample
 summary: "This is just a sample topic..."
 sidebar: product2_sidebar
 permalink: /p2_sample5/
+map: true
+map_name: usermap
+box_number: 5
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box5').addClass('active');
-});
-</script>
-
-{% include custom/usermap.md %}
-
-
 ## Sample Content
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

product2/p2_sample6.md

@@ -6,14 +6,6 @@ sidebar: product2_sidebar
 permalink: /p2_sample6/
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box6').addClass('active');
-});
-</script>
-
-{% include custom/usermap.md %}
-
 
 ## Sample Content
 

product2/p2_sample7.md

@@ -6,14 +6,6 @@ sidebar: product2_sidebar
 permalink: /p2_sample7/
 ---
 
-<script>
-$(document).ready ( function(){
-    $('.box7').addClass('active');
-});
-</script>
-
-{% include custom/usermap.md %}
-
 
 ## Sample Content