Added hugo-admonition module

[FBEZ]

Description

The plugin hugo-admonition is added. It lets you add admonitions using Github style format e.g.:

> [!NOTE]
> This is a note

The result is

Related

Feature request #398 (comment)

Testing

You can download this branch which includes a test article, or you can download the module from the config file with hugo mod get and

hugo new content content/blog/test_article/index.md

and paste below the front matter of index.md the following

# Test

This is a test for the admonitions


> [!NOTE]
> This is a note

> [!WARNING]
> This is a warning

> [!CAUTION]
> This is a caution

> [!TIP]
> This is a tip

Checklist

Before submitting a Pull Request, please ensure the following:

• 🚨 This PR does not introduce breaking changes.
• All CI checks (GH Actions) pass.
• Documentation is updated as needed.
• Tests are updated or added as necessary.
• Code is well-commented, especially in complex areas.
• Git history is clean — commits are squashed to the minimum necessary.

[github-actions]

🎉 A preview for this PR is available at: https://preview-developer.espressif.com/pr399/

[FBEZ]

Added test article, you can find it here . It works as expected.

[f-hollow]

@FBEZ Thank you for your proposal! I like the style of GitHub admonitions, so it would be a good addition.

To be honest, I would avoid adding Hugo modules. They add quite a lot of files and this is another external dependency. Since it has the MIT license, I think we can borrow the files and integrate them into our theme directly. It shouldn't be hard.

[f-hollow]

@FBEZ I integrated the changes and created the branch: https://github.com/f-hollow/developer-portal/tree/feat/add_github_admonitions.

It has two commits:

• Hugo-Admonitions module integrated into our theme.
• Your original commit with a test article.

Also, I only added en.yaml file in the i18n folder. If we decide to go with this branch, we need to add more internationalization files.

My other notes

The admonitions work nicely except for issues with styles:

• The message is shown with inverted colors (white text on the dark background, while the website is in light mode).
• Switching between light and dark modes doesn't changes anything.
• Francesco's screenshots don't exhibit the inverted color issues. However, his screenshots have black text in notes while our body text is dark grey.

As a result, CSS styles need to be updated before we can add github-style admonitions to the Devportal.

Apparently, out theme uses the Tailwind CSS styles. I am not sure how they are assigned to elements. Either somebody else needs to do it, or I need to learn more about CSS.

This task can be a good candidate to fix other CSS issues and enable dark mode (issue #382). The other CSS issues are:

• Appearance of giscuss comments (black background while Devportal background color is dark olive)
• Firebase icon is also black
• The menu transparency fix in assets/css/styles.css looks cancerous