todos

.gitignore

@@ -1,9 +1,11 @@
 **/*.sw*
-spike/review/reinvent/ezmded/server/ezmded
-spike/review/reinvent/ezmded/server/server
-spike/review/reinvent/ezmded/server/testdata/files/**/*
-spike/review/reinvent/ezmded/server/testdata/workd/**/*
-spike/review/reinvent/ezmded/server/testdata/media/**/*
-spike/review/reinvent/ezmded/server/testdata/index.html
-spike/review/reinvent/ezmded/ui/render
-spike/review/reinvent/ezmded/ui/**/.*.html
+server/exec-server
+server/ezmded
+server/exec-ezmded
+server/server
+server/testdata/files/**/*
+server/testdata/workd/**/*
+server/testdata/media/**/*
+server/testdata/index.html
+ui/render
+ui/**/.*.html

app/ui/run.sh

@@ -1 +0,0 @@
-../../spike/review/run.sh

crawler/README.md

@@ -0,0 +1,10 @@
+## running
+
+export RCLONE_CONFIG=/tmp/rclone.temp.conf
+export RCLONE_CONFIG_PASS=abc
+export CACHE=/tmp/notea-team3
+export NOTES_ADDR=${NOTES_ADDR:-http://localhost:3004}
+export GITLAB_PAT=$(get_secret GITLAB_PAT)
+mkdir -p $CACHE
+bash main.sh
+echo $?

crawler/google.sh

@@ -0,0 +1,76 @@
+#! /bin/bash
+
+google() (
+	_is_slides() {
+		echo "$@" | grep -q 'docs.google.com.presentation'
+	}
+
+	_is_sheets() {
+		echo "$@" | grep -q 'docs.google.com.spreadsheets'
+	}
+
+	_is_doc() {
+		echo "$@" | grep -q 'docs.google.com.document'
+	}
+
+   is() {
+		_is_sheets "$@" || _is_doc "$@" || _is_slides "$@"
+   }
+
+	human_url() {
+		echo "$1"
+	}
+
+   get() {
+		local url="$1"
+		local id="${url%/*}"
+		id="${id##*/}"
+		local downloaded="$(rclone get_google "$id")"
+		echo "# ${downloaded##*/}"
+		echo ""
+		if [ "${downloaded##*.}" == "csv" ]; then
+			_csv_to_md "$downloaded"
+		elif [ "${downloaded##*.}" == "html" ]; then
+			_html_to_md "$downloaded"
+		else
+			cat "$downloaded"
+		fi
+   }
+
+	_html_to_md() {
+		which pandoc &> /dev/null
+		local f="$1"
+		#log f=$f
+		cat "$f" \
+			| sed 's/.*<body/<body/' \
+			| sed 's/<\/body>.*/<\/body>/' \
+			| sed 's/<[\/]*span[^>]*>//g' \
+			| perl -pe 's|<div class="c[0-9][0-9]*">.*?<\/div>||g' \
+			| sed 's/<\([a-z][a-z]*\)[^>]*/<\1/g' \
+			| pandoc - -f html -t commonmark -s -o - \
+			| sed 's/^<[\/]*div>$//g'
+	}
+
+	_csv_to_md() {
+		local f="$1"
+		(
+			head -n 1 "$f"
+			head -n 1 "$f" \
+				| sed 's/^[^,][^,]*/--- /' \
+				| sed 's/[^,][^,]*$/ ---/' \
+				| sed 's/,[^,][^,]*/, --- /g' \
+				| sed 's/[^|]$/|/'
+			tail -n +2 "$f"
+		) \
+			| grep . \
+			| sed 's/,/ | /g' \
+			| sed 's/^/| /'
+	}
+
+   expand() {
+		get "$@" | head -n 1 | sed 's/^[#]* //' | base64
+   }
+
+   "$@"
+)
+

crawler/main.sh

@@ -4,6 +4,7 @@ main() {
 	config
 	log crawling ids...
 	for id in $(crawlable_ids); do
+		log crawling id $id
 		crawl "$id"
 	done
 	log rewriting ids...
@@ -20,8 +21,12 @@ config() {
 	export CACHE_DURATION=$((60*50))
 	export NOTES_ADDR="${NOTES_ADDR:-"http://localhost:3004"}"
 	export GITLAB_PAT="$GITLAB_PAT"
+	export RCLONE_CONFIG="$RCLONE_CONFIG"
+	export RCLONE_CONFIG_PASS="$RCLONE_CONFIG_PASS"
 	source ./gitlab.sh
 	source ./gitlab_wiki.sh
+	source ./google.sh
+	source ./rclone.sh
 	source ./cache.sh
 	source ./notes.sh
 }
@@ -56,12 +61,7 @@ crawlable_ids() {
 }
 
 crawl() {
-	local cache_key="crawled $*"
-	# TODO
-	if false && cache get "$cache_key"; then
-		return
-	fi
-	_crawl "$@" | cache put "$cache_key"
+	_crawl "$@"
 }
 
 _crawl() {
@@ -73,7 +73,7 @@ _crawl() {
 			"$id"
 	)"
 	local crawlable_source="$(extract_crawlable_source "$content")"
-	for backend in gitlab gitlab_wiki; do
+	for backend in gitlab gitlab_wiki google; do
 		if $backend is "$crawlable_source"; then
 			crawl_with $backend "$json"
 			return $?
@@ -149,6 +149,7 @@ crawl_with() {
 		ID="${ID%/}"
 		log "	$ID ($TITLE): ${#CONTENT}"
 		push_crawled "$ID" "$TITLE" "$CONTENT"
+		log "	/$ID ($TITLE): ${#CONTENT}"
 	}
 	if [ "${#expanded[@]}" -gt 0 ]; then
 		for i in $(seq 0 $(("${#expanded[@]}"-1))); do
@@ -166,7 +167,7 @@ push_crawled() {
 is_crawlable() {
 	local crawlable_source="$(extract_crawlable_source "$*")"
 	# https://unix.stackexchange.com/questions/181254/how-to-use-grep-and-cut-in-script-to-obtain-website-urls-from-an-html-file
-	local url_pattern="(http|https)://[a-zA-Z0-9./?=_%:-]*"
+	local url_pattern="(http|https)://[a-zA-Z0-9./?=_%:\-\#--]*"
 	echo "$crawlable_source" | cut -c 1-300 | grep -q -E "^[ ]*$url_pattern[ ]*$"
 }
 

crawler/notes.sh

@@ -2,11 +2,15 @@
 
 notes() (
 	ids() {
-		_recurse_ids "" "$(_tree)"
+		_recurse_ids "$(_tree)"
 	}
 
 	_tree() {
-      __tree "$@"
+		local cache_key="notes _tree"
+		if CACHE_DURATION=5 cache get "$cache_key"; then
+			return 0
+		fi
+      __tree "$@" | cache put "$cache_key"
 	}
 
 	__tree() {
@@ -18,8 +22,7 @@ notes() (
 	}
 
 	_recurse_ids() {
-		local prefix="$1"
-		local json="$2"
+		local json="$1"
 		if echo "$json" | jq .Branches | grep -q ^null$; then
 			return 0
 		fi
@@ -29,22 +32,32 @@ notes() (
 		fi
 		for line in $b64lines; do
 			line="$(echo "$line" | base64 --decode)"
-			local subfix="$(printf "%s/%s" "$prefix" "$line")"
-			subfix="${subfix#/}"
-			if ! _is_deleted "$subfix"; then
-				echo "$subfix"
+			if ! _is_deleted "$line"; then
+				echo "$line"
+				_recurse_ids "$(echo "$json" | jq -c ".Branches[\"$line\"]")"
 			fi
-			_recurse_ids "$subfix" "$(echo "$json" | jq -c ".Branches[\"$line\"]")"
 		done
 	}
 
    meta() {
+		local cache_key="notes meta $*"
+		if CACHE_DURATION=5 cache get "$cache_key"; then
+			return 0
+		fi
+		_meta "$@" | cache put "$cache_key"
+	}
+
+   _meta() {
 		local id="$1"
 		local tree="$(_tree)"
-		for subid in ${id//\// }; do
-			tree="$(echo "$tree" | jq -c .Branches | jq -c ".[\"$subid\"]")"
+		local pid="${id%%/*}"
+		while [ "$id" != "$pid" ]; do
+			tree="$(echo "$tree" | jq ".Branches[\"$pid\"]")"
+			local to_add="${id#$pid/}"
+			to_add="${to_add%%/*}"
+			pid="$pid/$to_add"
 		done
-		echo "$tree" | jq .Leaf
+		echo "$tree" | jq ".Branches[\"$id\"].Leaf"
    }
 
    _is_deleted() {
@@ -90,11 +103,11 @@ notes() (
 		local id="$1"
 		local title="$2"
 		local body="$3"
-      echo "$body" | _nncurl \
+      _nncurl \
          -X PUT \
 			-H "Title: $title" \
          -d "$body" \
-         $NOTES_ADDR/api/v0/files/$id
+         $NOTES_ADDR/api/v0/files/$id >&2
    }
 
    "$@"

crawler/rclone.sh

@@ -0,0 +1,62 @@
+#! /bin/bash
+
+rclone() (
+	get_google() {
+      local cache_key="rclone get google 2 $*"
+      if cache get "$cache_key"; then
+         return 0
+      fi
+      _get_google "$@" | cache put "$cache_key"
+	}
+
+	_get_google() {
+		_rate_limit
+		local id="$1"
+		local out="$(mktemp -d)"
+		_cmd backend copyid work-notes-google: --drive-export-formats=csv,html,txt "$id" "$out/"
+		find "$out" -type f
+	}
+
+	_rate_limit() {
+		local f="/tmp/rclone.rate.limit"
+		local last=0
+		if [ -f "$f" ]; then
+			last="$(date -r "$f" +%s)"
+		fi
+		local now="$(date +%s)"
+		local since_last=$((now-last))
+		if ((since_last>2)); then
+			dur=-2
+		fi
+		dur=$((dur+2))
+		sleep $dur
+		touch "$f"
+	}
+
+	_ensure() {
+		which rclone &> /dev/null && rclone version &> /dev/null
+	}
+
+	_cmd() {
+		_ensure_google_config
+		__cmd "$@"
+   }
+
+	__cmd() {
+		_ensure
+   	RCLONE_CONFIG_PASS="$RCLONE_CONFIG_PASS" \
+			$(which rclone) \
+   	      --config "$RCLONE_CONFIG" \
+   	      --size-only \
+   	      --fast-list \
+   	      --retries 10 \
+   	      --retries-sleep 10s \
+   	   "$@"
+	}
+
+	_ensure_google_config() {
+		__cmd config show | grep -q work-notes-google
+	}
+
+	"$@"
+)

server/README.md

@@ -0,0 +1,9 @@
+## running with docker
+
+d1=${d1:-$(mktemp -d)}
+d2=${d2:-$(mktemp -d)}
+docker run \
+	-v $d1:/main/public/files \
+	-v $d2:/main/public/media \
+	-p 3004:3004 \
+	--rm -it registry-app.eng.qops.net:5001/bel/work-notes:latest

server/go.mod

@@ -0,0 +1,31 @@
+module ezmded
+
+go 1.17
+
+require (
+	github.com/google/uuid v1.3.0
+	go.mongodb.org/mongo-driver v1.7.2
+	gopkg.in/yaml.v2 v2.4.0
+	local/args v0.0.0-00010101000000-000000000000
+	local/gziphttp v0.0.0-00010101000000-000000000000
+	local/router v0.0.0-00010101000000-000000000000
+	local/simpleserve v0.0.0-00010101000000-000000000000
+)
+
+require github.com/go-stack/stack v1.8.0 // indirect
+
+replace local/args => ../../../../args
+
+replace local/logb => ../../../../logb
+
+replace local/storage => ../../../../storage
+
+replace local/router => ../../../../router
+
+replace local/simpleserve => ../../../../simpleserve
+
+replace local/gziphttp => ../../../../gziphttp
+
+replace local/notes-server => ../../../../notes-server
+
+replace local/oauth2 => ../../../../oauth2

server/public/ui/.files.ctmpl.html

@@ -0,0 +1,349 @@
+
+<!DOCTYPE html>
+<html>
+	<header>
+		<title>title id11</title>
+      
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+	</header>
+	<body class="fullscreen tb_fullscreen lr_fullscreen" style="position: absolute">
+		<div class="rows" style="height: inherit;">
+         
+<form class="columns" action="/ui/search" method="GET">
+	<input class="thic_flex" type="text" name="q" placeholder="space delimited search regexp"/>
+	<input class="info lil_btn" type="submit" value="search"/>
+</form>
+
+			<div class="columns thic_flex tb_buffer" style="height: calc(100% - 4rem);">
+            
+<style>
+	details > details details {
+		padding-inline-start: 2em;
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+	details > summary > .hamburger::before {
+		content: "+";
+	}
+	details[open] > summary > .hamburger::before {
+		content: "-";
+	}
+</style>
+<div class="fullscreen tb_fullscreen" style="max-width: 25em; margin: auto;">
+	<details open>
+		<summary style="outline: none;"><span class="border button hamburger"></span></summary>
+		<details open id="filetree">
+		</details>
+	</details>
+</div>
+<script>
+	function drawTree(tree) {
+		document.getElementById("filetree").innerHTML = branchHTML("", tree)
+	}
+	function branchHTML(id, branch) {
+		return `
+			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
+				${leafHTML(id, branch)}
+			</summary>
+			${branchesHTML(id, branch.Branches)}
+		`
+	}
+	function leafHTML(id, branch) {
+		const href="/ui/files/" + (id ? id : "#")
+		var nameSafeId = id.replace(/\//g, "-")
+		var parentNameSafeId = nameSafeId
+		if (id.includes("/"))
+			parentNameSafeId = id.slice(0, id.lastIndexOf("/")).replace(/\//g, "-")
+		const name=`filetree-leaf-${nameSafeId}`
+		const parentname=`filetree-leaf-${parentNameSafeId}`
+		const title=id ? branch.Leaf.Title : "ROOT"
+		const isLiveParent = 'id00\/id11'.slice(0, id.length) == id
+		const isLive = 'id00\/id11' == id
+		return `
+			<div style="margin: 0; padding: 0; height: 0; width: 0;" id="${name}"></div>
+			<a style="flex-grow: 1;" href="${href}#${parentname}"><button style="width: 100%; text-align: left; outline: none;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">${title}</button></a>
+			<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>
+		`
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var html = []
+		var out = ``
+		for(var i in branches) {
+			html.push([branches[i].Leaf.Title, `<details open>` + branchHTML(i, branches[i]) + `</details>`])
+		}
+		html.sort()
+		for(var i in html)
+			out += html[i][1]
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse("{\n\t\t\t\"Leaf\": {\"Title\": \"\"},\n\t\t\t\"Branches\": {\n\t\t\t\t\"id00\": {\n\t\t\t\t\t\"Leaf\": {\"Title\": \"title id00\"},\n\t\t\t\t\t\"Branches\": {\n\t\t\t\t\t\t\"id10\": {\"Leaf\":{\"Title\":\"title id10\"},\"Branches\":{\n\t\t\t\t\t\t\t\"id20\": {\"Leaf\":{\"Title\":\"title id20\"},\"Branches\":{}}\n\t\t\t\t\t\t}},\n\t\t\t\t\t\t\"id11\": {\"Leaf\":{\"Title\":\"title id11\"},\"Branches\":{}}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\"id01\": {\"Leaf\":{\"Title\":\"title id01\"},\"Branches\":{}},\n\t\t\t\t\"id02\": {\"Leaf\":{\"Title\":\"title id02\"},\"Branches\":{}},\n\t\t\t\t\"id03\": {\"Leaf\":{\"Title\":\"title id03\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id05\": {\"Leaf\":{\"Title\":\"title id05\"},\"Branches\":{}},\n\t\t\t\t\"id06\": {\"Leaf\":{\"Title\":\"title id06\"},\"Branches\":{}},\n\t\t\t\t\"id07\": {\"Leaf\":{\"Title\":\"title id07 but it's really really really long\"},\"Branches\":{}}\n\t\t\t}\n\t\t}"))
+</script>
+
+				<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
+               
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<style>
+	#easyMDEwrap {
+		flex-grow: 1;
+	}
+	.CodeMirror-scroll, .CodeMirror-sizer {
+		min-height: 10px !important;
+		height: auto !important;
+	}
+	#article {
+		display: flex;
+		flex-direction: column;
+	}
+	#titlepath, #title {
+		font-size: 2rem;
+		font-weight: 600;
+	}
+	.EasyMDEContainer button {
+		color: black;
+	}
+	img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.editor-toolbar > button.preview {
+		color: #08c;
+	}
+</style>
+<script>
+	var saveFeedbackInterval = null
+	function pushFile() {
+		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
+		const body = easyMDE.value() ? easyMDE.value() : ""
+		const id = "id00/id11"
+		headers = {}
+		if (title)
+			headers["Title"] = title
+		http("PUT", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to push file ${id}: ${status}: ${body}`)
+				throw `failed to push file ${id}: ${status}: ${body}`
+			}
+			document.getElementById("saveFeedback").innerHTML = "success!"
+			if (saveFeedbackInterval) {
+				clearTimeout(saveFeedbackInterval)
+			}
+			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
+		}, body, headers)
+	}
+	function deleteFile() {
+		const id = "id00/id11"
+		const pid = "id00"
+		http("DELETE", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to delete file ${id}: ${status}: ${body}`)
+				throw `failed to delete file ${id}: ${status}: ${body}`
+			}
+			window.location.href = `${window.location.protocol}\/\/${window.location.host}/ui/files/${pid}`
+		})
+	}
+</script>
+<div class="fullscreen tb_fullscreen">
+	<article id="article">
+		<div class="columns">
+			<span class="r_buffer">
+	         <form action="#" onsubmit="pushFile(); return false;">
+				   <input class="button-info lil_btn" type="submit" value="SAVE"/>
+	         </form>
+			</span>
+			<span id="titlePath">
+				/
+	         
+	            <a href="/ui/files/id00">title id00</a> /
+	         
+	      </span>
+			<span id="title" class="thic_flex" contenteditable>title id11</span>
+			<span class="l_buffer">
+	         <form onsubmit="deleteFile(); return false;"> 
+				   <input class="button-error lil_btn" type="submit" onclick="confirm('are you sure?');" value="DELETE"/>
+	         </form>
+			</span>
+		</div>
+		
+		<div id="easyMDEwrap" class="monospace">
+			<textarea id="my-text-area"></textarea>
+		</div>
+		<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
+		</div>
+	</article>
+</div>
+<script>
+	const easyMDE = new EasyMDE({
+		autoDownloadFontAwesome: true,
+		autofocus: true,
+		autosave: {
+			enabled: false,
+		},
+		element: document.getElementById('my-text-area'),
+		forceSync: true,
+		indentWithTabs: false,
+		initialValue: "loading...",
+		showIcons: ["code", "table"],
+		spellChecker: false,
+		sideBySideFullscreen: false,
+		tabSize: 3,
+		previewImagesInEditor: true,
+		insertTexts: {
+			image: ["![](", ")"],
+			link: ["[](", ")"],
+		},
+		lineNumbers: true,
+		lineWrapping: false,
+		uploadImage: true,
+		imageUploadEndpoint: "/api/v0/media", 
+		imagePathAbsolute: false,
+		renderingConfig: {
+			codeSyntaxHighlighting: true,
+		},
+		status: ["lines", "words", "cursor"],
+	})
+	easyMDE.value("# hello\n\n## world\n\n| this | is | my | table |\n| ---- | ---| ---| ----- |\n| hey |\n| ya | hey | ya |\n\n* and\n\t* a bulleted\n\t\t* list\n\n\u003e but here is a quote\n\n```go\n// and some go code\nfunc main() {\n\tlog.Println(\"hi\")\n}\n```\n\nand\n\nnow\n\nthe\n\nnewlines\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t")
+</script>
+
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

server/public/ui/.index.html

@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html>
+	<header>
+		<title>Notes</title>
+	 	<meta charset="utf-8">
+	 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+		<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+		<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+		<!-- todo css
+		<link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
+		<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+		-->
+
+		<style>
+			html, body {
+				background-color: #f8f8f8;
+			}
+			.EasyMDEContainer button {
+				color: black;
+			}
+			img {
+				max-width: 100%;
+				max-height: 100%;
+			}
+			.filetree {
+				max-width: 15em;
+				width: 15em;
+				min-width: 15em;
+				overflow-x: scroll;
+				white-space: nowrap;
+			}
+			.filesummary {
+				min-width: 10em;
+			}
+			.filedetails {
+				padding-inline-start: 2em;
+			}
+			.filetree > .filedetails,
+			.filetree > .filedetails > .filedetails {
+				padding-inline-start: 0em;
+			}
+			.fileleaf {
+				display: inline-flex;
+				flex-direction: row;
+				width: calc(100% - 1em);
+			}
+			.fileleaf > input {
+				border: none;
+				border-radius: 0;
+				background: none;
+				outline: none;
+			}
+			.fileleaf > input:hover,
+			input.live_leaf {
+				background: #ddd;
+			}
+			.lr_fullscreen {
+				width: 90%;
+				max-width: 1024px;
+				margin-right: auto;
+				margin-left: auto;
+			}
+			.tb_fullscreen {
+				margin-top: 1em;
+			}
+			.columns {
+				display: flex;
+				flex-direction: row;
+			}
+			.rows {
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+			.thic_flex {
+				text-align: left;
+				flex-grow: 1;
+			}
+			.mia {
+				display: none;
+			}
+			.align_left {
+				text-align: left;
+			}
+			.tb_buffer {
+				margin-top: 1em;
+				margin-bottom: 1em;
+			}
+			.r_buffer {
+				margin-right: 1em;
+			}
+			.l_buffer {
+				margin-left: 1em;
+			}
+			.monospace {
+				font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+			}
+			.lil_btn {
+				width: initial;
+				display: inline-block;
+			}
+			input, label, textarea {
+				margin: initial;
+			}
+			.editor-toolbar > button.preview {
+				color: #08c;
+			}
+		</style>
+		<script>
+			function init() {
+				drawTree()
+				setInterval(drawTree, 100000)
+				navigateToQueryParams()
+			}
+
+			function navigateToQueryParams() {
+				var queryF = getParameterByName("f")
+				var queryQ = getParameterByName("q")
+				console.log("init query f:", queryF, "q:", queryQ)
+				if (queryF && queryF.length > 0) {
+					drawFile(queryF)
+				} else if (queryQ && queryQ.length > 0) {
+					searchFilesFor(queryQ)
+				}
+			}
+
+			function getParameterByName(name, url = window.location.href) {
+				name = name.replace(/[\[\]]/g, '\\$&');
+				var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+					results = regex.exec(url);
+				if (!results) return null;
+				if (!results[2]) return '';
+				return decodeURIComponent(results[2].replace(/\+/g, ' '));
+			}
+
+			function deleteFile() {
+				if (!confirm("would you like to delete this file?"))
+					return
+				const id = easyMDE.meta.id
+				if (!id || id.length == 0)
+					return
+				http("DELETE", "/api/v0/files/" + id, (body, status) => {
+					if (status != 200) {
+						alert(`failed to delete file ${id}: ${status}: ${body}`)
+						throw `failed to delete file ${id}: ${status}: ${body}`
+					}
+					drawTree()
+					var pid = id.slice(0, id.lastIndexOf("/"))
+					if (pid) {
+						drawFile(pid)
+					} else {
+						disableMDE()
+					}
+				})
+			}
+
+			function searchFiles() {
+				const q = document.getElementById("searchbox").value
+				searchFilesFor(q)
+			}
+
+			function searchFilesFor(q) {
+				http("GET", "/api/v0/search?q=" + q, (body, status) => {
+					var results = JSON.parse(body)
+					console.log(q, results)
+					results.sort()
+					var innerHTML = "<ul>"
+					for (var result in results)
+						innerHTML += `<li><input class="align_left" type="button" onclick="drawFile('${results[result]}');" value="${idsToFullTitle(results[result].split("/"))}"</li>`
+					innerHTML += "</ul>"
+					if (!results || results.length == 0)
+						innerHTML = "no results"
+					disableMDE()
+					navigateToQuery("q", q)
+					document.getElementById("searchResults").innerHTML = innerHTML
+				})
+			}
+
+			var saveFeedbackInterval = null
+			function pushFile() {
+				const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
+				const body = easyMDE.value() ? easyMDE.value() : ""
+				const id = easyMDE.meta.id ? easyMDE.meta.id : ""
+				headers = {}
+				if (title)
+					headers["Title"] = title
+				http("PUT", "/api/v0/files/" + id, (body, status) => {
+					if (status != 200) {
+						alert(`failed to push file ${id}: ${status}: ${body}`)
+						throw `failed to push file ${id}: ${status}: ${body}`
+					}
+					drawTree()
+					//drawFile(id)
+					document.getElementById("saveFeedback").innerHTML = "success!"
+					if (saveFeedbackInterval) {
+						clearTimeout(saveFeedbackInterval)
+					}
+					saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
+				}, body, headers)
+			}
+
+			function drawFile(id) {
+				if (!id || id.length < 1) {
+					return
+				}
+				http("GET", "/api/v0/files/"+id, (body, status, headers) => {
+					if (status != 200) {
+						throw `ERR loading file: ${status}: ${body}`
+					}
+					const title = headers("title") ? headers("title") : ""
+					setMDE(id, title, body)
+				})
+			}
+
+			function drawNewFile(pid) {
+				setMDE(pid + "/" + crypto.randomUUID().substr(0, 5), "", "")
+				if (easyMDE.isPreviewActive()) {
+					easyMDE.togglePreview()
+				}
+			}
+
+			function enableMDE() {
+				document.getElementById("searchResults").className = "mia";
+				document.getElementById("article").className = "";
+			}
+
+			function disableMDE() {
+				document.getElementById("article").className = "mia";
+				document.getElementById("searchResults").className = "";
+			}
+
+			var liveLeafTimeout = null
+
+			function setMDE(id, title, body) {
+				if (id[0] == "/")
+					id = id.slice(1, id.length)
+				if (id[id.length-1] == "/")
+					id = id.slice(0, id.length-1)
+				var pids = id.split("/")
+				pids = pids.slice(0, pids.length-1)
+
+				var titlePath = "/"
+				for (var i = 0; i < pids.length; i++) {
+					const fullPid = pids.slice(0, i+1)
+					titlePath = `/ <input type="button" class="lil_btn" value="${idsToTitle(fullPid)}" onclick="drawFile('${fullPid.join("/")}');"/> /`
+				}
+				if (pids.length > 1) {
+					titlePath = "/ ... "+titlePath
+				}
+
+				enableMDE()
+				document.getElementById("titlePath").innerHTML = titlePath
+				document.getElementById("title").innerHTML = title
+				easyMDE.value(body)
+				easyMDE.meta = {
+					id: id,
+				}
+				if (!easyMDE.isPreviewActive()) {
+					easyMDE.togglePreview()
+					var previews = document.getElementsByClassName("preview")
+				}
+				const previouslyHighlighted = document.getElementsByClassName("live_leaf")
+				for (var i in previouslyHighlighted)
+					if (previouslyHighlighted && previouslyHighlighted[i] && previouslyHighlighted[i].classList)
+						previouslyHighlighted[i].classList.remove("live_leaf")
+				if (liveLeafTimeout)
+					clearTimeout(liveLeafTimeout)
+				liveLeafTimeout = setTimeout(() => {
+					const toHighlight = document.getElementsByClassName(btoa("/"+id))
+					for (var i = 0; i < toHighlight.length; i++) {
+						if (toHighlight && toHighlight[i] && toHighlight[i].classList)
+							toHighlight[i].classList.add("live_leaf")
+					}
+				}, 100)
+				navigateToQuery("f", id)
+			}
+
+			var lastNavigateToQuery = new Date()
+
+			function navigateToQuery(k, v) {
+				if (new Date() - lastNavigateToQuery < .1)
+					return
+				lastNavigateToQuery = new Date()
+				const url = new URL(window.location)
+				url.searchParams.set(k, v)
+				var hash = "#?"
+				const it = url.searchParams.entries()
+				let result = it.next()
+				while (!result.done) {
+					hash = hash + result.value[0] + "=" + result.value[1] + "&"
+					result = it.next()
+				}
+				window.location.hash = hash
+			}
+
+			var lastTree = {}
+
+			function idsToTitle(original_ids) {
+				const fullTitle = idsToFullTitle(original_ids)
+				return fullTitle.slice(fullTitle.lastIndexOf("/")+1, fullTitle.length)
+			}
+
+			function idsToFullTitle(original_ids) {
+				var ids = original_ids.slice(0, original_ids.length)
+				var subtree = lastTree
+				var fullTitle = ""
+				while (ids && ids.length > 0) {
+					if (!subtree || !subtree["Branches"] || !subtree["Branches"][ids[0]])
+						break
+					subtree = subtree["Branches"][ids[0]]
+					if (subtree && subtree.Leaf && subtree.Leaf.Title)
+						fullTitle += "/" + subtree.Leaf.Title
+					ids = ids.slice(1, ids.length)
+					if (ids.length == 0) {
+						return fullTitle.slice(1, fullTitle.length)
+					}
+				}
+				return ids[ids.length-1]
+			}
+
+			function drawTree() {
+				function htmlifyBranch(id, branch) {
+					const maxTreeTitleLength = 35
+					var parent = `
+						<input class="thic_flex ${btoa(id)}" type="button" value="${branch.Leaf.Title.substr(0, maxTreeTitleLength)}" onclick="drawFile('${id}');"/>
+						<input type="button" class="lil_btn" value="+" onclick="drawNewFile('${id}');"/>
+					`
+					if (id == "") {
+						parent = `
+							<span class="thic_flex"></span>
+							<input type="button" value="+" onclick="drawNewFile('${id}');"/>
+						`
+					}
+					var children = []
+					for (var child in branch.Branches)
+						children.push({title: branch.Branches[child].Leaf.Title, content: htmlifyBranch(id + "/" + child, branch.Branches[child])})
+					children = children.map((e) => `<!--${e.title}-->${e.content}`)
+					children.sort();
+					children = children.join("\n")
+					return `
+						<details class="filedetails" open>
+							<summary class="filesummary">
+								<div class="fileleaf">${parent}</div>
+							</summary>
+							${children}
+						</details>
+					`
+				}
+				http("GET", "/api/v0/tree", (body, status) => {
+					if (status != 200)
+						throw `bad status getting tree: ${status}: ${body}`
+					lastTree = JSON.parse(body)
+					document.getElementById("tree").innerHTML = htmlifyBranch("", lastTree)
+				})
+			}
+
+			function http(method, remote, callback, body, headers) {
+				var xmlhttp = new XMLHttpRequest();
+				xmlhttp.onreadystatechange = function() {
+					if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+						callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+					}
+				};
+				xmlhttp.open(method, remote, true);
+				if (typeof body == "undefined") {
+					body = null
+				}
+				if (headers) {
+					for (var key in headers)
+						xmlhttp.setRequestHeader(key, headers[key])
+				}
+				xmlhttp.send(body);
+			}
+		</script>
+	</header>
+	<body class="lr_fullscreen tb_fullscreen" onload="init(); return false;">
+		<br>
+		<div class="rows">
+			<form class="columns" action="return false;">
+				<input class="thic_flex" type="text" id="searchbox" placeholder="search regexp"/>
+				<input class="info lil_btn" type="submit" value="search" onclick="searchFiles(); return false;"/>
+			</form>
+			<div class="columns thic_flex tb_buffer">
+				<div id="tree" class="filetree"></div>
+				<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
+					<article id="searchResults" class="mia">
+					</article>
+					<article id="article" class="mia">
+						<div>
+							<h1 class="columns">
+								<span class="r_buffer">
+									<input class="button-info lil_btn" type="submit" value="SAVE" onclick="pushFile(); return false;"/>
+								</span>
+								<span id="titlePath">
+								</span>
+								<span id="title" class="thic_flex" contenteditable></span>
+								<span class="l_buffer">
+									<input class="button-error lil_btn" type="submit" value="DELETE" onclick="deleteFile(); return false;"/>
+								</span>
+							</h1>
+						</div>
+						<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
+						</div>
+						<!-- todo: each line no is an anchor -->
+						<div class="monospace">
+							<textarea id="my-text-area"></textarea>
+						</font>
+					</article>
+				</div>
+			</div>
+		</div>
+	</body>
+	<footer>
+		<script>
+			const easyMDE = new EasyMDE({
+				autoDownloadFontAwesome: true,
+				autofocus: true,
+				autosave: {
+					enabled: false,
+				},
+				element: document.getElementById('my-text-area'),
+				forceSync: true,
+				indentWithTabs: false,
+				initialValue: "# initial\nvalue",
+				showIcons: ["code", "table"],
+				spellChecker: false,
+				sideBySideFullscreen: false,
+				tabSize: 3,
+				previewImagesInEditor: true,
+				insertTexts: {
+					image: ["![](", ")"],
+					link: ["[](", ")"],
+				},
+				lineNumbers: true,
+				lineWrapping: false,
+				uploadImage: true,
+				imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
+				imagePathAbsolute: false,
+				renderingConfig: {
+					codeSyntaxHighlighting: true,
+				},
+			})
+			function logValue() {
+				console.log(easyMDE.value())
+			}
+			logValue()
+		</script>
+	</footer>
+</html>

server/public/ui/.search.ctmpl.html

@@ -0,0 +1,240 @@
+
+<!DOCTYPE html>
+<html>
+	<header>
+		<title>title id11</title>
+      
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+	</header>
+	<body class="fullscreen tb_fullscreen lr_fullscreen" style="position: absolute">
+		<div class="rows" style="height: inherit;">
+         
+<form class="columns" action="/ui/search" method="GET">
+	<input class="thic_flex" type="text" name="q" placeholder="space delimited search regexp"/>
+	<input class="info lil_btn" type="submit" value="search"/>
+</form>
+
+			<div class="columns thic_flex tb_buffer" style="height: calc(100% - 4rem);">
+            
+<style>
+	details > details details {
+		padding-inline-start: 2em;
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+	details > summary > .hamburger::before {
+		content: "+";
+	}
+	details[open] > summary > .hamburger::before {
+		content: "-";
+	}
+</style>
+<div class="fullscreen tb_fullscreen" style="max-width: 25em; margin: auto;">
+	<details open>
+		<summary style="outline: none;"><span class="border button hamburger"></span></summary>
+		<details open id="filetree">
+		</details>
+	</details>
+</div>
+<script>
+	function drawTree(tree) {
+		document.getElementById("filetree").innerHTML = branchHTML("", tree)
+	}
+	function branchHTML(id, branch) {
+		return `
+			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
+				${leafHTML(id, branch)}
+			</summary>
+			${branchesHTML(id, branch.Branches)}
+		`
+	}
+	function leafHTML(id, branch) {
+		const href="/ui/files/" + (id ? id : "#")
+		var nameSafeId = id.replace(/\//g, "-")
+		var parentNameSafeId = nameSafeId
+		if (id.includes("/"))
+			parentNameSafeId = id.slice(0, id.lastIndexOf("/")).replace(/\//g, "-")
+		const name=`filetree-leaf-${nameSafeId}`
+		const parentname=`filetree-leaf-${parentNameSafeId}`
+		const title=id ? branch.Leaf.Title : "ROOT"
+		const isLiveParent = 'id00\/id11'.slice(0, id.length) == id
+		const isLive = 'id00\/id11' == id
+		return `
+			<div style="margin: 0; padding: 0; height: 0; width: 0;" id="${name}"></div>
+			<a style="flex-grow: 1;" href="${href}#${parentname}"><button style="width: 100%; text-align: left; outline: none;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">${title}</button></a>
+			<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>
+		`
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var html = []
+		var out = ``
+		for(var i in branches) {
+			html.push([branches[i].Leaf.Title, `<details open>` + branchHTML(i, branches[i]) + `</details>`])
+		}
+		html.sort()
+		for(var i in html)
+			out += html[i][1]
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse("{\n\t\t\t\"Leaf\": {\"Title\": \"\"},\n\t\t\t\"Branches\": {\n\t\t\t\t\"id00\": {\n\t\t\t\t\t\"Leaf\": {\"Title\": \"title id00\"},\n\t\t\t\t\t\"Branches\": {\n\t\t\t\t\t\t\"id10\": {\"Leaf\":{\"Title\":\"title id10\"},\"Branches\":{\n\t\t\t\t\t\t\t\"id20\": {\"Leaf\":{\"Title\":\"title id20\"},\"Branches\":{}}\n\t\t\t\t\t\t}},\n\t\t\t\t\t\t\"id11\": {\"Leaf\":{\"Title\":\"title id11\"},\"Branches\":{}}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\"id01\": {\"Leaf\":{\"Title\":\"title id01\"},\"Branches\":{}},\n\t\t\t\t\"id02\": {\"Leaf\":{\"Title\":\"title id02\"},\"Branches\":{}},\n\t\t\t\t\"id03\": {\"Leaf\":{\"Title\":\"title id03\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id05\": {\"Leaf\":{\"Title\":\"title id05\"},\"Branches\":{}},\n\t\t\t\t\"id06\": {\"Leaf\":{\"Title\":\"title id06\"},\"Branches\":{}},\n\t\t\t\t\"id07\": {\"Leaf\":{\"Title\":\"title id07 but it's really really really long\"},\"Branches\":{}}\n\t\t\t}\n\t\t}"))
+</script>
+
+				<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
+               
+<style>
+</style>
+</script>
+<div class="fullscreen tb_fullscreen">
+	<ul id="results">
+		
+			<li>
+				<a href="/ui/files/id00">title id00</a>
+			</li>
+		
+			<li>
+				<a href="/ui/files/id07">title id07 but it&#39;s really really really long</a>
+			</li>
+		
+			<li>
+				<a href="/ui/files/id00/id10/id10">title id00 / title id10</a>
+			</li>
+		
+			<li>
+				<a href="/ui/files/id00/id10/id20">title id00 / title id10 / title id20</a>
+			</li>
+		
+	</ul>
+</div>
+
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

server/public/ui/templates/._editor.ctmpl.html

@@ -0,0 +1,245 @@
+
+					<body class="fullscreen" style="border: 10px solid red;">
+				
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<style>
+	#easyMDEwrap {
+		flex-grow: 1;
+	}
+	.CodeMirror-scroll, .CodeMirror-sizer {
+		min-height: 10px !important;
+		height: auto !important;
+	}
+	#article {
+		display: flex;
+		flex-direction: column;
+	}
+	#titlepath, #title {
+		font-size: 2rem;
+		font-weight: 600;
+	}
+	.EasyMDEContainer button {
+		color: black;
+	}
+	img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.editor-toolbar > button.preview {
+		color: #08c;
+	}
+</style>
+<script>
+	var saveFeedbackInterval = null
+	function pushFile() {
+		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
+		const body = easyMDE.value() ? easyMDE.value() : ""
+		const id = "id00/id11"
+		headers = {}
+		if (title)
+			headers["Title"] = title
+		http("PUT", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to push file ${id}: ${status}: ${body}`)
+				throw `failed to push file ${id}: ${status}: ${body}`
+			}
+			document.getElementById("saveFeedback").innerHTML = "success!"
+			if (saveFeedbackInterval) {
+				clearTimeout(saveFeedbackInterval)
+			}
+			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
+		}, body, headers)
+	}
+	function deleteFile() {
+		const id = "id00/id11"
+		const pid = "id00"
+		http("DELETE", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to delete file ${id}: ${status}: ${body}`)
+				throw `failed to delete file ${id}: ${status}: ${body}`
+			}
+			window.location.href = `${window.location.protocol}\/\/${window.location.host}/ui/files/${pid}`
+		})
+	}
+</script>
+<div class="fullscreen tb_fullscreen">
+	<article id="article">
+		<div class="columns">
+			<span class="r_buffer">
+	         <form action="#" onsubmit="pushFile(); return false;">
+				   <input class="button-info lil_btn" type="submit" value="SAVE"/>
+	         </form>
+			</span>
+			<span id="titlePath">
+				/
+	         
+	            <a href="/ui/files/id00">title id00</a> /
+	         
+	      </span>
+			<span id="title" class="thic_flex" contenteditable>title id11</span>
+			<span class="l_buffer">
+	         <form onsubmit="deleteFile(); return false;"> 
+				   <input class="button-error lil_btn" type="submit" onclick="confirm('are you sure?');" value="DELETE"/>
+	         </form>
+			</span>
+		</div>
+		
+		<div id="easyMDEwrap" class="monospace">
+			<textarea id="my-text-area"></textarea>
+		</div>
+		<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
+		</div>
+	</article>
+</div>
+<script>
+	const easyMDE = new EasyMDE({
+		autoDownloadFontAwesome: true,
+		autofocus: true,
+		autosave: {
+			enabled: false,
+		},
+		element: document.getElementById('my-text-area'),
+		forceSync: true,
+		indentWithTabs: false,
+		initialValue: "loading...",
+		showIcons: ["code", "table"],
+		spellChecker: false,
+		sideBySideFullscreen: false,
+		tabSize: 3,
+		previewImagesInEditor: true,
+		insertTexts: {
+			image: ["![](", ")"],
+			link: ["[](", ")"],
+		},
+		lineNumbers: true,
+		lineWrapping: false,
+		uploadImage: true,
+		imageUploadEndpoint: "/api/v0/media", 
+		imagePathAbsolute: false,
+		renderingConfig: {
+			codeSyntaxHighlighting: true,
+		},
+		status: ["lines", "words", "cursor"],
+	})
+	easyMDE.value("# hello\n\n## world\n\n| this | is | my | table |\n| ---- | ---| ---| ----- |\n| hey |\n| ya | hey | ya |\n\n* and\n\t* a bulleted\n\t\t* list\n\n\u003e but here is a quote\n\n```go\n// and some go code\nfunc main() {\n\tlog.Println(\"hi\")\n}\n```\n\nand\n\nnow\n\nthe\n\nnewlines\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t")
+</script>

server/public/ui/templates/._filetree.ctmpl.html

@@ -0,0 +1,193 @@
+
+					<body class="fullscreen" style="border: 10px solid red;">
+				
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+<style>
+	details > details details {
+		padding-inline-start: 2em;
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+	details > summary > .hamburger::before {
+		content: "+";
+	}
+	details[open] > summary > .hamburger::before {
+		content: "-";
+	}
+</style>
+<div class="fullscreen tb_fullscreen" style="max-width: 25em; margin: auto;">
+	<details open>
+		<summary style="outline: none;"><span class="border button hamburger"></span></summary>
+		<details open id="filetree">
+		</details>
+	</details>
+</div>
+<script>
+	function drawTree(tree) {
+		document.getElementById("filetree").innerHTML = branchHTML("", tree)
+	}
+	function branchHTML(id, branch) {
+		return `
+			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
+				${leafHTML(id, branch)}
+			</summary>
+			${branchesHTML(id, branch.Branches)}
+		`
+	}
+	function leafHTML(id, branch) {
+		const href="/ui/files/" + (id ? id : "#")
+		var nameSafeId = id.replace(/\//g, "-")
+		var parentNameSafeId = nameSafeId
+		if (id.includes("/"))
+			parentNameSafeId = id.slice(0, id.lastIndexOf("/")).replace(/\//g, "-")
+		const name=`filetree-leaf-${nameSafeId}`
+		const parentname=`filetree-leaf-${parentNameSafeId}`
+		const title=id ? branch.Leaf.Title : "ROOT"
+		const isLiveParent = 'id00\/id11'.slice(0, id.length) == id
+		const isLive = 'id00\/id11' == id
+		return `
+			<div style="margin: 0; padding: 0; height: 0; width: 0;" id="${name}"></div>
+			<a style="flex-grow: 1;" href="${href}#${parentname}"><button style="width: 100%; text-align: left; outline: none;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">${title}</button></a>
+			<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>
+		`
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var html = []
+		var out = ``
+		for(var i in branches) {
+			html.push([branches[i].Leaf.Title, `<details open>` + branchHTML(i, branches[i]) + `</details>`])
+		}
+		html.sort()
+		for(var i in html)
+			out += html[i][1]
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse("{\n\t\t\t\"Leaf\": {\"Title\": \"\"},\n\t\t\t\"Branches\": {\n\t\t\t\t\"id00\": {\n\t\t\t\t\t\"Leaf\": {\"Title\": \"title id00\"},\n\t\t\t\t\t\"Branches\": {\n\t\t\t\t\t\t\"id10\": {\"Leaf\":{\"Title\":\"title id10\"},\"Branches\":{\n\t\t\t\t\t\t\t\"id20\": {\"Leaf\":{\"Title\":\"title id20\"},\"Branches\":{}}\n\t\t\t\t\t\t}},\n\t\t\t\t\t\t\"id11\": {\"Leaf\":{\"Title\":\"title id11\"},\"Branches\":{}}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\"id01\": {\"Leaf\":{\"Title\":\"title id01\"},\"Branches\":{}},\n\t\t\t\t\"id02\": {\"Leaf\":{\"Title\":\"title id02\"},\"Branches\":{}},\n\t\t\t\t\"id03\": {\"Leaf\":{\"Title\":\"title id03\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id05\": {\"Leaf\":{\"Title\":\"title id05\"},\"Branches\":{}},\n\t\t\t\t\"id06\": {\"Leaf\":{\"Title\":\"title id06\"},\"Branches\":{}},\n\t\t\t\t\"id07\": {\"Leaf\":{\"Title\":\"title id07 but it's really really really long\"},\"Branches\":{}}\n\t\t\t}\n\t\t}"))
+</script>

server/public/ui/templates/._import.ctmpl.html

@@ -0,0 +1,220 @@
+
+					<body class="fullscreen" style="border: 10px solid red;">
+				
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>

server/public/ui/templates/._results.ctmpl.html

@@ -0,0 +1,136 @@
+
+					<body class="fullscreen" style="border: 10px solid red;">
+				
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+<style>
+</style>
+</script>
+<div class="fullscreen tb_fullscreen">
+	<ul id="results">
+		
+			<li>
+				<a href="/ui/files/id00">title id00</a>
+			</li>
+		
+			<li>
+				<a href="/ui/files/id07">title id07 but it&#39;s really really really long</a>
+			</li>
+		
+			<li>
+				<a href="/ui/files/id00/id10/id10">title id00 / title id10</a>
+			</li>
+		
+			<li>
+				<a href="/ui/files/id00/id10/id20">title id00 / title id10 / title id20</a>
+			</li>
+		
+	</ul>
+</div>

server/public/ui/templates/._searchbar.ctmpl.html

@@ -0,0 +1,116 @@
+
+					<body class="fullscreen" style="border: 10px solid red;">
+				
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		 
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { 
+		var d = new Date().getTime();
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;
+				if(d > 0){
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+
+<form class="columns" action="/ui/search" method="GET">
+	<input class="thic_flex" type="text" name="q" placeholder="space delimited search regexp"/>
+	<input class="info lil_btn" type="submit" value="search"/>
+</form>

server/public/ui/templates/_editor.ctmpl

@@ -113,7 +113,7 @@
 		element: document.getElementById('my-text-area'),
 		forceSync: true,
 		indentWithTabs: false,
-		initialValue: "loading...",
+		initialValue: "{{ .This.Content }}",
 		showIcons: ["code", "table"],
 		spellChecker: false,
 		sideBySideFullscreen: false,
@@ -133,6 +133,5 @@
 		},
 		status: ["lines", "words", "cursor"],
 	})
-	easyMDE.value({{ .This.Content }})
 </script>
 {{ end }}

server/public/ui/templates/_import.ctmpl

@@ -75,6 +75,9 @@
 	.tb_fullscreen {
 		height: 100%;
 	}
+	.button, button, input[type="button"] {
+		height: auto;
+	}
 </style>
 <script>
 	function http(method, remote, callback, body, headers) {

server/todo.yaml

@@ -1,15 +1,20 @@
 todo:
+- use `read-only` for autogenerated things
+- map fullURLScraped->internalURL for relative links sometimes
+- anchors on gitlab wikis at least are bad
+- min-height for easymde
+- use `meta` so no need for extra level for explicit single files
+- scrape odo
+- mark generated via meta so other files in the dir can be created, deleted, replaced safely
+- rewrite links if available to local
 - table of contents
 - anchor per line
-- scrape odo
-- scrape gdoc
-- scrape gsheet
-- scrape gslide
 - anchor links work
-- rewrite links if available to local
 - ui; last updated; 2022.02.01T12:34:56
-- mark generated via meta so other files in the dir can be created, deleted, replaced safely
 done:
+- scrape gslide
+- scrape gsheet
+- scrape gdoc
 - alert box; https://concisecss.com/documentation/ui
 - hide checkbox for tree
 - do not rewrite .md title vs. link cause hrefs to ./gobs.md wont work

server/tree.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"encoding/json"
 	"io/ioutil"
 	"os"
 	"path"
@@ -53,7 +54,6 @@ func (base Leaf) Merge(updated Leaf) Leaf {
 
 type Tree struct {
 	root string
-	cachedRoot Branch
 }
 
 func NewTree(root string) Tree {
@@ -62,25 +62,72 @@ func NewTree(root string) Tree {
 
 func (tree Tree) WithRoot(root string) Tree {
 	tree.root = root
-	tree.cachedRoot = Branch{}
 	return tree
 }
 
 func (tree Tree) GetRootMeta() (Branch, error) {
-	return tree.getRoot(NewID(""), false, false)
+	if meta, ok := tree.getCachedRootMeta(); ok {
+		return meta, nil
+	}
+	got, err := tree.getRoot(NewID(""), false, false)
+	if err != nil {
+		return Branch{}, err
+	}
+	tree.cacheRootMeta(got)
+	return got, err
 }
 
 func (tree Tree) GetRoot() (Branch, error) {
-	if !tree.cachedRoot.IsZero() {
-		return tree.cachedRoot, nil
+	if root, ok := tree.getCachedRoot(); ok {
+		return root, nil
 	}
 	got, err := tree.getRoot(NewID(""), true, false)
-	if err == nil {
-		tree.cachedRoot = got
+	if err != nil {
+		return Branch{}, err
 	}
+	tree.cacheRoot(got)
 	return got, err
 }
 
+func (tree Tree) getCachedRoot() (Branch, bool) {
+	return tree.getCachedFrom("root.json")
+}
+
+func (tree Tree) getCachedRootMeta() (Branch, bool) {
+	return tree.getCachedFrom("root_meta.json")
+}
+
+func (tree Tree) getCachedFrom(name string) (Branch, bool) {
+	b, err := ioutil.ReadFile(path.Join(tree.root, name))
+	if err != nil {
+		return Branch{}, false
+	}
+	var branch Branch
+	err = json.Unmarshal(b, &branch)
+	return branch, err == nil
+}
+
+func (tree Tree) cacheRoot(branch Branch) {
+	tree.cacheRootFrom("root.json", branch)
+}
+
+func (tree Tree) cacheRootMeta(branch Branch) {
+	tree.cacheRootFrom("root_meta.json", branch)
+}
+
+func (tree Tree) cacheRootFrom(name string, branch Branch) {
+	b, err := json.Marshal(branch)
+	if err != nil {
+		return
+	}
+	ensureAndWrite(path.Join(tree.root, name), b)
+}
+
+func (tree Tree) cacheClear() {
+	os.Remove(path.Join(path.Join(tree.root, "root.json")))
+	os.Remove(path.Join(path.Join(tree.root, "root_meta.json")))
+}
+
 func (tree Tree) getRoot(pid ID, withContent, withDeleted bool) (Branch, error) {
 	m := Branch{Branches: map[ID]Branch{}}
 	entries, err := os.ReadDir(tree.root)
@@ -92,7 +139,7 @@ func (tree Tree) getRoot(pid ID, withContent, withDeleted bool) (Branch, error)
 	}
 	for _, entry := range entries {
 		if entry.Name() == "data.yaml" {
-			if b, err := ioutil.ReadFile(path.Join(tree.root, entry.Name())); err != nil {
+			if b, err := peekLeaf(withContent, path.Join(tree.root, entry.Name())); err != nil {
 				return Branch{}, err
 			} else if err := yaml.Unmarshal(b, &m.Leaf); err != nil {
 				return Branch{}, err
@@ -115,6 +162,10 @@ func (tree Tree) getRoot(pid ID, withContent, withDeleted bool) (Branch, error)
 	return m, nil
 }
 
+func peekLeaf(all bool, path string) ([]byte, error) {
+	return ioutil.ReadFile(path)
+}
+
 func (tree Tree) toDir(id ID) string {
 	return path.Dir(tree.toData(id))
 }
@@ -124,6 +175,7 @@ func (tree Tree) toData(id ID) string {
 }
 
 func (tree Tree) Put(id ID, input Leaf) error {
+	tree.cacheClear()
 	if _, err := os.Stat(tree.toData(id)); os.IsNotExist(err) {
 		b, err := yaml.Marshal(Leaf{})
 		if err != nil {
@@ -144,11 +196,11 @@ func (tree Tree) Put(id ID, input Leaf) error {
 	if err := ensureAndWrite(tree.toData(id), b); err != nil {
 		return err
 	}
-	tree.cachedRoot = Branch{}
 	return nil
 }
 
 func (tree Tree) Del(id ID) error {
+	tree.cacheClear()
 	got, err := tree.Get(id)
 	if os.IsNotExist(err) {
 		return nil
@@ -164,8 +216,8 @@ func (tree Tree) Del(id ID) error {
 }
 
 func (tree Tree) HardDel(id ID) error {
+	tree.cacheClear()
 	os.RemoveAll(tree.toDir(id))
-	tree.cachedRoot = Branch{}
 	return nil
 }
 

spike/review/reinvent/ezmded/server/go.mod

@@ -1,31 +0,0 @@
-module ezmded
-
-go 1.17
-
-require (
-	github.com/google/uuid v1.3.0
-	go.mongodb.org/mongo-driver v1.7.2
-	gopkg.in/yaml.v2 v2.4.0
-	local/args v0.0.0-00010101000000-000000000000
-	local/gziphttp v0.0.0-00010101000000-000000000000
-	local/router v0.0.0-00010101000000-000000000000
-	local/simpleserve v0.0.0-00010101000000-000000000000
-)
-
-require github.com/go-stack/stack v1.8.0 // indirect
-
-replace local/args => ../../../../../../../../args
-
-replace local/logb => ../../../../../../../../logb
-
-replace local/storage => ../../../../../../../../storage
-
-replace local/router => ../../../../../../../../router
-
-replace local/simpleserve => ../../../../../../../../simpleserve
-
-replace local/gziphttp => ../../../../../../../../gziphttp
-
-replace local/notes-server => ../../../../../../../../notes-server
-
-replace local/oauth2 => ../../../../../../../../oauth2