Xananax/tree-html.sh

## tree-html.sh
#!/usr/bin/env bash
# Ever needed to send a collapsible list of files to someone?
# Boy do I have good news for you
# usage: run it in the dir
# requires tree

read -r -d '' HEAD << EOM
<html>
<head>
<title>Tree</title>
<meta charset="UTF-8" /><style>
details > summary {list-style: none;cursor:pointer}
details > summary::before {content: "🗀 "}
details > summary::-webkit-details-marker {display: none}
li{list-style: none}
li::before{content: "🗎 "}
</style></head><body></body><script>
const data =
EOM

read -r -d '' TAIL << EOM
;
const print = ({ type, name, contents }) => type === "file"
  ? \`<li>\${name}</li>\`
  : \`<details><summary>\${name}/</summary><ul>\${mapData(contents)}</ul></details>\`;
const mapData = (data) => data ? data.map(print).join("") : "";
const toggleAll = (t) => document.querySelectorAll("details").forEach( d => d.open = t);
const btn = (n,t) => \`<button onclick="toggleAll(\${t})">\${n}</button>\`;
document.body.innerHTML = btn("open all",true) + btn("close all", false) + mapData(data[0].contents);
</script>
</html>
EOM

#LC_ALL=en_US.UTF-8 spaces=$(printf "%b" "\U00A0\U1680\U180E\U2000\U2001\U2002\U2003\U2004\U2005\U2006\U2007\U2008\U2009\U200A\U200B\U202F\U205F\U3000\UFEFF")
FILENAME=$(basename $BASH_SOURCE)
TREE=$(tree --dirsfirst -q -J -I $FILENAME | tr -s '[:blank:]' ' ' | tr -d '\n' | tr -d '\r')
#TREE_CLEAN=${TREE//[$spaces]/ }

HTML="$HEAD$TREE$TAIL"

echo $HTML > index.html
	#!/usr/bin/env bash
	# Ever needed to send a collapsible list of files to someone?
	# Boy do I have good news for you
	# usage: run it in the dir
	# requires tree

	read -r -d '' HEAD << EOM
	<html>
	<head>
	<title>Tree</title>
	<meta charset="UTF-8" /><style>
	details > summary {list-style: none;cursor:pointer}
	details > summary::before {content: "🗀 "}
	details > summary::-webkit-details-marker {display: none}
	li{list-style: none}
	li::before{content: "🗎 "}
	</style></head><body></body><script>
	const data =
	EOM

	read -r -d '' TAIL << EOM
	;
	const print = ({ type, name, contents }) => type === "file"
	? \`<li>\${name}</li>\`
	: \`<details><summary>\${name}/</summary><ul>\${mapData(contents)}</ul></details>\`;
	const mapData = (data) => data ? data.map(print).join("") : "";
	const toggleAll = (t) => document.querySelectorAll("details").forEach( d => d.open = t);
	const btn = (n,t) => \`<button onclick="toggleAll(\${t})">\${n}</button>\`;
	document.body.innerHTML = btn("open all",true) + btn("close all", false) + mapData(data[0].contents);
	</script>
	</html>
	EOM

	#LC_ALL=en_US.UTF-8 spaces=$(printf "%b" "\U00A0\U1680\U180E\U2000\U2001\U2002\U2003\U2004\U2005\U2006\U2007\U2008\U2009\U200A\U200B\U202F\U205F\U3000\UFEFF")
	FILENAME=$(basename $BASH_SOURCE)
	TREE=$(tree --dirsfirst -q -J -I $FILENAME \| tr -s '[:blank:]' ' ' \| tr -d '\n' \| tr -d '\r')
	#TREE_CLEAN=${TREE//[$spaces]/ }

	HTML="$HEAD$TREE$TAIL"

	echo $HTML > index.html