Markdown/UI templating framework competition

[moul]

We are launching a bounty to find an idiomatic and straightforward Gno API for generating simple markdown, focusing on standard markdown.

While we are considering extending or flavoring markdown in the future (#439), the primary goal of this competition is to identify a library that everyone will prefer over manual string concatenation.

Participants are invited to consider principles similar to GoHugo's use of text/template, the current p/demo/ui (#903), and to analyze other implementations. As in any other language, competition for the best templating system is always intense, and we expect to find a leading framework by adoption. It may also make sense to have a "second most-favorited" or even a third implementation, particularly if the implementations are opinionated and stylistically different.

We expect multiple participants and will share the bounty based on the effort and quality of the submissions. Bounties will be distributed progressively towards the best implementations. This competition will also provide valuable insights for our ongoing work on markdown extensions.

Currently, we suggest that you open your library in p/demo/ui/; we'll eventually reorganize the examples folder later. Additionally, make sure to update at least one or some contracts using your libraries, so we can have usage examples.

Good luck!

---

Edit: We're not looking for a Markdown to HTML library or an HTML framework. We are seeking a Markdown framework that allows us to write idiomatic Gno and generate Markdown.

---

Bounty Size: M; expected maximum reward: $2,000.

Find out more on the bounty program. If you participate with intention of receiving the bounty, you must agree to the Bounty Terms and Conditions.

More bounties | Contributing guidelines

[Nemanya8]

I've been working on a approach that focuses on simplicity. The idea is to bypass the traditional Markdown parsing and directly convert function calls to HTML, minimizing computation and complexity. Below is a demonstration of how this approach works and the output it produces.

Example Render Function

func Render(_ string) string {
	md := mdify.New()

	md.H1("Welcome to Gno Markdown! in h1")
	md.H2("Welcome to Gno Markdown! in h2")
	md.H3("Welcome to Gno Markdown! in h3")
	
	md.P("This is a sample paragraph in markdown.")

	items := []string{"Item 1", "Item 2", "Item 3"}
	md.UL(items)

	orderedItems := []string{"First", "Second", "Third"}
	md.OL(orderedItems)

	md.BR()

	md.Code("go", code)

	result := md.Render()
	return result
}

This implementation is designed to be easy to understand and use. By using this aproach we remove customization and we only focus on basic Markdown functions.

API Implementation Details

type HTML struct {
    content []string
}

func New() *HTML {
    return &HTML{}
}

func (html *HTML) H1(text string) {
	html.content = append(html.content, "<h1>" + text + "</h1>")
}

func (html *HTML) UL(items []string) {
	html.content = append(html.content, "<ul>")
	for _, item := range items {
		html.content = append(html.content, "<li>"+item+"</li>")
	}
	html.content = append(html.content, "</ul>")
}

func (html *HTML) Code(language, code string) {
	if language == "" {
		html.content = append(html.content, "<pre><code>"+code+"</code></pre>")
	} else {
		html.content = append(html.content, "<pre><code class=\"language-"+language+"\">"+code+"</code></pre>")
	}
}

Feedback Request

I would appreciate any feedback on this concept. If you think this is a good approach, please feel free to reach out with ideas for optimizations and other improvements to this API.

[Nemanya8]

Continuation of #2753 (comment)

To support Markdown features like bold, italic, and strikethrough, a simple approach would be to implement individual functions for each feature, passing the affected text for processing. While this method is easy to implement and computationally inexpensive, it relies heavily on string concatenation, which can be inelegant:

func (html *HTML) Bold(text string) string {
	return "<b>" + text + "</b>"
}

Usage example:

md.P("This is a sample paragraph " + md.Bold("in markdown."))

A more elegant solution is to adopt a Sprintf-like approach. Although this method is more complex and computationally intensive, it allows for more flexibility. Instead of manual string concatenation, we can scan the entire string and replace special symbols with their corresponding HTML tags.

md.P("This is a sample paragraph **in markdown.**")

[leohhhn]

@Nemanya8

Thanks for the proposal. I would advise you create a PR with your library, and try to use it in some of the already existing realms in the examples folder. For example, you can try to make the r/gnoland/home realm better (mainly it's code readability); it's using the old p/demo/ui library, which is quite hard to use & read. r/gnoland/home is the realm that powers the gno.land home page.

With this, we can see the practical side of your code. You can choose another existing realm as well, or choose to make your own, showcasing the potential of your proposal.

There, we can also leave comments and discuss specifics of the code, such as readability, performance, etc.

[moul]

Please open a dedicated issue or pull request with your example so we can comment on it. Be sure to reference your issue or pull request here.

I have comments to provide, but I don't want to clutter this issue further.

[moul]

Note: we're not looking for a Markdown to HTML library or an HTML framework. We are seeking a Markdown framework that allows us to write idiomatic Gno and generate Markdown.