mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Initial commit.
This commit is contained in:
kor
commit
0c3f2d4eaf
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/content/media/*
|
||||||
10
README.md
Normal file
10
README.md
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
# Memex
|
||||||
|
|
||||||
|
Simple flat file formatted bookmarks/notes.
|
||||||
|
|
||||||
|
Small self contained project for playing with [Indental](https://wiki.xxiivv.com/#indental) and [Runic](https://wiki.xxiivv.com/#runic).
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
- The database format is [Indental](https://wiki.xxiivv.com/#indental).
|
||||||
|
- The templating language is [Runic](https://wiki.xxiivv.com/#runic).
|
||||||
49
asset/style.css
Normal file
49
asset/style.css
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
html {
|
||||||
|
background:#DCDCDC;
|
||||||
|
font-family:'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
|
||||||
|
font-size:1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LINK */
|
||||||
|
a {
|
||||||
|
color:#000;
|
||||||
|
text-decoration:underline;
|
||||||
|
}
|
||||||
|
#entryImportant a {
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
a#urlseen {
|
||||||
|
color:#666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ENTRY */
|
||||||
|
#entry, #entryImportant {
|
||||||
|
color:#000;
|
||||||
|
background:#999;
|
||||||
|
margin-bottom:1em;
|
||||||
|
padding:0.5em;
|
||||||
|
min-height:2.4em;
|
||||||
|
}
|
||||||
|
#entryImportant {
|
||||||
|
color:#DCDCDC;
|
||||||
|
background:#333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TAGS */
|
||||||
|
#tags {
|
||||||
|
font-size:0.8em;
|
||||||
|
color:#000;
|
||||||
|
}
|
||||||
|
#entryImportant #tags {
|
||||||
|
color:#808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NOTE, QUOTE, TERM */
|
||||||
|
#note, #quote, #term {
|
||||||
|
padding-top: 1em;
|
||||||
|
font-size:0.8em;
|
||||||
|
color:#000;
|
||||||
|
}
|
||||||
|
#entryImportant #note, #entryImportant #quote, #entryImportant #term {
|
||||||
|
color:#808080;
|
||||||
|
}
|
||||||
1066
content/Memex.ndtl
Normal file
1066
content/Memex.ndtl
Normal file
File diff suppressed because it is too large
Load Diff
19
index.html
Normal file
19
index.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="asset/style.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="content/memex.ndtl"></script>
|
||||||
|
<script src="logic/indental.js"></script>
|
||||||
|
<script src="logic/main.js"></script>
|
||||||
|
|
||||||
|
<title>memex</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
let main = new Main();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
logic/indental.js
Normal file
54
logic/indental.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
function Indental(data)
|
||||||
|
{
|
||||||
|
this.data = data;
|
||||||
|
|
||||||
|
this.parse = function(type)
|
||||||
|
{
|
||||||
|
var lines = this.data.split("\n").map(liner)
|
||||||
|
// Assoc lines
|
||||||
|
var stack = {}
|
||||||
|
var target = lines[0]
|
||||||
|
for(id in lines){
|
||||||
|
var line = lines[id]
|
||||||
|
if(line.skip){ continue; }
|
||||||
|
target = stack[line.indent-2];
|
||||||
|
if(target){ target.children.push(line) }
|
||||||
|
stack[line.indent] = line
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format
|
||||||
|
var h = {}
|
||||||
|
for(id in lines){
|
||||||
|
var line = lines[id];
|
||||||
|
if(line.skip || line.indent > 0){ continue; }
|
||||||
|
var key = line.content.toUpperCase()
|
||||||
|
h[key] = type ? new type(key,format(line)) : format(line)
|
||||||
|
}
|
||||||
|
return h
|
||||||
|
}
|
||||||
|
|
||||||
|
function format(line)
|
||||||
|
{
|
||||||
|
var a = [];
|
||||||
|
var h = {};
|
||||||
|
for(id in line.children){
|
||||||
|
var child = line.children[id];
|
||||||
|
if(child.key){ h[child.key.toUpperCase()] = child.value }
|
||||||
|
else if(child.children.length == 0 && child.content){ a.push(child.content) }
|
||||||
|
else{ h[child.content.toUpperCase()] = format(child) }
|
||||||
|
}
|
||||||
|
return a.length > 0 ? a : h
|
||||||
|
}
|
||||||
|
|
||||||
|
function liner(line)
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
indent:line.search(/\S|$/),
|
||||||
|
content:line.trim(),
|
||||||
|
skip:line == "" || line.substr(0,1) == "~",
|
||||||
|
key:line.indexOf(" : ") > -1 ? line.split(" : ")[0].trim() : null,
|
||||||
|
value:line.indexOf(" : ") > -1 ? line.split(" : ")[1].trim() : null,
|
||||||
|
children:[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
150
logic/main.js
Normal file
150
logic/main.js
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
this.DB = new Indental(DATABASE.memex).parse();
|
||||||
|
let keys = Object.keys(DB);
|
||||||
|
let page = 0;
|
||||||
|
let lastEntry = -1;
|
||||||
|
let postPerPage = 1000;
|
||||||
|
|
||||||
|
function Main()
|
||||||
|
{
|
||||||
|
console.log(DB);
|
||||||
|
|
||||||
|
let view = ``;
|
||||||
|
let html = document.body;
|
||||||
|
|
||||||
|
view += `<div id="content">${displayEntries(DB)}</div>`;
|
||||||
|
|
||||||
|
html.innerHTML = view;
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayEntries(db)
|
||||||
|
{
|
||||||
|
let entries = ``;
|
||||||
|
page += postPerPage;
|
||||||
|
|
||||||
|
var i = lastEntry+1;
|
||||||
|
var value;
|
||||||
|
while (i < Math.min(keys.length, page))
|
||||||
|
{
|
||||||
|
value = db[keys[i]];
|
||||||
|
|
||||||
|
// ENTRY
|
||||||
|
var idEntry = "entry";
|
||||||
|
if (typeof value.REVI !== 'undefined')
|
||||||
|
{
|
||||||
|
if (value.REVI == "true")
|
||||||
|
{
|
||||||
|
idEntry = "entryImportant";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
entries += `<div id="${idEntry}">`;
|
||||||
|
entries += `${keys[i].toProperCase()}`;
|
||||||
|
|
||||||
|
// LINK
|
||||||
|
if (typeof value.LINK !== 'undefined')
|
||||||
|
{
|
||||||
|
var idUrl = "url";
|
||||||
|
if (typeof value.SEEN !== 'undefined')
|
||||||
|
{
|
||||||
|
if (value.SEEN == "true")
|
||||||
|
{
|
||||||
|
idUrl = "urlseen";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
entries += `<div id="link"><a href="${String(value.LINK)}" id="${idUrl}">${extractRootDomain(value.LINK)}</a></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TAGS
|
||||||
|
if (typeof value.TAGS !== 'undefined')
|
||||||
|
{
|
||||||
|
entries += `<div id="tags">${value.TAGS.toLowerCase()}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// NOTE
|
||||||
|
if (typeof value.NOTE !== 'undefined')
|
||||||
|
{
|
||||||
|
entries += `<div id="note">NOTE: ${value.NOTE}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// QUOTE
|
||||||
|
if (typeof value.QOTE !== 'undefined')
|
||||||
|
{
|
||||||
|
entries += `<div id="quote">QUOTE: ${value.QOTE}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TERM
|
||||||
|
if (typeof value.TERM !== 'undefined')
|
||||||
|
{
|
||||||
|
entries += `<div id="term">TERM(S): ${value.TERM}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
entries += `</div>`;
|
||||||
|
|
||||||
|
lastEntry = i;
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
entries += doPagination();
|
||||||
|
return entries;
|
||||||
|
}
|
||||||
|
|
||||||
|
function doPagination()
|
||||||
|
{
|
||||||
|
return `
|
||||||
|
<div id="pagination">
|
||||||
|
<a id="loadmore" onClick="loadMore();">${lastEntry < keys.length -1 ? `Load more ▼` : ``}</a>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMore()
|
||||||
|
{
|
||||||
|
pagination.remove();
|
||||||
|
document.getElementById("content").innerHTML += doJournal(DB);
|
||||||
|
}
|
||||||
|
|
||||||
|
String.prototype.toProperCase = function ()
|
||||||
|
{
|
||||||
|
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string
|
||||||
|
function extractHostname(url)
|
||||||
|
{
|
||||||
|
var hostname;
|
||||||
|
//find & remove protocol (http, ftp, etc.) and get hostname
|
||||||
|
|
||||||
|
if (url.indexOf("://") > -1) {
|
||||||
|
hostname = url.split('/')[2];
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
hostname = url.split('/')[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
//find & remove port number
|
||||||
|
hostname = hostname.split(':')[0];
|
||||||
|
//find & remove "?"
|
||||||
|
hostname = hostname.split('?')[0];
|
||||||
|
|
||||||
|
return hostname;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Source: https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string
|
||||||
|
function extractRootDomain(url)
|
||||||
|
{
|
||||||
|
var domain = extractHostname(url),
|
||||||
|
splitArr = domain.split('.'),
|
||||||
|
arrLen = splitArr.length;
|
||||||
|
|
||||||
|
//extracting the root domain here
|
||||||
|
//if there is a subdomain
|
||||||
|
if (arrLen > 2) {
|
||||||
|
domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1];
|
||||||
|
//check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk")
|
||||||
|
if (splitArr[arrLen - 2].length == 2 && splitArr[arrLen - 1].length == 2) {
|
||||||
|
//this is using a ccTLD
|
||||||
|
domain = splitArr[arrLen - 3] + '.' + domain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return domain;
|
||||||
|
}
|
||||||
149
logic/runic.js
Normal file
149
logic/runic.js
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
function Runic(raw,tables)
|
||||||
|
{
|
||||||
|
this.tables = tables;
|
||||||
|
this.raw = raw;
|
||||||
|
|
||||||
|
this.runes = {
|
||||||
|
"&":{glyph:"&",tag:"p",class:""},
|
||||||
|
"~":{glyph:"~",tag:"list",sub:"ln",class:"parent",stash:true},
|
||||||
|
"-":{glyph:"-",tag:"list",sub:"ln",class:"",stash:true},
|
||||||
|
"=":{glyph:"=",tag:"list",sub:"ln",class:"mini",stash:true},
|
||||||
|
"!":{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:"?",tag:"note",class:""},
|
||||||
|
":":{glyph:":",tag:"info",class:""},
|
||||||
|
"*":{glyph:"*",tag:"h2",class:""},
|
||||||
|
"+":{glyph:"+",tag:"hs",class:""},
|
||||||
|
">":{glyph:">",tag:"",class:""},
|
||||||
|
"$":{glyph:">",tag:"",class:""},
|
||||||
|
"@":{glyph:"@",tag:"quote",class:""}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.stash = {
|
||||||
|
rune : "",
|
||||||
|
all : [],
|
||||||
|
add : function(rune,item){
|
||||||
|
this.rune = this.copy(rune)
|
||||||
|
this.all.push({rune:rune,item:item});
|
||||||
|
},
|
||||||
|
pop : function(){
|
||||||
|
var copy = this.copy(this.all);
|
||||||
|
this.all = [];
|
||||||
|
return copy;
|
||||||
|
},
|
||||||
|
is_pop : function(rune){
|
||||||
|
return this.all.length > 0 && rune.tag != this.rune.tag;
|
||||||
|
},
|
||||||
|
length: function()
|
||||||
|
{
|
||||||
|
return this.all.length;
|
||||||
|
},
|
||||||
|
copy : function(data){
|
||||||
|
return JSON.parse(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parse = function(raw = this.raw)
|
||||||
|
{
|
||||||
|
if(!raw){ return ""; }
|
||||||
|
|
||||||
|
var html = "";
|
||||||
|
var lines = raw;
|
||||||
|
var lines = !Array.isArray(raw) ? raw.toString().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);
|
||||||
|
var line = lines[id].substr(2).to_markup();
|
||||||
|
|
||||||
|
if(!line || line.trim() == ""){ continue; }
|
||||||
|
if(!rune){ console.log(`Unknown rune:${char} : ${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);
|
||||||
|
}
|
||||||
|
if(this.stash.length() > 0){ html += this.render_stash(); }
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render_stash = function()
|
||||||
|
{
|
||||||
|
var rune = this.stash.rune;
|
||||||
|
var stash = this.stash.pop();
|
||||||
|
|
||||||
|
var html = "";
|
||||||
|
for(id in stash){
|
||||||
|
var rune = stash[id].rune;
|
||||||
|
var line = stash[id].item;
|
||||||
|
html += rune.wrap ? `<${rune.sub}><${rune.wrap}>${line.replace(/\|/g,`</${rune.wrap}><${rune.wrap}>`).trim()}</${rune.wrap}></${rune.sub}>` : `<${rune.sub}>${line}</${rune.sub}>`;
|
||||||
|
}
|
||||||
|
return `<${rune.tag} class='${rune.class}'>${html}</${rune.tag}>`
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render = function(line = "",rune = null)
|
||||||
|
{
|
||||||
|
if(rune && rune.tag == "img"){ return `<img src='media/${line}'/>`; }
|
||||||
|
if(rune && rune.tag == "table"){ return "HEY"; }
|
||||||
|
|
||||||
|
return rune ? (rune.tag ? `<${rune.tag} class='${rune.class}'>${line}</${rune.tag}>` : line) : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.media = function(val)
|
||||||
|
{
|
||||||
|
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 == "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>`; }
|
||||||
|
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/${val}'/>`
|
||||||
|
}
|
||||||
|
|
||||||
|
this.quote = function(content)
|
||||||
|
{
|
||||||
|
var parts = content.split(" | ")
|
||||||
|
var text = parts[0]
|
||||||
|
var author = parts[1]
|
||||||
|
var source = parts[2]
|
||||||
|
var link = parts[3]
|
||||||
|
|
||||||
|
return `
|
||||||
|
<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)
|
||||||
|
{
|
||||||
|
var key = content.split("|")[0].trim()
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user