From 418210e5fb157f16e7eaf26028438ae5ab36f0a0 Mon Sep 17 00:00:00 2001 From: ngoc Date: Fri, 18 Oct 2024 09:15:09 +0700 Subject: [PATCH 01/10] MDUI package --- examples/gno.land/p/demo/mdui/gno.mod | 1 + examples/gno.land/p/demo/mdui/mdui.gno | 172 ++++++++++++++++++++ examples/gno.land/p/demo/mdui/mdui_test.gno | 1 + 3 files changed, 174 insertions(+) create mode 100644 examples/gno.land/p/demo/mdui/gno.mod create mode 100644 examples/gno.land/p/demo/mdui/mdui.gno create mode 100644 examples/gno.land/p/demo/mdui/mdui_test.gno diff --git a/examples/gno.land/p/demo/mdui/gno.mod b/examples/gno.land/p/demo/mdui/gno.mod new file mode 100644 index 00000000000..ff572b53bde --- /dev/null +++ b/examples/gno.land/p/demo/mdui/gno.mod @@ -0,0 +1 @@ +module gno.land/p/demo/mdui diff --git a/examples/gno.land/p/demo/mdui/mdui.gno b/examples/gno.land/p/demo/mdui/mdui.gno new file mode 100644 index 00000000000..4e98d44f578 --- /dev/null +++ b/examples/gno.land/p/demo/mdui/mdui.gno @@ -0,0 +1,172 @@ +package mdui + +import ( + "strconv" + "strings" +) + +// Navbar generates a Markdown navigation menu from a map of links +func Navbar(links map[string]string) string { + nav := "" + for text, href := range links { + if nav != "" { + nav += " | " // Add a pipe separator between links + } + nav += "[" + text + "](" + href + ")" + } + return nav + "\n" +} + +// Heading creates a Markdown heading based on the level +func Heading(level int, text string) string { + if level < 1 || level > 6 { + level = 1 + } + headingPrefix := strings.Repeat("#", level) + return headingPrefix + " " + text + "\n" +} + +// Button generates a Markdown link styled as a button +func Button(text, href string) string { + return "[" + text + "](" + href + ")" +} + +// Image generates Markdown for an image +func Image(src, alt string) string { + return "![" + alt + "](" + src + ")" +} + +// CodeBlock wraps code in Markdown code block syntax +func CodeBlock(code string) string { + return "```go\n" + code + "\n```\n" +} + +// Divider renders a Markdown horizontal rule +func Divider() string { + return "---\n" +} + +// Paragraph formats a text paragraph in Markdown +func Paragraph(text string) string { + return text + "\n" +} + +// Quote generates a Markdown blockquote +func Quote(text string) string { + return "> " + text + "\n" +} + +// List generates a Markdown list (ordered or unordered) +func List(items []string, ordered bool) string { + list := "" + for i, item := range items { + if ordered { + list += strconv.Itoa(i+1) + ". " + item + "\n" + } else { + list += "- " + item + "\n" + } + } + return list +} + +// Link generates a Markdown link +func Link(text, href string) string { + return "[" + text + "](" + href + ")" +} + +// Table generates a Markdown table +func Table(headers []string, rows [][]string) string { + table := "| " + strings.Join(headers, " | ") + " |\n" + table += "|" + strings.Repeat("---|", len(headers)) + "\n" + for _, row := range rows { + table += "| " + strings.Join(row, " | ") + " |\n" + } + return table +} + +// Bold formats text in bold +func Bold(text string) string { + return "**" + text + "**" +} + +// Italic formats text in italic +func Italic(text string) string { + return "_" + text + "_" +} + +// Strikethrough adds a strikethrough to the text +func Strikethrough(text string) string { + return "~~" + text + "~~" +} + +// Alert creates a Markdown-styled alert block with a specified type (info, warning, danger) +func Alert(content, alertType string) string { + var prefix string + switch alertType { + case "info": + prefix = "**ℹ️ Info:** " // Info icon + case "warning": + prefix = "**⚠️ Warning:** " // Warning icon + case "danger": + prefix = "**❌ Danger:** " // Danger icon + default: + prefix = "**ℹ️ Info:** " // Default to info icon + } + return "> " + prefix + content + "\n" +} + +// Collapsible creates a collapsible section with a title and content +func Collapsible(title, content string) string { + return "
\n" + title + "\n\n" + content + "\n\n
\n" +} + +// Footnote generates a Markdown footnote +func Footnote(label, text string) string { + return "[^" + label + "]: " + text + "\n" +} + +// Badge generates a Markdown badge (often used in documentation) +func Badge(label, color string) string { + return "![](https://img.shields.io/badge/" + strings.ReplaceAll(label, " ", "%20") + "-" + color + ")" +} + +// TableOfContents generates a simple table of contents based on an array of headings +func TableOfContents(headings []string) string { + toc := "## Table of Contents\n" + for i, heading := range headings { + toc += strconv.Itoa(i+1) + ". [" + heading + "](#" + strings.ToLower(strings.ReplaceAll(heading, " ", "-")) + ")\n" + } + return toc +} + +// KeyboardShortcut formats a keyboard shortcut in Markdown using code block style +func KeyboardShortcut(keys ...string) string { + return "`" + strings.Join(keys, " + ") + "`" +} + +// Emoji adds an emoji to the content using a shortcode +func Emoji(name string) string { + emojiMap := map[string]string{ + "smile": "😊", + "heart": "❤️", + "thumbs_up": "👍", + // Add more emoji mappings as needed + } + if emoji, exists := emojiMap[name]; exists { + return emoji + } + return name +} + +// BlockquoteWithCitation generates a Markdown blockquote with an optional citation +func BlockquoteWithCitation(quote, citation string) string { + if citation != "" { + return "> " + quote + "\n> \n> — " + citation + "\n" + } + return "> " + quote + "\n" +} + +// BadgeWithIcon generates a Markdown badge with an icon using Shields.io +func BadgeWithIcon(label, color, icon string) string { + return "![](https://img.shields.io/badge/" + icon + "-" + strings.ReplaceAll(label, " ", "%20") + "-" + color + "?style=flat&logo=" + icon + ")" +} diff --git a/examples/gno.land/p/demo/mdui/mdui_test.gno b/examples/gno.land/p/demo/mdui/mdui_test.gno new file mode 100644 index 00000000000..40697889c3c --- /dev/null +++ b/examples/gno.land/p/demo/mdui/mdui_test.gno @@ -0,0 +1 @@ +package mdui From 87236dbb0e5306ab236820d094b20f9fa8eb1d91 Mon Sep 17 00:00:00 2001 From: ngoc Date: Fri, 18 Oct 2024 09:16:13 +0700 Subject: [PATCH 02/10] Add realm --- examples/gno.land/r/demo/mdui/gno.mod | 6 + examples/gno.land/r/demo/mdui/mdui.gno | 368 ++++++++++++++++++++ examples/gno.land/r/demo/mdui/mdui_test.gno | 13 + 3 files changed, 387 insertions(+) create mode 100644 examples/gno.land/r/demo/mdui/gno.mod create mode 100644 examples/gno.land/r/demo/mdui/mdui.gno create mode 100644 examples/gno.land/r/demo/mdui/mdui_test.gno diff --git a/examples/gno.land/r/demo/mdui/gno.mod b/examples/gno.land/r/demo/mdui/gno.mod new file mode 100644 index 00000000000..d82d8617e15 --- /dev/null +++ b/examples/gno.land/r/demo/mdui/gno.mod @@ -0,0 +1,6 @@ +module gno.land/r/demo/mdui + +require ( + gno.land/p/demo/uassert v0.0.0-latest + gno.land/p/demo/mdui v0.0.0-latest +) diff --git a/examples/gno.land/r/demo/mdui/mdui.gno b/examples/gno.land/r/demo/mdui/mdui.gno new file mode 100644 index 00000000000..dafb3918e63 --- /dev/null +++ b/examples/gno.land/r/demo/mdui/mdui.gno @@ -0,0 +1,368 @@ +package mdui + +import ( + "strings" + + "gno.land/p/demo/mdui" +) + +// RenderHomePage - Renders the Home page with a fresh introduction and updated sections +func RenderHomePage() string { + // Navbar with links and href values using the new Markdown approach + navbarLinks := map[string]string{ + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + } + navbar := mdui.Navbar(navbarLinks) + + // Heading for the new introduction + headingIntro := mdui.Heading(1, "Welcome to MDUI - Markdown-based UI Development") + + // Updated introduction paragraph with new content + paragraphIntro := mdui.Paragraph(` +MDUI is a versatile UI framework built on the simplicity and power of Markdown. +It enables developers to create user interfaces with ease by using Markdown syntax, making web development more accessible and streamlined. +MDUI is ideal for anyone who wants to quickly build functional, beautiful web pages using familiar Markdown concepts. +Explore our component library and see how MDUI can simplify your development workflow. +`) + + // New section heading for getting started + headingGettingStarted := mdui.Heading(2, "Getting Started with MDUI") + + // Content for the "Getting Started" section + paragraphGettingStarted := mdui.Paragraph(` +Ready to start using MDUI? Follow these simple steps to get up and running: +1. [Explore Components](/r/demo/mdui:components) - Discover a variety of components available in MDUI. +2. [Check out Examples](/r/demo/mdui:examples) - Learn how to build real-world projects with MDUI. +3. [Try It Out](/r/demo/mdui:examples) - See how easy it is to create your first page. +`) + + // Call-to-action button for getting started + buttonGetStarted := mdui.Button("Start Building Now", "/r/demo/mdui:components") + + // Benefits section + benefitsHeading := mdui.Heading(2, "Why Choose MDUI?") + benefitsList := mdui.List([]string{ + "Simple and intuitive Markdown-based syntax.", + "Reusable components for rapid development.", + "Easy integration with existing Markdown projects.", + "Perfect for quickly creating functional prototypes.", + }, false) + + // Divider to separate sections + divider := mdui.Divider() + + // Organize the new content using Markdown + content := navbar + "\n" + + headingIntro + "\n" + + paragraphIntro + "\n" + + divider + "\n" + + headingGettingStarted + "\n" + + paragraphGettingStarted + "\n" + + buttonGetStarted + "\n\n" + + divider + "\n" + + benefitsHeading + "\n" + + benefitsList + "\n" + + return content +} + +// RenderComponentsPage - Renders the Components page with a list of available components, examples, and sample code +func RenderComponentsPage() string { + // Navbar with updated links + navbarLinks := map[string]string{ + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + } + navbar := mdui.Navbar(navbarLinks) + + // Main title and introduction + headingMain := mdui.Heading(1, "MDUI Components Overview") + descriptionMain := mdui.Paragraph(` +MDUI offers a variety of components that help developers build modern user interfaces quickly and efficiently. +Below is a list of components available in the MDUI package, along with examples of how to use them and sample code. +`) + + // List of components with descriptions, examples, and sample code + componentList := []struct { + Title string + Description string + Example string + SampleCode string + }{ + { + Title: "Navbar", + Description: "A navigation menu that can be used to create a list of links for site navigation.", + Example: mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"}), + SampleCode: `mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"})`, + }, + { + Title: "Heading", + Description: "A heading component to create titles of different levels (from H1 to H6).", + Example: mdui.Heading(2, "Sample Heading"), + SampleCode: `mdui.Heading(2, "Sample Heading")`, + }, + { + Title: "Button", + Description: "A clickable button component, implemented as a link in Markdown.", + Example: mdui.Button("Click Here", "/click-here"), + SampleCode: `mdui.Button("Click Here", "/click-here")`, + }, + { + Title: "Image", + Description: "An image component for displaying pictures with optional alt text.", + Example: mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image"), + SampleCode: `mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image")`, + }, + { + Title: "Code Block", + Description: "A component for rendering code blocks in Markdown.", + Example: mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}"), + SampleCode: `mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}")`, + }, + { + Title: "Divider", + Description: "A horizontal line divider for separating content.", + Example: mdui.Divider(), + SampleCode: `mdui.Divider()`, + }, + { + Title: "Paragraph", + Description: "Formats a block of text as a paragraph.", + Example: mdui.Paragraph("This is a sample paragraph."), + SampleCode: `mdui.Paragraph("This is a sample paragraph.")`, + }, + { + Title: "Quote", + Description: "A blockquote component for highlighting quoted text.", + Example: mdui.Quote("This is a quoted text."), + SampleCode: `mdui.Quote("This is a quoted text.")`, + }, + { + Title: "List (Unordered)", + Description: "Generates an unordered Markdown list.", + Example: mdui.List([]string{"Item 1", "Item 2", "Item 3"}, false), + SampleCode: `mdui.List([]string{"Item 1", "Item 2", "Item 3"}, false)`, + }, + { + Title: "List (Ordered)", + Description: "Generates an ordered Markdown list.", + Example: mdui.List([]string{"Step 1", "Step 2", "Step 3"}, true), + SampleCode: `mdui.List([]string{"Step 1", "Step 2", "Step 3"}, true)`, + }, + { + Title: "Table", + Description: "Generates a table with headers and rows for tabular data.", + Example: mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}}), + SampleCode: `mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}})`, + }, + { + Title: "Bold", + Description: "Formats text in bold.", + Example: mdui.Bold("This is bold text"), + SampleCode: `mdui.Bold("This is bold text")`, + }, + { + Title: "Italic", + Description: "Formats text in italic.", + Example: mdui.Italic("This is italic text"), + SampleCode: `mdui.Italic("This is italic text")`, + }, + { + Title: "Strikethrough", + Description: "Adds a strikethrough to the text.", + Example: mdui.Strikethrough("This text is crossed out"), + SampleCode: `mdui.Strikethrough("This text is crossed out")`, + }, + { + Title: "Alert", + Description: "An alert block using Markdown with a specified type (info, warning, danger).", + Example: mdui.Alert("This action cannot be undone.", "danger"), + SampleCode: `mdui.Alert("This action cannot be undone.", "danger")`, + }, + { + Title: "Collapsible", + Description: "A collapsible section that expands when clicked, using plain Markdown.", + Example: mdui.Collapsible("Show more", "Here is the additional content."), + SampleCode: `mdui.Collapsible("Show more", "Here is the additional content.")`, + }, + { + Title: "Footnote", + Description: "Generates a footnote reference and definition.", + Example: mdui.Footnote("1", "This is a footnote."), + SampleCode: `mdui.Footnote("1", "This is a footnote.")`, + }, + { + Title: "Badge", + Description: "Creates a badge using the Shields.io service.", + Example: mdui.Badge("Build Passing", "green"), + SampleCode: `mdui.Badge("Build Passing", "green")`, + }, + { + Title: "Table of Contents", + Description: "Generates a simple table of contents based on an array of headings.", + Example: mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"}), + SampleCode: `mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"})`, + }, + { + Title: "Keyboard Shortcut", + Description: "Formats a keyboard shortcut in Markdown using code block style.", + Example: mdui.KeyboardShortcut("Ctrl", "Alt", "Del"), + SampleCode: `mdui.KeyboardShortcut("Ctrl", "Alt", "Del")`, + }, + { + Title: "Emoji", + Description: "Adds an emoji to the content using a shortcode.", + Example: mdui.Emoji("smile"), + SampleCode: `mdui.Emoji("smile")`, + }, + { + Title: "Blockquote with Citation", + Description: "Generates a Markdown blockquote with an optional citation.", + Example: mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare"), + SampleCode: `mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare")`, + }, + { + Title: "Badge with Icon", + Description: "Creates a badge with an icon using Shields.io.", + Example: mdui.BadgeWithIcon("Go Lang", "blue", "go"), + SampleCode: `mdui.BadgeWithIcon("Go Lang", "blue", "go")`, + }, + } + + // Generate Markdown for each component + componentMarkdown := "" + for _, component := range componentList { + componentMarkdown += mdui.Heading(2, component.Title) + "\n" + componentMarkdown += mdui.Paragraph(component.Description) + "\n" + componentMarkdown += mdui.Paragraph("**Rendered Example:**") + "\n" + componentMarkdown += component.Example + "\n\n" + componentMarkdown += mdui.Paragraph("**Sample Code:**") + "\n" + componentMarkdown += mdui.CodeBlock(component.SampleCode) + "\n" + componentMarkdown += mdui.Divider() + "\n" + } + + // Combine everything into the components page + return navbar + "\n" + + headingMain + "\n" + + descriptionMain + "\n" + + componentMarkdown +} + +func RenderExamplesPage() string { + // Navbar with links + navbarLinks := map[string]string{ + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + } + navbar := mdui.Navbar(navbarLinks) + + // Main title and introduction + headingMain := mdui.Heading(1, "MDUI Example Page - Showcase All Components") + introParagraph := mdui.Paragraph(` +Welcome to the MDUI example page! This page demonstrates all the components available in MDUI, showcasing the power of Markdown for building user interfaces. +Explore the various elements below to see how you can create beautiful and functional web pages using MDUI. +`) + + // Hero section + heroImage := "https://png.pngtree.com/thumb_back/fh260/background/20230711/pngtree-d-rendering-of-a-landing-page-concept-featuring-an-abstract-blue-image_3838290.jpg" + heroTitle := mdui.Heading(2, "Welcome to the World of MDUI") + heroText := mdui.Paragraph(` +MDUI enables developers to build modern, clean, and responsive user interfaces effortlessly. +This example showcases all the components available in the MDUI library. +`) + + // Using the Badge component + badge := mdui.Badge("New Feature", "green") + + // Features section using List + featuresHeading := mdui.Heading(2, "Key Features") + featuresList := mdui.List([]string{ + "Responsive design with Markdown simplicity", + "Reusable components for rapid development", + "Customizable themes and styling", + "Easy integration with existing projects", + }, false) + + // Alert section for different alert types + alertSectionHeading := mdui.Heading(2, "Alert Messages") + alertInfo := mdui.Alert("This is an informational message.", "info") + alertWarning := mdui.Alert("Be cautious about this warning.", "warning") + alertDanger := mdui.Alert("This is a dangerous action. Proceed with care.", "danger") + + // Code block example + codeBlockHeading := mdui.Heading(2, "Code Example") + codeBlock := mdui.CodeBlock(`func main() { + fmt.Println("Hello, MDUI!") +}`) + + // Table example + tableHeading := mdui.Heading(2, "Feature Comparison Table") + table := mdui.Table([]string{"Feature", "MDUI", "Other Frameworks"}, [][]string{ + {"Ease of Use", "High", "Medium"}, + {"Flexibility", "High", "Variable"}, + {"Learning Curve", "Low", "Medium"}, + }) + + // Collapsible section + collapsible := mdui.Collapsible("Show more details", ` +Here is some more detailed information about MDUI and its components. +You can use collapsible sections to keep the layout clean and reveal information when needed. +`) + + // Quote example + quoteHeading := mdui.Heading(2, "Inspirational Quote") + quote := mdui.Quote("Simplicity is the ultimate sophistication. - Leonardo da Vinci") + + // Footnote example + footnote := mdui.Footnote("1", "MDUI is a fictional Markdown UI framework for demonstration purposes.") + + // Divider for separating sections + divider := mdui.Divider() + + // Organize all elements to create a comprehensive example + content := navbar + "\n" + + headingMain + "\n" + + introParagraph + "\n" + + divider + "\n" + + mdui.Image(heroImage, "Landing Page Background") + "\n" + + heroTitle + " " + badge + "\n" + + heroText + "\n" + + divider + "\n" + + featuresHeading + "\n" + + featuresList + "\n" + + divider + "\n" + + alertSectionHeading + "\n" + + alertInfo + "\n" + + alertWarning + "\n" + + alertDanger + "\n" + + divider + "\n" + + codeBlockHeading + "\n" + + codeBlock + "\n" + + divider + "\n" + + tableHeading + "\n" + + table + "\n" + + divider + "\n" + + collapsible + "\n" + + divider + "\n" + + quoteHeading + "\n" + + quote + "\n" + + divider + "\n" + + footnote + "\n" + + return content +} + +// Render - The main entry point for displaying different pages +func Render(path string) string { + // Routing logic for multiple pages + if strings.Contains(path, "components") { + return RenderComponentsPage() + } else if strings.Contains(path, "examples") { + return RenderExamplesPage() + } + return RenderHomePage() // Default to the home page +} diff --git a/examples/gno.land/r/demo/mdui/mdui_test.gno b/examples/gno.land/r/demo/mdui/mdui_test.gno new file mode 100644 index 00000000000..210459cb85f --- /dev/null +++ b/examples/gno.land/r/demo/mdui/mdui_test.gno @@ -0,0 +1,13 @@ +package mdui + +import ( + "testing" + + "gno.land/p/demo/uassert" +) + +func TestRender(t *testing.T) { + got := Render("") + expected := "# UI Demo\n\n[foo](r/demo/ui:foo) / [bar](r/demo/ui:foo/bar)\n\n\nSimple UI demonstration.\n\n- a text\n- [a relative link](r/demo/ui:foobar)\n- another text\n- **a bold text**\n- _italic text_\n- raw markdown with **bold** text in the middle.\n- `some inline code`\n- [a remote link](https://gno.land)\n\nanother string.\n\na paragraph.\n\n\n---\n\n\nI'm the footer.\n\n" + uassert.Equal(t, expected, got) +} From 92db01ff3d879e23989f71e0ec23c4295605e402 Mon Sep 17 00:00:00 2001 From: ngoc Date: Thu, 24 Oct 2024 09:36:04 +0700 Subject: [PATCH 03/10] add builder --- examples/gno.land/p/demo/mdui/mdui.gno | 199 ++++++++++++++++++++ examples/gno.land/p/demo/mdui/mdui_test.gno | 1 - 2 files changed, 199 insertions(+), 1 deletion(-) delete mode 100644 examples/gno.land/p/demo/mdui/mdui_test.gno diff --git a/examples/gno.land/p/demo/mdui/mdui.gno b/examples/gno.land/p/demo/mdui/mdui.gno index 4e98d44f578..cad49c42127 100644 --- a/examples/gno.land/p/demo/mdui/mdui.gno +++ b/examples/gno.land/p/demo/mdui/mdui.gno @@ -5,6 +5,205 @@ import ( "strings" ) +type MarkdownBuilder struct { + elements []string +} + +// NewMarkdownBuilder creates and returns a new MarkdownBuilder instance +func NewMarkdownBuilder() *MarkdownBuilder { + return &MarkdownBuilder{ + elements: []string{}, + } +} + +// AddHeading adds a heading to the MarkdownBuilder +func (b *MarkdownBuilder) AddHeading(level int, text string) *MarkdownBuilder { + heading := Heading(level, text) + b.elements = append(b.elements, heading) + return b +} + +// AddParagraph adds a paragraph to the MarkdownBuilder +func (b *MarkdownBuilder) AddParagraph(text string) *MarkdownBuilder { + paragraph := Paragraph(text) + b.elements = append(b.elements, paragraph) + return b +} + +// AddButton adds a button (link) to the MarkdownBuilder +func (b *MarkdownBuilder) AddButton(text, href string) *MarkdownBuilder { + button := Button(text, href) + b.elements = append(b.elements, button) + return b +} + +// AddImage adds an image to the MarkdownBuilder +func (b *MarkdownBuilder) AddImage(src, alt string) *MarkdownBuilder { + image := Image(src, alt) + b.elements = append(b.elements, image) + return b +} + +// AddDivider adds a horizontal rule to the MarkdownBuilder +func (b *MarkdownBuilder) AddDivider() *MarkdownBuilder { + divider := Divider() + b.elements = append(b.elements, divider) + return b +} + +// AddList adds a list (ordered or unordered) to the MarkdownBuilder +func (b *MarkdownBuilder) AddList(items []string, ordered bool) *MarkdownBuilder { + list := List(items, ordered) + b.elements = append(b.elements, list) + return b +} + +// AddTable adds a table to the MarkdownBuilder +func (b *MarkdownBuilder) AddTable(headers []string, rows [][]string) *MarkdownBuilder { + table := Table(headers, rows) + b.elements = append(b.elements, table) + return b +} + +// AddNavbar adds a navigation bar to the MarkdownBuilder +func (b *MarkdownBuilder) AddNavbar(links map[string]string) *MarkdownBuilder { + navbar := Navbar(links) + b.elements = append(b.elements, navbar) + return b +} + +// AddQuote adds a blockquote to the MarkdownBuilder +func (b *MarkdownBuilder) AddQuote(text string) *MarkdownBuilder { + quote := Quote(text) + b.elements = append(b.elements, quote) + return b +} + +// AddBold adds bold text to the MarkdownBuilder +func (b *MarkdownBuilder) AddBold(text string) *MarkdownBuilder { + bold := Bold(text) + b.elements = append(b.elements, bold) + return b +} + +// AddItalic adds italic text to the MarkdownBuilder +func (b *MarkdownBuilder) AddItalic(text string) *MarkdownBuilder { + italic := Italic(text) + b.elements = append(b.elements, italic) + return b +} + +// AddStrikethrough adds strikethrough text to the MarkdownBuilder +func (b *MarkdownBuilder) AddStrikethrough(text string) *MarkdownBuilder { + strikethrough := Strikethrough(text) + b.elements = append(b.elements, strikethrough) + return b +} + +// AddCodeBlock adds a code block to the MarkdownBuilder +func (b *MarkdownBuilder) AddCodeBlock(code string) *MarkdownBuilder { + codeBlock := CodeBlock(code) + b.elements = append(b.elements, codeBlock) + return b +} + +// AddAlert adds an alert box with a specified type to the MarkdownBuilder +func (b *MarkdownBuilder) AddAlert(content, alertType string) *MarkdownBuilder { + alert := Alert(content, alertType) + b.elements = append(b.elements, alert) + return b +} + +// AddCollapsible adds a collapsible section to the MarkdownBuilder +func (b *MarkdownBuilder) AddCollapsible(title, content string) *MarkdownBuilder { + collapsible := Collapsible(title, content) + b.elements = append(b.elements, collapsible) + return b +} + +// AddFootnote adds a footnote to the MarkdownBuilder +func (b *MarkdownBuilder) AddFootnote(label, text string) *MarkdownBuilder { + footnote := Footnote(label, text) + b.elements = append(b.elements, footnote) + return b +} + +// AddBadge adds a badge to the MarkdownBuilder +func (b *MarkdownBuilder) AddBadge(label, color string) *MarkdownBuilder { + badge := Badge(label, color) + b.elements = append(b.elements, badge) + return b +} + +// AddBadgeWithIcon adds a badge with an icon to the MarkdownBuilder +func (b *MarkdownBuilder) AddBadgeWithIcon(label, color, icon string) *MarkdownBuilder { + badgeWithIcon := BadgeWithIcon(label, color, icon) + b.elements = append(b.elements, badgeWithIcon) + return b +} + +// AddKeyboardShortcut adds a keyboard shortcut to the MarkdownBuilder +func (b *MarkdownBuilder) AddKeyboardShortcut(keys ...string) *MarkdownBuilder { + shortcut := KeyboardShortcut(keys...) + b.elements = append(b.elements, shortcut) + return b +} + +// AddBlockquoteWithCitation adds a blockquote with an optional citation to the MarkdownBuilder +func (b *MarkdownBuilder) AddBlockquoteWithCitation(quote, citation string) *MarkdownBuilder { + blockquoteWithCitation := BlockquoteWithCitation(quote, citation) + b.elements = append(b.elements, blockquoteWithCitation) + return b +} + +// AddTableOfContents adds a table of contents to the MarkdownBuilder +func (b *MarkdownBuilder) AddTableOfContents(headings []string) *MarkdownBuilder { + toc := TableOfContents(headings) + b.elements = append(b.elements, toc) + return b +} + +// AddEmoji adds an emoji to the MarkdownBuilder +func (b *MarkdownBuilder) AddEmoji(name string) *MarkdownBuilder { + emoji := Emoji(name) + b.elements = append(b.elements, emoji) + return b +} + +// Render generates and returns the final Markdown content +func (b *MarkdownBuilder) Render() string { + return strings.Join(b.elements, "\n") +} + +// AddIfElseRender adds conditional content to the MarkdownBuilder based on a condition +func (b *MarkdownBuilder) AddIfElseRender(condition bool, ifTrue string, ifFalse string) *MarkdownBuilder { + result := IfElseRender(condition, ifTrue, ifFalse) + b.elements = append(b.elements, result) + return b +} + +func (b *MarkdownBuilder) AddBreakLine() *MarkdownBuilder { + lineBreak := BreakLine() + b.elements = append(b.elements, lineBreak) + return b +} + +// BreakLine generates a Markdown line break (two spaces followed by a newline) +func BreakLine() string { + return " \n" // Two spaces followed by a newline +} + +// IfElseRender generates different Markdown output based on a condition +// If the condition is true, it will render the "ifTrue" content. +// Otherwise, it renders the "ifFalse" content. +func IfElseRender(condition bool, ifTrue string, ifFalse string) string { + if condition { + return ifTrue + } else { + return ifFalse + } +} + // Navbar generates a Markdown navigation menu from a map of links func Navbar(links map[string]string) string { nav := "" diff --git a/examples/gno.land/p/demo/mdui/mdui_test.gno b/examples/gno.land/p/demo/mdui/mdui_test.gno deleted file mode 100644 index 40697889c3c..00000000000 --- a/examples/gno.land/p/demo/mdui/mdui_test.gno +++ /dev/null @@ -1 +0,0 @@ -package mdui From 34fd7dd9f669a7773de5a0ae351d65e74427b3cc Mon Sep 17 00:00:00 2001 From: ngoc Date: Thu, 24 Oct 2024 09:36:40 +0700 Subject: [PATCH 04/10] tidy --- examples/gno.land/r/demo/mdui/gno.mod | 5 +- examples/gno.land/r/demo/mdui/mdui.gno | 205 +++++++++++++++----- examples/gno.land/r/demo/mdui/mdui_test.gno | 13 -- 3 files changed, 153 insertions(+), 70 deletions(-) delete mode 100644 examples/gno.land/r/demo/mdui/mdui_test.gno diff --git a/examples/gno.land/r/demo/mdui/gno.mod b/examples/gno.land/r/demo/mdui/gno.mod index d82d8617e15..9ac3c530742 100644 --- a/examples/gno.land/r/demo/mdui/gno.mod +++ b/examples/gno.land/r/demo/mdui/gno.mod @@ -1,6 +1,3 @@ module gno.land/r/demo/mdui -require ( - gno.land/p/demo/uassert v0.0.0-latest - gno.land/p/demo/mdui v0.0.0-latest -) +require gno.land/p/demo/mdui v0.0.0-latest diff --git a/examples/gno.land/r/demo/mdui/mdui.gno b/examples/gno.land/r/demo/mdui/mdui.gno index dafb3918e63..86fa8abf65a 100644 --- a/examples/gno.land/r/demo/mdui/mdui.gno +++ b/examples/gno.land/r/demo/mdui/mdui.gno @@ -6,75 +6,61 @@ import ( "gno.land/p/demo/mdui" ) -// RenderHomePage - Renders the Home page with a fresh introduction and updated sections +// RenderHomePage - Renders the Home page using MarkdownBuilder func RenderHomePage() string { - // Navbar with links and href values using the new Markdown approach + builder := mdui.NewMarkdownBuilder() + + // Navbar with links navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + "Builder Guide": "/r/demo/mdui:builder-guide", } - navbar := mdui.Navbar(navbarLinks) + builder.AddNavbar(navbarLinks) - // Heading for the new introduction - headingIntro := mdui.Heading(1, "Welcome to MDUI - Markdown-based UI Development") - - // Updated introduction paragraph with new content - paragraphIntro := mdui.Paragraph(` + // Heading and Introduction + builder.AddHeading(1, "Welcome to MDUI - Markdown-based UI Development"). + AddParagraph(` MDUI is a versatile UI framework built on the simplicity and power of Markdown. It enables developers to create user interfaces with ease by using Markdown syntax, making web development more accessible and streamlined. MDUI is ideal for anyone who wants to quickly build functional, beautiful web pages using familiar Markdown concepts. Explore our component library and see how MDUI can simplify your development workflow. -`) - - // New section heading for getting started - headingGettingStarted := mdui.Heading(2, "Getting Started with MDUI") +`). + AddDivider() - // Content for the "Getting Started" section - paragraphGettingStarted := mdui.Paragraph(` + // Getting Started Section + builder.AddHeading(2, "Getting Started with MDUI"). + AddParagraph(` Ready to start using MDUI? Follow these simple steps to get up and running: 1. [Explore Components](/r/demo/mdui:components) - Discover a variety of components available in MDUI. 2. [Check out Examples](/r/demo/mdui:examples) - Learn how to build real-world projects with MDUI. 3. [Try It Out](/r/demo/mdui:examples) - See how easy it is to create your first page. -`) - - // Call-to-action button for getting started - buttonGetStarted := mdui.Button("Start Building Now", "/r/demo/mdui:components") - - // Benefits section - benefitsHeading := mdui.Heading(2, "Why Choose MDUI?") - benefitsList := mdui.List([]string{ - "Simple and intuitive Markdown-based syntax.", - "Reusable components for rapid development.", - "Easy integration with existing Markdown projects.", - "Perfect for quickly creating functional prototypes.", - }, false) - - // Divider to separate sections - divider := mdui.Divider() - - // Organize the new content using Markdown - content := navbar + "\n" + - headingIntro + "\n" + - paragraphIntro + "\n" + - divider + "\n" + - headingGettingStarted + "\n" + - paragraphGettingStarted + "\n" + - buttonGetStarted + "\n\n" + - divider + "\n" + - benefitsHeading + "\n" + - benefitsList + "\n" - - return content +`). + AddButton("Start Building Now", "/r/demo/mdui:components"). + AddDivider() + + // Benefits Section + builder.AddHeading(2, "Why Choose MDUI?"). + AddList([]string{ + "Simple and intuitive Markdown-based syntax.", + "Reusable components for rapid development.", + "Easy integration with existing Markdown projects.", + "Perfect for quickly creating functional prototypes.", + }, false). + AddDivider() + + return builder.Render() } // RenderComponentsPage - Renders the Components page with a list of available components, examples, and sample code func RenderComponentsPage() string { // Navbar with updated links navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + "Builder Guide": "/r/demo/mdui:builder-guide", } navbar := mdui.Navbar(navbarLinks) @@ -254,9 +240,10 @@ Below is a list of components available in the MDUI package, along with examples func RenderExamplesPage() string { // Navbar with links navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + "Builder Guide": "/r/demo/mdui:builder-guide", } navbar := mdui.Navbar(navbarLinks) @@ -356,6 +343,116 @@ You can use collapsible sections to keep the layout clean and reveal information return content } +// RenderBuilderGuidePage - Renders a guide page explaining how to use the MarkdownBuilder +func RenderBuilderGuidePage() string { + builder := mdui.NewMarkdownBuilder() + + // Navbar + navbarLinks := map[string]string{ + "Home": "/r/demo/mdui", + "Components": "/r/demo/mdui:components", + "Examples": "/r/demo/mdui:examples", + "Builder Guide": "/r/demo/mdui:builder-guide", + } + builder.AddNavbar(navbarLinks) + + // Title and introduction + builder.AddHeading(1, "How to Use the MarkdownBuilder"). + AddParagraph(` +The MarkdownBuilder in MDUI is a powerful tool that allows developers to construct dynamic web pages with a simple, intuitive, and chainable API. +By leveraging the builder pattern, you can quickly and easily generate complex Markdown-based UIs without manually managing strings or formatting. +This guide will show you how to use the MarkdownBuilder to create content step by step. +`). + AddDivider() + + // Section: Builder Overview + builder.AddHeading(2, "1. Builder Overview"). + AddParagraph(` +The MarkdownBuilder is an object that accumulates UI elements like headings, paragraphs, buttons, tables, and more. +You can chain methods to add elements, and at the end, call the Render method to output the final Markdown. +`). + AddCodeBlock(` +builder := mdui.NewMarkdownBuilder() + +// Add components using chained methods +builder.AddHeading(1, "Welcome to My Page"). + AddParagraph("This is a sample paragraph."). + AddButton("Click Here", "/click") + +// Render the final Markdown +result := builder.Render() +`). + AddDivider() + + // Section: Adding Components + builder.AddHeading(2, "2. Adding Components"). + AddParagraph(` +You can use the MarkdownBuilder to add various UI components like headings, paragraphs, lists, buttons, images, and more. Below are some examples: +`). + AddCodeBlock(` +// Adding a heading +builder.AddHeading(2, "This is a Heading") + +// Adding a paragraph +builder.AddParagraph("This is a paragraph of text.") + +// Adding a button +builder.AddButton("Learn More", "/learn-more") + +// Adding a list +builder.AddList([]string{"Item 1", "Item 2", "Item 3"}, false) +`). + AddDivider() + + // Section: Complete Example + builder.AddHeading(2, "3. Complete Example"). + AddParagraph(` +Below is a complete example that demonstrates how to use the MarkdownBuilder to create a simple webpage: +`). + AddCodeBlock(` +builder := mdui.NewMarkdownBuilder() + +// Build the content +builder.AddHeading(1, "Welcome to MDUI"). + AddParagraph("MDUI is a framework for building UIs with Markdown."). + AddDivider(). + AddHeading(2, "Features"). + AddList([]string{ + "Simple to use", + "Supports various UI components", + "Easy to integrate with existing projects", + }, false). + AddButton("Get Started", "/start") + +// Render the final Markdown +result := builder.Render() +`). + AddDivider() + + // Section: Rendering Content + builder.AddHeading(2, "4. Rendering Content"). + AddParagraph(` +Once you've added all your components, you can call the Render method to output the final Markdown string. +This string can then be used as content in your application. +`). + AddCodeBlock(` +result := builder.Render() +fmt.Println(result) +`). + AddDivider() + + // Section: Conclusion + builder.AddHeading(2, "Conclusion"). + AddParagraph(` +The MarkdownBuilder makes it easy to generate complex UIs with Markdown using a clean and intuitive API. +With just a few method calls, you can add headings, paragraphs, buttons, tables, and more, and chain them together to build dynamic pages effortlessly. +Try out the MarkdownBuilder in your next project and see how it simplifies your workflow! +`). + AddButton("Start Using MarkdownBuilder", "/r/demo/mdui:examples") + + return builder.Render() +} + // Render - The main entry point for displaying different pages func Render(path string) string { // Routing logic for multiple pages @@ -363,6 +460,8 @@ func Render(path string) string { return RenderComponentsPage() } else if strings.Contains(path, "examples") { return RenderExamplesPage() + } else if strings.Contains(path, "builder-guide") { + return RenderBuilderGuidePage() } return RenderHomePage() // Default to the home page } diff --git a/examples/gno.land/r/demo/mdui/mdui_test.gno b/examples/gno.land/r/demo/mdui/mdui_test.gno deleted file mode 100644 index 210459cb85f..00000000000 --- a/examples/gno.land/r/demo/mdui/mdui_test.gno +++ /dev/null @@ -1,13 +0,0 @@ -package mdui - -import ( - "testing" - - "gno.land/p/demo/uassert" -) - -func TestRender(t *testing.T) { - got := Render("") - expected := "# UI Demo\n\n[foo](r/demo/ui:foo) / [bar](r/demo/ui:foo/bar)\n\n\nSimple UI demonstration.\n\n- a text\n- [a relative link](r/demo/ui:foobar)\n- another text\n- **a bold text**\n- _italic text_\n- raw markdown with **bold** text in the middle.\n- `some inline code`\n- [a remote link](https://gno.land)\n\nanother string.\n\na paragraph.\n\n\n---\n\n\nI'm the footer.\n\n" - uassert.Equal(t, expected, got) -} From 57f5e4e6273c33f19f23416f9f62dd9829cc1c7f Mon Sep 17 00:00:00 2001 From: ngoc Date: Wed, 6 Nov 2024 09:33:24 +0700 Subject: [PATCH 05/10] shorten struct name --- examples/gno.land/p/demo/mdui/mdui.gno | 104 ++++++++++++------------- examples/gno.land/r/demo/mdui/mdui.gno | 8 +- 2 files changed, 56 insertions(+), 56 deletions(-) diff --git a/examples/gno.land/p/demo/mdui/mdui.gno b/examples/gno.land/p/demo/mdui/mdui.gno index cad49c42127..3d5ed7062a3 100644 --- a/examples/gno.land/p/demo/mdui/mdui.gno +++ b/examples/gno.land/p/demo/mdui/mdui.gno @@ -5,184 +5,184 @@ import ( "strings" ) -type MarkdownBuilder struct { +type Builder struct { elements []string } -// NewMarkdownBuilder creates and returns a new MarkdownBuilder instance -func NewMarkdownBuilder() *MarkdownBuilder { - return &MarkdownBuilder{ +// NewBuilder creates and returns a new Builder instance +func NewBuilder() *Builder { + return &Builder{ elements: []string{}, } } -// AddHeading adds a heading to the MarkdownBuilder -func (b *MarkdownBuilder) AddHeading(level int, text string) *MarkdownBuilder { +// AddHeading adds a heading to the Builder +func (b *Builder) AddHeading(level int, text string) *Builder { heading := Heading(level, text) b.elements = append(b.elements, heading) return b } -// AddParagraph adds a paragraph to the MarkdownBuilder -func (b *MarkdownBuilder) AddParagraph(text string) *MarkdownBuilder { +// AddParagraph adds a paragraph to the Builder +func (b *Builder) AddParagraph(text string) *Builder { paragraph := Paragraph(text) b.elements = append(b.elements, paragraph) return b } -// AddButton adds a button (link) to the MarkdownBuilder -func (b *MarkdownBuilder) AddButton(text, href string) *MarkdownBuilder { +// AddButton adds a button (link) to the Builder +func (b *Builder) AddButton(text, href string) *Builder { button := Button(text, href) b.elements = append(b.elements, button) return b } -// AddImage adds an image to the MarkdownBuilder -func (b *MarkdownBuilder) AddImage(src, alt string) *MarkdownBuilder { +// AddImage adds an image to the Builder +func (b *Builder) AddImage(src, alt string) *Builder { image := Image(src, alt) b.elements = append(b.elements, image) return b } -// AddDivider adds a horizontal rule to the MarkdownBuilder -func (b *MarkdownBuilder) AddDivider() *MarkdownBuilder { +// AddDivider adds a horizontal rule to the Builder +func (b *Builder) AddDivider() *Builder { divider := Divider() b.elements = append(b.elements, divider) return b } -// AddList adds a list (ordered or unordered) to the MarkdownBuilder -func (b *MarkdownBuilder) AddList(items []string, ordered bool) *MarkdownBuilder { +// AddList adds a list (ordered or unordered) to the Builder +func (b *Builder) AddList(items []string, ordered bool) *Builder { list := List(items, ordered) b.elements = append(b.elements, list) return b } -// AddTable adds a table to the MarkdownBuilder -func (b *MarkdownBuilder) AddTable(headers []string, rows [][]string) *MarkdownBuilder { +// AddTable adds a table to the Builder +func (b *Builder) AddTable(headers []string, rows [][]string) *Builder { table := Table(headers, rows) b.elements = append(b.elements, table) return b } -// AddNavbar adds a navigation bar to the MarkdownBuilder -func (b *MarkdownBuilder) AddNavbar(links map[string]string) *MarkdownBuilder { +// AddNavbar adds a navigation bar to the Builder +func (b *Builder) AddNavbar(links map[string]string) *Builder { navbar := Navbar(links) b.elements = append(b.elements, navbar) return b } -// AddQuote adds a blockquote to the MarkdownBuilder -func (b *MarkdownBuilder) AddQuote(text string) *MarkdownBuilder { +// AddQuote adds a blockquote to the Builder +func (b *Builder) AddQuote(text string) *Builder { quote := Quote(text) b.elements = append(b.elements, quote) return b } -// AddBold adds bold text to the MarkdownBuilder -func (b *MarkdownBuilder) AddBold(text string) *MarkdownBuilder { +// AddBold adds bold text to the Builder +func (b *Builder) AddBold(text string) *Builder { bold := Bold(text) b.elements = append(b.elements, bold) return b } -// AddItalic adds italic text to the MarkdownBuilder -func (b *MarkdownBuilder) AddItalic(text string) *MarkdownBuilder { +// AddItalic adds italic text to the Builder +func (b *Builder) AddItalic(text string) *Builder { italic := Italic(text) b.elements = append(b.elements, italic) return b } -// AddStrikethrough adds strikethrough text to the MarkdownBuilder -func (b *MarkdownBuilder) AddStrikethrough(text string) *MarkdownBuilder { +// AddStrikethrough adds strikethrough text to the Builder +func (b *Builder) AddStrikethrough(text string) *Builder { strikethrough := Strikethrough(text) b.elements = append(b.elements, strikethrough) return b } -// AddCodeBlock adds a code block to the MarkdownBuilder -func (b *MarkdownBuilder) AddCodeBlock(code string) *MarkdownBuilder { +// AddCodeBlock adds a code block to the Builder +func (b *Builder) AddCodeBlock(code string) *Builder { codeBlock := CodeBlock(code) b.elements = append(b.elements, codeBlock) return b } -// AddAlert adds an alert box with a specified type to the MarkdownBuilder -func (b *MarkdownBuilder) AddAlert(content, alertType string) *MarkdownBuilder { +// AddAlert adds an alert box with a specified type to the Builder +func (b *Builder) AddAlert(content, alertType string) *Builder { alert := Alert(content, alertType) b.elements = append(b.elements, alert) return b } -// AddCollapsible adds a collapsible section to the MarkdownBuilder -func (b *MarkdownBuilder) AddCollapsible(title, content string) *MarkdownBuilder { +// AddCollapsible adds a collapsible section to the Builder +func (b *Builder) AddCollapsible(title, content string) *Builder { collapsible := Collapsible(title, content) b.elements = append(b.elements, collapsible) return b } -// AddFootnote adds a footnote to the MarkdownBuilder -func (b *MarkdownBuilder) AddFootnote(label, text string) *MarkdownBuilder { +// AddFootnote adds a footnote to the Builder +func (b *Builder) AddFootnote(label, text string) *Builder { footnote := Footnote(label, text) b.elements = append(b.elements, footnote) return b } -// AddBadge adds a badge to the MarkdownBuilder -func (b *MarkdownBuilder) AddBadge(label, color string) *MarkdownBuilder { +// AddBadge adds a badge to the Builder +func (b *Builder) AddBadge(label, color string) *Builder { badge := Badge(label, color) b.elements = append(b.elements, badge) return b } -// AddBadgeWithIcon adds a badge with an icon to the MarkdownBuilder -func (b *MarkdownBuilder) AddBadgeWithIcon(label, color, icon string) *MarkdownBuilder { +// AddBadgeWithIcon adds a badge with an icon to the Builder +func (b *Builder) AddBadgeWithIcon(label, color, icon string) *Builder { badgeWithIcon := BadgeWithIcon(label, color, icon) b.elements = append(b.elements, badgeWithIcon) return b } -// AddKeyboardShortcut adds a keyboard shortcut to the MarkdownBuilder -func (b *MarkdownBuilder) AddKeyboardShortcut(keys ...string) *MarkdownBuilder { +// AddKeyboardShortcut adds a keyboard shortcut to the Builder +func (b *Builder) AddKeyboardShortcut(keys ...string) *Builder { shortcut := KeyboardShortcut(keys...) b.elements = append(b.elements, shortcut) return b } -// AddBlockquoteWithCitation adds a blockquote with an optional citation to the MarkdownBuilder -func (b *MarkdownBuilder) AddBlockquoteWithCitation(quote, citation string) *MarkdownBuilder { +// AddBlockquoteWithCitation adds a blockquote with an optional citation to the Builder +func (b *Builder) AddBlockquoteWithCitation(quote, citation string) *Builder { blockquoteWithCitation := BlockquoteWithCitation(quote, citation) b.elements = append(b.elements, blockquoteWithCitation) return b } -// AddTableOfContents adds a table of contents to the MarkdownBuilder -func (b *MarkdownBuilder) AddTableOfContents(headings []string) *MarkdownBuilder { +// AddTableOfContents adds a table of contents to the Builder +func (b *Builder) AddTableOfContents(headings []string) *Builder { toc := TableOfContents(headings) b.elements = append(b.elements, toc) return b } -// AddEmoji adds an emoji to the MarkdownBuilder -func (b *MarkdownBuilder) AddEmoji(name string) *MarkdownBuilder { +// AddEmoji adds an emoji to the Builder +func (b *Builder) AddEmoji(name string) *Builder { emoji := Emoji(name) b.elements = append(b.elements, emoji) return b } // Render generates and returns the final Markdown content -func (b *MarkdownBuilder) Render() string { +func (b *Builder) Render() string { return strings.Join(b.elements, "\n") } -// AddIfElseRender adds conditional content to the MarkdownBuilder based on a condition -func (b *MarkdownBuilder) AddIfElseRender(condition bool, ifTrue string, ifFalse string) *MarkdownBuilder { +// AddIfElseRender adds conditional content to the Builder based on a condition +func (b *Builder) AddIfElseRender(condition bool, ifTrue string, ifFalse string) *Builder { result := IfElseRender(condition, ifTrue, ifFalse) b.elements = append(b.elements, result) return b } -func (b *MarkdownBuilder) AddBreakLine() *MarkdownBuilder { +func (b *Builder) AddBreakLine() *Builder { lineBreak := BreakLine() b.elements = append(b.elements, lineBreak) return b diff --git a/examples/gno.land/r/demo/mdui/mdui.gno b/examples/gno.land/r/demo/mdui/mdui.gno index 86fa8abf65a..dfa83c56d1a 100644 --- a/examples/gno.land/r/demo/mdui/mdui.gno +++ b/examples/gno.land/r/demo/mdui/mdui.gno @@ -8,7 +8,7 @@ import ( // RenderHomePage - Renders the Home page using MarkdownBuilder func RenderHomePage() string { - builder := mdui.NewMarkdownBuilder() + builder := mdui.NewBuilder() // Navbar with links navbarLinks := map[string]string{ @@ -345,7 +345,7 @@ You can use collapsible sections to keep the layout clean and reveal information // RenderBuilderGuidePage - Renders a guide page explaining how to use the MarkdownBuilder func RenderBuilderGuidePage() string { - builder := mdui.NewMarkdownBuilder() + builder := mdui.NewBuilder() // Navbar navbarLinks := map[string]string{ @@ -372,7 +372,7 @@ The MarkdownBuilder is an object that accumulates UI elements like headings, par You can chain methods to add elements, and at the end, call the Render method to output the final Markdown. `). AddCodeBlock(` -builder := mdui.NewMarkdownBuilder() +builder := mdui.NewBuilder() // Add components using chained methods builder.AddHeading(1, "Welcome to My Page"). @@ -410,7 +410,7 @@ builder.AddList([]string{"Item 1", "Item 2", "Item 3"}, false) Below is a complete example that demonstrates how to use the MarkdownBuilder to create a simple webpage: `). AddCodeBlock(` -builder := mdui.NewMarkdownBuilder() +builder := mdui.NewBuilder() // Build the content builder.AddHeading(1, "Welcome to MDUI"). From 689b4ce2f2678c3fb66ae5d531b4ec86872bd5e6 Mon Sep 17 00:00:00 2001 From: ngoc Date: Wed, 6 Nov 2024 10:06:09 +0700 Subject: [PATCH 06/10] Update components and UI --- examples/gno.land/p/demo/mdui/mdui.gno | 40 ++- examples/gno.land/r/demo/mdui/mdui.gno | 440 ++++++++++++------------- 2 files changed, 235 insertions(+), 245 deletions(-) diff --git a/examples/gno.land/p/demo/mdui/mdui.gno b/examples/gno.land/p/demo/mdui/mdui.gno index 3d5ed7062a3..2de7ed2d1ab 100644 --- a/examples/gno.land/p/demo/mdui/mdui.gno +++ b/examples/gno.land/p/demo/mdui/mdui.gno @@ -52,8 +52,8 @@ func (b *Builder) AddDivider() *Builder { } // AddList adds a list (ordered or unordered) to the Builder -func (b *Builder) AddList(items []string, ordered bool) *Builder { - list := List(items, ordered) +func (b *Builder) AddList(items []string, hrefs []string, ordered bool) *Builder { + list := List(items, hrefs, ordered) b.elements = append(b.elements, list) return b } @@ -255,14 +255,22 @@ func Quote(text string) string { return "> " + text + "\n" } -// List generates a Markdown list (ordered or unordered) -func List(items []string, ordered bool) string { +// List generates a Markdown list (ordered or unordered) with each item optionally as a link +func List(items []string, hrefs []string, ordered bool) string { list := "" for i, item := range items { + var listItem string + if i < len(hrefs) && hrefs[i] != "" { + // Create a link if an href is available + listItem = "[" + item + "](" + hrefs[i] + ")" + } else { + // Use plain text if no corresponding href + listItem = item + } if ordered { - list += strconv.Itoa(i+1) + ". " + item + "\n" + list += strconv.Itoa(i+1) + ". " + listItem + "\n" } else { - list += "- " + item + "\n" + list += "- " + listItem + "\n" } } return list @@ -298,7 +306,7 @@ func Strikethrough(text string) string { return "~~" + text + "~~" } -// Alert creates a Markdown-styled alert block with a specified type (info, warning, danger) +// Alert creates a Markdown-styled alert block with a specified type or custom prefix func Alert(content, alertType string) string { var prefix string switch alertType { @@ -308,8 +316,10 @@ func Alert(content, alertType string) string { prefix = "**⚠️ Warning:** " // Warning icon case "danger": prefix = "**❌ Danger:** " // Danger icon + case "success": + prefix = "**✅ Success:** " // Success icon default: - prefix = "**ℹ️ Info:** " // Default to info icon + prefix = "**" + strings.Title(alertType) + ":** " // Custom prefix based on type } return "> " + prefix + content + "\n" } @@ -349,12 +359,22 @@ func Emoji(name string) string { "smile": "😊", "heart": "❤️", "thumbs_up": "👍", - // Add more emoji mappings as needed + "star": "⭐", + "fire": "🔥", + "check": "✔️", + "cross": "❌", + "warning": "⚠️", + "info": "ℹ️", + "sun": "☀️", + "moon": "🌙", + "rocket": "🚀", + // Add additional emojis as needed } if emoji, exists := emojiMap[name]; exists { return emoji } - return name + // If emoji is not found, return the name itself as a fallback + return ":" + name + ":" } // BlockquoteWithCitation generates a Markdown blockquote with an optional citation diff --git a/examples/gno.land/r/demo/mdui/mdui.gno b/examples/gno.land/r/demo/mdui/mdui.gno index dfa83c56d1a..5124f1cb7a3 100644 --- a/examples/gno.land/r/demo/mdui/mdui.gno +++ b/examples/gno.land/r/demo/mdui/mdui.gno @@ -6,72 +6,67 @@ import ( "gno.land/p/demo/mdui" ) -// RenderHomePage - Renders the Home page using MarkdownBuilder +// Constants for common paths +const ( + BasePath = "/r/demo/mdui" + ComponentsPath = "/r/demo/mdui:components" + ExamplesPath = "/r/demo/mdui:examples" + BuilderGuidePath = "/r/demo/mdui:builder-guide" +) + +// Common Navbar Links +var NavbarLinks = map[string]string{ + "Home": BasePath, + "Components": ComponentsPath, + "Examples": ExamplesPath, + "Builder Guide": BuilderGuidePath, +} + +// RenderHomePage renders the Home page using MarkdownBuilder func RenderHomePage() string { builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) - // Navbar with links - navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", - "Builder Guide": "/r/demo/mdui:builder-guide", - } - builder.AddNavbar(navbarLinks) - - // Heading and Introduction builder.AddHeading(1, "Welcome to MDUI - Markdown-based UI Development"). AddParagraph(` MDUI is a versatile UI framework built on the simplicity and power of Markdown. It enables developers to create user interfaces with ease by using Markdown syntax, making web development more accessible and streamlined. -MDUI is ideal for anyone who wants to quickly build functional, beautiful web pages using familiar Markdown concepts. Explore our component library and see how MDUI can simplify your development workflow. `). - AddDivider() - - // Getting Started Section - builder.AddHeading(2, "Getting Started with MDUI"). + AddDivider(). + AddHeading(2, "Getting Started with MDUI"). AddParagraph(` Ready to start using MDUI? Follow these simple steps to get up and running: 1. [Explore Components](/r/demo/mdui:components) - Discover a variety of components available in MDUI. 2. [Check out Examples](/r/demo/mdui:examples) - Learn how to build real-world projects with MDUI. 3. [Try It Out](/r/demo/mdui:examples) - See how easy it is to create your first page. `). - AddButton("Start Building Now", "/r/demo/mdui:components"). - AddDivider() - - // Benefits Section - builder.AddHeading(2, "Why Choose MDUI?"). + AddButton("Start Building Now", ComponentsPath). + AddDivider(). + AddHeading(2, "Why Choose MDUI?"). AddList([]string{ "Simple and intuitive Markdown-based syntax.", "Reusable components for rapid development.", "Easy integration with existing Markdown projects.", "Perfect for quickly creating functional prototypes.", - }, false). + }, nil, false). AddDivider() return builder.Render() } -// RenderComponentsPage - Renders the Components page with a list of available components, examples, and sample code +// RenderComponentsPage renders the Components page with a list of available components, examples, and sample code func RenderComponentsPage() string { - // Navbar with updated links - navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", - "Builder Guide": "/r/demo/mdui:builder-guide", - } - navbar := mdui.Navbar(navbarLinks) + builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) - // Main title and introduction - headingMain := mdui.Heading(1, "MDUI Components Overview") - descriptionMain := mdui.Paragraph(` + builder.AddHeading(1, "MDUI Components Overview"). + AddParagraph(` MDUI offers a variety of components that help developers build modern user interfaces quickly and efficiently. Below is a list of components available in the MDUI package, along with examples of how to use them and sample code. `) - // List of components with descriptions, examples, and sample code + // Comprehensive list of components componentList := []struct { Title string Description string @@ -90,6 +85,12 @@ Below is a list of components available in the MDUI package, along with examples Example: mdui.Heading(2, "Sample Heading"), SampleCode: `mdui.Heading(2, "Sample Heading")`, }, + { + Title: "Paragraph", + Description: "Formats a block of text as a paragraph.", + Example: mdui.Paragraph("This is a sample paragraph."), + SampleCode: `mdui.Paragraph("This is a sample paragraph.")`, + }, { Title: "Button", Description: "A clickable button component, implemented as a link in Markdown.", @@ -102,12 +103,6 @@ Below is a list of components available in the MDUI package, along with examples Example: mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image"), SampleCode: `mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image")`, }, - { - Title: "Code Block", - Description: "A component for rendering code blocks in Markdown.", - Example: mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}"), - SampleCode: `mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}")`, - }, { Title: "Divider", Description: "A horizontal line divider for separating content.", @@ -115,28 +110,16 @@ Below is a list of components available in the MDUI package, along with examples SampleCode: `mdui.Divider()`, }, { - Title: "Paragraph", - Description: "Formats a block of text as a paragraph.", - Example: mdui.Paragraph("This is a sample paragraph."), - SampleCode: `mdui.Paragraph("This is a sample paragraph.")`, - }, - { - Title: "Quote", - Description: "A blockquote component for highlighting quoted text.", - Example: mdui.Quote("This is a quoted text."), - SampleCode: `mdui.Quote("This is a quoted text.")`, - }, - { - Title: "List (Unordered)", - Description: "Generates an unordered Markdown list.", - Example: mdui.List([]string{"Item 1", "Item 2", "Item 3"}, false), - SampleCode: `mdui.List([]string{"Item 1", "Item 2", "Item 3"}, false)`, + Title: "List (Unordered with Links)", + Description: "Generates an unordered Markdown list with each item as a link.", + Example: mdui.List([]string{"Item 1", "Item 2", "Item 3"}, []string{"#item1", "#item2", "#item3"}, false), + SampleCode: `mdui.List([]string{"Item 1", "Item 2", "Item 3"}, []string{"#item1", "#item2", "#item3"}, false)`, }, { - Title: "List (Ordered)", - Description: "Generates an ordered Markdown list.", - Example: mdui.List([]string{"Step 1", "Step 2", "Step 3"}, true), - SampleCode: `mdui.List([]string{"Step 1", "Step 2", "Step 3"}, true)`, + Title: "List (Ordered with Links)", + Description: "Generates an ordered Markdown list with each item as a link.", + Example: mdui.List([]string{"Step 1", "Step 2", "Step 3"}, []string{"#step1", "#step2", "#step3"}, true), + SampleCode: `mdui.List([]string{"Step 1", "Step 2", "Step 3"}, []string{"#step1", "#step2", "#step3"}, true)`, }, { Title: "Table", @@ -144,6 +127,12 @@ Below is a list of components available in the MDUI package, along with examples Example: mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}}), SampleCode: `mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}})`, }, + { + Title: "Quote", + Description: "A blockquote component for highlighting quoted text.", + Example: mdui.Quote("This is a quoted text."), + SampleCode: `mdui.Quote("This is a quoted text.")`, + }, { Title: "Bold", Description: "Formats text in bold.", @@ -162,9 +151,15 @@ Below is a list of components available in the MDUI package, along with examples Example: mdui.Strikethrough("This text is crossed out"), SampleCode: `mdui.Strikethrough("This text is crossed out")`, }, + { + Title: "Code Block", + Description: "A component for rendering code blocks in Markdown.", + Example: mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}"), + SampleCode: `mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}")`, + }, { Title: "Alert", - Description: "An alert block using Markdown with a specified type (info, warning, danger).", + Description: "An alert block using Markdown with a specified type (info, warning, danger, success).", Example: mdui.Alert("This action cannot be undone.", "danger"), SampleCode: `mdui.Alert("This action cannot be undone.", "danger")`, }, @@ -186,6 +181,12 @@ Below is a list of components available in the MDUI package, along with examples Example: mdui.Badge("Build Passing", "green"), SampleCode: `mdui.Badge("Build Passing", "green")`, }, + { + Title: "Badge with Icon", + Description: "Creates a badge with an icon using Shields.io.", + Example: mdui.BadgeWithIcon("Go Lang", "blue", "go"), + SampleCode: `mdui.BadgeWithIcon("Go Lang", "blue", "go")`, + }, { Title: "Table of Contents", Description: "Generates a simple table of contents based on an array of headings.", @@ -211,207 +212,184 @@ Below is a list of components available in the MDUI package, along with examples SampleCode: `mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare")`, }, { - Title: "Badge with Icon", - Description: "Creates a badge with an icon using Shields.io.", - Example: mdui.BadgeWithIcon("Go Lang", "blue", "go"), - SampleCode: `mdui.BadgeWithIcon("Go Lang", "blue", "go")`, + Title: "BreakLine", + Description: "Adds a line break (two spaces followed by a newline) in Markdown.", + Example: mdui.BreakLine(), + SampleCode: `mdui.BreakLine()`, + }, + { + Title: "IfElseRender", + Description: "Conditionally renders content based on a Boolean condition.", + Example: mdui.IfElseRender(true, "Condition is True", "Condition is False"), + SampleCode: `mdui.IfElseRender(true, "Condition is True", "Condition is False")`, }, } - // Generate Markdown for each component - componentMarkdown := "" + // Generate Markdown for each component in the list for _, component := range componentList { - componentMarkdown += mdui.Heading(2, component.Title) + "\n" - componentMarkdown += mdui.Paragraph(component.Description) + "\n" - componentMarkdown += mdui.Paragraph("**Rendered Example:**") + "\n" - componentMarkdown += component.Example + "\n\n" - componentMarkdown += mdui.Paragraph("**Sample Code:**") + "\n" - componentMarkdown += mdui.CodeBlock(component.SampleCode) + "\n" - componentMarkdown += mdui.Divider() + "\n" + builder.AddHeading(2, component.Title). + AddParagraph(component.Description). + AddParagraph("**Rendered Example:**"). + AddParagraph(component.Example). + AddParagraph("**Sample Code:**"). + AddCodeBlock(component.SampleCode). + AddDivider() } - // Combine everything into the components page - return navbar + "\n" + - headingMain + "\n" + - descriptionMain + "\n" + - componentMarkdown + return builder.Render() } +// RenderExamplesPage renders the Example page with sample components demonstrating the full range of MDUI functionalities func RenderExamplesPage() string { - // Navbar with links - navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", - "Builder Guide": "/r/demo/mdui:builder-guide", - } - navbar := mdui.Navbar(navbarLinks) + builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) - // Main title and introduction - headingMain := mdui.Heading(1, "MDUI Example Page - Showcase All Components") - introParagraph := mdui.Paragraph(` + // Introduction Section + builder.AddHeading(1, "MDUI Example Page - Showcase All Components"). + AddParagraph(` Welcome to the MDUI example page! This page demonstrates all the components available in MDUI, showcasing the power of Markdown for building user interfaces. Explore the various elements below to see how you can create beautiful and functional web pages using MDUI. -`) +`). + AddDivider() - // Hero section - heroImage := "https://png.pngtree.com/thumb_back/fh260/background/20230711/pngtree-d-rendering-of-a-landing-page-concept-featuring-an-abstract-blue-image_3838290.jpg" - heroTitle := mdui.Heading(2, "Welcome to the World of MDUI") - heroText := mdui.Paragraph(` -MDUI enables developers to build modern, clean, and responsive user interfaces effortlessly. -This example showcases all the components available in the MDUI library. -`) + // Hero Section with Image and Badge + builder.AddImage("https://media.istockphoto.com/id/1359861587/vector/blue-modern-abstract-wide-banner-with-geometric-shapes-dark-blue-abstract-background.jpg?s=612x612&w=0&k=20&c=xDMI5_-xyh_IHm2ca07x5xFTR7kRoFZJhxrq10FQra0=", "Hero Image"). + AddHeading(2, "Welcome to MDUI"). + AddBadge("New Feature", "green"). + AddParagraph("MDUI enables developers to build modern, clean, and responsive user interfaces effortlessly.") + + // Key Features List + builder.AddHeading(2, "Key Features"). + AddList([]string{ + "Responsive design with Markdown simplicity", + "Reusable components for rapid development", + "Customizable themes and styling", + "Easy integration with existing projects", + }, nil, false). + AddDivider() - // Using the Badge component - badge := mdui.Badge("New Feature", "green") - - // Features section using List - featuresHeading := mdui.Heading(2, "Key Features") - featuresList := mdui.List([]string{ - "Responsive design with Markdown simplicity", - "Reusable components for rapid development", - "Customizable themes and styling", - "Easy integration with existing projects", - }, false) - - // Alert section for different alert types - alertSectionHeading := mdui.Heading(2, "Alert Messages") - alertInfo := mdui.Alert("This is an informational message.", "info") - alertWarning := mdui.Alert("Be cautious about this warning.", "warning") - alertDanger := mdui.Alert("This is a dangerous action. Proceed with care.", "danger") - - // Code block example - codeBlockHeading := mdui.Heading(2, "Code Example") - codeBlock := mdui.CodeBlock(`func main() { + // Alerts Section + builder.AddHeading(2, "Alert Messages"). + AddAlert("This is an informational message.", "info"). + AddAlert("Be cautious about this warning.", "warning"). + AddAlert("This is a dangerous action. Proceed with care.", "danger"). + AddAlert("Congratulations, your action was successful!", "success"). + AddDivider() + + // Code Block Example + builder.AddHeading(2, "Code Example"). + AddCodeBlock(`func main() { fmt.Println("Hello, MDUI!") -}`) - - // Table example - tableHeading := mdui.Heading(2, "Feature Comparison Table") - table := mdui.Table([]string{"Feature", "MDUI", "Other Frameworks"}, [][]string{ - {"Ease of Use", "High", "Medium"}, - {"Flexibility", "High", "Variable"}, - {"Learning Curve", "Low", "Medium"}, - }) - - // Collapsible section - collapsible := mdui.Collapsible("Show more details", ` +}`). + AddDivider() + + // Table Example + builder.AddHeading(2, "Feature Comparison Table"). + AddTable([]string{"Feature", "MDUI", "Other Frameworks"}, [][]string{ + {"Ease of Use", "High", "Medium"}, + {"Flexibility", "High", "Variable"}, + {"Learning Curve", "Low", "Medium"}, + }). + AddDivider() + + // Collapsible Section + builder.AddHeading(2, "More Details"). + AddCollapsible("Expand to see more", ` Here is some more detailed information about MDUI and its components. You can use collapsible sections to keep the layout clean and reveal information when needed. -`) +`). + AddDivider() + + // Blockquote with Citation + builder.AddHeading(2, "Inspirational Quote"). + AddBlockquoteWithCitation("Simplicity is the ultimate sophistication.", "Leonardo da Vinci"). + AddDivider() - // Quote example - quoteHeading := mdui.Heading(2, "Inspirational Quote") - quote := mdui.Quote("Simplicity is the ultimate sophistication. - Leonardo da Vinci") - - // Footnote example - footnote := mdui.Footnote("1", "MDUI is a fictional Markdown UI framework for demonstration purposes.") - - // Divider for separating sections - divider := mdui.Divider() - - // Organize all elements to create a comprehensive example - content := navbar + "\n" + - headingMain + "\n" + - introParagraph + "\n" + - divider + "\n" + - mdui.Image(heroImage, "Landing Page Background") + "\n" + - heroTitle + " " + badge + "\n" + - heroText + "\n" + - divider + "\n" + - featuresHeading + "\n" + - featuresList + "\n" + - divider + "\n" + - alertSectionHeading + "\n" + - alertInfo + "\n" + - alertWarning + "\n" + - alertDanger + "\n" + - divider + "\n" + - codeBlockHeading + "\n" + - codeBlock + "\n" + - divider + "\n" + - tableHeading + "\n" + - table + "\n" + - divider + "\n" + - collapsible + "\n" + - divider + "\n" + - quoteHeading + "\n" + - quote + "\n" + - divider + "\n" + - footnote + "\n" - - return content + // Keyboard Shortcut Example + builder.AddHeading(2, "Keyboard Shortcut"). + AddParagraph("Press the following shortcut to refresh the page:"). + AddKeyboardShortcut("Ctrl", "R"). + AddDivider() + + // Emoji Example + builder.AddHeading(2, "Add Some Fun with Emojis"). + AddParagraph("MDUI supports popular emojis to enhance your content:"). + AddEmoji("smile"). + AddEmoji("rocket"). + AddEmoji("thumbs_up"). + AddDivider() + + // Table of Contents + builder.AddHeading(2, "Table of Contents"). + AddTableOfContents([]string{"Introduction", "Key Features", "Alert Messages", "Code Example", "Feature Comparison Table", "More Details", "Inspirational Quote", "Keyboard Shortcut", "Emojis"}). + AddDivider() + + // Conditional Rendering Example + builder.AddHeading(2, "Conditional Content"). + AddParagraph("MDUI also supports conditional content rendering. See the result below based on a true/false condition."). + AddIfElseRender(true, "This content is displayed because the condition is true.", "This content would display if the condition were false"). + AddDivider() + + // Badges Section with Icons + builder.AddHeading(2, "Badge Examples"). + AddParagraph("Show off your badges with or without icons:"). + AddBadge("Beta", "blue"). + AddBadgeWithIcon("Go", "blue", "go"). + AddBadgeWithIcon("JavaScript", "yellow", "javascript"). + AddBadge("Build Passing", "green"). + AddDivider() + + // Final Message and Button + builder.AddHeading(2, "Ready to Start Building with MDUI?"). + AddParagraph("MDUI makes it simple to create UIs with Markdown. Try it out by clicking the button below:"). + AddButton("Start Using MDUI", "/start") + + return builder.Render() } -// RenderBuilderGuidePage - Renders a guide page explaining how to use the MarkdownBuilder +// RenderBuilderGuidePage renders a guide page explaining how to use the MarkdownBuilder func RenderBuilderGuidePage() string { builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) - // Navbar - navbarLinks := map[string]string{ - "Home": "/r/demo/mdui", - "Components": "/r/demo/mdui:components", - "Examples": "/r/demo/mdui:examples", - "Builder Guide": "/r/demo/mdui:builder-guide", - } - builder.AddNavbar(navbarLinks) - - // Title and introduction builder.AddHeading(1, "How to Use the MarkdownBuilder"). AddParagraph(` The MarkdownBuilder in MDUI is a powerful tool that allows developers to construct dynamic web pages with a simple, intuitive, and chainable API. By leveraging the builder pattern, you can quickly and easily generate complex Markdown-based UIs without manually managing strings or formatting. -This guide will show you how to use the MarkdownBuilder to create content step by step. `). - AddDivider() - - // Section: Builder Overview - builder.AddHeading(2, "1. Builder Overview"). + AddDivider(). + AddHeading(2, "1. Builder Overview"). AddParagraph(` -The MarkdownBuilder is an object that accumulates UI elements like headings, paragraphs, buttons, tables, and more. +The MarkdownBuilder accumulates UI elements like headings, paragraphs, buttons, tables, and more. You can chain methods to add elements, and at the end, call the Render method to output the final Markdown. `). AddCodeBlock(` builder := mdui.NewBuilder() - // Add components using chained methods -builder.AddHeading(1, "Welcome to My Page"). - AddParagraph("This is a sample paragraph."). - AddButton("Click Here", "/click") - +builder.AddHeading(1, "Welcome to My Page").AddParagraph("This is a sample paragraph.").AddButton("Click Here", "/click") // Render the final Markdown result := builder.Render() `). - AddDivider() - - // Section: Adding Components - builder.AddHeading(2, "2. Adding Components"). + AddDivider(). + AddHeading(2, "2. Adding Components"). AddParagraph(` -You can use the MarkdownBuilder to add various UI components like headings, paragraphs, lists, buttons, images, and more. Below are some examples: +Use MarkdownBuilder to add various UI components like headings, paragraphs, lists, buttons, images, and more. `). AddCodeBlock(` // Adding a heading builder.AddHeading(2, "This is a Heading") - // Adding a paragraph builder.AddParagraph("This is a paragraph of text.") - // Adding a button builder.AddButton("Learn More", "/learn-more") - // Adding a list -builder.AddList([]string{"Item 1", "Item 2", "Item 3"}, false) -`). - AddDivider() - - // Section: Complete Example - builder.AddHeading(2, "3. Complete Example"). - AddParagraph(` -Below is a complete example that demonstrates how to use the MarkdownBuilder to create a simple webpage: +builder.AddList([]string{"Item 1", "Item 2", "Item 3"}, nil, false) `). + AddDivider(). + AddHeading(2, "3. Complete Example"). + AddParagraph("Below is a complete example using MarkdownBuilder:"). AddCodeBlock(` builder := mdui.NewBuilder() - // Build the content builder.AddHeading(1, "Welcome to MDUI"). AddParagraph("MDUI is a framework for building UIs with Markdown."). @@ -421,47 +399,39 @@ builder.AddHeading(1, "Welcome to MDUI"). "Simple to use", "Supports various UI components", "Easy to integrate with existing projects", - }, false). + }, nil, false). AddButton("Get Started", "/start") - // Render the final Markdown result := builder.Render() `). - AddDivider() - - // Section: Rendering Content - builder.AddHeading(2, "4. Rendering Content"). + AddDivider(). + AddHeading(2, "4. Rendering Content"). AddParagraph(` Once you've added all your components, you can call the Render method to output the final Markdown string. This string can then be used as content in your application. `). - AddCodeBlock(` -result := builder.Render() -fmt.Println(result) -`). - AddDivider() - - // Section: Conclusion - builder.AddHeading(2, "Conclusion"). + AddCodeBlock(`result := builder.Render(); fmt.Println(result)`). + AddDivider(). + AddHeading(2, "Conclusion"). AddParagraph(` The MarkdownBuilder makes it easy to generate complex UIs with Markdown using a clean and intuitive API. With just a few method calls, you can add headings, paragraphs, buttons, tables, and more, and chain them together to build dynamic pages effortlessly. -Try out the MarkdownBuilder in your next project and see how it simplifies your workflow! `). - AddButton("Start Using MarkdownBuilder", "/r/demo/mdui:examples") + AddButton("Start Using MarkdownBuilder", ExamplesPath) return builder.Render() } -// Render - The main entry point for displaying different pages +// Render entry point to route to different pages based on path func Render(path string) string { - // Routing logic for multiple pages - if strings.Contains(path, "components") { + switch { + case strings.Contains(path, "components"): return RenderComponentsPage() - } else if strings.Contains(path, "examples") { + case strings.Contains(path, "examples"): return RenderExamplesPage() - } else if strings.Contains(path, "builder-guide") { + case strings.Contains(path, "builder-guide"): return RenderBuilderGuidePage() + default: + return RenderHomePage() } - return RenderHomePage() // Default to the home page } From bb29d03a6f5969fb4557ed37a2df42dd6efed709 Mon Sep 17 00:00:00 2001 From: ngoc Date: Wed, 20 Nov 2024 10:20:20 +0700 Subject: [PATCH 07/10] Move to varmeta namespace --- examples/gno.land/p/demo/mdui/gno.mod | 1 - examples/gno.land/p/varmeta/mdui/gno.mod | 1 + .../p/{demo => varmeta}/mdui/mdui.gno | 51 +++++-------------- examples/gno.land/r/demo/mdui/gno.mod | 4 +- examples/gno.land/r/demo/mdui/mdui.gno | 48 +++++++---------- 5 files changed, 32 insertions(+), 73 deletions(-) delete mode 100644 examples/gno.land/p/demo/mdui/gno.mod create mode 100644 examples/gno.land/p/varmeta/mdui/gno.mod rename examples/gno.land/p/{demo => varmeta}/mdui/mdui.gno (89%) diff --git a/examples/gno.land/p/demo/mdui/gno.mod b/examples/gno.land/p/demo/mdui/gno.mod deleted file mode 100644 index ff572b53bde..00000000000 --- a/examples/gno.land/p/demo/mdui/gno.mod +++ /dev/null @@ -1 +0,0 @@ -module gno.land/p/demo/mdui diff --git a/examples/gno.land/p/varmeta/mdui/gno.mod b/examples/gno.land/p/varmeta/mdui/gno.mod new file mode 100644 index 00000000000..13b49c1ab7b --- /dev/null +++ b/examples/gno.land/p/varmeta/mdui/gno.mod @@ -0,0 +1 @@ +module gno.land/p/varmeta/mdui diff --git a/examples/gno.land/p/demo/mdui/mdui.gno b/examples/gno.land/p/varmeta/mdui/mdui.gno similarity index 89% rename from examples/gno.land/p/demo/mdui/mdui.gno rename to examples/gno.land/p/varmeta/mdui/mdui.gno index 2de7ed2d1ab..48f78336f44 100644 --- a/examples/gno.land/p/demo/mdui/mdui.gno +++ b/examples/gno.land/p/varmeta/mdui/mdui.gno @@ -9,6 +9,11 @@ type Builder struct { elements []string } +type NavLink struct { + Text string + Href string +} + // NewBuilder creates and returns a new Builder instance func NewBuilder() *Builder { return &Builder{ @@ -66,7 +71,7 @@ func (b *Builder) AddTable(headers []string, rows [][]string) *Builder { } // AddNavbar adds a navigation bar to the Builder -func (b *Builder) AddNavbar(links map[string]string) *Builder { +func (b *Builder) AddNavbar(links []NavLink) *Builder { navbar := Navbar(links) b.elements = append(b.elements, navbar) return b @@ -163,13 +168,6 @@ func (b *Builder) AddTableOfContents(headings []string) *Builder { return b } -// AddEmoji adds an emoji to the Builder -func (b *Builder) AddEmoji(name string) *Builder { - emoji := Emoji(name) - b.elements = append(b.elements, emoji) - return b -} - // Render generates and returns the final Markdown content func (b *Builder) Render() string { return strings.Join(b.elements, "\n") @@ -204,14 +202,13 @@ func IfElseRender(condition bool, ifTrue string, ifFalse string) string { } } -// Navbar generates a Markdown navigation menu from a map of links -func Navbar(links map[string]string) string { +func Navbar(links []NavLink) string { nav := "" - for text, href := range links { - if nav != "" { - nav += " | " // Add a pipe separator between links + for i, link := range links { + if i > 0 { + nav += " | " } - nav += "[" + text + "](" + href + ")" + nav += "[" + link.Text + "](" + link.Href + ")" } return nav + "\n" } @@ -237,7 +234,7 @@ func Image(src, alt string) string { // CodeBlock wraps code in Markdown code block syntax func CodeBlock(code string) string { - return "```go\n" + code + "\n```\n" + return "```\n" + code + "\n```\n" } // Divider renders a Markdown horizontal rule @@ -353,30 +350,6 @@ func KeyboardShortcut(keys ...string) string { return "`" + strings.Join(keys, " + ") + "`" } -// Emoji adds an emoji to the content using a shortcode -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 + ":" -} - // BlockquoteWithCitation generates a Markdown blockquote with an optional citation func BlockquoteWithCitation(quote, citation string) string { if citation != "" { diff --git a/examples/gno.land/r/demo/mdui/gno.mod b/examples/gno.land/r/demo/mdui/gno.mod index 9ac3c530742..5e1c3223e37 100644 --- a/examples/gno.land/r/demo/mdui/gno.mod +++ b/examples/gno.land/r/demo/mdui/gno.mod @@ -1,3 +1,3 @@ -module gno.land/r/demo/mdui +module gno.land/r/varmeta/mdui -require gno.land/p/demo/mdui v0.0.0-latest +require gno.land/p/varmeta/mdui v0.0.0-latest diff --git a/examples/gno.land/r/demo/mdui/mdui.gno b/examples/gno.land/r/demo/mdui/mdui.gno index 5124f1cb7a3..d5c720b155f 100644 --- a/examples/gno.land/r/demo/mdui/mdui.gno +++ b/examples/gno.land/r/demo/mdui/mdui.gno @@ -3,23 +3,23 @@ package mdui import ( "strings" - "gno.land/p/demo/mdui" + "gno.land/p/varmeta/mdui" ) // Constants for common paths const ( - BasePath = "/r/demo/mdui" - ComponentsPath = "/r/demo/mdui:components" - ExamplesPath = "/r/demo/mdui:examples" - BuilderGuidePath = "/r/demo/mdui:builder-guide" + BasePath = "/r/varmeta/mdui" + ComponentsPath = "/r/varmeta/mdui:components" + ExamplesPath = "/r/varmeta/mdui:examples" + BuilderGuidePath = "/r/varmeta/mdui:builder-guide" ) // Common Navbar Links -var NavbarLinks = map[string]string{ - "Home": BasePath, - "Components": ComponentsPath, - "Examples": ExamplesPath, - "Builder Guide": BuilderGuidePath, +var NavbarLinks = []mdui.NavLink{ + {"Home", BasePath}, + {"Components", ComponentsPath}, + {"Examples", ExamplesPath}, + {"Builder Guide", BuilderGuidePath}, } // RenderHomePage renders the Home page using MarkdownBuilder @@ -37,9 +37,9 @@ Explore our component library and see how MDUI can simplify your development wor AddHeading(2, "Getting Started with MDUI"). AddParagraph(` Ready to start using MDUI? Follow these simple steps to get up and running: -1. [Explore Components](/r/demo/mdui:components) - Discover a variety of components available in MDUI. -2. [Check out Examples](/r/demo/mdui:examples) - Learn how to build real-world projects with MDUI. -3. [Try It Out](/r/demo/mdui:examples) - See how easy it is to create your first page. +1. [Explore Components](/r/varmeta/mdui:components) - Discover a variety of components available in MDUI. +2. [Check out Examples](/r/varmeta/mdui:examples) - Learn how to build real-world projects with MDUI. +3. [Try It Out](/r/varmeta/mdui:examples) - See how easy it is to create your first page. `). AddButton("Start Building Now", ComponentsPath). AddDivider(). @@ -76,7 +76,7 @@ Below is a list of components available in the MDUI package, along with examples { Title: "Navbar", Description: "A navigation menu that can be used to create a list of links for site navigation.", - Example: mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"}), + Example: mdui.Navbar(NavbarLinks), SampleCode: `mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"})`, }, { @@ -199,12 +199,6 @@ Below is a list of components available in the MDUI package, along with examples Example: mdui.KeyboardShortcut("Ctrl", "Alt", "Del"), SampleCode: `mdui.KeyboardShortcut("Ctrl", "Alt", "Del")`, }, - { - Title: "Emoji", - Description: "Adds an emoji to the content using a shortcode.", - Example: mdui.Emoji("smile"), - SampleCode: `mdui.Emoji("smile")`, - }, { Title: "Blockquote with Citation", Description: "Generates a Markdown blockquote with an optional citation.", @@ -239,7 +233,7 @@ Below is a list of components available in the MDUI package, along with examples return builder.Render() } -// RenderExamplesPage renders the Example page with sample components demonstrating the full range of MDUI functionalities +// RenderExamplesPage renders the Example page with sample components varmetanstrating the full range of MDUI functionalities func RenderExamplesPage() string { builder := mdui.NewBuilder() builder.AddNavbar(NavbarLinks) @@ -247,7 +241,7 @@ func RenderExamplesPage() string { // Introduction Section builder.AddHeading(1, "MDUI Example Page - Showcase All Components"). AddParagraph(` -Welcome to the MDUI example page! This page demonstrates all the components available in MDUI, showcasing the power of Markdown for building user interfaces. +Welcome to the MDUI example page! This page varmetanstrates all the components available in MDUI, showcasing the power of Markdown for building user interfaces. Explore the various elements below to see how you can create beautiful and functional web pages using MDUI. `). AddDivider() @@ -311,17 +305,9 @@ You can use collapsible sections to keep the layout clean and reveal information AddKeyboardShortcut("Ctrl", "R"). AddDivider() - // Emoji Example - builder.AddHeading(2, "Add Some Fun with Emojis"). - AddParagraph("MDUI supports popular emojis to enhance your content:"). - AddEmoji("smile"). - AddEmoji("rocket"). - AddEmoji("thumbs_up"). - AddDivider() - // Table of Contents builder.AddHeading(2, "Table of Contents"). - AddTableOfContents([]string{"Introduction", "Key Features", "Alert Messages", "Code Example", "Feature Comparison Table", "More Details", "Inspirational Quote", "Keyboard Shortcut", "Emojis"}). + AddTableOfContents([]string{"Introduction", "Key Features", "Alert Messages", "Code Example", "Feature Comparison Table", "More Details", "Inspirational Quote", "Keyboard Shortcut"}). AddDivider() // Conditional Rendering Example From e10ff9e5e136cd09e39b804d6d8de44ae9249ffd Mon Sep 17 00:00:00 2001 From: ngoc Date: Wed, 20 Nov 2024 10:23:29 +0700 Subject: [PATCH 08/10] Move realm to varmeta namespace --- examples/gno.land/r/demo/mdui/gno.mod | 3 --- examples/gno.land/r/varmeta/mdui/gno.mod | 3 +++ examples/gno.land/r/{demo => varmeta}/mdui/mdui.gno | 0 3 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 examples/gno.land/r/demo/mdui/gno.mod create mode 100644 examples/gno.land/r/varmeta/mdui/gno.mod rename examples/gno.land/r/{demo => varmeta}/mdui/mdui.gno (100%) diff --git a/examples/gno.land/r/demo/mdui/gno.mod b/examples/gno.land/r/demo/mdui/gno.mod deleted file mode 100644 index 5e1c3223e37..00000000000 --- a/examples/gno.land/r/demo/mdui/gno.mod +++ /dev/null @@ -1,3 +0,0 @@ -module gno.land/r/varmeta/mdui - -require gno.land/p/varmeta/mdui v0.0.0-latest diff --git a/examples/gno.land/r/varmeta/mdui/gno.mod b/examples/gno.land/r/varmeta/mdui/gno.mod new file mode 100644 index 00000000000..52d85ef422a --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/gno.mod @@ -0,0 +1,3 @@ +module gno.land/r/varmeta/mdui + +require gno.land/p/varmeta/mdui v0.0.0-latest \ No newline at end of file diff --git a/examples/gno.land/r/demo/mdui/mdui.gno b/examples/gno.land/r/varmeta/mdui/mdui.gno similarity index 100% rename from examples/gno.land/r/demo/mdui/mdui.gno rename to examples/gno.land/r/varmeta/mdui/mdui.gno From a5dcc6f447821fca73b3fcd9fb7a75506461a3b3 Mon Sep 17 00:00:00 2001 From: thanhngoc541 Date: Tue, 10 Dec 2024 18:09:06 +0700 Subject: [PATCH 09/10] separate files --- examples/gno.land/p/varmeta/mdui/builder.gno | 184 ++++++++ .../p/varmeta/mdui/{mdui.gno => elements.gno} | 181 -------- examples/gno.land/p/varmeta/mdui/types.gno | 10 + .../gno.land/r/varmeta/mdui/builder_guide.gno | 81 ++++ .../gno.land/r/varmeta/mdui/components.gno | 183 ++++++++ .../gno.land/r/varmeta/mdui/constants.gno | 21 + examples/gno.land/r/varmeta/mdui/examples.gno | 105 +++++ examples/gno.land/r/varmeta/mdui/gno.mod | 2 +- examples/gno.land/r/varmeta/mdui/home.gno | 39 ++ examples/gno.land/r/varmeta/mdui/mdui.gno | 423 ------------------ examples/gno.land/r/varmeta/mdui/router.gno | 17 + 11 files changed, 641 insertions(+), 605 deletions(-) create mode 100644 examples/gno.land/p/varmeta/mdui/builder.gno rename examples/gno.land/p/varmeta/mdui/{mdui.gno => elements.gno} (50%) create mode 100644 examples/gno.land/p/varmeta/mdui/types.gno create mode 100644 examples/gno.land/r/varmeta/mdui/builder_guide.gno create mode 100644 examples/gno.land/r/varmeta/mdui/components.gno create mode 100644 examples/gno.land/r/varmeta/mdui/constants.gno create mode 100644 examples/gno.land/r/varmeta/mdui/examples.gno create mode 100644 examples/gno.land/r/varmeta/mdui/home.gno delete mode 100644 examples/gno.land/r/varmeta/mdui/mdui.gno create mode 100644 examples/gno.land/r/varmeta/mdui/router.gno diff --git a/examples/gno.land/p/varmeta/mdui/builder.gno b/examples/gno.land/p/varmeta/mdui/builder.gno new file mode 100644 index 00000000000..324cebfc9f6 --- /dev/null +++ b/examples/gno.land/p/varmeta/mdui/builder.gno @@ -0,0 +1,184 @@ + +package mdui + +import ( + "strings" +) + +// NewBuilder creates and returns a new Builder instance +func NewBuilder() *Builder { + return &Builder{ + elements: []string{}, + } +} + +// AddRaw adds raw Markdown content to the Builder +func (b *Builder) AddRaw(markdown string) *Builder { + b.elements = append(b.elements, markdown) + return b +} + +// AddHeading adds a heading to the Builder +func (b *Builder) AddHeading(level int, text string) *Builder { + heading := Heading(level, text) + b.elements = append(b.elements, heading) + return b +} + +// AddParagraph adds a paragraph to the Builder +func (b *Builder) AddParagraph(text string) *Builder { + paragraph := Paragraph(text) + b.elements = append(b.elements, paragraph) + return b +} + +// AddButton adds a button (link) to the Builder +func (b *Builder) AddButton(text, href string) *Builder { + button := Button(text, href) + b.elements = append(b.elements, button) + return b +} + +// AddImage adds an image to the Builder +func (b *Builder) AddImage(src, alt string) *Builder { + image := Image(src, alt) + b.elements = append(b.elements, image) + return b +} + +// AddDivider adds a horizontal rule to the Builder +func (b *Builder) AddDivider() *Builder { + divider := Divider() + b.elements = append(b.elements, divider) + return b +} + +// AddList adds a list (ordered or unordered) to the Builder +func (b *Builder) AddList(items []string, hrefs []string, ordered bool) *Builder { + list := List(items, hrefs, ordered) + b.elements = append(b.elements, list) + return b +} + +// AddTable adds a table to the Builder +func (b *Builder) AddTable(headers []string, rows [][]string) *Builder { + table := Table(headers, rows) + b.elements = append(b.elements, table) + return b +} + +// AddNavbar adds a navigation bar to the Builder +func (b *Builder) AddNavbar(links []NavLink) *Builder { + navbar := Navbar(links) + b.elements = append(b.elements, navbar) + return b +} + +// AddQuote adds a blockquote to the Builder +func (b *Builder) AddQuote(text string) *Builder { + quote := Quote(text) + b.elements = append(b.elements, quote) + return b +} + +// AddBold adds bold text to the Builder +func (b *Builder) AddBold(text string) *Builder { + bold := Bold(text) + b.elements = append(b.elements, bold) + return b +} + +// AddItalic adds italic text to the Builder +func (b *Builder) AddItalic(text string) *Builder { + italic := Italic(text) + b.elements = append(b.elements, italic) + return b +} + +// AddStrikethrough adds strikethrough text to the Builder +func (b *Builder) AddStrikethrough(text string) *Builder { + strikethrough := Strikethrough(text) + b.elements = append(b.elements, strikethrough) + return b +} + +// AddCodeBlock adds a code block to the Builder +func (b *Builder) AddCodeBlock(code string) *Builder { + codeBlock := CodeBlock(code) + b.elements = append(b.elements, codeBlock) + return b +} + +// AddAlert adds an alert box with a specified type to the Builder +func (b *Builder) AddAlert(content, alertType string) *Builder { + alert := Alert(content, alertType) + b.elements = append(b.elements, alert) + return b +} + +// AddCollapsible adds a collapsible section to the Builder +func (b *Builder) AddCollapsible(title, content string) *Builder { + collapsible := Collapsible(title, content) + b.elements = append(b.elements, collapsible) + return b +} + +// AddFootnote adds a footnote to the Builder +func (b *Builder) AddFootnote(label, text string) *Builder { + footnote := Footnote(label, text) + b.elements = append(b.elements, footnote) + return b +} + +// AddBadge adds a badge to the Builder +func (b *Builder) AddBadge(label, color string) *Builder { + badge := Badge(label, color) + b.elements = append(b.elements, badge) + return b +} + +// AddBadgeWithIcon adds a badge with an icon to the Builder +func (b *Builder) AddBadgeWithIcon(label, color, icon string) *Builder { + badgeWithIcon := BadgeWithIcon(label, color, icon) + b.elements = append(b.elements, badgeWithIcon) + return b +} + +// AddKeyboardShortcut adds a keyboard shortcut to the Builder +func (b *Builder) AddKeyboardShortcut(keys ...string) *Builder { + shortcut := KeyboardShortcut(keys...) + b.elements = append(b.elements, shortcut) + return b +} + +// AddBlockquoteWithCitation adds a blockquote with an optional citation to the Builder +func (b *Builder) AddBlockquoteWithCitation(quote, citation string) *Builder { + blockquoteWithCitation := BlockquoteWithCitation(quote, citation) + b.elements = append(b.elements, blockquoteWithCitation) + return b +} + +// AddTableOfContents adds a table of contents to the Builder +func (b *Builder) AddTableOfContents(headings []string) *Builder { + toc := TableOfContents(headings) + b.elements = append(b.elements, toc) + return b +} + +// Render generates and returns the final Markdown content +func (b *Builder) Render() string { + return strings.Join(b.elements, "\n") +} + +// AddIfElseRender adds conditional content to the Builder based on a condition +func (b *Builder) AddIfElseRender(condition bool, ifTrue string, ifFalse string) *Builder { + result := IfElseRender(condition, ifTrue, ifFalse) + b.elements = append(b.elements, result) + return b +} + +func (b *Builder) AddBreakLine() *Builder { + lineBreak := BreakLine() + b.elements = append(b.elements, lineBreak) + return b +} \ No newline at end of file diff --git a/examples/gno.land/p/varmeta/mdui/mdui.gno b/examples/gno.land/p/varmeta/mdui/elements.gno similarity index 50% rename from examples/gno.land/p/varmeta/mdui/mdui.gno rename to examples/gno.land/p/varmeta/mdui/elements.gno index 48f78336f44..0ea2c991332 100644 --- a/examples/gno.land/p/varmeta/mdui/mdui.gno +++ b/examples/gno.land/p/varmeta/mdui/elements.gno @@ -5,187 +5,6 @@ import ( "strings" ) -type Builder struct { - elements []string -} - -type NavLink struct { - Text string - Href string -} - -// NewBuilder creates and returns a new Builder instance -func NewBuilder() *Builder { - return &Builder{ - elements: []string{}, - } -} - -// AddHeading adds a heading to the Builder -func (b *Builder) AddHeading(level int, text string) *Builder { - heading := Heading(level, text) - b.elements = append(b.elements, heading) - return b -} - -// AddParagraph adds a paragraph to the Builder -func (b *Builder) AddParagraph(text string) *Builder { - paragraph := Paragraph(text) - b.elements = append(b.elements, paragraph) - return b -} - -// AddButton adds a button (link) to the Builder -func (b *Builder) AddButton(text, href string) *Builder { - button := Button(text, href) - b.elements = append(b.elements, button) - return b -} - -// AddImage adds an image to the Builder -func (b *Builder) AddImage(src, alt string) *Builder { - image := Image(src, alt) - b.elements = append(b.elements, image) - return b -} - -// AddDivider adds a horizontal rule to the Builder -func (b *Builder) AddDivider() *Builder { - divider := Divider() - b.elements = append(b.elements, divider) - return b -} - -// AddList adds a list (ordered or unordered) to the Builder -func (b *Builder) AddList(items []string, hrefs []string, ordered bool) *Builder { - list := List(items, hrefs, ordered) - b.elements = append(b.elements, list) - return b -} - -// AddTable adds a table to the Builder -func (b *Builder) AddTable(headers []string, rows [][]string) *Builder { - table := Table(headers, rows) - b.elements = append(b.elements, table) - return b -} - -// AddNavbar adds a navigation bar to the Builder -func (b *Builder) AddNavbar(links []NavLink) *Builder { - navbar := Navbar(links) - b.elements = append(b.elements, navbar) - return b -} - -// AddQuote adds a blockquote to the Builder -func (b *Builder) AddQuote(text string) *Builder { - quote := Quote(text) - b.elements = append(b.elements, quote) - return b -} - -// AddBold adds bold text to the Builder -func (b *Builder) AddBold(text string) *Builder { - bold := Bold(text) - b.elements = append(b.elements, bold) - return b -} - -// AddItalic adds italic text to the Builder -func (b *Builder) AddItalic(text string) *Builder { - italic := Italic(text) - b.elements = append(b.elements, italic) - return b -} - -// AddStrikethrough adds strikethrough text to the Builder -func (b *Builder) AddStrikethrough(text string) *Builder { - strikethrough := Strikethrough(text) - b.elements = append(b.elements, strikethrough) - return b -} - -// AddCodeBlock adds a code block to the Builder -func (b *Builder) AddCodeBlock(code string) *Builder { - codeBlock := CodeBlock(code) - b.elements = append(b.elements, codeBlock) - return b -} - -// AddAlert adds an alert box with a specified type to the Builder -func (b *Builder) AddAlert(content, alertType string) *Builder { - alert := Alert(content, alertType) - b.elements = append(b.elements, alert) - return b -} - -// AddCollapsible adds a collapsible section to the Builder -func (b *Builder) AddCollapsible(title, content string) *Builder { - collapsible := Collapsible(title, content) - b.elements = append(b.elements, collapsible) - return b -} - -// AddFootnote adds a footnote to the Builder -func (b *Builder) AddFootnote(label, text string) *Builder { - footnote := Footnote(label, text) - b.elements = append(b.elements, footnote) - return b -} - -// AddBadge adds a badge to the Builder -func (b *Builder) AddBadge(label, color string) *Builder { - badge := Badge(label, color) - b.elements = append(b.elements, badge) - return b -} - -// AddBadgeWithIcon adds a badge with an icon to the Builder -func (b *Builder) AddBadgeWithIcon(label, color, icon string) *Builder { - badgeWithIcon := BadgeWithIcon(label, color, icon) - b.elements = append(b.elements, badgeWithIcon) - return b -} - -// AddKeyboardShortcut adds a keyboard shortcut to the Builder -func (b *Builder) AddKeyboardShortcut(keys ...string) *Builder { - shortcut := KeyboardShortcut(keys...) - b.elements = append(b.elements, shortcut) - return b -} - -// AddBlockquoteWithCitation adds a blockquote with an optional citation to the Builder -func (b *Builder) AddBlockquoteWithCitation(quote, citation string) *Builder { - blockquoteWithCitation := BlockquoteWithCitation(quote, citation) - b.elements = append(b.elements, blockquoteWithCitation) - return b -} - -// AddTableOfContents adds a table of contents to the Builder -func (b *Builder) AddTableOfContents(headings []string) *Builder { - toc := TableOfContents(headings) - b.elements = append(b.elements, toc) - return b -} - -// Render generates and returns the final Markdown content -func (b *Builder) Render() string { - return strings.Join(b.elements, "\n") -} - -// AddIfElseRender adds conditional content to the Builder based on a condition -func (b *Builder) AddIfElseRender(condition bool, ifTrue string, ifFalse string) *Builder { - result := IfElseRender(condition, ifTrue, ifFalse) - b.elements = append(b.elements, result) - return b -} - -func (b *Builder) AddBreakLine() *Builder { - lineBreak := BreakLine() - b.elements = append(b.elements, lineBreak) - return b -} - // BreakLine generates a Markdown line break (two spaces followed by a newline) func BreakLine() string { return " \n" // Two spaces followed by a newline diff --git a/examples/gno.land/p/varmeta/mdui/types.gno b/examples/gno.land/p/varmeta/mdui/types.gno new file mode 100644 index 00000000000..671fedc9811 --- /dev/null +++ b/examples/gno.land/p/varmeta/mdui/types.gno @@ -0,0 +1,10 @@ +package mdui + +type Builder struct { + elements []string +} + +type NavLink struct { + Text string + Href string +} \ No newline at end of file diff --git a/examples/gno.land/r/varmeta/mdui/builder_guide.gno b/examples/gno.land/r/varmeta/mdui/builder_guide.gno new file mode 100644 index 00000000000..cff9e7fc580 --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/builder_guide.gno @@ -0,0 +1,81 @@ +package mdui + +import ( + "gno.land/p/varmeta/mdui" +) + +// RenderBuilderGuidePage renders a guide page explaining how to use the MarkdownBuilder +func RenderBuilderGuidePage() string { + builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) + + builder.AddHeading(1, "How to Use the MarkdownBuilder"). + AddParagraph(` +The MarkdownBuilder in MDUI is a powerful tool that allows developers to construct dynamic web pages with a simple, intuitive, and chainable API. +By leveraging the builder pattern, you can quickly and easily generate complex Markdown-based UIs without manually managing strings or formatting. +`). + AddDivider(). + AddHeading(2, "1. Builder Overview"). + AddParagraph(` +The MarkdownBuilder accumulates UI elements like headings, paragraphs, buttons, tables, and more. +You can chain methods to add elements, and at the end, call the Render method to output the final Markdown. +`). + AddCodeBlock(` +builder := mdui.NewBuilder() +// Add components using chained methods +builder.AddHeading(1, "Welcome to My Page").AddParagraph("This is a sample paragraph.").AddButton("Click Here", "/click") +// Render the final Markdown +result := builder.Render() +`). + AddDivider(). + AddHeading(2, "2. Adding Components"). + AddParagraph(` +Use MarkdownBuilder to add various UI components like headings, paragraphs, lists, buttons, images, and more. +`). + AddCodeBlock(` +// Adding a heading +builder.AddHeading(2, "This is a Heading") +// Adding a paragraph +builder.AddParagraph("This is a paragraph of text.") +// Adding a button +builder.AddButton("Learn More", "/learn-more") +// Adding a list +builder.AddList([]string{"Item 1", "Item 2", "Item 3"}, nil, false) +`). + AddDivider(). + AddHeading(2, "3. Complete Example"). + AddParagraph("Below is a complete example using MarkdownBuilder:"). + AddCodeBlock(` +builder := mdui.NewBuilder() +// Build the content +builder.AddHeading(1, "Welcome to MDUI"). + AddParagraph("MDUI is a framework for building UIs with Markdown."). + AddDivider(). + AddRaw("## Adding raw markdown"). + AddHeading(2, "Features"). + AddList([]string{ + "Simple to use", + "Supports various UI components", + "Easy to integrate with existing projects", + }, nil, false). + AddButton("Get Started", "/start") +// Render the final Markdown +result := builder.Render() +`). + AddDivider(). + AddHeading(2, "4. Rendering Content"). + AddParagraph(` +Once you've added all your components, you can call the Render method to output the final Markdown string. +This string can then be used as content in your application. +`). + AddCodeBlock(`result := builder.Render(); fmt.Println(result)`). + AddDivider(). + AddHeading(2, "Conclusion"). + AddParagraph(` +The MarkdownBuilder makes it easy to generate complex UIs with Markdown using a clean and intuitive API. +With just a few method calls, you can add headings, paragraphs, buttons, tables, and more, and chain them together to build dynamic pages effortlessly. +`). + AddButton("Start Using MarkdownBuilder", ExamplesPath) + + return builder.Render() +} \ No newline at end of file diff --git a/examples/gno.land/r/varmeta/mdui/components.gno b/examples/gno.land/r/varmeta/mdui/components.gno new file mode 100644 index 00000000000..d720b8ff985 --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/components.gno @@ -0,0 +1,183 @@ +package mdui + +import ( + "gno.land/p/varmeta/mdui" +) + +// RenderComponentsPage renders the Components page with a list of available components, examples, and sample code +func RenderComponentsPage() string { + builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) + + builder.AddHeading(1, "MDUI Components Overview"). + AddParagraph(` +MDUI offers a variety of components that help developers build modern user interfaces quickly and efficiently. +Below is a list of components available in the MDUI package, along with examples of how to use them and sample code. +`) + + // Comprehensive list of components + componentList := []struct { + Title string + Description string + Example string + SampleCode string + }{ + { + Title: "Navbar", + Description: "A navigation menu that can be used to create a list of links for site navigation.", + Example: mdui.Navbar(NavbarLinks), + SampleCode: `mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"})`, + }, + { + Title: "Heading", + Description: "A heading component to create titles of different levels (from H1 to H6).", + Example: mdui.Heading(2, "Sample Heading"), + SampleCode: `mdui.Heading(2, "Sample Heading")`, + }, + { + Title: "Paragraph", + Description: "Formats a block of text as a paragraph.", + Example: mdui.Paragraph("This is a sample paragraph."), + SampleCode: `mdui.Paragraph("This is a sample paragraph.")`, + }, + { + Title: "Button", + Description: "A clickable button component, implemented as a link in Markdown.", + Example: mdui.Button("Click Here", "/click-here"), + SampleCode: `mdui.Button("Click Here", "/click-here")`, + }, + { + Title: "Image", + Description: "An image component for displaying pictures with optional alt text.", + Example: mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image"), + SampleCode: `mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image")`, + }, + { + Title: "Divider", + Description: "A horizontal line divider for separating content.", + Example: mdui.Divider(), + SampleCode: `mdui.Divider()`, + }, + { + Title: "List (Unordered with Links)", + Description: "Generates an unordered Markdown list with each item as a link.", + Example: mdui.List([]string{"Item 1", "Item 2", "Item 3"}, []string{"#item1", "#item2", "#item3"}, false), + SampleCode: `mdui.List([]string{"Item 1", "Item 2", "Item 3"}, []string{"#item1", "#item2", "#item3"}, false)`, + }, + { + Title: "List (Ordered with Links)", + Description: "Generates an ordered Markdown list with each item as a link.", + Example: mdui.List([]string{"Step 1", "Step 2", "Step 3"}, []string{"#step1", "#step2", "#step3"}, true), + SampleCode: `mdui.List([]string{"Step 1", "Step 2", "Step 3"}, []string{"#step1", "#step2", "#step3"}, true)`, + }, + { + Title: "Table", + Description: "Generates a table with headers and rows for tabular data.", + Example: mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}}), + SampleCode: `mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}})`, + }, + { + Title: "Quote", + Description: "A blockquote component for highlighting quoted text.", + Example: mdui.Quote("This is a quoted text."), + SampleCode: `mdui.Quote("This is a quoted text.")`, + }, + { + Title: "Bold", + Description: "Formats text in bold.", + Example: mdui.Bold("This is bold text"), + SampleCode: `mdui.Bold("This is bold text")`, + }, + { + Title: "Italic", + Description: "Formats text in italic.", + Example: mdui.Italic("This is italic text"), + SampleCode: `mdui.Italic("This is italic text")`, + }, + { + Title: "Strikethrough", + Description: "Adds a strikethrough to the text.", + Example: mdui.Strikethrough("This text is crossed out"), + SampleCode: `mdui.Strikethrough("This text is crossed out")`, + }, + { + Title: "Code Block", + Description: "A component for rendering code blocks in Markdown.", + Example: mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}"), + SampleCode: `mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}")`, + }, + { + Title: "Alert", + Description: "An alert block using Markdown with a specified type (info, warning, danger, success).", + Example: mdui.Alert("This action cannot be undone.", "danger"), + SampleCode: `mdui.Alert("This action cannot be undone.", "danger")`, + }, + { + Title: "Collapsible", + Description: "A collapsible section that expands when clicked, using plain Markdown.", + Example: mdui.Collapsible("Show more", "Here is the additional content."), + SampleCode: `mdui.Collapsible("Show more", "Here is the additional content.")`, + }, + { + Title: "Footnote", + Description: "Generates a footnote reference and definition.", + Example: mdui.Footnote("1", "This is a footnote."), + SampleCode: `mdui.Footnote("1", "This is a footnote.")`, + }, + { + Title: "Badge", + Description: "Creates a badge using the Shields.io service.", + Example: mdui.Badge("Build Passing", "green"), + SampleCode: `mdui.Badge("Build Passing", "green")`, + }, + { + Title: "Badge with Icon", + Description: "Creates a badge with an icon using Shields.io.", + Example: mdui.BadgeWithIcon("Go Lang", "blue", "go"), + SampleCode: `mdui.BadgeWithIcon("Go Lang", "blue", "go")`, + }, + { + Title: "Table of Contents", + Description: "Generates a simple table of contents based on an array of headings.", + Example: mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"}), + SampleCode: `mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"})`, + }, + { + Title: "Keyboard Shortcut", + Description: "Formats a keyboard shortcut in Markdown using code block style.", + Example: mdui.KeyboardShortcut("Ctrl", "Alt", "Del"), + SampleCode: `mdui.KeyboardShortcut("Ctrl", "Alt", "Del")`, + }, + { + Title: "Blockquote with Citation", + Description: "Generates a Markdown blockquote with an optional citation.", + Example: mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare"), + SampleCode: `mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare")`, + }, + { + Title: "BreakLine", + Description: "Adds a line break (two spaces followed by a newline) in Markdown.", + Example: mdui.BreakLine(), + SampleCode: `mdui.BreakLine()`, + }, + { + Title: "IfElseRender", + Description: "Conditionally renders content based on a Boolean condition.", + Example: mdui.IfElseRender(true, "Condition is True", "Condition is False"), + SampleCode: `mdui.IfElseRender(true, "Condition is True", "Condition is False")`, + }, + } + + // Generate Markdown for each component in the list + for _, component := range componentList { + builder.AddHeading(2, component.Title). + AddParagraph(component.Description). + AddParagraph("**Rendered Example:**"). + AddParagraph(component.Example). + AddParagraph("**Sample Code:**"). + AddCodeBlock(component.SampleCode). + AddDivider() + } + + return builder.Render() +} \ No newline at end of file diff --git a/examples/gno.land/r/varmeta/mdui/constants.gno b/examples/gno.land/r/varmeta/mdui/constants.gno new file mode 100644 index 00000000000..a9188b6d4d0 --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/constants.gno @@ -0,0 +1,21 @@ +package mdui + +import ( + "gno.land/p/varmeta/mdui" +) + +// Constants for common paths +const ( + BasePath = "/r/varmeta/mdui" + ComponentsPath = "/r/varmeta/mdui:components" + ExamplesPath = "/r/varmeta/mdui:examples" + BuilderGuidePath = "/r/varmeta/mdui:builder-guide" +) + +// Common Navbar Links +var NavbarLinks = []mdui.NavLink{ + {"Home", BasePath}, + {"Components", ComponentsPath}, + {"Examples", ExamplesPath}, + {"Builder Guide", BuilderGuidePath}, +} diff --git a/examples/gno.land/r/varmeta/mdui/examples.gno b/examples/gno.land/r/varmeta/mdui/examples.gno new file mode 100644 index 00000000000..891a6c12015 --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/examples.gno @@ -0,0 +1,105 @@ +package mdui + +import ( + "gno.land/p/varmeta/mdui" +) + +// RenderExamplesPage renders the Example page with sample components varmetanstrating the full range of MDUI functionalities +func RenderExamplesPage() string { + builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) + + // Introduction Section + builder.AddHeading(1, "MDUI Example Page - Showcase All Components"). + AddParagraph(` +Welcome to the MDUI example page! This page varmetanstrates all the components available in MDUI, showcasing the power of Markdown for building user interfaces. +Explore the various elements below to see how you can create beautiful and functional web pages using MDUI. +`). + AddDivider() + + // Hero Section with Image and Badge + builder.AddImage("https://media.istockphoto.com/id/1359861587/vector/blue-modern-abstract-wide-banner-with-geometric-shapes-dark-blue-abstract-background.jpg?s=612x612&w=0&k=20&c=xDMI5_-xyh_IHm2ca07x5xFTR7kRoFZJhxrq10FQra0=", "Hero Image"). + AddHeading(2, "Welcome to MDUI"). + AddBadge("New Feature", "green"). + AddParagraph("MDUI enables developers to build modern, clean, and responsive user interfaces effortlessly.") + + // Key Features List + builder.AddHeading(2, "Key Features"). + AddList([]string{ + "Responsive design with Markdown simplicity", + "Reusable components for rapid development", + "Customizable themes and styling", + "Easy integration with existing projects", + }, nil, false). + AddDivider() + + // Alerts Section + builder.AddHeading(2, "Alert Messages"). + AddAlert("This is an informational message.", "info"). + AddAlert("Be cautious about this warning.", "warning"). + AddAlert("This is a dangerous action. Proceed with care.", "danger"). + AddAlert("Congratulations, your action was successful!", "success"). + AddDivider() + + // Code Block Example + builder.AddHeading(2, "Code Example"). + AddCodeBlock(`func main() { + fmt.Println("Hello, MDUI!") +}`). + AddDivider() + + // Table Example + builder.AddHeading(2, "Feature Comparison Table"). + AddTable([]string{"Feature", "MDUI", "Other Frameworks"}, [][]string{ + {"Ease of Use", "High", "Medium"}, + {"Flexibility", "High", "Variable"}, + {"Learning Curve", "Low", "Medium"}, + }). + AddDivider() + + // Collapsible Section + builder.AddHeading(2, "More Details"). + AddCollapsible("Expand to see more", ` +Here is some more detailed information about MDUI and its components. +You can use collapsible sections to keep the layout clean and reveal information when needed. +`). + AddDivider() + + // Blockquote with Citation + builder.AddHeading(2, "Inspirational Quote"). + AddBlockquoteWithCitation("Simplicity is the ultimate sophistication.", "Leonardo da Vinci"). + AddDivider() + + // Keyboard Shortcut Example + builder.AddHeading(2, "Keyboard Shortcut"). + AddParagraph("Press the following shortcut to refresh the page:"). + AddKeyboardShortcut("Ctrl", "R"). + AddDivider() + + // Table of Contents + builder.AddHeading(2, "Table of Contents"). + AddTableOfContents([]string{"Introduction", "Key Features", "Alert Messages", "Code Example", "Feature Comparison Table", "More Details", "Inspirational Quote", "Keyboard Shortcut"}). + AddDivider() + + // Conditional Rendering Example + builder.AddHeading(2, "Conditional Content"). + AddParagraph("MDUI also supports conditional content rendering. See the result below based on a true/false condition."). + AddIfElseRender(true, "This content is displayed because the condition is true.", "This content would display if the condition were false"). + AddDivider() + + // Badges Section with Icons + builder.AddHeading(2, "Badge Examples"). + AddParagraph("Show off your badges with or without icons:"). + AddBadge("Beta", "blue"). + AddBadgeWithIcon("Go", "blue", "go"). + AddBadgeWithIcon("JavaScript", "yellow", "javascript"). + AddBadge("Build Passing", "green"). + AddDivider() + + // Final Message and Button + builder.AddHeading(2, "Ready to Start Building with MDUI?"). + AddParagraph("MDUI makes it simple to create UIs with Markdown. Try it out by clicking the button below:"). + AddButton("Start Using MDUI", "/start") + + return builder.Render() +} \ No newline at end of file diff --git a/examples/gno.land/r/varmeta/mdui/gno.mod b/examples/gno.land/r/varmeta/mdui/gno.mod index 52d85ef422a..5e1c3223e37 100644 --- a/examples/gno.land/r/varmeta/mdui/gno.mod +++ b/examples/gno.land/r/varmeta/mdui/gno.mod @@ -1,3 +1,3 @@ module gno.land/r/varmeta/mdui -require gno.land/p/varmeta/mdui v0.0.0-latest \ No newline at end of file +require gno.land/p/varmeta/mdui v0.0.0-latest diff --git a/examples/gno.land/r/varmeta/mdui/home.gno b/examples/gno.land/r/varmeta/mdui/home.gno new file mode 100644 index 00000000000..bf24490fcfe --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/home.gno @@ -0,0 +1,39 @@ +package mdui + +import ( + "gno.land/p/varmeta/mdui" +) + +// RenderHomePage renders the Home page using MarkdownBuilder +func RenderHomePage() string { + builder := mdui.NewBuilder() + builder.AddNavbar(NavbarLinks) + + builder.AddHeading(1, "Welcome to MDUI - Markdown-based UI Development"). + AddParagraph(` +MDUI is a versatile UI framework built on the simplicity and power of Markdown. +It enables developers to create user interfaces with ease by using Markdown syntax, making web development more accessible and streamlined. +Explore our component library and see how MDUI can simplify your development workflow. +`). + AddDivider(). + AddHeading(2, "Getting Started with MDUI"). + AddParagraph(` +Ready to start using MDUI? Follow these simple steps to get up and running: +1. [Explore Components](/r/varmeta/mdui:components) - Discover a variety of components available in MDUI. +2. [Check out Examples](/r/varmeta/mdui:examples) - Learn how to build real-world projects with MDUI. +3. [Try It Out](/r/varmeta/mdui:examples) - See how easy it is to create your first page. +`). + AddButton("Start Building Now", ComponentsPath). + AddDivider(). + AddHeading(2, "Why Choose MDUI?"). + AddList([]string{ + "Simple and intuitive Markdown-based syntax.", + "Reusable components for rapid development.", + "Easy integration with existing Markdown projects.", + "Perfect for quickly creating functional prototypes.", + }, nil, false). + AddDivider() + + return builder.Render() +} + diff --git a/examples/gno.land/r/varmeta/mdui/mdui.gno b/examples/gno.land/r/varmeta/mdui/mdui.gno deleted file mode 100644 index d5c720b155f..00000000000 --- a/examples/gno.land/r/varmeta/mdui/mdui.gno +++ /dev/null @@ -1,423 +0,0 @@ -package mdui - -import ( - "strings" - - "gno.land/p/varmeta/mdui" -) - -// Constants for common paths -const ( - BasePath = "/r/varmeta/mdui" - ComponentsPath = "/r/varmeta/mdui:components" - ExamplesPath = "/r/varmeta/mdui:examples" - BuilderGuidePath = "/r/varmeta/mdui:builder-guide" -) - -// Common Navbar Links -var NavbarLinks = []mdui.NavLink{ - {"Home", BasePath}, - {"Components", ComponentsPath}, - {"Examples", ExamplesPath}, - {"Builder Guide", BuilderGuidePath}, -} - -// RenderHomePage renders the Home page using MarkdownBuilder -func RenderHomePage() string { - builder := mdui.NewBuilder() - builder.AddNavbar(NavbarLinks) - - builder.AddHeading(1, "Welcome to MDUI - Markdown-based UI Development"). - AddParagraph(` -MDUI is a versatile UI framework built on the simplicity and power of Markdown. -It enables developers to create user interfaces with ease by using Markdown syntax, making web development more accessible and streamlined. -Explore our component library and see how MDUI can simplify your development workflow. -`). - AddDivider(). - AddHeading(2, "Getting Started with MDUI"). - AddParagraph(` -Ready to start using MDUI? Follow these simple steps to get up and running: -1. [Explore Components](/r/varmeta/mdui:components) - Discover a variety of components available in MDUI. -2. [Check out Examples](/r/varmeta/mdui:examples) - Learn how to build real-world projects with MDUI. -3. [Try It Out](/r/varmeta/mdui:examples) - See how easy it is to create your first page. -`). - AddButton("Start Building Now", ComponentsPath). - AddDivider(). - AddHeading(2, "Why Choose MDUI?"). - AddList([]string{ - "Simple and intuitive Markdown-based syntax.", - "Reusable components for rapid development.", - "Easy integration with existing Markdown projects.", - "Perfect for quickly creating functional prototypes.", - }, nil, false). - AddDivider() - - return builder.Render() -} - -// RenderComponentsPage renders the Components page with a list of available components, examples, and sample code -func RenderComponentsPage() string { - builder := mdui.NewBuilder() - builder.AddNavbar(NavbarLinks) - - builder.AddHeading(1, "MDUI Components Overview"). - AddParagraph(` -MDUI offers a variety of components that help developers build modern user interfaces quickly and efficiently. -Below is a list of components available in the MDUI package, along with examples of how to use them and sample code. -`) - - // Comprehensive list of components - componentList := []struct { - Title string - Description string - Example string - SampleCode string - }{ - { - Title: "Navbar", - Description: "A navigation menu that can be used to create a list of links for site navigation.", - Example: mdui.Navbar(NavbarLinks), - SampleCode: `mdui.Navbar(map[string]string{"Home": "/home", "About": "/about", "Contact": "/contact"})`, - }, - { - Title: "Heading", - Description: "A heading component to create titles of different levels (from H1 to H6).", - Example: mdui.Heading(2, "Sample Heading"), - SampleCode: `mdui.Heading(2, "Sample Heading")`, - }, - { - Title: "Paragraph", - Description: "Formats a block of text as a paragraph.", - Example: mdui.Paragraph("This is a sample paragraph."), - SampleCode: `mdui.Paragraph("This is a sample paragraph.")`, - }, - { - Title: "Button", - Description: "A clickable button component, implemented as a link in Markdown.", - Example: mdui.Button("Click Here", "/click-here"), - SampleCode: `mdui.Button("Click Here", "/click-here")`, - }, - { - Title: "Image", - Description: "An image component for displaying pictures with optional alt text.", - Example: mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image"), - SampleCode: `mdui.Image("https://img-cdn.pixlr.com/image-generator/history/65bb506dcb310754719cf81f/ede935de-1138-4f66-8ed7-44bd16efc709/medium.webp", "Sample Image")`, - }, - { - Title: "Divider", - Description: "A horizontal line divider for separating content.", - Example: mdui.Divider(), - SampleCode: `mdui.Divider()`, - }, - { - Title: "List (Unordered with Links)", - Description: "Generates an unordered Markdown list with each item as a link.", - Example: mdui.List([]string{"Item 1", "Item 2", "Item 3"}, []string{"#item1", "#item2", "#item3"}, false), - SampleCode: `mdui.List([]string{"Item 1", "Item 2", "Item 3"}, []string{"#item1", "#item2", "#item3"}, false)`, - }, - { - Title: "List (Ordered with Links)", - Description: "Generates an ordered Markdown list with each item as a link.", - Example: mdui.List([]string{"Step 1", "Step 2", "Step 3"}, []string{"#step1", "#step2", "#step3"}, true), - SampleCode: `mdui.List([]string{"Step 1", "Step 2", "Step 3"}, []string{"#step1", "#step2", "#step3"}, true)`, - }, - { - Title: "Table", - Description: "Generates a table with headers and rows for tabular data.", - Example: mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}}), - SampleCode: `mdui.Table([]string{"Name", "Age"}, [][]string{{"Alice", "30"}, {"Bob", "25"}})`, - }, - { - Title: "Quote", - Description: "A blockquote component for highlighting quoted text.", - Example: mdui.Quote("This is a quoted text."), - SampleCode: `mdui.Quote("This is a quoted text.")`, - }, - { - Title: "Bold", - Description: "Formats text in bold.", - Example: mdui.Bold("This is bold text"), - SampleCode: `mdui.Bold("This is bold text")`, - }, - { - Title: "Italic", - Description: "Formats text in italic.", - Example: mdui.Italic("This is italic text"), - SampleCode: `mdui.Italic("This is italic text")`, - }, - { - Title: "Strikethrough", - Description: "Adds a strikethrough to the text.", - Example: mdui.Strikethrough("This text is crossed out"), - SampleCode: `mdui.Strikethrough("This text is crossed out")`, - }, - { - Title: "Code Block", - Description: "A component for rendering code blocks in Markdown.", - Example: mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}"), - SampleCode: `mdui.CodeBlock("func main() {\n fmt.Println(\"Hello, world!\")\n}")`, - }, - { - Title: "Alert", - Description: "An alert block using Markdown with a specified type (info, warning, danger, success).", - Example: mdui.Alert("This action cannot be undone.", "danger"), - SampleCode: `mdui.Alert("This action cannot be undone.", "danger")`, - }, - { - Title: "Collapsible", - Description: "A collapsible section that expands when clicked, using plain Markdown.", - Example: mdui.Collapsible("Show more", "Here is the additional content."), - SampleCode: `mdui.Collapsible("Show more", "Here is the additional content.")`, - }, - { - Title: "Footnote", - Description: "Generates a footnote reference and definition.", - Example: mdui.Footnote("1", "This is a footnote."), - SampleCode: `mdui.Footnote("1", "This is a footnote.")`, - }, - { - Title: "Badge", - Description: "Creates a badge using the Shields.io service.", - Example: mdui.Badge("Build Passing", "green"), - SampleCode: `mdui.Badge("Build Passing", "green")`, - }, - { - Title: "Badge with Icon", - Description: "Creates a badge with an icon using Shields.io.", - Example: mdui.BadgeWithIcon("Go Lang", "blue", "go"), - SampleCode: `mdui.BadgeWithIcon("Go Lang", "blue", "go")`, - }, - { - Title: "Table of Contents", - Description: "Generates a simple table of contents based on an array of headings.", - Example: mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"}), - SampleCode: `mdui.TableOfContents([]string{"Introduction", "Features", "Conclusion"})`, - }, - { - Title: "Keyboard Shortcut", - Description: "Formats a keyboard shortcut in Markdown using code block style.", - Example: mdui.KeyboardShortcut("Ctrl", "Alt", "Del"), - SampleCode: `mdui.KeyboardShortcut("Ctrl", "Alt", "Del")`, - }, - { - Title: "Blockquote with Citation", - Description: "Generates a Markdown blockquote with an optional citation.", - Example: mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare"), - SampleCode: `mdui.BlockquoteWithCitation("To be or not to be, that is the question.", "William Shakespeare")`, - }, - { - Title: "BreakLine", - Description: "Adds a line break (two spaces followed by a newline) in Markdown.", - Example: mdui.BreakLine(), - SampleCode: `mdui.BreakLine()`, - }, - { - Title: "IfElseRender", - Description: "Conditionally renders content based on a Boolean condition.", - Example: mdui.IfElseRender(true, "Condition is True", "Condition is False"), - SampleCode: `mdui.IfElseRender(true, "Condition is True", "Condition is False")`, - }, - } - - // Generate Markdown for each component in the list - for _, component := range componentList { - builder.AddHeading(2, component.Title). - AddParagraph(component.Description). - AddParagraph("**Rendered Example:**"). - AddParagraph(component.Example). - AddParagraph("**Sample Code:**"). - AddCodeBlock(component.SampleCode). - AddDivider() - } - - return builder.Render() -} - -// RenderExamplesPage renders the Example page with sample components varmetanstrating the full range of MDUI functionalities -func RenderExamplesPage() string { - builder := mdui.NewBuilder() - builder.AddNavbar(NavbarLinks) - - // Introduction Section - builder.AddHeading(1, "MDUI Example Page - Showcase All Components"). - AddParagraph(` -Welcome to the MDUI example page! This page varmetanstrates all the components available in MDUI, showcasing the power of Markdown for building user interfaces. -Explore the various elements below to see how you can create beautiful and functional web pages using MDUI. -`). - AddDivider() - - // Hero Section with Image and Badge - builder.AddImage("https://media.istockphoto.com/id/1359861587/vector/blue-modern-abstract-wide-banner-with-geometric-shapes-dark-blue-abstract-background.jpg?s=612x612&w=0&k=20&c=xDMI5_-xyh_IHm2ca07x5xFTR7kRoFZJhxrq10FQra0=", "Hero Image"). - AddHeading(2, "Welcome to MDUI"). - AddBadge("New Feature", "green"). - AddParagraph("MDUI enables developers to build modern, clean, and responsive user interfaces effortlessly.") - - // Key Features List - builder.AddHeading(2, "Key Features"). - AddList([]string{ - "Responsive design with Markdown simplicity", - "Reusable components for rapid development", - "Customizable themes and styling", - "Easy integration with existing projects", - }, nil, false). - AddDivider() - - // Alerts Section - builder.AddHeading(2, "Alert Messages"). - AddAlert("This is an informational message.", "info"). - AddAlert("Be cautious about this warning.", "warning"). - AddAlert("This is a dangerous action. Proceed with care.", "danger"). - AddAlert("Congratulations, your action was successful!", "success"). - AddDivider() - - // Code Block Example - builder.AddHeading(2, "Code Example"). - AddCodeBlock(`func main() { - fmt.Println("Hello, MDUI!") -}`). - AddDivider() - - // Table Example - builder.AddHeading(2, "Feature Comparison Table"). - AddTable([]string{"Feature", "MDUI", "Other Frameworks"}, [][]string{ - {"Ease of Use", "High", "Medium"}, - {"Flexibility", "High", "Variable"}, - {"Learning Curve", "Low", "Medium"}, - }). - AddDivider() - - // Collapsible Section - builder.AddHeading(2, "More Details"). - AddCollapsible("Expand to see more", ` -Here is some more detailed information about MDUI and its components. -You can use collapsible sections to keep the layout clean and reveal information when needed. -`). - AddDivider() - - // Blockquote with Citation - builder.AddHeading(2, "Inspirational Quote"). - AddBlockquoteWithCitation("Simplicity is the ultimate sophistication.", "Leonardo da Vinci"). - AddDivider() - - // Keyboard Shortcut Example - builder.AddHeading(2, "Keyboard Shortcut"). - AddParagraph("Press the following shortcut to refresh the page:"). - AddKeyboardShortcut("Ctrl", "R"). - AddDivider() - - // Table of Contents - builder.AddHeading(2, "Table of Contents"). - AddTableOfContents([]string{"Introduction", "Key Features", "Alert Messages", "Code Example", "Feature Comparison Table", "More Details", "Inspirational Quote", "Keyboard Shortcut"}). - AddDivider() - - // Conditional Rendering Example - builder.AddHeading(2, "Conditional Content"). - AddParagraph("MDUI also supports conditional content rendering. See the result below based on a true/false condition."). - AddIfElseRender(true, "This content is displayed because the condition is true.", "This content would display if the condition were false"). - AddDivider() - - // Badges Section with Icons - builder.AddHeading(2, "Badge Examples"). - AddParagraph("Show off your badges with or without icons:"). - AddBadge("Beta", "blue"). - AddBadgeWithIcon("Go", "blue", "go"). - AddBadgeWithIcon("JavaScript", "yellow", "javascript"). - AddBadge("Build Passing", "green"). - AddDivider() - - // Final Message and Button - builder.AddHeading(2, "Ready to Start Building with MDUI?"). - AddParagraph("MDUI makes it simple to create UIs with Markdown. Try it out by clicking the button below:"). - AddButton("Start Using MDUI", "/start") - - return builder.Render() -} - -// RenderBuilderGuidePage renders a guide page explaining how to use the MarkdownBuilder -func RenderBuilderGuidePage() string { - builder := mdui.NewBuilder() - builder.AddNavbar(NavbarLinks) - - builder.AddHeading(1, "How to Use the MarkdownBuilder"). - AddParagraph(` -The MarkdownBuilder in MDUI is a powerful tool that allows developers to construct dynamic web pages with a simple, intuitive, and chainable API. -By leveraging the builder pattern, you can quickly and easily generate complex Markdown-based UIs without manually managing strings or formatting. -`). - AddDivider(). - AddHeading(2, "1. Builder Overview"). - AddParagraph(` -The MarkdownBuilder accumulates UI elements like headings, paragraphs, buttons, tables, and more. -You can chain methods to add elements, and at the end, call the Render method to output the final Markdown. -`). - AddCodeBlock(` -builder := mdui.NewBuilder() -// Add components using chained methods -builder.AddHeading(1, "Welcome to My Page").AddParagraph("This is a sample paragraph.").AddButton("Click Here", "/click") -// Render the final Markdown -result := builder.Render() -`). - AddDivider(). - AddHeading(2, "2. Adding Components"). - AddParagraph(` -Use MarkdownBuilder to add various UI components like headings, paragraphs, lists, buttons, images, and more. -`). - AddCodeBlock(` -// Adding a heading -builder.AddHeading(2, "This is a Heading") -// Adding a paragraph -builder.AddParagraph("This is a paragraph of text.") -// Adding a button -builder.AddButton("Learn More", "/learn-more") -// Adding a list -builder.AddList([]string{"Item 1", "Item 2", "Item 3"}, nil, false) -`). - AddDivider(). - AddHeading(2, "3. Complete Example"). - AddParagraph("Below is a complete example using MarkdownBuilder:"). - AddCodeBlock(` -builder := mdui.NewBuilder() -// Build the content -builder.AddHeading(1, "Welcome to MDUI"). - AddParagraph("MDUI is a framework for building UIs with Markdown."). - AddDivider(). - AddHeading(2, "Features"). - AddList([]string{ - "Simple to use", - "Supports various UI components", - "Easy to integrate with existing projects", - }, nil, false). - AddButton("Get Started", "/start") -// Render the final Markdown -result := builder.Render() -`). - AddDivider(). - AddHeading(2, "4. Rendering Content"). - AddParagraph(` -Once you've added all your components, you can call the Render method to output the final Markdown string. -This string can then be used as content in your application. -`). - AddCodeBlock(`result := builder.Render(); fmt.Println(result)`). - AddDivider(). - AddHeading(2, "Conclusion"). - AddParagraph(` -The MarkdownBuilder makes it easy to generate complex UIs with Markdown using a clean and intuitive API. -With just a few method calls, you can add headings, paragraphs, buttons, tables, and more, and chain them together to build dynamic pages effortlessly. -`). - AddButton("Start Using MarkdownBuilder", ExamplesPath) - - return builder.Render() -} - -// Render entry point to route to different pages based on path -func Render(path string) string { - switch { - case strings.Contains(path, "components"): - return RenderComponentsPage() - case strings.Contains(path, "examples"): - return RenderExamplesPage() - case strings.Contains(path, "builder-guide"): - return RenderBuilderGuidePage() - default: - return RenderHomePage() - } -} diff --git a/examples/gno.land/r/varmeta/mdui/router.gno b/examples/gno.land/r/varmeta/mdui/router.gno new file mode 100644 index 00000000000..0042b7a7432 --- /dev/null +++ b/examples/gno.land/r/varmeta/mdui/router.gno @@ -0,0 +1,17 @@ +package mdui + +import "strings" + +// Render entry point to route to different pages based on path +func Render(path string) string { + switch { + case strings.Contains(path, "components"): + return RenderComponentsPage() + case strings.Contains(path, "examples"): + return RenderExamplesPage() + case strings.Contains(path, "builder-guide"): + return RenderBuilderGuidePage() + default: + return RenderHomePage() + } +} \ No newline at end of file From 4970870cf267421c12e6ca749b5e73e5d84d5db3 Mon Sep 17 00:00:00 2001 From: thanhngoc541 Date: Tue, 10 Dec 2024 18:14:01 +0700 Subject: [PATCH 10/10] Remove require in mod --- examples/gno.land/r/varmeta/mdui/gno.mod | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/gno.land/r/varmeta/mdui/gno.mod b/examples/gno.land/r/varmeta/mdui/gno.mod index 5e1c3223e37..7f91b89f55a 100644 --- a/examples/gno.land/r/varmeta/mdui/gno.mod +++ b/examples/gno.land/r/varmeta/mdui/gno.mod @@ -1,3 +1 @@ module gno.land/r/varmeta/mdui - -require gno.land/p/varmeta/mdui v0.0.0-latest