Last active
February 7, 2021 01:26
-
-
Save Xananax/83c4a82eb900fa4f4debc5a742789b7d to your computer and use it in GitHub Desktop.
Directory structure to HTML with collapsible directories
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/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 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment