Mastodon Post

The <MastodonPost> component embeds posts from Mastodon in Astro projects.

Usage

The <MastodonPost> component generates a static card for a single post using Mastodon’s API.

Astro
MDX

---
import { MastodonPost } from 'astro-embed';
---

<MastodonPost id="https://m.webtoo.ls/@astro/112966069629573422" />

import { MastodonPost } from 'astro-embed';

<MastodonPost id="https://m.webtoo.ls/@astro/112966069629573422" />

The above code produces the following result:

Styling the MastodonPost component

Due to its relatively complex layout and content, the <MastodonPost> component uses Declarative Shadow DOM to isolate its markup from your site’s styles. You can override the default styles using custom properties and CSS parts.

astro-embed-mastodon::part(root) {
  --color: gray;
  --color-primary: darkblue;
  --color-secondary: purple;
  --color-link: purple;
  --background-color: floralwhite;
  --border-color: orange;
  --font-family: cursive;

  max-width: 400px;
}

/* Skew post author details in the header. */
astro-embed-mastodon::part(user) {
  transform: skew(-15deg, 0);
}

/* Hide preview card for links in a post. */
astro-embed-mastodon::part(preview-card) {
  display: none;
}

The above styles would render <MastodonPost> like this:

Light/dark theming support

The default styles make a best effort to adapt automatically to a site’s color theme.

By default, colors adapt to the user’s color scheme preference using a prefers-color-scheme media query.

In browsers that support the light-dark() CSS function, if your site sets the correct color-scheme values, <MastodonPost> will adapt to match the current theme even if it does not match system-level color scheme preferences.

Supporting a custom theme picker

If your site uses a theme picker to set the current theme and you need to support older browsers, you can add custom styles to control the color variables <MastodonPost> uses.

For example, if you use a data-theme="dark" attribute to enable dark mode on your site, configure colors when that is set:

[data-theme='dark'] astro-embed-mastodon::part(root) {
  --color: var(--color--dark);
  --color-primary: var(--color-primary--dark);
  --color-secondary: var(--color-secondary--dark);
  /* ... */
}

See “Custom properties API” below for a full list of available variables.

Custom properties API

The <MastodonPost> component supports the following API for controlling its styles with CSS custom properties.

:root {
  /* Control the padding inside the Mastodon card. */
  --padding: 1em;
  /* Set the corner-radius of elements in the Mastodon card. */
  --border-radius: 0.5em;
  /* Set the font family for text in the Mastodon card. */
  --font-family: inherit;

  /* Light mode color palette. */
  --color-scheme--light: light;
  --color--light: #292938;
  --color-primary--light: #000;
  --color-secondary--light: #45455f;
  --color-link--light: #5653ed;
  --background-color--light: #fff;
  --border-color--light: #cfd9de;
  --background-color-surface--light: #e8e6f0;
  --background-color-accent--light: #c6bfd9;

  /* Dark mode color palette. */
  --color-scheme--dark: dark;
  --color--dark: #cfd9de;
  --color-primary--dark: #f0f1ff;
  --color-secondary--dark: #8b8dac;
  --color-link--dark: #8886ff;
  --background-color--dark: #181821;
  --border-color--dark: #c8cdfe2e;
  --background-color-surface--dark: #6247e61a;
  --background-color-accent--dark: #c8cdfe14;
}

Component parts API

Common parts

All Mastodon embeds include the following parts which can be styled with the ::part() pseudo-element:

`::part(root)`

Selects the wrapper at the base of the component. Particularly useful for setting CSS variables that impact component styles.

`::part(header)`

The post header containing user details.

`::part(user)`

The post author’s details in the header.

Includes the following sub-parts: ::part(user-avatar), ::part(user-content), ::part(user-display-name), and ::part(user-account).

`::part(mastodon-logo)`

The Mastodon logo in the header.

`::part(content)`

The main text content of the post.

`::part(footer)`

The post footer containing the date.

Rich content parts

Depending on the content of a post, additional parts can be included for rich media:

`::part(attachments)`

Wrapper element around one or more media attachments (images, videos, audio).

You can target specific numbers of media attachments using ::part(attachments media-count-N) where N is the number of attachments, e.g. ::part(attachments media-count-3).

Includes one or more of the following sub-parts depending on what media was uploaded: ::part(image-attachment), ::part(video-attachment), and ::part(audio-attachment).

`::part(preview-card)`

Open Graph preview card for links shared in the post content.

Includes the following sub-parts:

::part(preview-card-image) or, if no image is available, ::part(preview-card-image-placeholder)
::part(preview-card-content)
::part(preview-card-provider-name)
::part(preview-card-title)
::part(preview-card-description)

For links with author attribution, the following additional sub-parts are included: ::part(preview-card-authors), ::part(preview-card-author), ::part(preview-card-author-avatar), ::part(preview-card-author-name).

`::part(quote)`

A quoted Mastodon post.

Includes the following sub-parts: ::part(quote-header), ::part(quote-avatar), ::part(quote-display-name), ::part(quote-username), ::part(quote-content), and ::part(subquote).

Standalone installation

If you only need the <MastodonPost> component, you can install the package directly instead of the main astro-embed package:

npm i @astro-community/astro-embed-mastodon

pnpm add @astro-community/astro-embed-mastodon

yarn add @astro-community/astro-embed-mastodon

The <MastodonPost> component can then be imported as:

import { MastodonPost } from '@astro-community/astro-embed-mastodon';