[Feature request] Use comments in markdown to create content slots

[frandiox]

Feature request

Hi! Thanks for all the job done in VuePress, loving it so far!
I'd like to suggest a way to provide content slots directly from markdown.

What problem does this feature solve?

Currently, I believe that all the markdown in a file is provided by a single <Content> component (except the excerpt part). In order to split the content in different sections we can use slotted components as follows:

<MyComponent>

* One

  This is the *first* section.

* Two

  This is the *second* section.

</MyComponent>

However, this means we need to copy this structure in every translation file we have (/fr/index.md, /es/index.md, etc.).

Apart from that, I'm building a VuePress site by fetching content from a headless CMS (Contentful, specifically), and will have "writers" (not "programmers") adding content there for some pages. Writing Vue components in markdown would make this a bit harder, and also would couple the content to VuePress.

What does the proposed API look like?

Adding comments such as <!-- slot: my section --> to indicate different sections/slots in markdown. These sections could be provided in different components like <ContentMySection /> or <Content name="my-section" />.

---
...
---

# Title

excerpt

<!-- more -->

Default slot here

<!-- slot: section1 -->

section1 slot here

<!-- slot: section2 -->

section2 slot here

How should this be implemented in your opinion?

Perhaps just like <!-- more --> comment is parsed and extracted as this.$page.excerpt, other comments could also be extracted. The result can be provided as <Content> components or as this.$page.slot.name properties (this might require convert md=>html manually?)

Are you willing to work on this yourself?**

Yes, with some guidance to make it faster and after discussing details.

[meteorlxy]

I'm sorry but I can't fully understand the feature, would you please describe some details ? How to use the slots, or which way do you want to distribute slots?

<Content>
  <ContentMySection  slot="section1"/>
</Content>

Like this?

[kazupon]

It's looks like docz.
https://github.com/pedronauck/docz

I think that feature should be implemented with plugin API rather than VuePress.

[frandiox]

@meteorlxy Something like this:

<template>
 <div class="home-page-layout">

  <Content />

  <MyComponent>
    <Content name="section1" />
  </MyComponent>

  <AnotherComponent>
    <Content name="section2" />
  </AnotherComponent>
 </div>
</template>

<Content>'s output changes depending on name attribute.
Otherwise, the sections could be included in $page.slots or something similar and we would need to parse MD manually.