feat(web/og): prefer file name over id in previews (#309)

Author: robherley

internal/opengraph/opengraph.go

@@ -96,6 +96,7 @@ func abbreviate(s string, max int) string {
 // FileInfo contains the metadata displayed on an OG image.
 type FileInfo struct {
 	ID        string
+	Name      string
 	Type      string
 	Size      uint64
 	UpdatedAt time.Time
@@ -172,8 +173,12 @@ func (r *Renderer) WriteImage(w io.Writer, info *FileInfo) error {
 		color color.NRGBA
 	}
 
+	identifierKey, identifier := "id", info.ID
+	if info.Name != "" {
+		identifierKey, identifier = "name", info.Name
+	}
 	props := []struct{ key, value string }{
-		{"id", abbreviate(info.ID, 26)},
+		{identifierKey, abbreviate(identifier, 26)},
 		{"type", strings.ToLower(info.Type)},
 		{"size", humanize.Bytes(info.Size)},
 	}

internal/web/service_test.go

@@ -411,6 +411,53 @@ func (suite *HTTPServiceSuite) TestFileMarkdownAccept() {
 	})
 }
 
+func (suite *HTTPServiceSuite) TestFilePreviewMetadata() {
+	ts := httptest.NewServer(suite.service.Handler)
+	defer ts.Close()
+
+	tests := []struct {
+		name        string
+		fileID      string
+		fileName    string
+		previewName string
+	}{
+		{name: "named file", fileID: "namedpreview", fileName: "my-notes", previewName: "my-notes"},
+		{name: "unnamed file", fileID: "previewtest", previewName: "previewtest"},
+	}
+
+	for _, tt := range tests {
+		suite.Run(tt.name, func() {
+			file := testutil.Fixtures.File(suite.T())
+			file.ID = tt.fileID
+			file.Name = tt.fileName
+			file.Type = "go"
+
+			suite.mockDB.Files.EXPECT().Find(mock.Anything, file.ID).Return(&file, nil)
+			suite.mockDB.Files.EXPECT().FindContent(mock.Anything, file.ID).Return([]byte("package preview"), nil)
+			suite.mockDB.Revisions.EXPECT().CountByFileID(mock.Anything, file.ID).Return(int64(0), nil)
+
+			resp, err := ts.Client().Get(ts.URL + "/f/" + file.ID)
+			suite.Require().NoError(err)
+			defer resp.Body.Close()
+			suite.Require().Equal(http.StatusOK, resp.StatusCode)
+
+			body, err := io.ReadAll(resp.Body)
+			suite.Require().NoError(err)
+			html := string(body)
+			suite.Contains(html, "<title>"+tt.previewName+" - snips.sh</title>")
+			suite.Contains(html, `property="og:title" content="`+tt.previewName+` - snips.sh"`)
+			suite.Contains(html, `name="twitter:title" content="`+tt.previewName+` - snips.sh"`)
+			suite.Contains(html, `property="og:description" content="`+tt.previewName+` · go · 100 B ·`)
+			previewPath := "/f/" + file.ID
+			if file.Name != "" {
+				previewPath += "/n/" + file.Name
+			}
+			suite.Contains(html, `property="og:url" content="http://localhost:8080`+previewPath+`"`)
+			suite.Contains(html, `property="og:image" content="http://localhost:8080`+previewPath+`/og.png"`)
+		})
+	}
+}
+
 func (suite *HTTPServiceSuite) TestPprofEndpoints() {
 	suite.Run("pprof unavailable when debug is off", func() {
 		// Default config has Debug=false, so the route is not registered.

internal/web/ui.go

@@ -224,6 +224,13 @@ func filePath(r *http.Request, file *snips.File) string {
 	return fmt.Sprintf("/f/%s", file.ID)
 }
 
+func preferredFilePath(file *snips.File) string {
+	if file.Name != "" {
+		return fmt.Sprintf("/f/%s/n/%s", file.ID, file.Name)
+	}
+	return fmt.Sprintf("/f/%s", file.ID)
+}
+
 func (ui *UI) File(w http.ResponseWriter, r *http.Request) {
 	log := logger.From(r.Context())
 
@@ -316,12 +323,18 @@ func (ui *UI) File(w http.ResponseWriter, r *http.Request) {
 	}
 
 	path := filePath(r, file)
-	ogImageURL := fmt.Sprintf("%s://%s%s/og.png", ui.cfg.HTTP.External.Scheme, ui.cfg.HTTP.External.Host, path)
-	ogDescription := fmt.Sprintf("%s · %s · %s · %s", file.ID, strings.ToLower(file.Type), humanize.Bytes(file.Size), humanize.Time(file.UpdatedAt))
+	previewURL := fmt.Sprintf("%s://%s%s", ui.cfg.HTTP.External.Scheme, ui.cfg.HTTP.External.Host, preferredFilePath(file))
+	ogImageURL := previewURL + "/og.png"
+	previewName := file.ID
+	if file.Name != "" {
+		previewName = file.Name
+	}
+	ogDescription := fmt.Sprintf("%s · %s · %s · %s", previewName, strings.ToLower(file.Type), humanize.Bytes(file.Size), humanize.Time(file.UpdatedAt))
 
 	vars := map[string]interface{}{
 		"FileID":        file.ID,
 		"FileName":      file.Name,
+		"PreviewName":   previewName,
 		"FilePath":      path,
 		"FileSize":      humanize.Bytes(file.Size),
 		"CreatedAt":     humanize.Time(file.CreatedAt),
@@ -334,6 +347,7 @@ func (ui *UI) File(w http.ResponseWriter, r *http.Request) {
 		"Private":       file.Private,
 		"CommitSHA":     config.BuildCommit(),
 		"OGImageURL":    ogImageURL,
+		"OGURL":         previewURL,
 		"OGDescription": ogDescription,
 		"RevisionCount": revisionCount,
 	}
@@ -402,6 +416,7 @@ func (ui *UI) OGImage(w http.ResponseWriter, r *http.Request) {
 	var img bytes.Buffer
 	err = ui.og.WriteImage(&img, &opengraph.FileInfo{
 		ID:        file.ID,
+		Name:      file.Name,
 		Type:      file.Type,
 		Size:      file.Size,
 		UpdatedAt: file.UpdatedAt,

web/templates/file.go.html

@@ -1,13 +1,15 @@
-{{ define "title" }}{{ .FileID }} - snips.sh{{ end }} {{ define "head" }}
-<meta property="og:title" content="{{.FileID}} - snips.sh" />
+{{ define "title" }}{{ .PreviewName }} - snips.sh{{ end }} {{ define "head" }}
+<meta property="og:title" content="{{.PreviewName}} - snips.sh" />
 <meta property="og:type" content="article" />
 <meta property="og:site_name" content="snips.sh" />
+<meta property="og:url" content="{{.OGURL}}" />
 <meta property="og:description" content="{{.OGDescription}}" />
+<link rel="canonical" href="{{.OGURL}}" />
 {{ if .OGImageURL }}
 <meta property="og:image" content="{{.OGImageURL}}" />
 {{ end }}
 <meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content="{{.FileID}} - snips.sh" />
+<meta name="twitter:title" content="{{.PreviewName}} - snips.sh" />
 <meta name="twitter:description" content="{{.OGDescription}}" />
 {{ if .OGImageURL }}
 <meta name="twitter:image" content="{{.OGImageURL}}" />