From ec2201a3da5f18e55bfc0a54114ac935804f4ef8 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 16 Mar 2024 19:34:38 +0800 Subject: [PATCH 1/4] 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) --- modules/markup/markdown/callout/github.go | 23 ++++++++++------------- modules/markup/sanitizer.go | 5 ++--- web_src/css/base.css | 17 +++++++++++------ 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/modules/markup/markdown/callout/github.go b/modules/markup/markdown/callout/github.go index 78f1db7e96..0a6ab10cac 100644 --- a/modules/markup/markdown/callout/github.go +++ b/modules/markup/markdown/callout/github.go @@ -68,7 +68,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea } // 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 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 func (r *GitHubCalloutHTMLRenderer) renderAttention(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) { if entering { - _, _ = w.WriteString(``) - var octiconType string + var octiconName string switch n.AttentionType { case "note": - octiconType = "info" + octiconName = "info" case "tip": - octiconType = "light-bulb" + octiconName = "light-bulb" case "important": - octiconType = "report" + octiconName = "report" case "warning": - octiconType = "alert" + octiconName = "alert" case "caution": - octiconType = "stop" + octiconName = "stop" + default: + octiconName = "info" } - _, _ = w.WriteString(string(svg.RenderHTML("octicon-" + octiconType))) - } else { - _, _ = w.WriteString("\n") + _, _ = w.WriteString(string(svg.RenderHTML("octicon-"+octiconName, 16, "attention-icon attention-"+n.AttentionType))) } return ast.WalkContinue, nil } diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go index ffc33c3b8e..ead9428fa4 100644 --- a/modules/markup/sanitizer.go +++ b/modules/markup/sanitizer.go @@ -64,10 +64,9 @@ func createDefaultPolicy() *bluemonday.Policy { policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span") // 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(`^gt-mr-2 gt-vm attention-\w+$`)).OnElements("span", "strong") - policy.AllowAttrs("class").Matching(regexp.MustCompile(`^svg octicon-(\w|-)+$`)).OnElements("svg") + policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg") policy.AllowAttrs("viewBox", "width", "height", "aria-hidden").OnElements("svg") policy.AllowAttrs("fill-rule", "d").OnElements("path") diff --git a/web_src/css/base.css b/web_src/css/base.css index b4beb41dcb..098933e57e 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1225,42 +1225,47 @@ input:-webkit-autofill:active, border-radius: var(--border-radius); } -.attention { +.attention-header { + padding: 0.5em 0.75em !important; color: var(--color-text) !important; } +.attention-icon { + margin: 2px 6px 0 0; +} + blockquote.attention-note { 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); } blockquote.attention-tip { border-left-color: var(--color-success-text); } -strong.attention-tip, span.attention-tip { +strong.attention-tip, svg.attention-tip { color: var(--color-success-text); } blockquote.attention-important { 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); } blockquote.attention-warning { border-left-color: var(--color-warning-text); } -strong.attention-warning, span.attention-warning { +strong.attention-warning, svg.attention-warning { color: var(--color-warning-text); } blockquote.attention-caution { 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); } From 58d4af8fdb16fa0a456b24ce9380e5644a598c71 Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Sat, 23 Mar 2024 15:29:46 +0100 Subject: [PATCH 2/4] Refactor the GitHub Legacy callout renderer too Following up on the previous commit, change the GitHub Legacy callout renderer to render the same as the refactored modern renderer. Signed-off-by: Gergely Nagy --- modules/markup/markdown/callout/github_legacy.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/markup/markdown/callout/github_legacy.go b/modules/markup/markdown/callout/github_legacy.go index add6b0a847..080cbe625c 100644 --- a/modules/markup/markdown/callout/github_legacy.go +++ b/modules/markup/markdown/callout/github_legacy.go @@ -49,7 +49,7 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te calloutNode.SetAttributeString("class", []byte("attention-"+calloutType)) // color the blockquote - v.SetAttributeString("class", []byte("gt-py-3 attention attention-"+calloutType)) + v.SetAttributeString("class", []byte("attention-header attention-"+calloutType)) // Prepend callout icon before the callout node itself firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType)) From 87cd08539ef4526a0a6a02cf5b6b67ce1b8e133d Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Sat, 23 Mar 2024 15:17:42 +0100 Subject: [PATCH 3/4] Update the TestRenderAlertBlocks integration test The alert/callout blocks rendering has been changed in the previous few commits, this adapts the test case that verifies them to the updated output. Signed-off-by: Gergely Nagy --- tests/integration/markup_test.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/integration/markup_test.go b/tests/integration/markup_test.go index b054abdaae..d63190a885 100644 --- a/tests/integration/markup_test.go +++ b/tests/integration/markup_test.go @@ -25,9 +25,9 @@ func TestRenderAlertBlocks(t *testing.T) { assertAlertBlock := func(t *testing.T, input, alertType, alertIcon string) { t.Helper() - blockquoteAttr := fmt.Sprintf(`
Date: Sat, 23 Mar 2024 18:42:38 +0100 Subject: [PATCH 4/4] Align callout icons with the callout text Adjust some CSS so that callout/attention icons line up better with the text of the attention header. Signed-off-by: Gergely Nagy --- web_src/css/base.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 098933e57e..895d773137 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1230,8 +1230,12 @@ input:-webkit-autofill:active, color: var(--color-text) !important; } +.attention-header :first-child { + display: flex; +} + .attention-icon { - margin: 2px 6px 0 0; + margin: auto 0.5em auto 0; } blockquote.attention-note {