astro-spearly

Spearly CMS の REST API を Astro から扱いやすくするための integration / runtime ヘルパーです。spearlyIntegration() を導入すると、アプリ全体で Spearly データの取得やフォーム送信を簡単に行えます。

インストール

npm install astro-spearly
# または
pnpm add astro-spearly

Astro への組み込み

astro.config.mjs に integration を追加し、API キーなどを環境変数で渡します。

import { defineConfig } from 'astro/config';
import spearly from 'astro-spearly';

export default defineConfig({
  integrations: [
    spearly()
  ]
});

環境変数例:

SPEARLY_API_KEY=xxx
SPEARLY_PROJECT_ID=yyy
SPEARLY_PREVIEW_TOKEN=optional

ページでの利用例

一覧ページ (src/pages/blog/index.astro)

---
import { listEntries } from 'spearly:client';

const { data: posts } = await listEntries({
  contentGroupId: 'blog',
  limit: 10,
  orderBy: '-published_at'
});
---

<ul>
  {posts.map((post) => (
    <li>
      <a href={`/blog/${post.slug}/`}>{post.title}</a>
    </li>
  ))}
</ul>

詳細ページ (src/pages/blog/[slug].astro)

---
import { getEntry } from 'spearly:client';

const { slug } = Astro.params;
const entry = await getEntry({ slug });
---

<article>
  <h1>{entry.title}</h1>
  <pre>{JSON.stringify(entry.fields, null, 2)}</pre>
</article>

getStaticPaths での利用 (src/pages/blog/[slug].astro)

export async function getStaticPaths() {
  const { data } = await listEntries({ contentGroupId: 'blog', limit: 100 });
  return data.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry }
  }));
}

任意設定

spearly({
  apiKey: process.env.SPEARLY_API_KEY,
  projectId: process.env.SPEARLY_PROJECT_ID,
  defaultCacheTtlMs: 60_000,
  previewToken: process.env.SPEARLY_PREVIEW_TOKEN
});

テスト & ビルド

npm test      # Vitest
npm run build # tsup でビルド