Is it possible to do a v-for for ContentRender to get the index of the subelement?

[xarthurx]

I'm trying to do a "slide enter" effect for my markdown post, where it is described here: https://antfu.me/posts/sliding-enter-animation

The problem arise when I try to use ContentRender to load the content of the page (document-driven mode)

      <ContentRenderer 
        :key="page._id" :value="page" />

To make the slide-effect work, I need to assign for the sub-element, i.e. h2, h3, p, when to do the effect -- this needs me to get the "index" for them, which I can usually done by v-for in normal scenarios...

The question is, how (or is it possible) to achieve it with the ContentRender api?

[xarthurx]

OK, I tried to something like:

<script setup lang="ts">
const { toc, page } = useContent();
const pageElement = page.value.body.children;
</script>

      <div v-for="(element, idx) in pageElement" :key="element._path">
        <div
          class="slide-enter"
          :style="{
            '--enter-stage': idx,
            '--enter-step': '60ms',
          }"
        >
          <ContentRenderer :value="element" />
        </div>
    </div>

Then Nuxt is rendering the json format content, like:

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {
    "type": "element",
    "tag": "h2",
    "props": {
      "id": "where-the-story-begins"
    },
    "children": [
      {
        "type": "text",
        "value": "Where the story begins"
      }
    ]
  },
  "excerpt": false,
  "tag": "div"
}

How to make the page.value.body.children into a ParsedContent?

[xarthurx]

This might be similar to my other question when parsing .csv files: #2269

In general, I think I'm need some background knowledge of how to "unwrap" or "rewrap" reactive or nuxt-parsed object.

[xarthurx]

I also discovered the API ContentRendererMarkdown, which is not documented.
Say, I can make a Component that derives from it, and inject the part of the code to do what I want?