Astro

Install

npm install alap astro

Setup

The Astro adapter wraps the <alap-link> web component with typed .astro components.

---
import { AlapSetup, AlapLink } from 'alap/astro';
import config from '../alap-config';
---
<AlapSetup config={config} />

<p>Check out these <AlapLink query=".coffee">cafes</AlapLink>.</p>

The web component (<alap-link>) also works directly in Astro with zero extra code — it's a custom element, so Astro treats it as static HTML with a client-side script.

Components

<AlapSetup>

Prop	Type	Description
config	AlapConfig	The link configuration
configName	string	Named config slot (for multi-config)

<AlapLink>

Prop	Type	Description
query	string	Expression to evaluate
config	string	Named config to use
Any HTML attribute	—	Passed through to <alap-link>

Examples

Multi-config:

---
import { AlapSetup, AlapLink } from 'alap/astro';
import docsConfig from '../configs/docs-links';
import blogConfig from '../configs/blog-links';
---
<AlapSetup config={docsConfig} configName="docs" />
<AlapSetup config={blogConfig} configName="blog" />

<p>See the <AlapLink query=".api" config="docs">API docs</AlapLink>.</p>
<p>Or read <AlapLink query="@latest" config="blog">the latest post</AlapLink>.</p>

Direct web component (no Astro adapter):

---
import { registerConfig, defineAlapLink } from 'alap';
import config from '../alap-config';
---

<script>
  registerConfig(config);
  defineAlapLink();
</script>

<alap-link query=".coffee">cafes</alap-link>

Styling

Since the Astro adapter renders <alap-link> web components, styling works the same way — --alap-* custom properties and ::part() selectors. See Web Component for the full CSS reference.