@igor.dvlpr/astro-post-excerpt NPM

🕵🏼 Usage

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: ['astro', '@igor.dvlpr/astro-post-excerpt'],
    },
  }

See #3820 for more information.

If you have migrated your Astro site to v2+ you can now use Collections for your posts loop. This component works with both v2+ and versions prior v2.

If you're upgrading this component while keeping your Astro installation <2, everything should work as expected since the introduced changes are backwards-compatible.

In case of an issue, submit it on the component's Issues page. You should provide a concise explanation of the issue you're facing and sample code - if applicable.

🤹🏼‍♂️ Options

post

post: IAstroMarkdownFile | IAstroCollectionEntry | GlobFile

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

for Astro >=2, obtained via:
- getCollection()- for posts loop,
- getEntryBySlug() - for single posts retrival,
for Astro <2, obtained via Astro.glob().

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

Interfaces and types

IAstroMarkdownFile,
IAstroCollectionEntry,
GlobFile

are artificial and they correspond to

MarkdownInstance<Record<string, any>>,
CollectionEntry<T>,
Record<string, any>

respectfully.

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: