Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

A divider to wrap part of the default slot #80

Open
ManUtopiK opened this issue May 17, 2024 · 0 comments
Open

A divider to wrap part of the default slot #80

ManUtopiK opened this issue May 17, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@ManUtopiK
Copy link
Contributor

Is your feature request related to a problem? Please describe.

There's no problem, only solutions!

This MDC syntax is sometimes too much markup.
The first intention of John Gruber when [he defined the markdown syntax][3] was readability. As he wrote:

A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

Moreover, I think readability should be important when markdown is also formatted in html with a naive markdown parser.

So, all that we want is less markup !

Describe the solution you'd like to see

Web is about contents, lists and forms. When we write content, we often need to wrap some part with div just for design style to list some stuffs.
Ex:

  • split a long text in two or more columns, (I know, we can use css columns, but it has poor controls for responsive)
  • make a media object when we simply put an image or vidéo at the right or left
  • an horizontal big menu in columns style
  • feature sections, blog posts, products...

A workaround is to use a ::div component or html div with extra blank lines, but it's quite verbose.
Let's say I simply want to write the content in a component with two columns.
What we have to do is :

::my-component
---
type: designTypeProps
---
  :::div
  ### Title of the first column
  
  Content of the first column...
  :::
  
  :::div
  ### Title of the second column
  
  Second content...
  :::
::

Too much markup just for splitting parts, and we often struggle with the closing tag :: and spaces indentation while we refactor contents (this example is very short, but in real life, contents are often quite longer with paragraphs, image, button...).

Describe alternatives you've considered

Maybe we could provide a divider only inside component just to write things easier.
I think to the thematic break --- (hr) because I never encountered the case where we need this break inside the default slot of a component. So, it will be easier to split content like this:

::my-component
---
type: designTypeProps
---
### Title of the first column

Content of the first column...

---

### Title of the second column

Second content...
::

By this way, the content will be wrapped in two divs, and we could easily provide classes or props to divide this list in horizontal, vertical, carousel, grid, masonry, features, menus... everything that simply needs to be split in some parts to build a "list".

Bonus: It will be awesome to use the same behavior of sli.dev with the per slide configuration :

::my-component
---
type: whole component props
---

---
layout: center // props of the current part
---
### Title of the first slide

Content of the first slide...

---
layout: center
---
### Title of the second slide

Second content...
::

Just some ideas I need to share. Maybe a solution for the scoped slots #69

Additional context

In fact, I works closely with writers and the needs to just split parts of the content was often related to me. From my way as the devolepper, I found some alternatives to do what the writers want, but always with some hacks and finally often with not necessary lines (like parsing the AST to split title+paragraph, or wrapping columns in a parent component).
But the case is often the same : just splitting content for a design need.

@ManUtopiK ManUtopiK added the enhancement New feature or request label May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant