---
title: "Extensions"
description: "Add SSE, WebSockets, file downloads, and more."
thumbnail: "docs/extensions.svg"
---

import { getFolder } from '../../lib/content';
import FinderLink from '../../components/FinderLink.astro';

export const folder = await getFolder('extensions');
export const CATEGORY_ORDER = ['Networking', 'Performance', 'UX', 'Swap behaviors', 'Compatibility'];
export const grouped = CATEGORY_ORDER.map(category => ({
    category,
    items: folder.files.filter(f => f.frontmatter.category === category).map(f => ({
        title: f.frontmatter.title,
        url: f.url,
        description: f.frontmatter.description,
        icon: f.frontmatter.icon,
    })),
})).filter(g => g.items.length > 0);

<div class="not-prose">
    {grouped.map(group => (
        <section class="mt-10 first:mt-4">
            <h2 id={group.category.toLowerCase().replace(/\s+/g, '-')}
                class="flex items-baseline gap-2.5 mb-3 scroll-mt-[calc(var(--header-height)+var(--construction-banner-height,0px)+2rem)]">
                <a href={`#${group.category.toLowerCase().replace(/\s+/g, '-')}`}
                   class="text-base font-semibold text-neutral-800 dark:text-neutral-100 no-underline interact:underline">
                    {group.category}
                </a>
            </h2>
            <div class="flex flex-col gap-0.5">
                {group.items.map(item => (
                    <FinderLink href={item.url}>
                        {item.icon && <i class={`${item.icon} size-5 shrink-0 -translate-y-px group-interact/link:text-white dark:group-interact/link:text-black transition`}></i>}
                        <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-5 flex-1 min-w-0">
                            <span class="text-sm font-mono font-medium sm:min-w-[22ch]">{item.title}</span>
                            {item.description && (
                                <span class="text-sm text-neutral-650 dark:text-neutral-350 group-interact/link:text-white dark:group-interact/link:text-black transition">{item.description}</span>
                            )}
                        </div>
                    </FinderLink>
                ))}
            </div>
        </section>
    ))}
</div>
