S3 Bucket Listing

Provides a nice directory listing for some public S3 buckets I have. Here's an example. Download the latest build via:

wget https://public.nikhil.io/index.html

Development

# Install dependencies
pnpm i

# Start dev server
pnpm dev

# Check and Fix
pnpm check
pnpm fix

# Build. Deployable is dist/index.html
pnpm build

Deployment

Copy index.html to some bucket and configure index.json. Here's the bare, required config:

{
  "bucket": "foo.nikhil.io",
  "prefix": "",
  "ignoreRegexes": []
}

Here's a full example. It loads objects from a prefix other than the root prefix, is deployed at a prefix other than the root, and customizes colors, images, and the page title.

{
  "bucket": "foo.nikhil.io",
  "prefix": "things/",
  "ignoreRegexes": [],
  "colorBackground": "darkblue",
  "colorForeground": "white",
  "colorHighlight": "#336699",
  "colorHover": "#ff3300",
  "favicon": "/my-favicon.png", // Default is /favicon.ico
  "ogImage": "/og-image.foobar.png", // Default is /og-image.png
  "deployDir": "list",
  "pageTitle": "My Bucket"
}

• The ignoreRegexes should not contain / delimiters.
• If you want to show the root prefix, set prefix to an empty string (i.e. "")
• To deploy to a folder other than the bucket root, set deployDir (no trailing slashes).
• index.json must be co-located with index.html
• prefix needs to be an empty string if root. Must end in / if not.

TODO

• Debounce?
• Errors
• Loading
• grep -v for listing
• 404
• Customizable colors
• Deal with truncated listings. You always get 1,000 keys.
• Favicon
• Filter/Search
• OG Image
• Responsive
• Segments
• Sort
• Track changes to routes

References, Resources

• Tailwind Colors
• S3 ListObjects Request Syntax
• IBM Workplace Design
• Awesome SolidJS

License

MIT