Building A Quick and Simple and Stupid Static File Directory
#post
While updating this website
#post #front-end #python #automation #dev-log
Preamble aka ramble
This post has been delayed for almost a month... things are just not quite...Website Update - Launching the Third Generation
It just feels nicer to be able to share files via direct URLs from our site, but at the same time, we don’t want to spend too much time making a mechanism that’s way too overcomplicated. So this post is all about the stupidest workflow I can think of to implement such a system.
H2 First, what it does:
- Generate an html listing of a folder (on my computer) with links to those files with one line of command
- A Raycast script to run this line of command
- A simple way to deploy the file directory
H2 Treeeee
Well, a dumb way to list files is probably just to run tree in a directory. Here’s an example
~/Desktop
❯ tree toy\ folder
toy folder
├── bar
│ └── noop
├── foo
│ └── booo.txt
├── random.key
└── text.txt
It turns out that tree comes with html output. If we use the -H head followed by a name of the root "some name", we get some html.
❯ tree toy\ folder -H 'some name'
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Made by 'tree'">
<meta name="GENERATOR" content="tree v2.1.0 © 1996 - 2022 by Steve Baker, Thomas Moore, Francesc Rocher, Florian Sesser, Kyosuke Tokoro">
<title>Directory Tree</title>
<style type="text/css">
BODY { font-family : monospace, sans-serif; color: black;}
P { font-family : monospace, sans-serif; color: black; margin:0px; padding: 0px;}
A:visited { text-decoration : none; margin : 0px; padding : 0px;}
A:link { text-decoration : none; margin : 0px; padding : 0px;}
A:hover { text-decoration: underline; background-color : yellow; margin : 0px; padding : 0px;}
A:active { margin : 0px; padding : 0px;}
.VERSION { font-size: small; font-family : arial, sans-serif; }
.NORM { color: black; }
.FIFO { color: purple; }
.CHAR { color: yellow; }
.DIR { color: blue; }
.BLOCK { color: yellow; }
.LINK { color: aqua; }
.SOCK { color: fuchsia;}
.EXEC { color: green; }
</style>
</head>
<body>
<h1>Directory Tree</h1><p>
<a href="some name/">some name</a><br>
├── <a href="some name/bar/">bar</a><br>
│ └── <a href="some name/bar/noop">noop</a><br>
├── <a href="some name/foo/">foo</a><br>
│ └── <a href="some name/foo/booo.txt">booo.txt</a><br>
├── <a href="some name/random.key">random.key</a><br>
└── <a href="some name/text.txt">text.txt</a><br>
<br><br><p>
3 directories, 4 files
</p>
<hr>
<p class="VERSION">
tree v2.1.0 © 1996 - 2022 by Steve Baker and Thomas Moore <br>
HTML output hacked and copyleft © 1998 by Francesc Rocher <br>
JSON output hacked and copyleft © 2014 by Florian Sesser <br>
Charsets / OS/2 support © 2001 by Kyosuke Tokoro
</p>
</body>
</html>
And we can also:
- Use the
-Rflag to make sure it goes into folders recursively -Ito exclude some files-T some titleto change what goes in theh1in the html output- Use
--charset utf-8 -o "/path/to/index.html"to write the result in some html file usingutf-8encoding
That’s it, we just have to put the line somewhere we can run easily.
H2 Raycast Script
#!/bin/bash
# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Build Filedirectory Tree
# @raycast.mode fullOutput
tree "/path/to/filedirectory" -R -H '.' -T "repo" --charset utf-8 -o "/path/to/filedirectory/index.html"
Nothing fancy going on here.
H2 Recursion? Sure
To make an index for each subdirectory recursively, simply do this to run the command for each subdirectory. 1
gen_tree_current() {
local dir="$1"
for d in "$dir"*/ ; do (cd "$d" && echo "$d" && tree . -H '.' -T 'subdirectory' -R --charset utf-8 -o "index.html" && gen_tree_current "$d"); done
}
gen_tree_current "/path/to/filedirectory/"
And we’re done. Happy treeeeeeeeeeing.
H2 (Update: Netlify Deploy)
If you want to deploy your directory too, just add this line to the Raycast script
cd "/path/to/filedirectory/"
netlify deploy --prod --dir "."