1. Install
npm install mentionwell-reader
2. Reader
// 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
---
// 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
---
// 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>
Read this page as Markdown →