currently this is my nuxt content application:

• components/
  • Report.vue
• content/
  • index.md
  • report1/
    • report.md
    • index.md
  • report2/
    • report.md
    • index.md

where content/index.md contains a list of the reports:

---
layout: article
---

# Reports

- [report 1](/report1)
- [report 2](/report2)

and each report folder contains an index page like this:

:report{path="/report1"}

and report page like this:

---
title: "Report 1"
---

some content

then my Report component is like this:

<script lang="ts" setup>
const props = defineProps({
  path: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <div id="report" class="container mx-auto prose prose-stone">
    <ContentDoc :path="props.path + '/report'" v-slot="{ doc }">
      <!-- front -->
      <Front :title="doc.title" />
      // ...

This feels really redundant, and not really dynamic, can someone tell me what I’m doing wrong and how I can heavily simplify this kind of page?

The second question I have is how can I integrate all of these things in a real nuxt application. I tried to use nuxt last time for this, but I couldn’t figure out how to nicely render all the markdown stuff. So now I’m building the nuxt content repo, then building my nuxt repo, and then stitching the html files together. Any advice there?