Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/igorskyflyer/npm-astro-post-excerpt

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown files! 💎 Featured on Astro's official Integrations library: https://astro.build/integrations?search=igor.dvlpr 😍
https://github.com/igorskyflyer/npm-astro-post-excerpt

astro astrojs component excerpt front-end igorskyflyer javascript js jsx npm post react typescript

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/igorskyflyer/npm-astro-post-excerpt
Owner: igorskyflyer
License: mit
Created: 2022-09-11T15:33:22.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-10-07T17:03:57.000Z (about 1 year ago)
Last Synced: 2024-03-14T22:09:59.133Z (10 months ago)
Topics: astro, astrojs, component, excerpt, front-end, igorskyflyer, javascript, js, jsx, npm, post, react, typescript
Language: Astro
Homepage: https://www.npmjs.com/package/@igor.dvlpr/astro-post-excerpt
Size: 620 KB
Stars: 15
Watchers: 2
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

Logo of Post excerpt for Astro component

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

Generated post excerpt

_{<PostExcerpt /> component generated excerpt}

Install it by executing:

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

then import it into your project:

`PostPreview.astro`

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

const { post } = Astro.props

{ /* other markup */ }

```

> ❗ **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`](https://docs.astro.build/en/guides/configuring-astro/) file and add the following property:

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

See [#3820](https://github.com/withastro/astro/issues/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](https://github.com/igorskyflyer/npm-astro-post-excerpt/issues/new) page. You should provide a concise explanation of the issue you're facing and sample code - if applicable.

## 🤹🏼‍♂️ Options

### post

```ts
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()`](https://docs.astro.build/en/reference/api-reference/#getcollection)- for posts loop,

- [`getEntryBySlug()`](https://docs.astro.build/en/reference/api-reference/#getentrybyslug) - for single posts retrival,

- for `Astro <2`, obtained via [`Astro.glob()`](https://docs.astro.build/en/reference/api-reference/#astroglob).

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>`,
- `CollectionEntry`,
- `Record`

respectfully.

### words

```ts
words?: number
```

**optional**, represents the number of words the generated excerpt should have in total. Be aware that the prop [`maxLength`](#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

```ts
maxLength?: number
```

**optional**, represent the max length of the generated excerpt. Be aware that this prop has precedence over the [`words`](#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

```ts
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

```ts
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

```ts
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](https://github.com/igorskyflyer/npm-astro-post-excerpt/blob/main/CHANGELOG.md).

---

## 🪪 License

Licensed under the MIT license which is available here, [MIT license](https://github.com/igorskyflyer/npm-astro-post-excerpt/blob/main/LICENSE).

---

## 🧬 Related

[@igor.dvlpr/vscode-folderpicker](https://www.npmjs.com/package/@igor.dvlpr/vscode-folderpicker)

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

[@igor.dvlpr/hook](https://www.npmjs.com/package/@igor.dvlpr/hook)

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

[@igor.dvlpr/aria](https://www.npmjs.com/package/@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](https://www.npmjs.com/package/@igor.dvlpr/scrollend-polyfill)

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

[@igor.dvlpr/valid-path](https://www.npmjs.com/package/@igor.dvlpr/valid-path)

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

Provided by **Igor Dimitrijević** ([_@igorskyflyer_](https://github.com/igorskyflyer/)).