Directory listings are missing favicon definition, which makes browser to make request for implicit /favicon.ico which always fails.

To illustrate, opening https://bafybeiccfclkdtucu6y4yc5cpr6y3yuinr67svmii46v5cfcrkp47ihehy.ipfs.dweb.link/ produces two requests:

We could either add a favicon (would have to be inlined as dataurl to work in every context) or supress the request with:

<link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">

It is quite misleading.

Not sure how to use this repo? Related to #10.

People share links on social media and forums. Most of places have "oneboxing" logic, which turns link into more rich preview card with title, one line summary, and a thumbnail:

Problem

Right now, when someone shares IPFS dir listing on social media, the card includes title, but instead of summary, we get random text from the page and no image.

Our directory listing pages should include relevant metadata in meta headers, so if someone shares a link to a directory, it looks better, provides educational information that the link is content-addressed + perhaps has an IPFS-themed thumbnail to make share more interesting.

TODO

I beleive we should make it look good in three most popular contexts:

• Open Graph (Facebook) – https://ogp.me
• Twitter Cards - https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

Useful links

• Sample dir listing for testing (Project Apollo Archives): https://bafybeiccfclkdtucu6y4yc5cpr6y3yuinr67svmii46v5cfcrkp47ihehy.ipfs.dweb.link/
• prior art: meta headers at blog.ipfs.io: https://github.com/ipfs/blog/blob/83263930019e794b4fcf809ef19599551d44d43c/layouts/partials/head.html#L25-L42
• Facebook
  • sharing debugger: https://developers.facebook.com/tools/debug/ (sadl yrequires account, which I don't have :( )
  • meta tags docs https://developers.facebook.com/docs/sharing/webmasters/
• http://debug.iframely.com - debug URLs against oEmbed, Twitter Cards, Open Graph and Iframely specs

cc @jessicaschilling (this is the thing I briefly mentioned it the other day)

Sorry to bug you with notifications. testing with a real repo:

@ipfsbot cache Qmd24Xo87dx1oL6VjG7gYWiLP4R2QWh8m7i9eieQkGjoAV

If the meta tag is not in the first 1024 bytes of the file, the browser starts over parsing the page when it reaches the tag, which means the stylesheet with its embedded images is parsed twice.

Out of the box install of IPFS will conflict with Cisco Anywhere Connect. In my particular case it was running on OSX Catalina. I had a standard install of the VPN software with not customizations. I downloaded IPFS Desktop and spent better part of a day tracking down why the daemon wouldn't start. On the enterprise front CISCO VPN software is pretty standard and this will get in the way of enterprise level deployments. I think the notifications should come front and center for non-computer science types so they understand they have a port conflict.
YMMV

The dir-index is looking good when viewed on a computer or laptop. However, when using a smartphone the dir-index does not adapt to the small screen and you have to zoom-in and zoom-out to view and click on directory entries.

As a solution to this I recommend to use HTML5 and responsive Web design.

the sizes are annoying to read, would be nicer as humanized (with the full bytes in the html, but not shown, or if shown, shown as well)

Requesting a simple test program for purposes of being able to cross-browser test the dir-index-html files page itself. At present, it's only possible to browser-test using the flat html file with the short variable names themselves, which isn't terribly accurate when it comes to looking for display errors. Thank you!

The size of child directories are already shown, it would be nice to also show the size of the current directory.
Example:

Preprocessing: Automate the css bundling and injection into dir-index-uncat.html with gulp-inject / gulp-usemin / gulp-useref

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)

The path components should be links

The embedded style references a handful of fonts via a relative and nonexistant path ../fonts/
For instance font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);
This specifically causes issues when doing something like wget -r http://gateway/ipfs/Qm... presenting a bunch of 404's up front.

I'm not familiar enough with CSS to know, but is there any analog to the HTML <base> tag?
Specifically, I'm wondering if there's a way to hash these fonts and make the source target relative to the gateway root.
i.e. src:url(${gatewayroot}/ipfs/Qm.../font.eot)

If not, I suppose it would be best to just remove them.

fiatjaf: why doesn't the gateway http output for unixfs dirs show the hashes of linked files?

Good question!

• I suspect CIDs could be easily added to listing, next to the Size column
• CIDs could be clickable links that open item as a new "root path"
  • this also enables users to copy direct link to image or a subdirectory
• It probably requires changes to https://github.com/ipfs/dir-index-html and then switching go-ipfs to new version

cc @olizilla @fiatjaf

The translate="no" property should be added to the listed IPFS hashes to prevent browsers trying to translate the index pages to English, despite already being in English.

My latest sites show on ipfs with ipns but not with cloudflare getway.

Latest is https://ipfs.io/ipns/k51qzi5uqu5diddda9nm0f91pd9o2iaag71td786zosczje4kll4u9wmrwzbjf

Here cloudflare showing old sites.
https://cloudflare-ipfs.com/ipns/k51qzi5uqu5diddda9nm0f91pd9o2iaag71td786zosczje4kll4u9wmrwzbjf

There is a problem when directory listing happens on DNSLink gateway (website under own domain name, backed by go-ipfs+DNSLink)

How to reproduce

To illustrate, if I render HTML like this (with go-ipfs 0.7.0):

$ curl -H "Host: dist.ipfs.io" -sD - "http://127.0.0.1:8080/go-ipfs/v0.7.0"

The breadcrumbs are broken:

          Index of
          /ipns/<a href="/ipns/dist.ipfs.io">dist.ipfs.io</a>/<a href="/ipns/dist.ipfs.io/go-ipfs">go-ipfs</a>/<a href="/ipns/dist.ipfs.io/go-ipfs/v0.7.0">v0.7.0</a>

Links under filenames are ok, but direct links to CID under truncated CIDs are broken:

        <td>
          <a href="/go-ipfs/v0.7.0/go-ipfs_v0.7.0_windows-amd64.zip.sha512">go-ipfs_v0.7.0_windows-amd64.zip.sha512</a>
        </td>
        <td class="no-linebreak">
          
          <a class="ipfs-hash" href="/ipfs/QmZwRgWU2St6St7bQi1uAh2j6EQHEJsTxuY7igVDi3dY1h">
            QmZw…dY1h
          </a>

This is because the /ipfs/... gateway is not mounted under DNSLink hostnames.
That is why attempt to load content path will fail:

$ curl -H "Host: dist.ipfs.io" -sD - "http://127.0.0.1:8080/ipfs/QmZwRgWU2St6St7bQi1uAh2j6EQHEJsTxuY7igVDi3dY1h"
HTTP/1.1 404 Not Found

TLDR

Good news is that the main link under filename continue to work, what is broken is this newly added CID column Its broken on DNSLink websites such as https://dist.ipfs.io/go-ipfs/v0.7.0 (when loaded without redirect to local gateway).

How to fix

• Quick&dirty fix is to hide CID colum and disable links to /ipfs and /ipns when used on DNSLink gateway (path being /ipns/{Host} where Host match value from the header of the same name)
• A proper fix require additional analysis
  • It should be possible to make breadcrumbs functional
  • ... but I don't think we can fix CID colum in DNSLink mod: we don't have knowledge if there is a public gateway available at all, and probably don't want to hardcode links to ipfs.io.
    • 💔 perhaps it should remain hidden in that mode?
    • 💚 or, to keep UI the same everywhere, when /ipfs/<cid> is not available, link to https://cid.ipfs.io#<cid> instead
• sidenote: while working on this disable IPFS Companion to ensure you are looking at DNSlink gateway (context of this bug), and not the subdomain gateway at *.ipns.localhost (no bug in subdomain contexts)

Currently video files have a generic "file" icon, they should have an icon that indicates that they are videos.

Humanize the sizes

Add links to the index listing header:

• What is IPFS?
• Install IPFS
• Bug Report icon (linking to https://github.com/ipfs/dir-index-html/issues/)

nor fork