Formatting terms.

asset/style.css

@@ -14,31 +14,63 @@ body {
 
 * { box-sizing: border-box; }
 
-.optionsPanel {
+/* MENU */
-	width: 100px;
+.menu {
 	height: 100%;
 	background:#000;
 	position:fixed;
 	left: 0px;
 	top: 0px;
 	z-index: 100;
+	padding-top:20px;
+	font-size:1.5em;
 	/*-webkit-transition: width 0.05s ease-in-out;
   transition: width 0.05s ease-in-out;*/
 }
-.optionsPanel:hover {
+.menu:hover {
-	width: 370px;
+	/*width: 370px;*/
   /*-webkit-transition: width 0.05s ease-in-out;
   transition: width 0.05s ease-in-out;*/
-	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
+	/*box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);*/
+}
+.menu a {
+	color: #333;
+}
+.menu:hover a {
+	color: #999;
+}
+.menu:hover a:hover {
+	color: #eee;
+}
+.menu-item {
+	height: 50px;
+	padding-top:10px;
+	margin-top: 5px;
+	margin-right: 20px;
+}
+.menu-item-space {
+	margin-top: 50px;
+}
+.menu-item i {
+	width: 50%;
+	float: left;
+	padding: 2px 0 0 25px;
+	text-align: center;
+}
+.menu-item .count {
+	width: 50%;
+	float: left;
+	padding: 0 0 0 15px;
+	text-align: center;
 }
 
 .container {
 	margin-left: 120px;
 }
-.optionsPanel:hover + .container{
+/*.menu:hover + .container{
-  /*transition: 0.05s -webkit-filter ease-in;*/
+  transition: 0.05s -webkit-filter ease-in;
 	filter: blur(3px);
-}
+}*/
 
 .grid {
 	border: 1px;

content/Memex.ndtl

@@ -304,13 +304,13 @@ GNOSTICISM
 KOAN
   PERS : faun
   SRCE : Merveilles
-  TYPE : term
+  TYPE : list
   DATE : 12018-07-04
-  QOTE : "A paradoxical anecdote or riddle without a solution, used in Zen Buddhism to demonstrate the inadequacy of logical reasoning and provoke enlightenment."
-  TYPE : quote
   TAGS : philosohpy, paradox
   SEEN : true
   REVI : true
+  TERM 
+    > Koan: 'A paradoxical anecdote or riddle without a solution, used in Zen Buddhism to demonstrate the inadequacy of logical reasoning and provoke enlightenment.'
 
 GERMANY POST WW
   LINK : https://www.youtube.com/watch?v=DJUf8MxbcdA
@@ -449,8 +449,10 @@ LONG-TERM MEMORY
   TYPE : article
   DATE : 12018-07-06
   TAGS : psychology
-  TERM : Anki, Memex
+  TERM 
-  SEEN : false
+    > Anki: memory tool/app. Manually entered questions and answers. The app repeatedly asks you every question, every time you know the answer the duration it waits before asking that question again doubles. If you forget an answer then the wait duration resets to one day.
+    > Memex: external memory tool. 'Data storage and retrieval system'.
+  SEEN : true
 
 INDEPENDENCE IN CYBERSPACE
   PERS : ark
@@ -461,7 +463,7 @@ INDEPENDENCE IN CYBERSPACE
   TAGS : philosophy
   SEEN : true
 
-DESIGNING THE MIND OF AN ONLINE CURATOR
+CURATOR MIND DESIGN
   LINK : https://medium.com/@lintropy/murat-pak-designing-the-mind-of-an-online-curator-5785e373127d
   TYPE : article
   DATE : 12018-07-06
@@ -596,7 +598,8 @@ CIRCULAR ECONOMY
   DATE : 12018-07-06
   SEEN : true
   TAGS : society, economics
-  TERM : 'Circular economy'
+  TERM 
+    > Circular economy: 'is a regenerative system in which resource input and waste, emission, and energy leakage are minimised by slowing, closing, and narrowing energy and material loops. This can be achieved through long-lasting design, maintenance, repair, reuse, remanufacturing, refurbishing, and recycling. This is in contrast to a linear economy which is a "take, make, dispose" model of production.'
 
 SPACESHIP EARTH ECONOMICS
   LINK : http://arachnid.biosci.utexas.edu/courses/THOC/Readings/Boulding_SpaceshipEarth.pdf
@@ -729,7 +732,8 @@ GREENSPACE
   SRCE : Merveilles
   LINK : https://www.uea.ac.uk/about/-/it-s-official-spending-time-outside-is-good-for-you
   TYPE : article
-  TERM : greenspace
+  TERM 
+    > Greenspace: 'open, undeveloped land with natural vegetation as well as urban greenspaces, which include urban parks and street greenery.'
   SEEN : true
   DATE : 12018-07-08
   TAGS : psychology, economics, env
@@ -979,14 +983,14 @@ FRACTAL FILM CGI
   DATE : 12018-07-14
   SEEN : false
 
-VORTICAL FLOW + FRACTAL MACHINES
+VORTICAL + FRACTAL MACHINES
   LINK : https://www.fxguide.com/featured/suicide-squad-vortical-flows-and-fractal-machines/
   TYPE : article
   TAGS : fractal, film
   DATE : 12018-07-14
   SEEN : false
 
-VORTICAL FLOW + FRACTAL MACHINES
+FRACTALS AND ROUGHNESS
   LINK : https://www.ted.com/talks/benoit_mandelbrot_fractals_the_art_of_roughness
   TYPE : video
   TAGS : fractal, research
@@ -1058,7 +1062,7 @@ SYSTEMS ARE EVERYWHERE
 
 NZ EXCHANGE
   LINK : https://www.tokenroom.co.nz/
-  TYPE : service
+  TYPE : tool
   TAGS : bitcoin
   DATE : 12018-07-14
   SEEN : true
@@ -1096,7 +1100,8 @@ THE EMPIRE
 HORSESHIT PROBLEM
   LINK : http://www.duncantrussell.com/episodes/2018/7/12/taryn-southern
   TYPE : podcast
-  TERM : 'Horseshit problem' - a problem that seems existentially bad but is later solved indirectly by technology. The name refers to horse manue starting to be a major problem when horses were extensively used for transport their manure was everywhere and poisoning water etc. When the cars were invented and mass adopted it was suddenly not an issue.
+  TERM 
+    > Horseshit problem: a problem that seems existentially bad but is later solved trivially/indirectly by technology. The name refers to horse manue starting to be a major problem when horses were extensively used for transport, their manure ending up everywhere - poisoning water wells etc. When the car was invented and mass adopted it was suddenly no longer an issue.
   DATE : 12018-07-14
   SEEN : true
 
@@ -1153,13 +1158,15 @@ SAD POSTING
   SEEN : false
   TAGS : psychology
 
-CHANTING TEMPLES
+CHANNELING ARCHTECTURE
   LINK : http://viewzone2.com/archeosoundx.html
   TYPE : article
   DATE : 12018-07-15
   SEEN : false
   TAGS : architecture, history
-  TERM : '111hz'
+  TERM 
+    > 111hz: '...Findings of MRI scans suggest that at exactly 111hz, the brain switches off the prefrontal cortex, deactivating the language center, and temporaryly switches from left to right-sided dominance, that is responsible for intuition, creativity, holistic processing, inducing a state of meditation or a trance. Further research directed by Prof. Robert Jahn has tested acoustic behaviour in megalithic sites in the UK, showing that they sustained a strong resonance at a sound frequency between 95 and 120 heartz.' ...can't find source of the 'MRI' studies. Prof. Robert Jahn seems controversial. None-the-less interesting.
+  FILE : 12018-07-15_AcousticalResonancesOfAssortedAncientStructures.pdf
 
 THE PSYCHOLOGY OF MONEY
   LINK : http://www.collaborativefund.com/blog/the-psychology-of-money/
@@ -1196,7 +1203,8 @@ ZOMBIES REDACTED
   DATE : 12018-07-15
   SEEN : false
   TAGS : philosophy
-  TERM : 'Zombie' - 'in the philosophical usage of the term, is putatively a being that is exactly like you in every respect—identical behavior, identical speech, identical brain; every atom and quark in exactly the same position, moving according to the same causal laws of motion—except that your zombie is not conscious.'
+  TERM 
+    > Zombie: 'in the philosophical usage of the term, is putatively a being that is exactly like you in every respect—identical behavior, identical speech, identical brain; every atom and quark in exactly the same position, moving according to the same causal laws of motion—except that your zombie is not conscious.'
 
 KREMLIN MEDIA
   LINK : https://meduza.io/en/feature/2015/08/13/this-is-how-russian-internet-censorship-works
@@ -1273,6 +1281,56 @@ CLIENT SIDE ROUTING
   TYPE : article
   DATE : 12018-07-16
   SEEN : false
-  NOTE : Research for memex
   TAGS : web, code
+  PROJ : Memex
+
+NOON GUEST
+  LINK : https://aliceffekt.bandcamp.com/album/noon-guest
+  TYPE : music
+  DATE : 12018-07-16
+  SEEN : true
+  TAGS : game
+
+SECRETS OF THE CASTLE
+  LINK : https://www.youtube.com/watch?v=jWZWTwJ_5Ag
+  TYPE : video
+  DATE : 12018-07-16
+  SEEN : true
+  TAGS : history
+  NOTE : Modern day 25 year project to build a castle with traditional methods and tools.
+
+VICTORIAN FARM
+  LINK : https://www.youtube.com/watch?v=BodKsqkZk2Q
+  TYPE : video
+  DATE : 12018-07-16
+  SEEN : true
+  TAGS : history
+  TERM
+    > Shoddy: 'a type of woollen yarn produced by tearing old woollen rags into shreds and weaving the strands.'
+
+LOW TECH MAGAZINE
+  PERS : josh
+  SRCE : Merveilles
+  LINK : http://www.lowtechmagazine.com/
+  TYPE : list
+  DATE : 12018-07-16
+  SEEN : false
+  TAGS : history, solarpunk, env
+
+GWERN
+  PERS : neauoire
+  SRCE : Merveilles
+  LINK : http://www.gwern.net/
+  TYPE : list
+  DATE : 12018-07-16
+  SEEN : false
+  TAGS : history, psychology, science, ai, bitcoin, code, psychedelics, env
+
+ISOTOPE MANSONRY
+  LINK : https://isotope.metafizzy.co/
+  TYPE : tool
+  DATE : 12018-07-17
+  SEEN : true
+  TAGS : code, web
+  PROJ : Memex
 `

index.html

@@ -9,13 +9,14 @@
   <script src="asset/masonry.pkgd.min.js"></script>
 
   <script src="content/memex.ndtl"></script>
+  <script src="logic/runic.js"></script>
   <script src="logic/indental.js"></script>
   <script src="logic/main.js"></script>
 
   <title>memex</title>
 </head>
 <body>
-  <div class="optionsPanel"></div>
+  <div class="menu" id="menu"></div>
   <div class="container">
     <div class="grid" id="grid"></div>
   </div>

logic/main.js

@@ -3,14 +3,12 @@ function Main()
   // REFERENCE
   this.database = null;
   this.keys = null;
-  // this.page = 0;
-  this.lastEntry = -1;
   this.msnry = null;
   this.grid = null;
+  this.menu = null;
 
   // SETTINGS
   this.useMasonry = true;
-  this.postPerPage = 1000;
   this.divNamePre = 'item';
 
   // MAIN
@@ -21,6 +19,7 @@ function Main()
     this.processDatabase();
 
     this.grid = document.getElementById("grid");
+    this.menu = document.getElementById("menu");
 
     if (this.useMasonry)
     {
@@ -32,6 +31,8 @@ function Main()
         transitionDuration: 0,
       });
     }
+
+    this.displayStats(this.database);
   }
 
   this.start = function()
@@ -56,18 +57,12 @@ function Main()
       window.location.hash = target;
     }
 
+    var tempDatabase = {}
+
     if (target == 'home')
     {
       console.log('Display \'home\'');
-
+      tempDatabase = this.database;
-      this.grid.innerHTML = '';
-      this.displayEntries(this.database);
-
-      if (this.useMasonry)
-      {
-        this.msnry.reloadItems();
-        this.msnry.layout();
-      }
     }
     else
     {
@@ -79,7 +74,6 @@ function Main()
         // TAG
         console.log('Display tag \'' + splitTarget[1] + '\'');
 
-        var tempDatabase = {}
         for (i = 0; i < this.keys.length; i++) 
         { 
           let value = this.database[this.keys[i]];
@@ -94,15 +88,6 @@ function Main()
             }
           }
         }
-
-        this.grid.innerHTML = '';
-        this.displayEntries(tempDatabase);
-        
-        if (this.useMasonry)
-        {
-          this.msnry.reloadItems();
-          this.msnry.layout();
-        }
       }
       else if (splitTarget[0] == 'type')
       {
@@ -121,17 +106,20 @@ function Main()
             }
           }
         }
-
-        this.grid.innerHTML = '';
-        this.displayEntries(tempDatabase);
-        
-        if (this.useMasonry)
-        {
-          this.msnry.reloadItems();
-          this.msnry.layout();
-        }
       }
     }
+
+    // DISPLAY
+    this.grid.innerHTML = '';
+    this.displayEntries(tempDatabase);
+    
+    if (this.useMasonry)
+    {
+      this.msnry.reloadItems();
+      this.msnry.layout();
+    }
+
+    // this.displayStats(tempDatabase);
   }
 
   this.processDatabase = function()
@@ -142,6 +130,8 @@ function Main()
     for (i = 0; i < dbKeys.length; i++) 
     { 
       let value = this.database[dbKeys[i]];
+
+      // TAGS
       if (typeof value.TAGS !== 'undefined')
       {
         var tags = value.TAGS.split(",");
@@ -154,6 +144,25 @@ function Main()
         this.database[dbKeys[i]].TAGS = tags;
       }
 
+      // TERMS
+      if (typeof value.TERM !== 'undefined')
+      {
+        let termRunic = new Runic(value.TERM).raw;
+        let formattedTerms = [];
+
+        for (var t = 0; t < termRunic.length; t++) 
+        {
+          term = termRunic[t].substr(2).split(':');
+          for (var e = 0; e < term.length; e++) 
+          {
+            term[e] = term[e].trim();
+          }
+          formattedTerms.push(term);
+        }
+
+        this.database[dbKeys[i]].TERM = formattedTerms;
+      }
+
       this.database[dbKeys[i]].DIID = i;
     }
     console.log(this.database);
@@ -179,21 +188,157 @@ function Main()
 
   //document.addEventListener('mouseup',  (e)=>{ this.touch(e.target); e.preventDefault(); });
 
+  this.displayStats = function(db)
+  {
+    // CALCULATE
+    let dbKeys = Object.keys(db);
+    let types = {};
+    let terms = 0;
+    let i = 0;
+    while (i < dbKeys.length) 
+    {
+      // TYPE
+      if (typeof db[dbKeys[i]].TYPE !== 'undefined')
+      {
+        if (typeof types[db[dbKeys[i]].TYPE] !== 'undefined')
+        {
+          types[db[dbKeys[i]].TYPE] ++;
+        }
+        else
+        {
+          types[db[dbKeys[i]].TYPE] = 1;
+        }
+
+        if (typeof db[dbKeys[i]].TERM !== 'undefined')
+        {
+          terms += db[dbKeys[i]].TERM.length;
+        }
+      }
+      i++;
+    }
+    console.log(types);
+
+    // DISPLAY
+    let menuContent = ``;
+     
+    menuContent += `<a href='#home'>`;
+    menuContent += `<div class="menu-item">`;
+    menuContent += `<i class="fas fa-asterisk"></i><div class="count">${this.keys.length}</div>`;
+    menuContent += `</div>`;
+    menuContent += `</a>`;
+
+    if (typeof types['article'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-article'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="far fa-newspaper"></i><div class="count">${types['article']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['podcast'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-podcast'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-podcast"></i><div class="count">${types['podcast']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['video'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-video'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-tv"></i><div class="count">${types['video']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['list'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-list'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-file-alt"></i><div class="count">${types['list']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['book'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-book'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-book-open"></i><div class="count">${types['book']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['game'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-game'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-gamepad"></i><div class="count">${types['game']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['service'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-service'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-server"></i><div class="count">${types['service']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['lecture'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-lecture'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-chalkboard-teacher"></i><div class="count">${types['lecture']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['quote'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-quote'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-comment"></i><div class="count">${types['quote']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['tool'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-tool'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-wrench"></i><div class="count">${types['tool']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+    if (typeof types['music'] !== 'undefined')
+    {
+      menuContent += `<a href='#type-music'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-music"></i><div class="count">${types['music']}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+
+    if (terms > 0)
+    {
+      // menuContent += `<div class="menu-item-space"></div>`;
+      menuContent += `<a href='#term'>`;
+      menuContent += `<div class="menu-item">`;
+      menuContent += `<i class="fas fa-ribbon"></i><div class="count">${terms}</div>`;
+      menuContent += `</div>`;
+      menuContent += `</a>`;
+    }
+
+    this.menu.innerHTML = ``;
+    this.menu.innerHTML += menuContent;
+  }
+
   this.displayEntries = function(db)
   {
     var dbKeys = Object.keys(db);
-
-    //this.page += this.postPerPage;
-    //var i = this.lastEntry + 1;
     var i = 0;
     while (i < dbKeys.length) 
-    // while (i < Math.min(dbKeys.length, this.page)) 
     {
       this.buildEntry(db, dbKeys[i]);
-      this.lastEntry = i;
+      i++;
-      i += 1;
     }
-    // entries += this.doPagination();
   }
 
   this.buildEntry = function(db, key)
@@ -301,7 +446,10 @@ function Main()
     // TERM
     if (typeof value.TERM !== 'undefined')
     {
-      entry += `<div class="term"><i class="fas fa-ribbon textIcon"></i>${value.TERM}</div>`;
+      for (var i = 0; i < value.TERM.length; i++) 
+      {
+        entry += `<div class="term"><i class="fas fa-ribbon textIcon"></i><b>${value.TERM[i][0]}</b>: ${value.TERM[i][1]}</div>`;
+      }
     }
 
     // PROGRESS
@@ -313,28 +461,8 @@ function Main()
     entry += `</div>`;
 
     this.grid.innerHTML += entry;
-
-    // if (this.useMasonry)
-    // {
-    //   this.msnry.appended( entry );
-    // }
   }
 
-  // this.doPagination = function()
-  // {
-  //   return `
-  //   <div id="pagination">
-  //     <a id="loadmore" onClick="loadMore();">${this.lastEntry < this.keys.length -1 ? `Load more ▼` : ``}</a>
-  //   </div>
-  //   `
-  // }
-
-  // this.loadMore = function()
-  // {
-  //   pagination.remove();
-  //   document.getElementById("content").innerHTML += doJournal(this.database);
-  // }
-
   String.prototype.to_url = function()
   {
     return this.toLowerCase().replace(/ /g,"+").replace(/[^0-9a-z\+]/gi,"").trim();
@@ -417,13 +545,6 @@ function Main()
 //   function() { console.log("forward"); main.load(); }
 // ));
 
-// var doThing = function()
-// {
-//   console.log('do thing');
-// }
-
-// window.addEventListener("hashchange", doThing());
-
 window.addEventListener("hashchange", navigate );
 
 function navigate()

logic/runic.js

@@ -1,6 +1,5 @@
-function Runic(raw,tables)
+function Runic(raw)
 {
-  this.tables = tables;
   this.raw = raw;
 
   this.runes = {
@@ -11,13 +10,11 @@ function Runic(raw,tables)
     "!":{glyph:"!",tag:"table",sub:"tr",wrap:"th",class:"outline",stash:true},
     "|":{glyph:"|",tag:"table",sub:"tr",wrap:"td",class:"outline",stash:true},
     "#":{glyph:"#",tag:"code",sub:"ln",class:"",stash:true},
-    "%":{glyph:"%"},
+    "%":{glyph:"%"}, // media
     "?":{glyph:"?",tag:"note",class:""},
     ":":{glyph:":",tag:"info",class:""},
-    "*":{glyph:"*",tag:"h2",class:""},
+    "*":{glyph:"*",tag:"h3",class:""},
-    "+":{glyph:"+",tag:"hs",class:""},
     ">":{glyph:">",tag:"",class:""},
-    "$":{glyph:">",tag:"",class:""},
     "@":{glyph:"@",tag:"quote",class:""}
   }
 
@@ -51,25 +48,20 @@ function Runic(raw,tables)
 
     var html = "";
     var lines = raw;
-    var lines = !Array.isArray(raw) ? raw.toString().split("\n") : raw;
+    var lines = !Array.isArray(raw) ? raw.split("\n") : raw;
 
     for(id in lines){
       var char = lines[id].substr(0,1).trim().toString()
       var rune = this.runes[char];
       var trail = lines[id].substr(1,1);
+      if(char == "%"){ html += this.media(lines[id].substr(2)); continue; }
+      if(char == "@"){ html += this.quote(lines[id].substr(2)); continue; }
       var line = lines[id].substr(2).to_markup();
-
       if(!line || line.trim() == ""){ continue; }
-      if(!rune){ console.log(`Unknown rune:${char} : ${line}`); continue; }
+      if(!rune){ console.log(`Unknown rune:${char} : ${line}`); }
-      if(trail != " "){ console.warn("Runic",`Non-rune[${trail}] at:${id}(${line})`); continue; }
+      if(trail != " "){ console.warn("Runic","Non-rune["+trail+"] at:"+id+"("+line+")"); continue; }
 
       if(this.stash.is_pop(rune)){ html += this.render_stash(); }
-
-      if(char == "$"){ html += `<p>${Ø("operation").request(line).to_markup()}</p>`; continue; }
-      if(char == "%"){ html += this.media(line); continue; }
-      if(char == "@"){ html += this.quote(line); continue; }
-      if(char == ":"){ html += this.info(line); continue; }
-
       if(rune.stash === true){ this.stash.add(rune,line) ; continue; }
       html += this.render(line,rune);
     }
@@ -104,11 +96,19 @@ function Runic(raw,tables)
     var service = val.split(" ")[0];
     var id = val.split(" ")[1];
 
-    if(service == "itchio"){ return `<iframe frameborder="0" src="https://itch.io/embed/${id}?link_color=000000" width="600" height="167"></iframe>`; }
+    if(service == "itchio"){
-    if(service == "bandcamp"){ return `<iframe style="border: 0; width: 600px; height: 274px;" src="https://bandcamp.com/EmbeddedPlayer/album=${id}/size=large/bgcol=ffffff/linkcol=333333/artwork=small/transparent=true/" seamless></iframe>`; }
+      return `<iframe frameborder="0" src="https://itch.io/embed/${id}?link_color=000000" width="600" height="167"></iframe>`;
-    if(service == "youtube"){ return `<iframe width="600" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`; }
+    }
-    if(service == "custom"){ return `<iframe src='${id}' style='width:100%;height:350px;'></iframe>`; }
+    if(service == "bandcamp"){
-    return `<img src='media/${val}'/>`
+      return `<iframe style="border: 0; width: 600px; height: 274px;" src="https://bandcamp.com/EmbeddedPlayer/album=${id}/size=large/bgcol=ffffff/linkcol=333333/artwork=small/transparent=true/" seamless></iframe>`;
+    }
+    if(service == "youtube"){
+      return `<iframe width="600" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
+    }
+    if(service == "custom"){
+      return `<iframe src='${id}' style='width:100%;height:350px;'></iframe>`;
+    }
+    return `<img src='media/${service}' class='${id}'/>`
   }
 
   this.quote = function(content)
@@ -119,31 +119,53 @@ function Runic(raw,tables)
     var source = parts[2]
     var link = parts[3]
 
-    return `
+    return `<quote><p class='text'>${text}</p>${author ? `<p class='attrib'>${link ? `${author}, <a href='${link}'>${source}</a>` : `${author}`}</p>` : ''}</quote>`
-    <quote>
-      <p class='text'>
-        ${text.to_markup()}
-      </p>
-      <p class='attrib'>
-        ${author}${source && link ? `, <a href='${link}'>${source}</a>` : source ? `, <b>${source}</b>` : ''}
-      </p>
-    </quote>`
   }
 
-  this.info = function(content)
+  this.html = function()
   {
-    var key = content.split("|")[0].trim()
+    return this.parse(raw);
-    var term = this.tables.lexicon[key.toUpperCase()]
-    var log = term.logs[0]
-    var glyph = term.glyph();
-
-    if(!log){ return '' }
-      
-    return `<info><svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1"><g transform='scale(0.1)'><path d='${glyph}'/></g></svg><t class='key'>{{${key.capitalize()}}}</t><t class='val'>${log.name ? log.name : log.task.capitalize()}</t><t class='offset'>${log.time.offset_format(new Date().desamber(),true).capitalize()}, <b>${log.time}</b></t></info>`.to_markup()
   }
 
   this.toString = function()
   {
-    return this.parse();
+    return this.html();
   }
 }
+
+String.prototype.capitalize = function()
+{
+  return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
+}
+
+String.prototype.to_url = function()
+{
+  return this.toLowerCase().replace(/ /g,"+").replace(/[^0-9a-z\+]/gi,"").trim();
+}
+
+String.prototype.to_path = function()
+{
+  return this.toLowerCase().replace(/ /g,".").replace(/[^0-9a-z\.]/gi,"").trim();
+}
+
+String.prototype.to_markup = function()
+{
+  html = this;
+  html = html.replace(/{_/g,"<i>").replace(/_}/g,"</i>")
+  html = html.replace(/{\*/g,"<b>").replace(/\*}/g,"</b>")
+  html = html.replace(/{\#/g,"<code class='inline'>").replace(/\#}/g,"</code>")
+
+  var parts = html.split("{{")
+  for(id in parts){
+    var part = parts[id];
+    if(part.indexOf("}}") == -1){ continue; }
+    var content = part.split("}}")[0];
+    var target = content.indexOf("|") > -1 ? content.split("|")[1] : content;
+    var name = content.indexOf("|") > -1 ? content.split("|")[0] : content;
+    var external = (target.indexOf("https:") > -1 || target.indexOf("http:") > -1 || target.indexOf("dat:") > -1);
+    html = html.replace(`{{${content}}}`,external ? `<a href='${target}' class='external' target='_blank'>${name}</a>` : `<a class='local' href='#${target.to_url()}'>${name}</a>`)
+  }
+  return html;
+}
+
+