Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(examples): MDUI framework #2976

Open
wants to merge 17 commits into
base: master
Choose a base branch
from

Conversation

thanhngoc541
Copy link

@thanhngoc541 thanhngoc541 commented Oct 18, 2024

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")

image
image
image
image
image
image
image

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

@thanhngoc541 thanhngoc541 requested review from a team as code owners October 18, 2024 02:34
@thanhngoc541 thanhngoc541 requested review from ltzmaxwell and piux2 and removed request for a team October 18, 2024 02:34
@github-actions github-actions bot added the 🧾 package/realm Tag used for new Realms or Packages. label Oct 18, 2024
@thanhngoc541 thanhngoc541 changed the title fear(examples): MDUI framework feat(examples): MDUI framework Oct 18, 2024
@jefft0 jefft0 added the review/triage-pending PRs opened by external contributors that are waiting for the 1st review label Oct 18, 2024
Copy link

codecov bot commented Oct 23, 2024

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.

@thehowl thehowl requested a review from gfanton October 31, 2024 12:57
@leohhhn leohhhn self-requested a review November 5, 2024 16:14
Copy link
Member

@gfanton gfanton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Outdated Show resolved Hide resolved
Copy link
Contributor

@leohhhn leohhhn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 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
Copy link
Author

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

Copy link
Contributor

@ltzmaxwell ltzmaxwell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

examples/gno.land/p/varmeta/mdui/mdui.gno Outdated Show resolved Hide resolved
@jefft0 jefft0 removed the review/triage-pending PRs opened by external contributors that are waiting for the 1st review label Nov 20, 2024
@jefft0
Copy link
Contributor

jefft0 commented Nov 20, 2024

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

@Gno2D2
Copy link
Collaborator

Gno2D2 commented Dec 9, 2024

🛠 PR Checks Summary

🔴 Maintainers must be able to edit this pull request (more info)

Manual Checks (for Reviewers):
  • SKIP: Do not block the CI for this PR
  • The pull request description provides enough details
Read More

🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers.

✅ 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:
  1. Fix any issues flagged by automated checks.
  2. 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:
  1. 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 satisfied
└── 🟢 Head branch (VAR-META-Tech:mdui_package) is up to date with base (master): behind by 0 / 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧾 package/realm Tag used for new Realms or Packages.
Projects
Status: In Progress
Status: In Review
Development

Successfully merging this pull request may close these issues.

6 participants