feat(examples): MDUI framework #2976

thanhngoc541 · 2024-10-18T02:34:54Z

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

…kage

codecov · 2024-10-23T15:59:23Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.32%. Comparing base (287c22e) to head (639cd5f).
Report is 25 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2976      +/-   ##
==========================================
- Coverage   63.39%   63.32%   -0.08%     
==========================================
  Files         565      548      -17     
  Lines       79457    79302     -155     
==========================================
- Hits        50369    50215     -154     
- Misses      25695    25712      +17     
+ Partials     3393     3375      -18

Flag	Coverage Δ
contribs/gnodev	`61.11% <ø> (+0.53%)`	⬆️
contribs/gnofaucet	`14.82% <ø> (ø)`
gno.land	`67.37% <ø> (-0.01%)`	⬇️
gnovm	`67.88% <ø> (+0.01%)`	⬆️
misc/genstd	`79.72% <ø> (ø)`
tm2	`62.38% <ø> (-0.06%)`	⬇️

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.

…kage

gfanton

This is going in the right direction. But I'm still concerned about having multiple Markdown UI libraries in the same folder doing the same thing. cf #2912 (comment)

I'm wondering if it would be better to have those libraries either in the user namespace or in a dedicated directory until a good one starts showing up.

Like for GitHub, people should generally start building their own libraries in their own namespace, and at some point, if the library is good enough by adoption and usage, we can think about moving it into a more official place.

Additionally, we could use the demo/ui package to reference all of them and potentially have some kind of poll to rate them as part of the competition process #2753?

cc @moul @leohhhn

examples/gno.land/p/demo/mdui/mdui.gno

…nto mdui_package

leohhhn

LGTM as initial version; left a few comments.

Please move it to your personal namespace, as @gfanton suggested. This way we can have multiple md libraries and time can tell which is the best.

examples/gno.land/p/demo/mdui/mdui.gno

thanhngoc541 · 2024-11-20T03:27:50Z

I was move the package to varmeta namespace and update the code as commented. Please have a look. Thank you

ltzmaxwell

LGTM.

examples/gno.land/p/varmeta/mdui/mdui.gno

jefft0 · 2024-11-20T11:04:57Z

Removed the review/triage-pending label because this PR was approved by core dev ltzmaxwell.

Gno2D2 · 2024-12-09T16:14:08Z

🛠 PR Checks Summary

🔴 Maintainers must be able to edit this pull request (more info)
🔴 The pull request head branch must be up-to-date with its base (more info)

Manual Checks (for Reviewers):

SKIP: Do not block the CI for this PR
The pull request description provides enough details

✅ Automated Checks (for Contributors):

🔴 Maintainers must be able to edit this pull request (more info)
🔴 The pull request head branch must be up-to-date with its base (more info)

☑️ Contributor Actions:

Fix any issues flagged by automated checks.
Follow the Contributor Checklist to ensure your PR is ready for review.
- Add new tests, or document why they are unnecessary.
- Provide clear examples/screenshots, if necessary.
- Update documentation, if required.
- Ensure no breaking changes, or include BREAKING CHANGE notes.
- Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

Debug

Automated Checks
Maintainers must be able to edit this pull request (more info)
If
🟢 Condition met
└── 🟢 The pull request was created from a fork (head branch repo: VAR-META-Tech/gno)
Then
🔴 Requirement not satisfied
└── 🔴 Maintainer can modify this pull request
The pull request head branch must be up-to-date with its base (more info)
If
🟢 Condition met
└── 🟢 On every pull request
Then
🔴 Requirement not satisfied
└── 🔴 Head branch (VAR-META-Tech:mdui_package) is up to date with base (master): behind by 5 / ahead by 17
Manual Checks
**SKIP**: Do not block the CI for this PR
If
🟢 Condition met
└── 🟢 On every pull request
Can be checked by

Any user with comment edit permission
The pull request description provides enough details
If
🟢 Condition met
└── 🟢 Not (🔴 Pull request author is a member of the team: core-contributors)
Can be checked by

team core-contributors

thanhngoc541 added 2 commits October 18, 2024 09:15

MDUI package

418210e

Add realm

87236db

thanhngoc541 requested review from a team as code owners October 18, 2024 02:34

thanhngoc541 requested review from ltzmaxwell and piux2 and removed request for a team October 18, 2024 02:34

github-actions bot assigned thanhngoc541 Oct 18, 2024

github-actions bot added the 🧾 package/realm Tag used for new Realms or Packages. label Oct 18, 2024

thanhngoc541 mentioned this pull request Oct 18, 2024

Markdown/UI templating framework competition #2753

Open

thanhngoc541 changed the title ~~fear(examples): MDUI framework~~ feat(examples): MDUI framework Oct 18, 2024

jefft0 added the review/triage-pending PRs opened by external contributors that are waiting for the 1st review label Oct 18, 2024

Merge branch 'master' of https://github.com/gnolang/gno into mdui_pac…

0bd4130

…kage

leohhhn mentioned this pull request Oct 22, 2024

feat: add Matija's Homepage realm to examples #2916

Merged

thanhngoc541 and others added 4 commits October 24, 2024 09:36

add builder

92db01f

tidy

34fd7dd

Merge branch 'master' of https://github.com/gnolang/gno into mdui_pac…

9794a93

…kage

Merge branch 'master' into mdui_package

5437da4

thehowl requested a review from gfanton October 31, 2024 12:57

leohhhn self-requested a review November 5, 2024 16:14

gfanton reviewed Nov 5, 2024

View reviewed changes

examples/gno.land/p/demo/mdui/mdui.gno Outdated Show resolved Hide resolved

thanhngoc541 added 3 commits November 6, 2024 09:33

shorten struct name

57f5e4e

Update components and UI

689b4ce

Merge branch 'mdui_package' of https://github.com/VAR-META-Tech/gno i…

639cd5f

…nto mdui_package

leohhhn approved these changes Nov 6, 2024

View reviewed changes

examples/gno.land/p/demo/mdui/mdui.gno Outdated Show resolved Hide resolved

examples/gno.land/p/demo/mdui/mdui.gno Outdated Show resolved Hide resolved

examples/gno.land/p/demo/mdui/mdui.gno Outdated Show resolved Hide resolved

thanhngoc541 and others added 3 commits November 20, 2024 10:20

Move to varmeta namespace

bb29d03

Move realm to varmeta namespace

e10ff9e

Merge branch 'master' into mdui_package

b22aaa6

ltzmaxwell approved these changes Nov 20, 2024

View reviewed changes

examples/gno.land/p/varmeta/mdui/mdui.gno Outdated Show resolved Hide resolved

jefft0 removed the review/triage-pending PRs opened by external contributors that are waiting for the 1st review label Nov 20, 2024

thanhngoc541 and others added 4 commits December 10, 2024 18:09

separate files

a5dcc6f

Merge branch 'master' into mdui_package

a40d192

Remove require in mod

4970870

Merge branch 'master' into mdui_package

23c18ad

thehowl added bounty bounty/candidate PR is candidate to receive a bounty. and removed bounty labels Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(examples): MDUI framework #2976

feat(examples): MDUI framework #2976

thanhngoc541 commented Oct 18, 2024 •

edited

Loading

codecov bot commented Oct 23, 2024 •

edited

Loading

gfanton left a comment

leohhhn left a comment •

edited

Loading

thanhngoc541 commented Nov 20, 2024

ltzmaxwell left a comment

jefft0 commented Nov 20, 2024

Gno2D2 commented Dec 9, 2024 •

edited

Loading

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Then

If

Then

If

Can be checked by

If

Can be checked by

feat(examples): MDUI framework #2976

Are you sure you want to change the base?

feat(examples): MDUI framework #2976

Conversation

thanhngoc541 commented Oct 18, 2024 • edited Loading

MDUI - Markdown UI Framework for Gno.land

Features

1. Navbar

2. Heading

3. Button

4. Image

5. Code Block

6. Divider

7. Paragraph

8. Quote

9. List (Unordered)

10. List (Ordered)

11. Table

12. Bold

13. Italic

14. Strikethrough

15. Alert

16. Collapsible

17. Footnote

18. Badge

19. Table of Contents

20. Keyboard Shortcut

21. Emoji

22. Blockquote with Citation

23. Badge with Icon

codecov bot commented Oct 23, 2024 • edited Loading

Codecov Report

gfanton left a comment

Choose a reason for hiding this comment

leohhhn left a comment • edited Loading

Choose a reason for hiding this comment

thanhngoc541 commented Nov 20, 2024

ltzmaxwell left a comment

Choose a reason for hiding this comment

jefft0 commented Nov 20, 2024

Gno2D2 commented Dec 9, 2024 • edited Loading

🛠 PR Checks Summary

Manual Checks (for Reviewers):

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Then

If

Then

If

Can be checked by

If

Can be checked by

thanhngoc541 commented Oct 18, 2024 •

edited

Loading

codecov bot commented Oct 23, 2024 •

edited

Loading

leohhhn left a comment •

edited

Loading

Gno2D2 commented Dec 9, 2024 •

edited

Loading