Redmine

When running the following stylelint check:

$ npx stylelint "app/assets/stylesheets/**/*.css" 

app/assets/stylesheets/application.css
  1279:3  ✖  Unexpected shorthand "margin" after "margin-bottom"  declaration-block-no-shorthand-property-overrides

✖ 1 problem (1 error, 0 warnings)

This issue can be fixed with the following diff:

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index c63a89a75..5c6ca8172 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1275,8 +1275,7 @@ div.flash.warning svg.icon-svg, .conflict svg.icon-svg {

 .markdown-alert-title {
   font-weight: bold;
-  margin-bottom: 0.5em;
-  margin: 0;
+  margin: 0 0 0.5em 0;
 }

 .markdown-alert-tip { border-color: #5db651; }

Mizuki ISHIKAWA wrote in #note-3:

When running the following stylelint check:
[...]

This issue can be fixed with the following diff:
[...]

Thank you, I have committed the fix in r23730.

Mizuki ISHIKAWA wrote in #note-6:

I have attached a patch to add to the help. It is for English only.
I am not a native English speaker, so please correct me if you find anything unnatural!

Thanks!

Is there any reason for why you chose to write [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] with capital letters?

Marius BĂLTEANU wrote in #note-8:

Mizuki ISHIKAWA wrote in #note-6:

I have attached a patch to add to the help. It is for English only.
I am not a native English speaker, so please correct me if you find anything unnatural!

Thanks!

Is there any reason for why you chose to write [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] with capital letters?

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
I chose to use capital letters for [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] because they were also capitalized on the GitHub syntax page. However, replacing them with lowercase is perfectly fine if you prefer.

Mizuki ISHIKAWA wrote in #note-9:

[...]

Is there any reason for why you chose to write [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] with capital letters?

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
I chose to use capital letters for [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] because they were also capitalized on the GitHub syntax page. However, replacing them with lowercase is perfectly fine if you prefer.

Got it, thanks!

Florian Walchshofer wrote in #note-11:

I would also prefer if this initial symbol is also displayed, just like on the GitHub syntax page
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

Yes, I think we can have a HTML::Pipeline::Filter that adds the properly svg icon. The following code is just an example to prove the implementation, it still need some work to be finalised.

include IconsHelper

module Redmine
  module WikiFormatting
    module CommonMark
      class AlertsIconsFilter < HTML::Pipeline::Filter
        def call
          doc.search("p.markdown-alert-title").each do |node|
            alert_class = node.parent['class']
            alert_class.slice!("markdown-alert ")

            #ToDo: Extend notice_icon to support all alert types or add a new method
            icon = notice_icon('notice')
            node.prepend_child(icon)
          end
          doc
        end
      end
    end
  end
end