パスワード保護された投稿を表示する

---
import { cms } from '../../lib/cms';
const { items } = await cms.posts.list('news', { perPage: 20 });
---
<ul>
  {items.map((p) => (
    <li>
      <a href={`/news/${p.slug}`}>{p.title}</a>
      {p.is_password_protected && <span aria-label="パスワード保護">🔒</span>}
    </li>
  ))}
</ul>

const post = await cms.posts.get('news', slug);

if (post.body === null) {
  // 保護中でパスワード未照合。本文は返っていない。
  // → is_password_protected は true。パスワード入力フォームを表示する。
} else {
  // 保護なし（またはサイト設定で保護OFF）。本文はそのまま使える。
  const html = renderProseMirror(post.body);
}

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

async function revealBody(slug: string, password: string): Promise<string> {
  try {
    const post = await cms.posts.unlock('news', slug, password);
    // 照合成功。body が入って返る。
    return post.body ? renderProseMirror(post.body) : '';
  } catch (err) {
    if (err instanceof ShareDanCmsApiError) {
      if (err.isUnauthorized) throw new Error('パスワードが違います');          // 401 E001006
      if (err.isRateLimited) throw new Error(`しばらく待ってから再試行してください（${err.retryAfter ?? '数分'}秒）`); // 429 E001007
      if (err.isNotFound) throw new Error('記事が見つかりません');               // 404
    }
    throw err;
  }
}

---
// src/pages/news/[slug].astro（SSG・ビルド時）
import { cms } from '../../lib/cms';
import { renderProseMirror } from '@sharedan/cms-sdk';

export async function getStaticPaths() {
  const { items } = await cms.posts.list('news', { perPage: 100 });
  return items.map((p) => ({ params: { slug: p.slug }, props: { post: p } }));
}

const { post } = Astro.props;               // 一覧由来＝本文は無い（軽量）
const detail = await cms.posts.get('news', post.slug);
const locked = detail.body === null;        // 保護中＝ビルド時に本文を焼けない
const html = locked ? '' : renderProseMirror(detail.body!);
---
<article>
  <h1>{detail.title}</h1>
  {locked ? (
    <form data-unlock data-slug={post.slug}>
      <input type="password" name="password" autocomplete="off" required />
      <button type="submit">本文を表示</button>
      <p data-unlock-error hidden></p>
    </form>
  ) : (
    <div set:html={html} />
  )}
  <div data-unlock-body></div>
</article>

<script>
  import { ShareDanCmsClient, ShareDanCmsApiError, renderProseMirror } from '@sharedan/cms-sdk';

  // 鍵はブラウザに出さない。同一オリジンのプロキシ（cms-proxy.php）がサーバー側で付与する。
  const cms = new ShareDanCmsClient({
    baseUrl: `${location.origin}/cms-proxy.php`,
    apiKey: 'via-proxy',
    siteCode: 'via-proxy',
  });

  document.querySelector('[data-unlock]')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.currentTarget as HTMLFormElement;
    const slug = form.dataset.slug!;
    const password = new FormData(form).get('password') as string;
    const err = form.querySelector('[data-unlock-error]') as HTMLElement;
    try {
      const post = await cms.posts.unlock('news', slug, password);
      const html = post.body ? renderProseMirror(post.body) : '';
      document.querySelector('[data-unlock-body]')!.innerHTML = html;
      form.remove();
    } catch (ex) {
      err.hidden = false;
      err.textContent =
        ex instanceof ShareDanCmsApiError && ex.isRateLimited
          ? '試行回数が多すぎます。しばらく待ってください。'
          : 'パスワードが違います。';
    }
  });
</script>