# Astro

> Static-first integration with Astro using getStaticPaths and on-demand fetching.

## 1. Install

```bash
npm install mentionwell-reader
```

## 2. Reader

```ts
// src/lib/blogoto.ts
import { getBlogPostsViaApi, getBlogPostViaApi, getAllBlogSlugsViaApi } from "mentionwell-reader/api";

export const config = {
  apiUrl: import.meta.env.MENTIONWELL_API_URL,
  siteSlug: import.meta.env.MENTIONWELL_SITE_SLUG,
  apiKey: import.meta.env.MENTIONWELL_API_KEY
};

export const listPosts = (page = 1, perPage = 24) => getBlogPostsViaApi(config, page, perPage);
export const getPost = (slug: string) => getBlogPostViaApi(config, slug);
export const allSlugs = () => getAllBlogSlugsViaApi(config);
```

## 3. Index

```astro
---
// src/pages/blog/index.astro
import { listPosts } from "../../lib/blogoto";
const { posts } = await listPosts(1, 24);
---
<ul>
  {posts.map((post) => (
    <li><a href={`/blog/${post.slug}`}>{post.title}</a></li>
  ))}
</ul>
```

## 4. Detail

```astro
---
// src/pages/blog/[slug].astro
import { getPost, allSlugs } from "../../lib/blogoto";

export async function getStaticPaths() {
  const slugs = await allSlugs();
  return slugs.map((slug) => ({ params: { slug } }));
}

const post = await getPost(Astro.params.slug);
if (!post) return Astro.redirect("/404");
---
<article>
  <h1>{post.title}</h1>
  <Fragment set:html={post.html} />
</article>
```


---

Canonical URL: https://mentionwell.com/docs/frameworks/astro
Live HTML version: https://mentionwell.com/docs/frameworks/astro
Section: Quickstarts by stack
Site index for AI ingestion: https://mentionwell.com/llms.txt
Full reference: https://mentionwell.com/llms-full.txt