Post Excerpt component for 🚀 Astro

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! 💎
Works with all 4 major versions of Astro and MDX!

Now featured on Astro's official Integrations library 😍

💖 Support further development
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! 🙏😊

@igorskyflyer

🕵🏼 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: ['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:

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

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

✨ Changelog is available here: CHANGELOG.md.

🪪 License

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

🧬 Related

@igor.dvlpr/vscode-folderpicker

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

@igor.dvlpr/hook

🪝 Hooks onto a JavaScript prototype, either extending or changing its behavior or replacing it completely. 👺

@igor.dvlpr/aria

🧬 Meet Aria, an efficient Adblock filter list compiler, with many features that make your maintenance of Adblock filter lists a breeze! 🗡

@igor.dvlpr/scrollend-polyfill

🛴 A performant and light (< 1KB) JavaScript polyfill for the scrollend Event. ⛸️

@igor.dvlpr/valid-path

🧰 Provides ways of testing whether a given value can be a valid file/directory name. 🏜

Provided by Igor Dimitrijević (@igorskyflyer).

Boolean prop not valid - aborting. Error

Hello, thanks for your plugin.
Looks great, but unfortunately when trying to implement I'm getting the following error:

This is my loop for getting the static paths.
./[...page].astro:

export async function getStaticPaths({paginate}) {

    const posts = await getCollection('blog').then(posts =>
	posts
		.map(({ data, slug }) => ({
            slug: slug,
			title: data.title,
			description: data.description,
			pubDate: data.pubDate,
		}))
);
return paginate(posts, {pageSize: 10});


}

const seo = {
  title: 'Blog',
  description: 'Blog posts, essays, diaries, news and tutorials by tjex / Tillman Jex'
}

const { page } = Astro.props;
---


<Layout seo={seo} >
    <article class="blog-page-content__article">
      <section class="postlist">
        {page.data.map((post: any) => <BlogPostPreview post={post} />)}
      </section>
    </article>
    <Paginator page={page}/>
</Layout>

the post prop is beings passed into the BlogPostPreview component.
It's in this component that I want to implement the post excerpt.
../../components/BlogPostPreview.astro:

---
import PostExcerpt from "@igor.dvlpr/astro-post-excerpt";
export interface Props {
    post: any;
}

const { post } = Astro.props;
---

<article class="post-preview">
    <a href={`/blog/${post.slug}`}>
        <h1 class="title">{post.title}</h1>
        <p class="description">{post.description}</p>
    </a>
    <p class="post-excerpt">
        <PostExcerpt {post} words={20} addEllipsis={false} />
    </p>
</article>

You can see here how the blog page looks normally (ie without the post-excerpt implementation): https://tjex.net/blog/

igorskyflyer / npm-astro-post-excerpt Goto Github PK

npm-astro-post-excerpt's Introduction

Post Excerpt component for 🚀 Astro

💖 Support further development

🕵🏼 Usage

🤹🏼‍♂️ Options

post

words

maxLength

addEllipsis

smartEllipsis

ellipsis

📝 Changelog

🪪 License

🧬 Related

npm-astro-post-excerpt's People

Contributors

Stargazers

Watchers

Forkers

npm-astro-post-excerpt's Issues

🚀 Astro v2 upgrade 👨🏼‍🚀

Recommend Projects

Recommend Topics

Recommend Org