Building A Quick and Simple and Stupid Static File Directory

Date: 28 Jan 2023

#post

While updating this website, we built a few other things under its domain, one of which is a file directory at https://repo.chaosarium.xyz/.

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 -R flag to make sure it goes into folders recursively
-I to exclude some files
-T some title to change what goes in the h1 in the html output
Use --charset utf-8 -o "/path/to/index.html" to write the result in some html file using utf-8 encoding

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. ¹

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 "."

H2 (If you want something fancier)

Consider something like:

Errors? What errors? Do I care? ↩︎

zettelkasten