astro-mastodon
TypeScript icon, indicating that this package has built-in type declarations

0.3.2Β β€’Β PublicΒ β€’Β Published

Astro Mastodon

Easily embed Mastodon posts into your Astro blog posts.

Example in Dark Mode

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:

pnpm add astro-mastodon

Update your astro.config.mjs file:

// 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":

---
title: Embeds FTW!
---

This is an example of an embedded Mastodon post:

`@rosnovsky@lounge.town:109860863149734322`

The anatomy of the embed is as follows:

@username@instance.domain:postId

Development

Clone the repo and run

pnpm i
pnpm dev

Open http://localhost:4321 and have fun!

Screenshots

Example in Light Mode

Example with photos

Example in Light Mode

Package Sidebar

Install

npm i astro-mastodon

Weekly Downloads

1

Version

0.3.2

License

MIT

Unpacked Size

90.7 kB

Total Files

46

Last publish

Collaborators

  • rosnovsky