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.

leohhhn · 2024-10-22T14:55:00Z

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

+func CodeBlock(code string) string {
+	return "```go\n" + code + "\n```\n"
+}


Why are you defaulting to Go here?

leohhhn · 2024-10-22T15:11:21Z

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

+)
+
+// Navbar generates a Markdown navigation menu from a map of links
+func Navbar(links map[string]string) string {


We should not encourage map usage; try to find another way to pass these arguments easily. Probably pairs of strings is the way to go.

leohhhn · 2024-11-06T09:05:40Z

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

+func Emoji(name string) string {
+	emojiMap := map[string]string{
+		"smile":     "😊",
+		"heart":     "❤️",
+		"thumbs_up": "👍",
+		"star":      "⭐",
+		"fire":      "🔥",
+		"check":     "✔️",
+		"cross":     "❌",
+		"warning":   "⚠️",
+		"info":      "ℹ️",
+		"sun":       "☀️",
+		"moon":      "🌙",
+		"rocket":    "🚀",
+		// Add additional emojis as needed
+	}
+	if emoji, exists := emojiMap[name]; exists {
+		return emoji
+	}
+	// If emoji is not found, return the name itself as a fallback
+	return ":" + name + ":"
+}


I think we can drop this. It takes me the same amount of time to look up an emoji online or in your package; and it will need to be maintained.

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

Draft

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

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

leohhhn Oct 22, 2024

leohhhn Oct 22, 2024

leohhhn Nov 6, 2024

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

leohhhn Oct 22, 2024

Choose a reason for hiding this comment

leohhhn Oct 22, 2024

Choose a reason for hiding this comment

leohhhn Nov 6, 2024

Choose a reason for hiding this comment

thanhngoc541 commented Oct 18, 2024 •

edited

Loading

codecov bot commented Oct 23, 2024 •

edited

Loading

leohhhn left a comment •

edited

Loading