@igor.dvlpr/astro-post-excerpt v3.0.4
π΅πΌ 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 viaAstro.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. π¨
πͺ Hooks onto a JavaScript prototype, either extending or changing its behavior or replacing it completely. πΊ
𧬠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. βΈοΈ
π§° Provides ways of testing whether a given value can be a valid file/directory name. π
Provided by Igor DimitrijeviΔ (@igorskyflyer).
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago