Display summary of markdown content

[scenic tendon]

I've been going round and round trying to find examples of how to do this and I am stumped.

I have a bunch of markdown files, I use a map to then render them as a list, I can pass front matter fields to a component to render each of them in that list. I have titles, dates, URL, etc etc.

How do I show a summary of the markdown body of the file in that list? In a similar way you can do with many traditional SSGs? I thought I could pull a body field but that doesn't work… I feel like there's something I need to do with the <Content /> component of the Content value of the returned markdown object as I can see that in console, but I can't figure it out. Thanks!

I can get content returned in the rawContent and compiledContent fields, but that feels wrong 🤷‍♂️

[scenic tendon]

And if you do use renderedContent with for example <p set:html={body}> then it shows with all HTML tags, whereas I was expecting rendered HTML 🤔

[restive dock]

I didn't get you. Please give a detailed example of input and expected output.

[scenic tendon]

@restive dock Hmm, so, let me think how to put it clearer.

In a list of content sourced from a folder of markdown files, for example this, which is passing values of each post to a component…

    <ul>
      {
        page.data.map((post) => (
          <>
            <Post
              href={post.url}
              title={post.frontmatter.title}
              body=???
              date={post.frontmatter.date}
              publication_url={post.frontmatter.publication_url}
              image={post.frontmatter.image}
            />
          </>
        ))
      }
    </ul>

Most values are in front matter or the URL for example.

But I cannot figure out what to pass as the value for the main body of the content, all the markdown after the front matter basically. If I debug, I can see a value for Content but it passes nothing to the component

  {
    _internal: [Getter],
    frontmatter: [Getter],
    file: [Getter],
    url: [Getter],
    rawContent: [Getter],
    compiledContent: [Getter],
    getHeadings: [Getter],
    getHeaders: [Getter],
    Content: [Getter],
    default: [AsyncFunction: Content] {
      [Symbol(astro.needsHeadRendering)]: false
    },
    [Symbol(Symbol.toStringTag)]: 'Module'
  },

rawContent and compiledContent have values though, but they seem to have their own issues seperate from this.

tldr; What is the recommended Astro way to render the content from a markdown file in a list, like a blog post summary. Ideally truncated, but there's other ways of doing that.

For example, here's how Hugo does it - https://gohugo.io/templates/lists/#example-project-directory

[restive dock]

I guess you need this https://docs.astro.build/en/tutorial/4-layouts/2/

I guess you didn't get me. The unclear part is summary of markdown content.
What I need:

• Input: example markdown
• Output: example summary of markdown content

[scenic tendon]

OK, I also don't entirely understand your last comment, but don't worry too much, many traditional SSGs have in-built features for creating an excerpt of the main content from a markdown file, but I guess Astro doesn't and it's easy to reproduce with JavaScript anyway.

I'll look at that link, but it seems to deal more with one page of content rather than a list, but maybe there's something in there I've missed.

[restive dock]

Astro renders markdown content internally and then returns the result. It's not flexible to customize this process like other tools. I don't like that. If you need to deeply customize, maybe markdoc is an option for you, or you can write your own markdown component.

[scenic tendon]

yeah, I'm not really trying to do anything special or custom. but get the value of the markdown content.

Now looking here - https://docs.astro.build/en/core-concepts/layouts/#markdown-layout-props it does seem to imply that I should use compiledContent, but i'm having other issues with that. Will try somethings and maybe create a seperate thread on that.

[restive dock]

A simple approach is to use the user-defined frontmatter field excerpt/summary. If you want to generate it programmatically, you need to extract & and process the text with input from rawContent/compiledContent in the markdown layout. The technique depends on the use case.

[scenic tendon]

Yeah, I can see that as a solution, but I have about 1000 markdown files. I'll try and figure out why compiledContent isn't working as expected, thanks!

[wet cipher]

Hey @scenic tendon 👋 Did you ever find a suitable solution for this? I'm currently migrating a Hugo site and looking for a simple Astro equivalent to Hugo's Content Summaries (https://gohugo.io/content-management/summaries/)

[strange storm]

I am not familiar with Hugo and how it generates summaries but you can create a remark plugin to do something similar, something like this```js
// plugin.mjs
import { visit, EXIT } from 'unist-util-visit'
import { toString } from 'mdast-util-to-string'

// Save the first paragraph as 'description' property in the frontmatter
export function remarkDescription() {
return function (tree, file) {
visit(tree, 'paragraph', node => {
file.data.astro.frontmatter.description = toString(node);
return EXIT;
})
}
}

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import { remarkDescription } from './plugin.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkDescription]
  },
});

[wet cipher]

@strange storm Super cool and helpful! Thanks for taking the time to reply. I'll give this a shot!