appview/pages: show README files in tree listings

We have README files displayed on the main page of a repository, but we
don't do that on subfolders.

Since xrpc was added, we can call it for every file in the list of
potential README file names and pick out if any are present in the
directory we're listing out

Signed-off-by: Skyler Grey <[e-mail]>

appview/pages/pages.go

···
 }
 
 type RepoTreeParams struct {
-	LoggedInUser *oauth.User
-	RepoInfo     repoinfo.RepoInfo
-	Active       string
-	BreadCrumbs  [][]string
-	TreePath     string
+	LoggedInUser   *oauth.User
+	RepoInfo       repoinfo.RepoInfo
+	Active         string
+	BreadCrumbs    [][]string
+	TreePath       string
+	Readme         string
+	ReadmeFileName string
+	HTMLReadme     template.HTML
+	Raw            bool
 	types.RepoTreeResponse
 }
 
···
 
 func (p *Pages) RepoTree(w io.Writer, params RepoTreeParams) error {
 	params.Active = "overview"
+
+	if params.ReadmeFileName != "" {
+		ext := filepath.Ext(params.ReadmeFileName)
+		switch ext {
+		case ".md", ".markdown", ".mdown", ".mkdn", ".mkd":
+			params.Raw = false
+			htmlString := p.rctx.RenderMarkdown(params.Readme)
+			sanitized := p.rctx.SanitizeDefault(htmlString)
+			params.HTMLReadme = template.HTML(sanitized)
+		default:
+			params.Raw = true
+		}
+	}
+
 	return p.executeRepo("repo/tree", w, params)
 }
 

appview/pages/templates/repo/tree.html

···
   </div>
 </main>
 {{end}}
+
+{{ define "repoAfter" }}
+    {{- if or .HTMLReadme .Readme -}}
+        <div class="mt-4 rounded bg-white dark:bg-gray-800 drop-shadow-sm w-full mx-auto overflow-hidden">
+            {{- if .ReadmeFileName -}}
+            <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center gap-2">
+                {{ i "file-text" "w-4 h-4" "text-gray-600 dark:text-gray-400" }}
+                <span class="font-mono text-sm text-gray-800 dark:text-gray-200">{{ .ReadmeFileName }}</span>
+            </div>
+            {{- end -}}
+            <section
+                class="p-6 overflow-auto {{ if not .Raw }}
+                    prose dark:prose-invert dark:[&_pre]:bg-gray-900
+                    dark:[&_code]:text-gray-300 dark:[&_pre_code]:bg-gray-900
+                    dark:[&_pre]:border dark:[&_pre]:border-gray-700
+                {{ end }}"
+            >
+                <article class="{{ if .Raw }}whitespace-pre{{ end }}">{{- if .Raw -}}<pre class="dark:bg-gray-800 dark:text-white overflow-x-auto">
+                            {{- .Readme -}}
+                        </pre>
+                    {{- else -}}
+                        {{ .HTMLReadme }}
+                    {{- end -}}</article>
+            </section>
+        </div>
+    {{- end -}}
+{{ end }}

appview/repo/repo.go

···
 		return
 	}
 
+	// readme content
+	var (
+		readmeContent  string
+		readmeFileName string
+	)
+
+	for _, filename := range markup.ReadmeFilenames {
+		path := fmt.Sprintf("%s/%s", treePath, filename)
+		blobResp, err := tangled.RepoBlob(r.Context(), xrpcc, path, false, ref, repo)
+		if err != nil {
+			continue
+		}
+
+		if blobResp == nil {
+			continue
+		}
+
+		readmeContent = blobResp.Content
+		readmeFileName = path
+		break
+	}
+
 	// Convert XRPC response to internal types.RepoTreeResponse
 	files := make([]types.NiceTree, len(xrpcResp.Files))
 	for i, xrpcFile := range xrpcResp.Files {
···
 		BreadCrumbs:      breadcrumbs,
 		TreePath:         treePath,
 		RepoInfo:         f.RepoInfo(user),
+		Readme:           readmeContent,
+		ReadmeFileName:   readmeFileName,
 		RepoTreeResponse: result,
 	})
 }