Add Mastodon support

.gitignore

@@ -2,6 +2,9 @@
 dist/
 .output/
 
+# generated types
+.astro/
+
 # dependencies
 node_modules/
 

demo/src/pages/index.astro

@@ -19,6 +19,9 @@ import Base from '../layouts/Base.astro';
 				><code>&lt;LinkPreview/&gt;</code> component examples</a
 			>
 		</li>
+		<li>
+			<a href="/mastodon"><code>&lt;Toot/&gt;</code> component examples</a>
+		</li>
 	</ul>
 	<h2>Other examples</h2>
 	<ul>

demo/src/pages/integration.mdx

@@ -23,3 +23,5 @@ https://vimeo.com/32001208
 http://www.youtube.com/watch?v=Hoe-woAhq_k
 
 https://astro.build/blog/welcome-world/
+
+https://mastodon.social/@sarah11918/112937553683639459

demo/src/pages/mastodon.astro

@@ -0,0 +1,37 @@
+---
+import * as Component from 'astro-embed';
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Mastodon component examples">
+	<p>Text-only toot</p>
+	<Component.Toot id="https://mastodon.social/@sarah11918/112937553683639459" />
+	<p>Toot with a preview card with an image</p>
+	<Component.Toot id="https://mastodon.social/@sarah11918/112954791910873136" />
+	<p>Toot with a preview card with no image</p>
+	<Component.Toot id="https://fosstodon.org/@yabellini/112905997660025406" />
+	<p>Toot with an image media attachment</p>
+	<Component.Toot id="https://mastodon.social/@sarah11918/112938341053568673" />
+	<p>Toot with a video media attachment</p>
+	<Component.Toot
+		id="https://fosstodon.org/@astro@webtoo.ls/112956966389849669"
+	/>
+	<p>Toot with a gifv media attachment</p>
+	<Component.Toot id="https://m.webtoo.ls/@astro/112914830775250637" />
+	<p>
+		Toot with an audio media attachment and an account name with custom emojis
+	</p>
+	<Component.Toot id="https://nahe.social/@yuliyan/112948405749089071" />
+	<p>Toot with custom emojis</p>
+	<Component.Toot id="https://mastodon.social/@onokoto/112881577072270247" />
+	<p>Toot in RTL language</p>
+	<Component.Toot
+		id="https://mastodon.social/@Panahifarah@khiar.net/112123163633804419"
+	/>
+</Base>
+
+<style>
+	p {
+		text-align: center;
+	}
+</style>

docs/.gitignore

@@ -1,7 +1,5 @@
 # build output
 dist/
-# generated types
-.astro/
 
 # dependencies
 node_modules/

docs/src/assets/theme.css

@@ -13,6 +13,7 @@
 	--sl-color-black: #19171c;
 
 	--tc-border-color: var(--sl-color-gray-5);
+	--mc-border-color: var(--sl-color-gray-5);
 }
 /* Light mode colors. */
 :root[data-theme='light'] {

docs/src/content/docs/components/_examples/StyledToot.astro

@@ -0,0 +1,22 @@
+---
+import { Toot } from '@astro-community/astro-embed-mastodon';
+---
+
+<div class="styled-toot">
+	<Toot id="https://m.webtoo.ls/@astro/112616562969236130" />
+</div>
+
+<style>
+	.styled-toot :global(.mastodon-toot) {
+		background: floralwhite;
+		color: darkblue;
+		font-family: cursive;
+		font-size: 1.25rem;
+		border: 0;
+	}
+
+	.styled-toot :global(.mastodon-toot a) {
+		color: purple;
+		font-weight: bold;
+	}
+</style>

docs/src/content/docs/components/mastodon.mdx

@@ -0,0 +1,98 @@
+---
+title: Toot
+description: Learn how to use the Astro Embed Toot component to embed Mastodon posts in your website
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tweet } from '@astro-community/astro-embed-twitter';
+import { Toot } from '@astro-community/astro-embed-mastodon';
+
+The `<Toot>` component embeds posts from Mastodon in Astro projects.
+
+## Usage
+
+The `<Toot>` component generates a static Mastodon card for a single Toot using [Mastodon’s API](https://docs.joinmastodon.org/client/intro/).
+
+<Tabs>
+<TabItem label="Astro" icon="astro">
+```astro
+---
+import { Toot } from 'astro-embed';
+---
+
+<Toot id="https://m.webtoo.ls/@astro/112966069629573422" />
+```
+</TabItem>
+<TabItem label="MDX" icon="seti:markdown">
+```mdx
+import { Toot } from 'astro-embed';
+
+<Toot id="https://m.webtoo.ls/@astro/112966069629573422" />
+```
+</TabItem>
+</Tabs>
+
+The above code produces the following result:
+
+<div>
+	<Toot id="https://m.webtoo.ls/@astro/112966069629573422" />
+</div>
+
+:::note
+The `<Toot>` component styles are intentionally minimal.
+They will match the font styles of your surrounding content. See [“Styling the Toot component”](#styling-the-toot-component) below for more details.
+:::
+
+## Styling the Toot component
+
+By default the `<Toot>` card has minimal styling, which should adapt to your site’s font settings etc.
+
+You can customise it by targeting the `.mastodon-toot` class, for example:
+
+```css
+.mastodon-toot {
+	background: floralwhite;
+	color: darkblue;
+	font-family: cursive;
+	font-size: 1.25rem;
+	border: 0;
+}
+
+.mastodon-toot a {
+	color: purple;
+	font-weight: bold;
+}
+```
+
+The above styles would render `<Toot>` like this:
+
+import StyledToot from './_examples/StyledToot.astro';
+
+<StyledToot />
+
+### Custom properties API
+
+The `<Toot>` component also supports a minimal API for controlling its styles by setting some CSS custom properties.
+
+```css
+:root {
+	/* Control the padding inside the Mastodon card. */
+	--mc-padding: 1em;
+	/* Set the border color of the Mastodon card. */
+	--mc-border-color: #cfd9de;
+}
+```
+
+## Standalone installation
+
+If you only need the `<Toot>` component, you can install the package directly instead of the main `astro-embed` package:
+
+import { PackageManagers } from 'starlight-package-managers';
+
+<PackageManagers pkg="@astro-community/astro-embed-mastodon" />
+
+The `<Toot>` component can then be imported as:
+
+```js
+import { Toot } from '@astro-community/astro-embed-mastodon';
+```

docs/src/content/docs/getting-started.mdx

@@ -24,14 +24,16 @@ To use components in `.astro` files, import them in the component script and the
 ```astro
 ---
 // src/components/Example.astro
-import { Tweet, Vimeo, YouTube } from 'astro-embed';
+import { Toot, Tweet, Vimeo, YouTube } from 'astro-embed';
 ---
 
 <Tweet id="https://twitter.com/astrodotbuild/status/1512144306898976768" />
 
 <Vimeo id="https://vimeo.com/32001208" />
 
 <YouTube id="https://youtu.be/xtTy5nKay_Y" />
+
+<Toot id="https://mastodon.social/@sarah11918/112954791910873136" />
 ```
 
 ### In MDX files
@@ -44,7 +46,7 @@ When using the [Astro MDX integration](https://docs.astro.build/en/guides/integr
 title: My MDX page with embed components
 ---
 
-import { Tweet, Vimeo, YouTube } from 'astro-embed';
+import { Toot, Tweet, Vimeo, YouTube } from 'astro-embed';
 
 Hey look! I can embed a tweet _in Markdown_!
 
@@ -54,6 +56,10 @@ Vimeo and YouTube videos work too :-)
 
 <Vimeo id="https://vimeo.com/32001208" />
 <YouTube id="https://youtu.be/xtTy5nKay_Y" />
+
+And even Mastodon toots!
+
+<Toot id="https://mastodon.social/@sarah11918/112954791910873136" />
 ```
 
 ### Auto-embed URLs in MDX
@@ -67,6 +73,7 @@ Learn how to set up the integration in the [“Auto-embed URLs”](/integration/
 Astro Embed currently supports the following services:
 
 <CardGrid>
+	<LinkCard title="Mastodon" href="/components/mastodon/" />
 	<LinkCard title="Open Graph" href="/components/link-preview/" />
 	<LinkCard title="Twitter" href="/components/twitter/" />
 	<LinkCard title="Vimeo" href="/components/vimeo/" />

docs/src/content/docs/index.mdx

@@ -46,6 +46,14 @@ import { Icon, Card, CardGrid } from '@astrojs/starlight/components';
 
     </Card>
 
+    <Card title="Mastodon" icon="mastodon">
+
+    	Embed the contents of a Toot without client-side JavaScript.
+
+    	[Toot docs](/components/mastodon/)
+
+    </Card>
+
     <Card title="Link Preview" icon="seti:html">
 
     	Embed the Open Graph media and metadata for any URL in your page.

packages/astro-embed-integration/package.json

@@ -23,6 +23,7 @@
   "homepage": "https://astro-embed.netlify.app/integration",
   "dependencies": {
     "@astro-community/astro-embed-link-preview": "^0.2.0",
+    "@astro-community/astro-embed-mastodon": "^0.0.1",
     "@astro-community/astro-embed-twitter": "^0.5.4",
     "@astro-community/astro-embed-vimeo": "^0.3.6",
     "@astro-community/astro-embed-youtube": "^0.5.0",

packages/astro-embed-integration/remark-plugin.ts

@@ -3,11 +3,13 @@ import twitterMatcher from '@astro-community/astro-embed-twitter/matcher';
 import vimeoMatcher from '@astro-community/astro-embed-vimeo/matcher';
 import youtubeMatcher from '@astro-community/astro-embed-youtube/matcher';
 import linkPreviewMatcher from '@astro-community/astro-embed-link-preview/matcher';
+import mastodonMatcher from '@astro-community/astro-embed-mastodon/matcher';
 
 const matchers = [
 	[twitterMatcher, 'Tweet'],
 	[vimeoMatcher, 'Vimeo'],
 	[youtubeMatcher, 'YouTube'],
+	[mastodonMatcher, 'Toot'],
 	/** The generic link matcher must be last otherwise it will override other URLs. */
 	[linkPreviewMatcher, 'LinkPreview'],
 ] as const;