first beta

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 	<footer>
-		<p>&copy; {{ now.Year }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></p>
+		<p>&copy; {{ now.Year }} <a href="/">{{ .Site.Title }}</a></p>
 	</footer>
 
 	<script src="{{ .Site.BaseURL }}main.js" charset="utf-8"></script>

main.js

@@ -14,13 +14,14 @@ require('./fonts/opensans/opensans.css');
 
 var m = require('mithril');
 
-console.log("DataItems", DataItems);
+// console.log("DataItems", DataItems);
 
 var DataItemsBySlug = {};
-for (item of DataItems) {
-  DataItemsBySlug[item.slug] = item;
+for (item in DataItems) {
+  // console.log(item);
+  DataItemsBySlug[DataItems[item].slug] = DataItems[item];
 }
-console.log("DataItemsBySlug", DataItemsBySlug);
+// console.log("DataItemsBySlug", DataItemsBySlug);
 
 //     __    _       __
 //    / /   (_)___  / /__
@@ -31,12 +32,21 @@ var _Link = {
   targetslug:"",
   opened:false,
   oninit: function(vn){
+    // console.log("vn.attrs", vn.attrs);
     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]);
+      // console.log('vn.state.targetslug', vn.state);
+      return m('div', {'class':'opened-link'},
+          [
+            m('span', {'class':"link text"}, vn.children),
+            m(_Item, DataItemsBySlug[vn.state.targetslug])
+          ]
+        );
+
+
     }else{
       return m('a', {
           'class':'link',
@@ -64,6 +74,7 @@ var _Text = {
     // initiaize text childNodes array
     vn.state.textchilds = [];
     // parse html string to virtual dom
+    // console.log('vn.attrs.text',vn.attrs.text);
     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;
@@ -81,18 +92,21 @@ var _Text = {
           if(typeof childs[i].childNodes[j].localName != "undefined"){
             switch (childs[i].childNodes[j].localName) {
               case 'a':
+                // console.log('childs[i].childNodes[j]', childs[i].childNodes[j]);
                 p.childs.push({
                   tag:'a',
-                  href:childs[i].childNodes[j].href,
+                  href:childs[i].childNodes[j].attributes.href.value,
                   text:childs[i].childNodes[j].innerHTML
                 });
                 break;
             }
           }else{
             // if textnode
+            // console.log(childs[i].childNodes[j]);
+            // console.log("["+childs[i].childNodes[j].textContent+"]");
             p.childs.push({
               tag:'#text',
-              text:childs[i].childNodes[j].data
+              text:childs[i].childNodes[j].textContent //+ (childs[i].childNodes[j].nextSibling ? " " : "")
             });
           }
         }
@@ -108,6 +122,7 @@ var _Text = {
       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) {
+            console.log('c',c);
           // return p.childs.map(function(c,j) {
             // create text and link node
             switch (c.tag) {
@@ -118,13 +133,14 @@ var _Text = {
                   }, c.text);
                 break;
               case '#text':
+                // console.log("["+c.text+"]");
                 return m.trust(c.text);
                 break;
             }
           }) // /map
-        ) // /m.div.paragraph
+        ); // /m.div.paragraph
       }) // /map
-    ) // /m.div.text
+    ); // /m.div.text
   } // view:
 }
 
@@ -134,7 +150,15 @@ var _Text = {
 //  _/ // /_/  __/ / / / / /
 // /___/\__/\___/_/ /_/ /_/
 var _Item = {
+  slug:null,
+  part:null,
+  type:null,
   active:0,
+  oninit: function(vn){
+    // console.log('vn.attrs', vn.attrs);
+    vn.state.slug = vn.attrs.slug;
+    vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
+  },
   view: function(vn){
     return m("section", {
         'id':vn.attrs.slug,
@@ -147,7 +171,7 @@ var _Item = {
             onclick: function(e){
               vn.state.active = vn.state.active ? 0 : 1;
             }
-          }, vn.attrs.title),
+          }, "Part "+vn.state.part+" : "+vn.attrs.title),
         // create text node
         m(_Text, {'text':vn.attrs.text, 'slug':vn.attrs.slug})
       ]

scss/main.scss

@@ -5,25 +5,38 @@
 // @Last modified time: 18-04-2017
 // @License: GPL-V3
 
+$fs:16px;
+
+@mixin base_font{
+  font-family: 'amiri', sans-serif;
+  font-size: 16px;
+  font-kerning: auto;
+  line-height: 1.4;
+}
 
 html, body{
-  font-size: 16px;
-  font-family: 'amiri', sans-serif;
+  @include base_font;
   position: relative;
+  margin:0;
+  padding:0;
 }
 
 #app{
   position: relative;
+  text-align: center;
+  margin: 0 auto;
 }
 
 main#content{
   display:inline-block;
-  margin: 0 auto;
+  text-align: left;
 }
 
 section.item{
-  width:350px;
+  width:450px;
   margin: 1em 0;
+  overflow-x: visible;
+  @include base_font;
   // max-height:14px;
   // overflow: hidden;
   // transition: max-height 0.5s ease-in-out;
@@ -33,15 +46,32 @@ section.item{
 
   h1{
     font-size: 0.750em;
+    font-weight: 300;
     margin: 0;
     cursor:pointer;
   }
 
-  div.text div.paragraph{
-    margin-bottom: 1em;
-  }
-  div.text section.item{
-    padding-left:2em;
-    border-left: 1px solid #999;
+  div.text{
+    font-size: 1.3em;
+    div.paragraph{
+      margin-bottom: 1em;
+
+      div.opened-link{
+        display:inline;
+      }
+      a.link, span.link.text{
+        font-weight: 600;
+        text-decoration: none;
+        color: inherit;
+      }
+      span.link.text:after{
+        content:':'
+      }
+      section.item{
+        padding-left:2em;
+        border-left: 1px solid #999;
+      }
+    }
+
   }
 }