Mentionwell

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>