Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rosnovsky/astro-mastodon
🐘 🚀 Mastodon embeds and mentions for Astro websites
https://github.com/rosnovsky/astro-mastodon
astro astro-integration markdown mdx mdx-js react
Last synced: about 1 month ago
JSON representation
🐘 🚀 Mastodon embeds and mentions for Astro websites
- Host: GitHub
- URL: https://github.com/rosnovsky/astro-mastodon
- Owner: rosnovsky
- License: mit
- Created: 2024-02-13T19:10:45.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T17:47:57.000Z (4 months ago)
- Last Synced: 2024-10-01T05:21:35.939Z (about 2 months ago)
- Topics: astro, astro-integration, markdown, mdx, mdx-js, react
- Language: TypeScript
- Homepage:
- Size: 3.24 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Astro Mastodon
Easily embed Mastodon posts into your Astro blog posts.
## Features
- Works with `.md`, `.mdx` and `.astro` files
- Embed posts from Mastodon (other ActivityPub embeds are coming!)
- Embed posts with plain text, images, link cards, videos, embedded YouTube players, gifs, and more!
- No client-side JavaScript, cards are generated at build time
## How to use
Install the package:
```shell
pnpm add astro-mastodon
```
Update your `astro.config.mjs` file:
```js
// Other imports
import { remarkMastodonEmbed } from "astro-mastodon";
export default defineConfig({
// ...
markdown: {
remarkPlugins: [
remarkMastodonEmbed,
// other plugins
],
},
// ...
});
```
Add `import "astro-mastodon/dist/output.css"` at the top of your post template file (e.g. `src/pages/blog/[slug]/index.astro`)
In your markdown file, add post "mention":
```markdown
---
title: Embeds FTW!
---
This is an example of an embedded Mastodon post:
`@[email protected]:109860863149734322`
```
The anatomy of the embed is as follows:
`@[email protected]:postId`
## Development
Clone the repo and run
```sh
pnpm i
pnpm dev
```
Open `http://localhost:4321` and have fun!
## Screenshots
