[Request] <ContentRenderer> to Support Rendering Pure Markdown Content

[XenBG]

I'm currently developing a Nuxt 3 application and I want to incorporate Nuxt Content as a module. Specifically, I'm interested in utilizing the <ContentRenderer> component, but it currently necessitates fetching .md files by querying the content directory. However, I would prefer to have the flexibility of providing the component with pure Markdown content that can be rendered on the page.

Here's an example of what I'm looking for:

<script setup lang="ts">
const markdownContent = `# Heading

## Heading 2

### Heading 3`
</script>

<template>
  <main>
    <ContentRenderer :content="markdownContent" />
  </main>
</template>

[atinux]

Hi @XenBG

This is a bit tricky in term of performance drawbacks but this is something we can think of leveraging the Island components.

[XenBG]

Hello @Atinux, thank you for your response! I really like the idea of creating <Island> components. Additionally, it would be great to include some extra functionality - the ability to display a portion of the content, and then hide the remaining content with a 'Show Less' and 'Show More' buttons after the content. This can be achieved by inserting the <!-- more --> tag into the Markdown. Here's an example of the code implementation for better clarity:

<template>
  <div>
    <div v-html="truncatedContent" />

    <button v-if="showButton" type="button" @click="toggleContent">
      {{ showFullContent ? 'Show Less' : 'Show More' }}
    </button>
  </div>
</template>

<script setup lang="ts">
const htmlContent =
  '<h1>First Heading</h1><p>First description text...</p><!-- more --><h2>Second Heading</h2><p>Second description text.</p>'

const showFullContent = ref(false)

const truncatedContent = computed(() => {
  const moreIndex = htmlContent.indexOf('<!-- more -->')

  if (showFullContent.value) {
    return htmlContent
  } else {
    return moreIndex !== -1 ? htmlContent.slice(0, moreIndex) : htmlContent
  }
})

const showButton = computed(() => htmlContent.includes('<!-- more -->'))

function toggleContent() {
  showFullContent.value = !showFullContent.value
}
</script>

[jeannen]

Also interested, I have markdown that isn't linked to .md files (fetched externally), I have no way to render it for now

[nobkd]

@jeannen Maybe https://github.com/nuxt/content/issues/924#issuecomment-1851945345 is, what you're looking for?

[jeannen]

@jeannen Maybe #924 (comment) is, what you're looking for?

Yes, exactly what I needed, thanks! Only one little thing not working