https://github.com/mattbrailsford/webmentions-loader
Webmentions.io Loader for Astro
https://github.com/mattbrailsford/webmentions-loader
astro astro-component astro-loader withastro
Last synced: 17 days ago
JSON representation
Webmentions.io Loader for Astro
- Host: GitHub
- URL: https://github.com/mattbrailsford/webmentions-loader
- Owner: mattbrailsford
- License: mit
- Created: 2024-10-13T11:15:32.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-14T06:29:07.000Z (8 months ago)
- Last Synced: 2025-05-15T21:11:17.796Z (17 days ago)
- Topics: astro, astro-component, astro-loader, withastro
- Language: TypeScript
- Homepage:
- Size: 46.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Webmentions Loader
This package provides a Webmentions.io loader for Astro.
## Requirements
This package requires Astro 5.0.0-beta or later.
## Installation
```sh
npm install webmentions-loader
```
## Usage
You can use the `webmentionsLoader` in your content configuration at `src/content/config.ts`:
```typescript
import { defineCollection } from "astro:content";
import { webmentionsLoader } from "webmentions-loader";
const webmentions = defineCollection({
loader: webmentionsLoader({
apiKey: WEBMENTIONS_IO_API_KEY,
domain: WEBSITE_DOMAIN
})
});
export const collections = { webmentions };
```
You can then use these like any other content collection in Astro:
```astro
---
import { getCollection } from "astro:content";
import type { Webmention, WebmentionProperty } from "webmentions-loader";
const webmentions : Webmention[] = getCollection("webmentions").map(wm => wm.data);
const pageWebmentions : Webmention[] = webmentions.filter(wm => wm.target == Astro.url.toString());
const pageLikes : Webmention[] = pageWebmentions.filter(wm => wm.property == WebmentionProperty.LikeOf);
---
...
{{ pageLikes.length }} Likes
...
```
## Options
The `webmentionsLoader` function takes an options object with the following structure:
```text
{
apiKey: string,
domain: string,
incremental?: boolean
}
```
| Property | Description |
|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `apiKey` | The [webmentions.io](https://webmentions.io) API key for your account. |
| `domain` | The domain of the site to fetch webmentions for (as configured in webmentions.io). |
| `incremental` | If `true`, the loader will only fetch new webmentions since the last build. Otherwise the loader will fetch all webmentions on every build. The default is `false`. |
## Type Information
The loader will return an array of `Webmention` objects, each with the following data structure:
### `Webmention`
```typescript
export type Webmention = {
id: number;
type: string;
author: WebmentionAuthor;
url: string;
content: WebmentionContent;
published: Date;
received: Date;
source: string;
target: string;
property: WebmentionProperty;
isPrivate: boolean;
}
```
### `WebmentionAuthor`
```typescript
export type WebmentionAuthor = {
type: string;
name: string;
url: string;
photo: string;
}
```
### `WebmentionContent`
```typescript
export type WebmentionContent = {
text: string;
html: string;
}
```
### `WebmentionProperty`
```typescript
export enum WebmentionProperty {
InReplyTo = 'in-reply-to',
LikeOf = 'like-of',
RepostOf = 'repost-of',
BookmarkOf = 'bookmark-of',
MentionOf = 'mention-of',
RSVP = 'rsvp'
}
```
TypeScript types for all of the above can be imported from the `webmentions-loader` package.
```typescript
import type { Webmention, WebmentionAuthor, WebmentionContent, WebmentionProperty } from 'webmentions-loader'
```