Refactor markdown attention render (#29833)

* Remove some deadcode
* Use 2-word name for CSS class names
* Remove "gt-*" rules for sanitizer

The UI doesn't change much.

(cherry picked from commit 66902d89e567ab1ae6dfb828636999c61ff0149e)
This commit is contained in:
wxiaoguang 2024-03-16 19:34:38 +08:00 committed by Gergely Nagy
parent 012ed7019a
commit ec2201a3da
No known key found for this signature in database
3 changed files with 23 additions and 22 deletions

View file

@ -68,7 +68,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea
} }
// color the blockquote // color the blockquote
v.SetAttributeString("class", []byte("gt-py-3 attention attention-"+attentionType)) v.SetAttributeString("class", []byte("attention-header attention-"+attentionType))
// create an emphasis to make it bold // create an emphasis to make it bold
attentionParagraph := ast.NewParagraph() attentionParagraph := ast.NewParagraph()
@ -104,27 +104,24 @@ func (r *GitHubCalloutHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncR
// renderAttention renders a quote marked with i.e. "> **Note**" or "> **Warning**" with a corresponding svg // renderAttention renders a quote marked with i.e. "> **Note**" or "> **Warning**" with a corresponding svg
func (r *GitHubCalloutHTMLRenderer) renderAttention(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) { func (r *GitHubCalloutHTMLRenderer) renderAttention(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
if entering { if entering {
_, _ = w.WriteString(`<span class="gt-mr-2 gt-vm attention-`)
n := node.(*Attention) n := node.(*Attention)
_, _ = w.WriteString(strings.ToLower(n.AttentionType))
_, _ = w.WriteString(`">`)
var octiconType string var octiconName string
switch n.AttentionType { switch n.AttentionType {
case "note": case "note":
octiconType = "info" octiconName = "info"
case "tip": case "tip":
octiconType = "light-bulb" octiconName = "light-bulb"
case "important": case "important":
octiconType = "report" octiconName = "report"
case "warning": case "warning":
octiconType = "alert" octiconName = "alert"
case "caution": case "caution":
octiconType = "stop" octiconName = "stop"
default:
octiconName = "info"
} }
_, _ = w.WriteString(string(svg.RenderHTML("octicon-" + octiconType))) _, _ = w.WriteString(string(svg.RenderHTML("octicon-"+octiconName, 16, "attention-icon attention-"+n.AttentionType)))
} else {
_, _ = w.WriteString("</span>\n")
} }
return ast.WalkContinue, nil return ast.WalkContinue, nil
} }

View file

@ -64,10 +64,9 @@ func createDefaultPolicy() *bluemonday.Policy {
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
// For attention // For attention
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^gt-py-3 attention attention-\w+$`)).OnElements("blockquote") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header attention-\w+$`)).OnElements("blockquote")
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong")
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^gt-mr-2 gt-vm attention-\w+$`)).OnElements("span", "strong") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^svg octicon-(\w|-)+$`)).OnElements("svg")
policy.AllowAttrs("viewBox", "width", "height", "aria-hidden").OnElements("svg") policy.AllowAttrs("viewBox", "width", "height", "aria-hidden").OnElements("svg")
policy.AllowAttrs("fill-rule", "d").OnElements("path") policy.AllowAttrs("fill-rule", "d").OnElements("path")

View file

@ -1225,42 +1225,47 @@ input:-webkit-autofill:active,
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.attention { .attention-header {
padding: 0.5em 0.75em !important;
color: var(--color-text) !important; color: var(--color-text) !important;
} }
.attention-icon {
margin: 2px 6px 0 0;
}
blockquote.attention-note { blockquote.attention-note {
border-left-color: var(--color-blue-dark-1); border-left-color: var(--color-blue-dark-1);
} }
strong.attention-note, span.attention-note { strong.attention-note, svg.attention-note {
color: var(--color-blue-dark-1); color: var(--color-blue-dark-1);
} }
blockquote.attention-tip { blockquote.attention-tip {
border-left-color: var(--color-success-text); border-left-color: var(--color-success-text);
} }
strong.attention-tip, span.attention-tip { strong.attention-tip, svg.attention-tip {
color: var(--color-success-text); color: var(--color-success-text);
} }
blockquote.attention-important { blockquote.attention-important {
border-left-color: var(--color-violet-dark-1); border-left-color: var(--color-violet-dark-1);
} }
strong.attention-important, span.attention-important { strong.attention-important, svg.attention-important {
color: var(--color-violet-dark-1); color: var(--color-violet-dark-1);
} }
blockquote.attention-warning { blockquote.attention-warning {
border-left-color: var(--color-warning-text); border-left-color: var(--color-warning-text);
} }
strong.attention-warning, span.attention-warning { strong.attention-warning, svg.attention-warning {
color: var(--color-warning-text); color: var(--color-warning-text);
} }
blockquote.attention-caution { blockquote.attention-caution {
border-left-color: var(--color-red-dark-1); border-left-color: var(--color-red-dark-1);
} }
strong.attention-caution, span.attention-caution { strong.attention-caution, svg.attention-caution {
color: var(--color-red-dark-1); color: var(--color-red-dark-1);
} }