This issue has a bounty!

Successfully closing this issue by producing a production-ready PR can earn you not only the undying love of the IPFS community — it can net you a financial reward. See the current list of bounty issues and their values here.

The need in brief

We've had a handful of dir-index-html display requests lurking for a while that could benefit from being addressed together. These are each minor, but in total make the overall directory page UX substantially better.

Deliverable

To earn this bounty, please submit a PR that successfully solves for the following requirements, and documents them using screenshots from the test content.

EDIT 13 JULY 2020: Please also submit whatever upstream changes in go-ipfs must be made in order to enable this end result.

The original requests were each in their own issues -- including them here for context.

1. Add CID column (original issue)
   [ ] Add a column for CIDs between the name column and the size column
   [ ] The column should be responsive, truncating as needed by replacing characters from the middle of the CID with ellipses "..."
   [ ] CIDs should be clickable links that open the item as a new "root path" (note this also enables users to copy direct links to images or subdirectories)

2. Display viewed directory's size (original issue)
   [ ] Add the size of the current directory to the header of the table (mockup)
   [ ] Make sure the display behaves well at all responsive widths

3. Make path components into links (original issue)
   [ ] In table headers, make any components of the path displayed after "Index of" into individual links (i.e. any segments between directory slashes will go to that level of the directory tree)