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:
parent
012ed7019a
commit
ec2201a3da
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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")
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue