feat(examples): MDUI framework

[thanhngoc541]

Related to #2753

MDUI - Markdown UI Framework for Gno.land

This PR introduces the mdui package, a Markdown UI framework designed for rendering clean, reusable UI components in Gno.land realms. The goal is to simplify UI development with a set of pre-defined components that can be easily integrated into any Gno project.

Features

The mdui package provides several reusable components for building user interfaces quickly and efficiently. Below is a list of the available components along with sample code.

1. Navbar

Description: A navigation menu to create a list of links for site navigation.

Sample Code:

mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"})

2. Heading

Description: Creates a Markdown heading (from H1 to H6).

Sample Code:

mdui.Heading(2, "Sample Heading")

3. Button

Description: A clickable button component, implemented as a link in Markdown.

Sample Code:

mdui.Button("Click Here", "/click-here")

4. Image

Description: An image component for displaying pictures with optional alt text.

Sample Code:

mdui.Image("https://example.com/image.png", "Sample Image")

5. Code Block

Description: A component for rendering code blocks in Markdown.

Sample Code:

mdui.CodeBlock("func main() {\n    fmt.Println(\"Hello, world!\")\n}")

6. Divider

Description: A horizontal line divider for separating content.

Sample Code:

mdui.Divider()

7. Paragraph

Description: Formats a block of text as a paragraph.

Sample Code:

mdui.Paragraph("This is a sample paragraph.")

8. Quote

Description: A blockquote component for highlighting quoted text.

Sample Code:

mdui.Quote("This is a quoted text.")

9. List (Unordered)

Description: Generates an unordered Markdown list.

Sample Code:

mdui.List([]string{"Item 1", "Item 2", "Item 3"}, false)

10. List (Ordered)

Description: Generates an ordered Markdown list.

Sample Code:

mdui.List([]string{"Step 1", "Step 2", "Step 3"}, true)

11. Table

Description: Generates a table with headers and rows for tabular data.

Sample Code:

mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}})

12. Bold

Description: Formats text in bold.

Sample Code:

mdui.Bold("This is bold text")

13. Italic

Description: Formats text in italic.

Sample Code:

mdui.Italic("This is italic text")

14. Strikethrough

Description: Adds a strikethrough to the text.

Sample Code:

mdui.Strikethrough("This text is crossed out")

15. Alert

Description: An alert block using Markdown with a specified type (info, warning, danger).

Sample Code:

mdui.Alert("This action cannot be undone.", "danger")

16. Collapsible

Description: A collapsible section that expands when clicked, using plain Markdown.

Sample Code:

mdui.Collapsible("Show more", "Here is the additional content.")

17. Footnote

Description: Generates a footnote reference and definition.

Sample Code:

mdui.Footnote("1", "This is a footnote.")

18. Badge

Description: Creates a badge using the Shields.io service.

Sample Code:

mdui.Badge("Build Passing", "green")

19. Table of Contents

Description: Generates a simple table of contents based on an array of headings.

Sample Code:

mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"})

20. Keyboard Shortcut

Description: Formats a keyboard shortcut in Markdown using code block style.

Sample Code:

mdui.KeyboardShortcut("Ctrl", "Alt", "Del")

21. Emoji

Description: Adds an emoji to the content using a shortcode.

Sample Code:

mdui.Emoji("smile")

22. Blockquote with Citation

Description: Generates a Markdown blockquote with an optional citation.

Sample Code:

mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare")

23. Badge with Icon

Description: Creates a badge with an icon using Shields.io.

Sample Code:

mdui.BadgeWithIcon("Go Lang", "blue", "go")

Contributors' checklist...

• Added new tests, or not needed, or not feasible
• Provided an example (e.g. screenshot) to aid review or the PR is self-explanatory
• Updated the official documentation or not needed
• No breaking changes were made, or a BREAKING CHANGE: xxx message was included in the description
• Added references to related issues and PRs
• Provided any useful hints for running manual tests

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.08%. Comparing base (05cd4f5) to head (87236db).
Report is 24 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2976      +/-   ##
==========================================
- Coverage   63.10%   63.08%   -0.02%     
==========================================
  Files         564      564              
  Lines       79273    79273              
==========================================
- Hits        50023    50010      -13     
- Misses      25886    25897      +11     
- Partials     3364     3366       +2     

Flag	Coverage Δ
contribs/gnodev	60.62% <ø> (ø)
contribs/gnofaucet	14.82% <ø> (-0.95%)	⬇️
gno.land	67.56% <ø> (ø)
gnovm	67.24% <ø> (ø)
misc/genstd	79.72% <ø> (ø)
misc/logos	19.45% <ø> (-0.51%)	⬇️
tm2	62.28% <ø> (-0.07%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.