How to get markdown content in layout?

[kecrily]

I made a layout for the post(.md) page. In it I need to get the content of markdown to count the reading time and word count, how do I get its content?

This is my layout content:

<script setup lang="ts">
import readingTime from reading-time
const stats = readingTime(text)
// `text` is still missing, so how to get markdown content
</script>
<template>
  <div>Reading Time: {{ stats.minutes }} mins</div>
  <slot />
</template>

[ElMassimo]

There are two main ways to achieve this, you can use a remark plugin, or you can render the markdown page and process the resulting text vnodes to count the words.

I recommend that you try the first one. For example, using remark-reading-time:

import { defineConfig } from 'iles'

let namedPlugins

export default defineConfig({
  configResolved (config) {
    namedPlugins = config.namedPlugins
  },
  markdown: {
    remarkPlugins: [
      'remark-reading-time',
      () => (ast, vfile) => {
        const page = namedPlugins.pages.api.pageForFilename(vfile.path)
        page.frontmatter.meta.readingTime = vfile.data.readingTime
      },
    ],
  },
})

and then:

<template>
  <div>Reading Time: {{ $meta.readingTime.minutes }} mins</div>
  <slot />
</template>

---

I'm planning to add a setting to automatically serialize vfile.data fields to meta which would simplify the config.