Add a Sätteri tab in the remark/rehype recipes

src/components/tabs/MarkdownProcessorTabs.astro

@@ -0,0 +1,12 @@
+---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+---
+
+<Tabs syncKey="markdown-processor">
+	<TabItem label="Sätteri">
+		<slot name="satteri" />
+	</TabItem>
+	<TabItem label="Unified">
+		<slot name="unified" />
+	</TabItem>
+</Tabs>

src/content/docs/en/guides/markdown-content.mdx

@@ -9,8 +9,9 @@ import Since from '~/components/Since.astro';
 import { FileTree } from '@astrojs/starlight/components';
 import RecipeLinks from "~/components/RecipeLinks.astro";
 import ReadMore from '~/components/ReadMore.astro';
-import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import MarkdownProcessorTabs from '~/components/tabs/MarkdownProcessorTabs.astro';
 
 [Markdown](https://daringfireball.net/projects/markdown/) is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for Markdown files that can also include [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) (or [TOML](https://toml.io)) to define custom properties such as a title, description, and tags.
 
@@ -170,8 +171,8 @@ You can customize these heading IDs with a [Markdown processor](#choosing-a-mark
 
 Astro injects `id` attributes after your custom plugins have run, so any ID set by a plugin is preserved. If one of your custom plugins needs to access the IDs injected by Astro, you can import Astro's heading ids plugin and place it before any plugins that rely on it:
 
-<Tabs syncKey="markdown-processor">
-  <TabItem label="Sätteri">
+<MarkdownProcessorTabs>
+  <Fragment slot="satteri">
     ```js title="astro.config.mjs" ins={2-3, 9}
     import { defineConfig } from 'astro/config';
     import { satteri, satteriHeadingIdsPlugin } from '@astrojs/markdown-satteri';
@@ -188,8 +189,8 @@ Astro injects `id` attributes after your custom plugins have run, so any ID set
       },
     });
     ```
-  </TabItem>
-  <TabItem label="Unified">
+  </Fragment>
+  <Fragment slot="unified">
     ```js title="astro.config.mjs" ins={2-3, 9}
     import { defineConfig } from 'astro/config';
     import { unified, rehypeHeadingIds } from '@astrojs/markdown-remark';
@@ -206,8 +207,8 @@ Astro injects `id` attributes after your custom plugins have run, so any ID set
       },
     });
     ```
-  </TabItem>
-</Tabs>
+  </Fragment>
+</MarkdownProcessorTabs>
 
 ## Markdown Plugins
 

src/content/docs/en/recipes/external-links.mdx

@@ -1,68 +1,137 @@
 ---
 title: Add icons to external links
-description: Learn how to install a rehype plugin to add icons to external links in your Markdown files.
+description: Learn how to use a Markdown plugin to add icons to external links in your Markdown files.
 i18nReady: true
 type: recipe
 ---
 import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import MarkdownProcessorTabs from '~/components/tabs/MarkdownProcessorTabs.astro';
 
-Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site.
+Using a Markdown plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds an icon to the end of each external link, so that visitors will know they are leaving your site.
 
 ## Prerequisites
 
 - An Astro project using Markdown for content pages.
 
 ## Recipe
 
-<Steps>
-1. Install both the [`rehype-external-links`](https://www.npmjs.com/package/rehype-external-links) plugin and [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark).
+<MarkdownProcessorTabs>
+  <Fragment slot="satteri">
+    <Steps>
+    1. Install both [`@astrojs/markdown-satteri`](https://www.npmjs.com/package/@astrojs/markdown-satteri) and [`satteri`](https://www.npmjs.com/package/satteri):
 
-    <PackageManagerTabs>
-        <Fragment slot="npm">
-        ```shell
-        npm install rehype-external-links @astrojs/markdown-remark
+        <PackageManagerTabs>
+            <Fragment slot="npm">
+            ```shell
+            npm install @astrojs/markdown-satteri satteri
+            ```
+            </Fragment>
+            <Fragment slot="pnpm">
+            ```shell
+            pnpm add @astrojs/markdown-satteri satteri
+            ```
+            </Fragment>
+            <Fragment slot="yarn">
+            ```shell
+            yarn add @astrojs/markdown-satteri satteri
+            ```
+            </Fragment>
+          </PackageManagerTabs>
+
+    2. Create a [Sätteri `hast` plugin](https://satteri.bruits.org/docs/plugins/#hast-plugins) that adds an icon if the link starts with `http`:
+
+        ```ts title="src/hast/hast-external-links.ts"
+        import { defineHastPlugin } from 'satteri';
+
+        export const hastExternalLinks = defineHastPlugin({
+          name: "hast-external-links",
+          element: {
+            filter: ["a"],
+            visit(node, context) {
+              if (node.properties.href?.startsWith("http")) {
+                context.appendChild(node, {
+                  type: "element",
+                  tagName: "span",
+                  properties: { ariaHidden: "true" },
+                  children: [
+                    {
+                      type: "text",
+                      value: "🔗",
+                    },
+                  ],
+                });
+              }
+            },
+          },
+        });
         ```
-        </Fragment>
-        <Fragment slot="pnpm">
-        ```shell
-        pnpm add rehype-external-links @astrojs/markdown-remark
+
+    3. Configure the plugin in your `astro.config.mjs` file.
+
+        Import `satteri()` from `@astrojs/markdown-satteri` and define it as the Markdown processor to [define custom Sätteri plugins](/en/guides/markdown-content/#using-sätteri-plugins-and-features). Then, pass to `hastPlugins` an array containing your imported `hastExternalLinks` plugin.
+
+        ```js title="astro.config.mjs"
+        import { satteri } from '@astrojs/markdown-satteri';
+        import { defineConfig } from 'astro/config';
+        import { hastExternalLinks } from './src/hast/hast-external-links';
+
+        export default defineConfig({
+          markdown: {
+            processor: satteri({
+              hastPlugins: [hastExternalLinks],
+            }),
+          },
+        });
         ```
-        </Fragment>
-        <Fragment slot="yarn">
-        ```shell
-        yarn add rehype-external-links @astrojs/markdown-remark
+    </Steps>
+  </Fragment>
+  <Fragment slot="unified">
+    <Steps>
+    1. Install both the [`rehype-external-links`](https://www.npmjs.com/package/rehype-external-links) plugin and [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark).
+
+        <PackageManagerTabs>
+            <Fragment slot="npm">
+            ```shell
+            npm install rehype-external-links @astrojs/markdown-remark
+            ```
+            </Fragment>
+            <Fragment slot="pnpm">
+            ```shell
+            pnpm add rehype-external-links @astrojs/markdown-remark
+            ```
+            </Fragment>
+            <Fragment slot="yarn">
+            ```shell
+            yarn add rehype-external-links @astrojs/markdown-remark
+            ```
+            </Fragment>
+          </PackageManagerTabs>
+
+    2. Configure the plugin in your `astro.config.mjs` file.
+
+        Import `unified()` and define it as the Markdown processor to [support remark plugins](/en/guides/markdown-content/#using-remark-and-rehype-plugins). Then, pass to `rehypePlugins` an array containing your imported `rehypeExternalLinks` plugin and an options object with a `content` property. Set this property's `type` to `text` if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property `type` to	`raw`.
+
+        ```js title="astro.config.mjs"
+        import { unified } from '@astrojs/markdown-remark';
+        import { defineConfig } from 'astro/config';
+        import rehypeExternalLinks from 'rehype-external-links';
+
+        export default defineConfig({
+          markdown: {
+            processor: unified({
+              rehypePlugins: [
+                [
+                  rehypeExternalLinks,
+                  {
+                    content: { type: 'text', value: ' 🔗' }
+                  }
+                ],
+              ]
+            }),
+          },
+        });
         ```
-        </Fragment>
-      </PackageManagerTabs>
-
-2. Configure the plugin in your `astro.config.mjs` file.
-
-    Import `unified()` and define it as the Markdown processor to [support remark plugins](/en/guides/markdown-content/#using-remark-and-rehype-plugins). Then, pass to `rehypePlugins` an array containing your imported `rehypeExternalLinks` plugin and an options object with a `content` property. Set this property's `type` to `text` if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property `type` to	`raw`.
-
-    ```js title="astro.config.mjs"
-    import { unified } from '@astrojs/markdown-remark';
-    import { defineConfig } from 'astro/config';
-    import rehypeExternalLinks from 'rehype-external-links';
-
-    export default defineConfig({
-      // ...
-      markdown: {
-        processor: unified({
-          rehypePlugins: [
-            [
-              rehypeExternalLinks,
-              {
-                content: { type: 'text', value: ' 🔗' }
-              }
-            ],
-          ]
-        }),
-      },
-    });
-    ```
-
-    :::note
-      The value of the `content` property is [not represented in the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). As such, it's best to make clear that the link is external in the surrounding content, rather than relying on the icon alone.
-    :::
-</Steps>
+    </Steps>
+  </Fragment>
+</MarkdownProcessorTabs>