first alpha mithril version: display text, open nested crossref infinitly

layouts/index.html

@@ -1,10 +1,23 @@
 {{ partial "header.html" . }}
-	<main>
-		{{ $paginator := .Paginate (where .Site.Pages "Type" "item") }}
-		{{ range $paginator.Pages }}
-			{{ partial "item.html" . }}
-		{{ end }}
-		{{ partial "pagination.html" . }}
-	</main>
+	<div id="app">
+		<main id="main">
+			{{ range where .Data.Pages "Type" "item" }}
+				{{ partial "item.html" . }}
+			{{ end }}
+		</main>
+	</div>
 {{ partial "sidebar.html" . }}
+<script charset="utf-8">
+	var DataItems = [
+	{{ range where .Data.Pages "Type" "item" }}
+			{
+				"href": "{{ .RelPermalink }}",
+				"title": "{{ .Title }}",
+				"text": "{{ .Content }}",
+				"slug": "{{ .Slug }}"
+			},
+	{{ end }}
+	]
+</script>
+
 {{ partial "footer.html" . }}

layouts/partials/header.html

@@ -24,4 +24,3 @@
 			</ul>
 		</nav>
 	</header>
-	<div id="app"></div>

layouts/partials/item.html

@@ -1,4 +1,4 @@
-	<article>
+	<section id="{{ .Slug }}">
 		<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
 		{{ range .Params.tags }}
 		<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
@@ -6,4 +6,4 @@
 		<div>
 			{{ .Content }}
 		</div>
-	</article>
+	</section>

layouts/partials/sidebar.html

@@ -1,14 +1,4 @@
 	<aside>
 		<div>
-			<div>
-				<h3>LATEST POSTS</h3>
-			</div>
-			<div>
-				<ul>
-					{{ range first 5 .Site.Pages }}
-					<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
-					{{ end }}
-				</ul>
-			</div>
 		</div>
 	</aside>

main.js

@@ -1,17 +1,169 @@
-
-var m = require('mithril');
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   16-04-2017
+ * @Email:  bachir@figureslibres.io
+ * @Last modified by:   bach
+ * @Last modified time: 18-04-2017
+ * @License: GPL-V3
+ */
 
 require('normalize.css/normalize.css');
 require('./fonts/amiri/amiri.css');
 require('./fonts/dejavu/dejavu.css');
 require('./fonts/opensans/opensans.css');
 
-console.log("Hello");
+var m = require('mithril');
+
+console.log("DataItems", DataItems);
+
+var DataItemsBySlug = {};
+for (item of DataItems) {
+  DataItemsBySlug[item.slug] = item;
+}
+console.log("DataItemsBySlug", DataItemsBySlug);
+
+//     __    _       __
+//    / /   (_)___  / /__
+//   / /   / / __ \/ //_/
+//  / /___/ / / / / ,<
+// /_____/_/_/ /_/_/|_|
+var _Link = {
+  targetslug:"",
+  opened:false,
+  oninit: function(vn){
+    vn.state.targetslug = vn.attrs.href.replace(/^.*\/(.+)$/, "$1").replace(/^(.+)\/$/, "$1");
+  },
+  view: function(vn){
+    if(vn.state.opened){
+      // return m('div', "Hello "+vn.state.targetslug);
+      return m(_Item, DataItemsBySlug[vn.state.targetslug]);
+    }else{
+      return m('a', {
+          'class':'link',
+          'href':'#'+vn.state.targetslug,
+          'rel':vn.state.targetslug,
+          onclick:function(e){
+            e.preventDefault();
+            vn.state.opened = true;
+            return false;
+          }
+        }, vn.children);
+    }
+
+  }
+}
+
+//   ______          __
+//  /_  __/__  _  __/ /_
+//   / / / _ \| |/_/ __/
+//  / / /  __/>  </ /_
+// /_/  \___/_/|_|\__/
+var _Text = {
+  textchilds:[],
+  oninit: function(vn){
+    // initiaize text childNodes array
+    vn.state.textchilds = [];
+    // parse html string to virtual dom
+    var textdom = new DOMParser().parseFromString(vn.attrs.text, "text/html");
+    // get the text nodes (avoid html document extra)
+    var childs = textdom.getElementsByTagName('body')[0].childNodes;
+    // loop through childNodes
+    for (var i = 0; i < childs.length; i++) {
+      // if not textnode, get only first level paragraphs
+      if(typeof childs[i].localName != "undefined" && childs[i].localName == "p"){
+        var p = {
+          tag:"p",
+          childs:[]
+        }
+        // loop though paragraph child nodes (normaly only textnodes and <a>)
+        for (var j = 0; j < childs[i].childNodes.length; j++) {
+          // if not textnode
+          if(typeof childs[i].childNodes[j].localName != "undefined"){
+            switch (childs[i].childNodes[j].localName) {
+              case 'a':
+                p.childs.push({
+                  tag:'a',
+                  href:childs[i].childNodes[j].href,
+                  text:childs[i].childNodes[j].innerHTML
+                });
+                break;
+            }
+          }else{
+            // if textnode
+            p.childs.push({
+              tag:'#text',
+              text:childs[i].childNodes[j].data
+            });
+          }
+        }
+        vn.state.textchilds.push(p);
+      }
+    }
+  },
+  view: function(vn){
+    // console.log('_Text :: view : '+vn.attrs.slug, vn);
+    return m('div',
+      {'class':'text'},
+      // loop through first level paragraph
+      vn.state.textchilds.map(function(p,i){
+          // create paragraph and loop through text and link nodes
+          return m('div', {'class':'paragraph'}, p.childs.map(function(c,j) {
+          // return p.childs.map(function(c,j) {
+            // create text and link node
+            switch (c.tag) {
+              case 'a':
+                return m(_Link,
+                  {
+                    href:c.href
+                  }, c.text);
+                break;
+              case '#text':
+                return m.trust(c.text);
+                break;
+            }
+          }) // /map
+        ) // /m.div.paragraph
+      }) // /map
+    ) // /m.div.text
+  } // view:
+}
+
+//     ______
+//    /  _/ /____  ____ ___
+//    / // __/ _ \/ __ `__ \
+//  _/ // /_/  __/ / / / / /
+// /___/\__/\___/_/ /_/ /_/
+var _Item = {
+  active:0,
+  view: function(vn){
+    return m("section", {
+        'id':vn.attrs.slug,
+        'class':'item'+(vn.state.active ? ' active' : '')
+      },
+      [
+        // create title node
+        m("h1", {
+            'ref':vn.attrs.href,
+            onclick: function(e){
+              vn.state.active = vn.state.active ? 0 : 1;
+            }
+          }, vn.attrs.title),
+        // create text node
+        m(_Text, {'text':vn.attrs.text, 'slug':vn.attrs.slug})
+      ]
+    )
+  }
+};
 
-var app = {
-  view: function() {
-    return m('div', 'hello Ethica!')
+//   ______
+//  /_  __/_______  ___
+//   / / / ___/ _ \/ _ \
+//  / / / /  /  __/  __/
+// /_/ /_/   \___/\___/
+var _Tree = {
+  view: function(){
+    return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
   }
 }
 
-m.mount(document.getElementById('app'), app)
+m.mount(document.getElementById('app'), _Tree);

scss/main.scss

@@ -1,8 +1,47 @@
-/*
-Main scss
-*/
+// @Author: Bachir Soussi Chiadmi <bach>
+// @Date:   16-04-2017
+// @Email:  bachir@figureslibres.io
+// @Last modified by:   bach
+// @Last modified time: 18-04-2017
+// @License: GPL-V3
+
 
 html, body{
-  font-family: 'dejavu', sans-serif;
-  background-color: green;
+  font-size: 16px;
+  font-family: 'amiri', sans-serif;
+  position: relative;
+}
+
+#app{
+  position: relative;
+}
+
+main#content{
+  display:inline-block;
+  margin: 0 auto;
+}
+
+section.item{
+  width:350px;
+  margin: 1em 0;
+  // max-height:14px;
+  // overflow: hidden;
+  // transition: max-height 0.5s ease-in-out;
+  // &.active{
+  //   max-height:1000px;
+  // }
+
+  h1{
+    font-size: 0.750em;
+    margin: 0;
+    cursor:pointer;
+  }
+
+  div.text div.paragraph{
+    margin-bottom: 1em;
+  }
+  div.text section.item{
+    padding-left:2em;
+    border-left: 1px solid #999;
+  }
 }

webpack.config.js

@@ -1,3 +1,12 @@
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   11-04-2017
+ * @Email:  bachir@figureslibres.io
+ * @Last modified by:   bach
+ * @Last modified time: 16-04-2017
+ * @License: GPL-V3
+ */
+
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');