Astroで作る — 投稿一覧と詳細ページ

import { ShareDanCmsClient } from '@sharedan/cms-sdk';

export const cms = new ShareDanCmsClient({
  baseUrl: 'https://api.cms.sharedan.co.jp',
  apiKey: import.meta.env.CMS_API_KEY,
  siteCode: import.meta.env.CMS_SITE_CODE,
});

import type { PostSummary } from '@sharedan/cms-sdk';
import { cms } from './cms';

// 公開APIの一覧は1回に最大100件。meta.last_page まで page を進めて全件を集める
export async function fetchAllPosts(postType: string): Promise<PostSummary[]> {
  const items: PostSummary[] = [];
  let page = 1;

  while (true) {
    const res = await cms.posts.list(postType, { page, perPage: 100 });
    items.push(...res.items);
    if (page >= res.meta.last_page) break;
    page += 1;
  }

  return items;
}

---
import type { GetStaticPaths } from 'astro';
import { fetchAllPosts } from '../../lib/fetchAllPosts';

export const getStaticPaths = (async ({ paginate }) => {
  const posts = await fetchAllPosts('news');
  // 20件ずつに分け、/news・/news/2・/news/3 … を生成する
  return paginate(posts, { pageSize: 20 });
}) satisfies GetStaticPaths;

const { page } = Astro.props;
---
<ul>
  {page.data.map((p) => (
    <li>
      <a href={`/news/${p.slug}`}>{p.title}</a>
      <small>{p.category.name}</small>
    </li>
  ))}
</ul>
<nav>
  {page.url.prev && <a href={page.url.prev}>前へ</a>}
  <span>{page.currentPage} / {page.lastPage}</span>
  {page.url.next && <a href={page.url.next}>次へ</a>}
</nav>

---
import { cms } from '../../lib/cms';
import { fetchAllPosts } from '../../lib/fetchAllPosts';
import { renderProseMirror } from '@sharedan/cms-sdk';

export async function getStaticPaths() {
  // 100件を超えても全投稿の詳細ページを作るため、全件を取得してスラッグを並べる
  const posts = await fetchAllPosts('news');
  return posts.map((p) => ({ params: { slug: p.slug } }));
}

const post = await cms.posts.get('news', Astro.params.slug!);
const html = renderProseMirror(post.body);
---
<article>
  <h1>{post.title}</h1>
  <div set:html={html} />
</article>