[gnoweb] Design System Overhaul & Markdown Extensions

[alexiscolin]

As part of the gnoweb rework for the mainnet, we need to create a "md design system" in order to support additional elements (alerts, columns, jumbotrons, etc.), focusing on user-friendly layouts and responsive design.

HTML will be disabled by default in gnoweb, with a whitelist of approved attributes to ensure both security and consistency. This approach aims to harmonize content across various readers, as the content is in Markdown to remain platform-agnostic—whether viewed in a mobile app, terminal, or web interface.

The goal is to develop a Markdown format that not only allows for layout enhancements (e.g., columns, alerts) but may also introduce interactive components (e.g., embedded playgrounds, interactive elements). This will enable rich content while maintaining compatibility across different platforms and ensuring a seamless user experience.

But we must find the best way to write these Markdown new elements.

old related PR: #781 (closed)

Requirements

For the mainnet, we think to start with 2 initial elements:

• columns (with 1 to multiple columns)
• alert boxes (for warnings, danger, info, etc.)

For this work, we also need to find a good syntax that:

• Can be extended with future components and layouts.
• Follows the Markdown syntax as closely as possible.
• Is simple to use in Markdown files (no HTML tags, for example).
• Is easy to read/understand in code (like basic Markdown syntax).
• Can be rendered in most editors outside of gnoweb (think about HackMD, for example).
• Can be nested (would be nice to have).

---

A Few Examples for columns to Start a Conversation (add more in comments)

Using Existing Syntax with a Twist

---
# title 1 in my first col

blabla 1st col content

---
# title 2 in my second col

blabla 2nd col content

---

Every horizontal rule (---) followed by a title without a line break should indicate the start of a column, ending with another horizontal rule.

• Pros: By using already established syntax combinations, we could create columns and ensure the Markdown is readable (and well rendered) everywhere without introducing new syntax elements to learn.

• Drawbacks: It’s not extendable, and this method could be challenging with different components (e.g., alert boxes). Moreover, it means we cannot start a column without a title (starting with an image, for example, might make sense).

---

Using a New Markdown Syntax Dedicated to Columns

<==
col1
+++
col2
<==

==>
col1
+++
col2
==>

===
col1
+++
col2
===

Here, the three equals signs (===) symbolize the column layout and are used as outer delimiters. Columns are separated by three plus signs (+++). The < and > characters can be added at the beginning or the end of the column layout to indicate left stack, right stack, or equally sized columns.

• Pros: This method is easy to read in Markdown (self-explanatory) and simple to use. It also allows for alignment of elements, which is useful for improving design by creating stacks in addition to grids. It’s powerful and allows almost anything to be placed within grids.

• Drawbacks: It's an additional syntax to learn, and it may not be rendered properly in editors like HackMD, resulting in the syntax being displayed as plain text. Also, it requires two different syntaxes—one for the layout (=) and one for the column separator (+).

Any thaughts or ideas?