Display checked-in image in Markdown preview Co-authored-by: Anthony Wang <a@unnamed.website>

Changes

3 changed files (+45/-22)

• routes/preview/renderer.go
  • @@ -6,6 +6,8 @@
    package preview import ( + "bytes" + "net/url" "path/filepath" "github.com/microcosm-cc/bluemonday"
  • @@ -26,7 +28,41 @@ func (r MarkdownToHtmlRenderer) GetPreviewType() string {
    func (r MarkdownToHtmlRenderer) Render(code []byte) ([]byte, error) { sanitizer := bluemonday.UGCPolicy() - unsafe := blackfriday.Run(code, blackfriday.WithExtensions(blackfriday.CommonExtensions)) + parser := blackfriday.New(blackfriday.WithExtensions(blackfriday.CommonExtensions)) + + tree := parser.Parse(code) + tree.Walk(func(node *blackfriday.Node, entering bool) blackfriday.WalkStatus { + if !entering { + return blackfriday.GoToNext + } + + if node.Type == blackfriday.Image { + src := string(node.LinkData.Destination) + parsedURL, err := url.Parse(src) + if err == nil && parsedURL.Host != "" { + // External URL, skip. + return blackfriday.GoToNext + } + + queries := parsedURL.Query() + queries.Add("raw", "1") + parsedURL.RawQuery = queries.Encode() + + node.LinkData.Destination = []byte(parsedURL.String()) + } + + return blackfriday.GoToNext + }) + + var writer bytes.Buffer + renderer := blackfriday.NewHTMLRenderer(blackfriday.HTMLRendererParameters{}) + renderer.RenderHeader(&writer, tree) + tree.Walk(func(node *blackfriday.Node, entering bool) blackfriday.WalkStatus { + return renderer.RenderNode(&writer, node, entering) + }) + renderer.RenderFooter(&writer, tree) + + unsafe := blackfriday.Run(writer.Bytes(), blackfriday.WithExtensions(blackfriday.CommonExtensions)) return sanitizer.SanitizeBytes(unsafe), nil }
• routes/routes.go
  • @@ -142,7 +142,7 @@ func (d *deps) RepoIndex(w http.ResponseWriter, r *http.Request) {
    return blackfriday.GoToNext } - if node.Type == blackfriday.Link { + if node.Type == blackfriday.Link || node.Type == blackfriday.Image { href := string(node.LinkData.Destination) parsedURL, err := url.Parse(href) if err == nil && parsedURL.Host != "" {
  • @@ -155,7 +155,9 @@ func (d *deps) RepoIndex(w http.ResponseWriter, r *http.Request) {
    href = "." + href } - if strings.LastIndexByte(href, '/') == len(href)-1 { + if node.Type == blackfriday.Image { + node.LinkData.Destination = fmt.Appendf([]byte{}, "/%s/blob/%s/%s?raw=true", name, mainBranch, href) + } else if strings.LastIndexByte(href, '/') == len(href)-1 { node.LinkData.Destination = fmt.Appendf([]byte{}, "/%s/tree/%s/%s", name, mainBranch, href) node.LinkData.Destination = node.LinkData.Destination[:len(node.LinkData.Destination)-1] } else {
• static/html-content.css
  • @@ -125,23 +125,8 @@
    color: inherit; } - .html-content img[src^="./"] { - display: inline-flex; - flex-direction: column; - padding: var(--space-lg) var(--space-xl); - font-size: var(--font-sm); - border: 1px solid var(--color-border-subtle); - line-height: 1.2; - gap: var(--space-xs); - - border-radius: var(--radii-md); - box-shadow: 1px 1px 4px var(--color-shadow); - } - .html-content img[src^="./"]::after { - display: block; - content: "Rendering of local image is not supported."; - font-size: var(--font-xs); - font-style: italic; - - color: var(--color-fg-weak); + .html-content img, + .html-content picture, + .html-content video { + max-width: 100%; }