Add a template for blockquote alerts (aka callouts) #2977

Wryhder · 2025-02-18T19:55:43Z

Proposed changes

Add a template for alerts (aka callouts or admonitions).

Alerts are useful for highlighting important information or including contextual warnings or tips that might get skipped over otherwise in long pieces of content.

@kingthorin @psiinon I separated out the alert template mentioned in the other PR (#2976) to this one.

Please let me know if there are any changes you'd like me to make. Thanks for your time and help with this.

psiinon · 2025-02-18T20:06:50Z

Checkmarx One – Scan Summary & Details – 846e49bb-51cb-4464-9ad5-51e4500fd6b0

New Issues (2)

Checkmarx found the following issues in this Pull Request

Severity	Issue	Source File / Package	Checkmarx Insight
	CVE-2025-25288	Npm-@octokit/plugin-paginate-rest-9.2.0	details Recommended version: 9.2.2 Description: The package @octokit/plugin-paginate-rest is the Octokit plugin to paginate REST API endpoint responses. In versions through 9.2.1 and 9.3.0-beta.1... Attack Vector: NETWORK Attack Complexity: LOW Vulnerable Package
	CVE-2025-25290	Npm-@octokit/request-8.2.0	details Recommended version: 8.4.1 Description: @octokit/request sends parameterized requests to GitHub's APIs with sensible defaults in browsers and Node. Starting in versions 1.0.0 through 8.4.... Attack Vector: NETWORK Attack Complexity: LOW Vulnerable Package

kingthorin · 2025-02-18T22:03:34Z

To address the DCO requirement you'll need to sign-off the commit(s):

Signed-off-by: chibbyalucard <[email protected]>

Wryhder · 2025-02-20T17:59:47Z

Leaving a comment about force-pushed changes. I added the sign-off trailer.

psiinon · 2025-02-26T16:58:27Z

@Wryhder thanks! Do you have instructions for a quick way to try this out? Or is that in your other PR?

Wryhder · 2025-02-26T17:14:28Z

@psiinon My bad! I should probably include this info in the README? These examples are straight from the Hugo docs, in case the formatting below is wonky (I'm on mobile):

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes

psiinon · 2025-02-26T17:23:16Z

Thanks! Will try them out now 😁

psiinon · 2025-02-26T17:29:43Z

I think these look great! We'd def need to go through the rest of the site to see where we should use them, but that def doesnt have to be in this PR 😉

psiinon · 2025-02-26T17:45:40Z

site/layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,28 @@
+{{ $emojis := dict
+  "caution" ":exclamation:"


How about these, so we dont get 3x info source?

"caution" ":bangbang:" "important" ":information_source:" "note" ":page_facing_up:" "tip" ":bulb:" "warning" ":warning:"

Thank you, I figured there must be something better 😁

Much better, thanks! I'll add those in a bit.

Signed-off-by: chibbyalucard <[email protected]>

psiinon

Love this. Now we just need to work out all the existing pages we should update to use it :D

README.md

Signed-off-by: Rick M <[email protected]>

thc202 · 2025-03-04T10:10:12Z

src/css/_page.scss

 }
+
+/* Styles for blockquote alerts, aka admonitions or callouts */
+// Source: https://github.com/KKKZOZ/hugo-admonitions


Any specific reason not to use the module instead of c/p?

Not especially. There are several more types of callouts in the module and definitely more robust styling. However, I was just looking to add the most basic types.

Note that the template itself is from an example in the Hugo docs (only a couple of lines changed). It's just the CSS I copied from the module (one line changed).

Do you suggest adding the module directly?

@kingthorin I replied @thc202 earlier. My comment is supposed to be up there just before yours, although I added it using the mobile app. Maybe that's why it's not showing up? Anyway, here it is again:

Not especially. There are several more types of callouts in the module and definitely more robust styling. However, I was just looking to add the most basic types.

Note that the template itself is from an example in the Hugo docs (only a couple of lines changed). It's just the CSS I copied from the module (one line changed).

Do you suggest adding the module directly?

That would be preferable than duplicate functionality IMHO.

Wryhder · 2025-03-04T11:08:32Z

Love this. Now we just need to work out all the existing pages we should update to use it :D

@psiinon I'm gonna create a new PR for that. But I was thinking of modifying just the docs, not existing articles. What needs to be highlighted will probably be obvious in some of the articles, but I was thinking there's a risk of highlighting wrongly in articles where I don't have adequate context.

I'll take a look at the articles regardless, but please let me know what you think.

thc202 · 2025-03-04T11:12:42Z

Worth noting that 90% of the docs are generated from the help content.

Wryhder · 2025-03-04T13:02:39Z

@kingthorin @thc202 Can you see my response above to your question about using the hugo-admonition module? Just in case not:

Not especially. There are several more types of callouts in the module and definitely more robust styling. However, I was just looking to add the most basic types.

Note that the template itself is from an example in the Hugo docs (only a couple of lines changed). It's just the CSS I copied from the module (one line changed).

Do you suggest adding the module directly?

thc202 · 2025-03-04T13:04:46Z

No, is it as a pending comment?

Wryhder · 2025-03-04T00:02:03Z

site/layouts/_default/_markup/render-blockquote.html

+{{ $emojis := dict
+  "caution" ":bangbang:"
+  "important" ":information_source:"
+  "note" ":memo:"


@psiinon I changed the emoji for "note" from 📄 to 📝. I was thinking the latter looks more colourful and is more noticeable (matches the other icons better, I think).

README.md

Wryhder · 2025-03-04T10:49:33Z

src/css/_page.scss

 }
+
+/* Styles for blockquote alerts, aka admonitions or callouts */
+// Source: https://github.com/KKKZOZ/hugo-admonitions


Not especially. There are several more types of callouts in the module and definitely more robust styling. However, I was just looking to add the most basic types.

Note that the template itself is from an example in the Hugo docs (only a couple of lines changed). It's just the CSS I copied from the module (one line changed).

Do you suggest adding the module directly?

Wryhder · 2025-03-04T12:57:48Z

src/css/_page.scss

 }
+
+/* Styles for blockquote alerts, aka admonitions or callouts */
+// Source: https://github.com/KKKZOZ/hugo-admonitions


@kingthorin I replied @thc202 earlier. My comment is supposed to be up there just before yours, although I added it using the mobile app. Maybe that's why it's not showing up? Anyway, here it is again:

Not especially. There are several more types of callouts in the module and definitely more robust styling. However, I was just looking to add the most basic types.

Note that the template itself is from an example in the Hugo docs (only a couple of lines changed). It's just the CSS I copied from the module (one line changed).

Do you suggest adding the module directly?

Wryhder · 2025-03-04T13:08:22Z

No, is it as a pending comment?

Yes, I thought "Pending" meant you were reviewing it. Didn't realize I hadn't actually submitted my comments.

Wryhder · 2025-04-03T18:59:02Z

@kingthorin @psiinon Regarding PR #3042, perhaps a shortcode would work better for both HTML and Markdown files. Usage syntax would look something like this (see the Adding Custom Alerts section in this article):

{{< alert type="note" title="Note" >}}
Useful information that users should know, even when skimming content.
{{< /alert >}}

(Although I really liked the simplicity of the current syntax.)

What do you think? I can update this branch when I get a chance.

Wryhder changed the title ~~Add template for blockquote alerts (aka callouts)~~ Add a template for blockquote alerts (aka callouts) Feb 18, 2025

Wryhder force-pushed the alert-template branch from b861228 to 6fe81f8 Compare February 20, 2025 17:37

chibbyalucard added 2 commits February 20, 2025 18:52

Add template for blockquote alerts (aka callouts)

06f287e

Signed-off-by: chibbyalucard <[email protected]>

Add attribution

8bab1f4

Signed-off-by: chibbyalucard <[email protected]>

Wryhder force-pushed the alert-template branch from 6fe81f8 to 8bab1f4 Compare February 20, 2025 17:53

Wryhder mentioned this pull request Feb 24, 2025

blog: Add PortSwigger lab walkthrough (Broken brute-force protection, IP block) #2976

Merged

psiinon reviewed Feb 26, 2025

View reviewed changes

Wryhder force-pushed the alert-template branch from 6b27f26 to 40585fd Compare March 3, 2025 21:15

chibbyalucard added 2 commits March 3, 2025 22:41

Modify emojis in blockquote alerts

e8a6638

Signed-off-by: chibbyalucard <[email protected]>

Add examples for using blockquote alerts

2270293

Signed-off-by: chibbyalucard <[email protected]>

Wryhder force-pushed the alert-template branch from 40585fd to 2270293 Compare March 3, 2025 21:45

psiinon approved these changes Mar 4, 2025

View reviewed changes

thc202 reviewed Mar 4, 2025

View reviewed changes

README.md Outdated Show resolved Hide resolved

kingthorin approved these changes Mar 4, 2025

View reviewed changes

kingthorin reviewed Mar 4, 2025

View reviewed changes

README.md Outdated Show resolved Hide resolved

Tweak path to template

9cfb05e

Signed-off-by: Rick M <[email protected]>

thc202 reviewed Mar 4, 2025

View reviewed changes

Wryhder commented Mar 4, 2025

View reviewed changes

kingthorin merged commit 62b5cfe into zaproxy:main Mar 4, 2025
3 checks passed

Wryhder mentioned this pull request Apr 2, 2025

Update docs to use blockquote alerts #3039

Draft

Wryhder mentioned this pull request May 5, 2025

Add support for blockquote alerts in layout files #3073

Open

Add a template for blockquote alerts (aka callouts) #2977

Add a template for blockquote alerts (aka callouts) #2977

Uh oh!

Conversation

Wryhder commented Feb 18, 2025

Proposed changes

Uh oh!

psiinon commented Feb 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kingthorin commented Feb 18, 2025

Uh oh!

Wryhder commented Feb 20, 2025

Uh oh!

psiinon commented Feb 26, 2025

Uh oh!

Wryhder commented Feb 26, 2025

Uh oh!

psiinon commented Feb 26, 2025

Uh oh!

psiinon commented Feb 26, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

psiinon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wryhder commented Mar 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thc202 commented Mar 4, 2025

Uh oh!

Wryhder commented Mar 4, 2025

Uh oh!

thc202 commented Mar 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wryhder commented Mar 4, 2025

Uh oh!

Uh oh!

Wryhder commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

psiinon commented Feb 18, 2025 •

edited

Loading

Wryhder commented Mar 4, 2025 •

edited

Loading

Wryhder commented Apr 3, 2025 •

edited

Loading