Add CID column

dir-index.html

@@ -33,6 +33,17 @@
  .ml-auto {
    margin-left: auto;
  }
+ .text-truncate {
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+ }
+ .table-responsive {
+   display: block;
+   width: 100%;
+   overflow-x: auto;
+   -webkit-overflow-scrolling: touch;
+ }
 </style>
 
 <title>{{ .Path }}</title>
@@ -75,6 +86,7 @@
       </div>
       {{ end }}
     </div>
+    <div class="table-responsive">
     <table>
       <tr>
         <td class="type-icon">
@@ -84,6 +96,7 @@
           <a href="{{.BackLink | urlEscape}}">..</a>
         </td>
         <td></td>
+        <td></td>
       </tr>
       {{ range .Listing }}
       <tr>
@@ -93,10 +106,19 @@
         <td>
           <a href="{{ .Path | urlEscape }}">{{ .Name }}</a>
         </td>
+        <td>
+          {{ if .Hash }}
+          <a class="d-flex" style="width:33vw; max-width:30em; max-width: max-content" href="/ipfs/{{ .Hash | urlEscape }}">
+            <span class="text-truncate" style="min-width: 2.5em">{{ slice .Hash 0 40 }}</span>
+            <span class="no-linebreak">{{ slice .Hash 40 }}</span>
+          </a>
+          {{ end }}
+        </td>
         <td class="no-linebreak">{{ .Size }}</td>
       </tr>
       {{ end }}
     </table>
+    </div>
   </div>
 </body>
 </html>

test/main.go

@@ -24,6 +24,7 @@ type directoryItem struct {
 	Size string
 	Name string
 	Path string
+	Hash string
 }
 
 type breadcrumb struct {
@@ -37,10 +38,12 @@ var testData = listingTemplateData{
 		Size: "25 MiB",
 		Name: "short-film.mov",
 		Path: testPath + "/short-film.mov",
+		Hash: "QmQuxBarQXB2mzChmMeKY47C43LxUdg1NDJ5MWcKMKxDu7",
 	}, {
 		Size: "1 KiB",
 		Name: "this-piece-of-papers-got-47-words-37-sentences-58-words-we-wanna-know.txt",
 		Path: testPath + "/this-piece-of-papers-got-47-words-37-sentences-58-words-we-wanna-know.txt",
+		Hash: "QmquXbaRQXB2mzChmMeKY47C43LxUdg1NDJ5MWcKMKxDu7",
 	}},
 	Size: "25 MiB",
 	Path: testPath,