Post Excerpt component for 🚀 Astro

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files using Astro collections! 💎
Requires Astro v5+.

Now featured in Astro's official Integrations library. 😍

✍🏼What every blog excerpt wishes it could be.✂️

📃 Table of Contents

• Features
• Usage
• Changelog
• Support
• License
• Related
• Author

🤖 Features

• 🔌 Plug-and-play with Astro props
• 📜 Parses Markdown/MDX safely
• 🧹 Strips YAML front matter
• 💬 Preserves whitespace
• ✂️ Trims by word and/or length
• 🤖 Adds ellipsis smartly
• 🔧 Configurable props
• 🚫 No client-side JS
• 🧩 No client-side HTML - output only string
• 🧪 Warns on invalid input + has fallbacks

🕵🏼 Usage

_{<PostExcerpt /> component generated excerpt}

Install it by executing:

npm i -D "@igor.dvlpr/astro-post-excerpt"

then import it into your project:

PostPreview.astro

import PostExcerpt from '@igor.dvlpr/astro-post-excerpt'

const { post } = Astro.props

<article>
{ /* other markup */ }
  <p class="post-excerpt">
    <PostExcerpt
      post={post}
      words={20}
      addEllipsis={false} />
  </p>
{ /* other markup */ }
</article>

❗ NOTE: if you get a build error "unknown file extension ".astro" for @igor.dvlpr/astro-post-excerpt", you'll need to update your astro.config.mjs file and add the following property:

vite: {
    ssr: {
      noExternal: ['@igor.dvlpr/astro-post-excerpt'],
    },
  }

See #3820 for more information.

🤹🏼‍♂️ Options

post

post: IAstroCollectionEntry

required , represents the post whose excerpt you want to generate and render. You should insert this component inside your posts loop, obtained via: getCollection().

If this prop is not supplied or not valid, the component will throw a fatal error.

words

words?: number

optional, represents the number of words the generated excerpt should have in total. Be aware that the prop maxLength has precedence over this prop but you can use both props simultaneously.

Defaults to 40.

If this prop is not supplied or not valid, a warning will be output to the console.

maxLength

maxLength?: number

optional, represent the max length of the generated excerpt. Be aware that this prop has precedence over the words prop but you can use both props simultaneously.

Defaults to 0 (unlimited).

If this prop is not supplied or not valid, a warning will be output to the console.

addEllipsis

addEllipsis?: boolean

optional, controls whether an ellipsis should be appended to the post excerpt. Defaults to true.

If this prop is not valid, a warning will be output to the console.

smartEllipsis

smartEllipsis?: boolean

optional, controls whether the appended ellipsis should be aware of how the excerpt ends, i.e. if the excerpt ends with a punctuation symbol the ellipsis won't be appended. Defaults to true.

Note: punctuation symbols that this component is aware of are:

• "."
• ","
• "?"
• "!"
• ";"
• "…"

If this prop is not valid, a warning will be output to the console.

ellipsis

ellipsis?: string

optional, controls the ellipsis string that should be appended to the post excerpt. Defaults to "…".

If this prop is not valid, a warning will be output to the console.

📝 Changelog

📑 The changelog is available here, CHANGELOG.md.

🪪 License

Licensed under the MIT license which is available here, MIT license.

💖 Support

I work hard for every project, including this one and your support means a lot to me!
Consider buying me a coffee. ☕



Thank you for supporting my efforts! 🙏😊

🧬 Related

@igor.dvlpr/rawelement

🐯 A utility that lets you manipulate HTML elements, their attributes and innerHTML as strings, on the go and then render the modified HTML. Very useful in SSG projects. 💤

@igor.dvlpr/astro-escaped-component

🏃🏻‍♂️‍➡️ An Astro component that holds only HTML-encoded content. 📜

@igor.dvlpr/astro-saferesource

🎐 Adds CSP-compliant inline scripts and styles to Astro! 🎠

@igor.dvlpr/astro-easynav-button

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼

@igor.dvlpr/vscode-folderpicker

✨ Provides a custom Folder Picker API + UI for Visual Studio Code. 🎨

👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).