From ec2201a3da5f18e55bfc0a54114ac935804f4ef8 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
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(`<span class="gt-mr-2 gt-vm attention-`)
n := node.(*Attention)
- _, _ = w.WriteString(strings.ToLower(n.AttentionType))
- _, _ = 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("</span>\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 <forgejo@gergo.csillger.hu>
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 <forgejo@gergo.csillger.hu>
---
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 <forgejo@gergo.csillger.hu>
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 <forgejo@gergo.csillger.hu>
---
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(`<blockquote class="gt-py-3 attention attention-%s"`, strings.ToLower(alertType))
+ blockquoteAttr := fmt.Sprintf(`<blockquote class="attention-header attention-%s"`, strings.ToLower(alertType))
classAttr := fmt.Sprintf(`class="attention-%s"`, strings.ToLower(alertType))
- iconAttr := fmt.Sprintf(`class="svg octicon-%s"`, alertIcon)
+ iconAttr := fmt.Sprintf(`svg octicon-%s`, alertIcon)
req := NewRequestWithJSON(t, "POST", "/api/v1/markdown", &api.MarkdownOption{
Text: input,
From eb97e721d115416a72e54ca7694ea9d1ac1f21f0 Mon Sep 17 00:00:00 2001
From: Gergely Nagy <forgejo@gergo.csillger.hu>
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 <forgejo@gergo.csillger.hu>
---
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 {