feat(gateway): customizable menu items

ipfs · May 26, 2023 · ab987b2 · ab987b2
1 parent efc332b
commit ab987b2
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ The following emojis are used to highlight certain changes:
 - ✨ The gateway templates were updated to provide better features for users and gateway implementers:
   - New human-friendly error messages.
   - Updated, higher-definition icons in directory listings.
+  - Customizable menu items next to "About IPFS" and "Install IPFS".
 
 ## [0.8.0] - 2023-04-05
 ### Added

diff --git a/examples/gateway/common/handler.go b/examples/gateway/common/handler.go
@@ -4,6 +4,7 @@ import (
 	"net/http"
 
 	"github.com/ipfs/boxo/gateway"
+	"github.com/ipfs/boxo/gateway/assets"
 	"github.com/prometheus/client_golang/prometheus"
 	"github.com/prometheus/client_golang/prometheus/promhttp"
 	"go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp"
@@ -16,6 +17,12 @@ func NewHandler(gwAPI gateway.IPFSBackend) http.Handler {
 	gateway.AddAccessControlHeaders(headers)
 	conf := gateway.Config{
 		Headers: headers,
+		Menu: []assets.MenuItem{
+			{
+				URL:   "https://github.com/ipfs/boxo",
+				Title: "Boxo",
+			},
+		},
 	}
 
 	// Initialize the public gateways that we will want to have available through

diff --git a/gateway/assets/assets.go b/gateway/assets/assets.go
@@ -80,8 +80,13 @@ func initTemplates() {
 	}
 }
 
+type MenuItem struct {
+	URL   string
+	Title string
+}
+
 type GlobalData struct {
-	SupportURL string
+	Menu []MenuItem
 }
 
 type DagTemplateData struct {

diff --git a/gateway/assets/header.html b/gateway/assets/header.html
@@ -3,10 +3,8 @@
   <nav>
     <a href="https://ipfs.tech" target="_blank" rel="noopener noreferrer">About<span class="dn-mobile"> IPFS</span></a>
     <a href="https://ipfs.tech#install" target="_blank" rel="noopener noreferrer">Install<span class="dn-mobile"> IPFS</span></a>
-    {{ with .SupportURL }}
-    <a href="{{ . }}" target="_blank" rel="noopener noreferrer" title="Support">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.4 21"><circle cx="7.5" cy="4.8" r="1"/><circle cx="11.1" cy="4.8" r="1"/><path d="M12.7 8.4c-0.5-1.5-1.9-2.5-3.5-2.5 -1.6 0-3 1-3.5 2.5H12.7z"/><path d="M8.5 9.7H5c-0.5 0.8-0.7 1.7-0.7 2.7 0 2.6 1.8 4.8 4.2 5.2V9.7z"/><path d="M13.4 9.7H9.9v7.9c2.4-0.4 4.2-2.5 4.2-5.2C14.1 11.4 13.9 10.5 13.4 9.7z"/><circle cx="15.7" cy="12.9" r="1"/><circle cx="15.1" cy="15.4" r="1"/><circle cx="15.3" cy="10.4" r="1"/><circle cx="2.7" cy="12.9" r="1"/><circle cx="3.3" cy="15.4" r="1"/><circle cx="3.1" cy="10.4" r="1"/></svg>
-    </a>
+    {{ range .Menu }}
+      <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Title }}</a>
     {{ end }}
   </nav>
 </header>
diff --git a/gateway/assets/test/main.go b/gateway/assets/test/main.go
@@ -15,7 +15,10 @@ const (
 
 var directoryTestData = assets.DirectoryTemplateData{
 	GlobalData: assets.GlobalData{
-		SupportURL: "http://example.com",
+		Menu: []assets.MenuItem{{
+			URL:   "http://example.com",
+			Title: "Support",
+		}},
 	},
 	GatewayURL: "//localhost:3000",
 	DNSLink:    true,
@@ -61,7 +64,10 @@ var directoryTestData = assets.DirectoryTemplateData{
 
 var dagTestData = assets.DagTemplateData{
 	GlobalData: assets.GlobalData{
-		SupportURL: "http://example.com",
+		Menu: []assets.MenuItem{{
+			URL:   "http://example.com",
+			Title: "Support",
+		}},
 	},
 	Path:      "/ipfs/baguqeerabn4wonmz6icnk7dfckuizcsf4e4igua2ohdboecku225xxmujepa",
 	CID:       "baguqeerabn4wonmz6icnk7dfckuizcsf4e4igua2ohdboecku225xxmujepa",
@@ -111,7 +117,10 @@ func main() {
 			}
 			runTemplate(w, "error.html", &assets.ErrorTemplateData{
 				GlobalData: assets.GlobalData{
-					SupportURL: "http://example.com",
+					Menu: []assets.MenuItem{{
+						URL:   "http://example.com",
+						Title: "Support",
+					}},
 				},
 				StatusCode: statusCode,
 				StatusText: http.StatusText(statusCode),

diff --git a/gateway/errors.go b/gateway/errors.go
@@ -161,7 +161,7 @@ func (i *handler) webError(w http.ResponseWriter, r *http.Request, err error, de
 		w.WriteHeader(code)
 		_ = assets.ErrorTemplate.Execute(w, assets.ErrorTemplateData{
 			GlobalData: assets.GlobalData{
-				SupportURL: i.config.SupportURL,
+				Menu: i.config.Menu,
 			},
 			StatusCode: code,
 			StatusText: http.StatusText(code),

diff --git a/gateway/gateway.go b/gateway/gateway.go
@@ -9,6 +9,7 @@ import (
 
 	"github.com/ipfs/boxo/coreiface/path"
 	"github.com/ipfs/boxo/files"
+	"github.com/ipfs/boxo/gateway/assets"
 	"github.com/ipfs/boxo/ipld/unixfs"
 	"github.com/ipfs/go-cid"
 )
@@ -17,9 +18,10 @@ import (
 type Config struct {
 	Headers map[string][]string
 
-	// SupportURL will be exposed to the templates (directory listing, DAG page,
-	// and error page) to link the users to the support of this gateway.
-	SupportURL string
+	// Menu adds items to the gateway menu that are shown in pages, such as
+	// directory listings, DAG previews and errors. These will be displayed to the
+	// right of "About IPFS" and "Install IPFS".
+	Menu []assets.MenuItem
 }
 
 // TODO: Is this what we want for ImmutablePath?

diff --git a/gateway/handler_codec.go b/gateway/handler_codec.go
@@ -172,7 +172,7 @@ func (i *handler) serveCodecHTML(ctx context.Context, w http.ResponseWriter, r *
 	cidCodec := mc.Code(resolvedPath.Cid().Prefix().Codec)
 	if err := assets.DagTemplate.Execute(w, assets.DagTemplateData{
 		GlobalData: assets.GlobalData{
-			SupportURL: i.config.SupportURL,
+			Menu: i.config.Menu,
 		},
 		Path:      contentPath.String(),
 		CID:       resolvedPath.Cid().String(),

diff --git a/gateway/handler_unixfs_dir.go b/gateway/handler_unixfs_dir.go
@@ -198,7 +198,7 @@ func (i *handler) serveDirectory(ctx context.Context, w http.ResponseWriter, r *
 	// See comment above where originalUrlPath is declared.
 	tplData := assets.DirectoryTemplateData{
 		GlobalData: assets.GlobalData{
-			SupportURL: i.config.SupportURL,
+			Menu: i.config.Menu,
 		},
 		GatewayURL:  gwURL,
 		DNSLink:     dnslink,