投稿のプレビューを表示する

https://www.example.com/preview/posts/news/?slug={SLUG}&token={PREVIEW_TOKEN}

curl -i \
  -H "X-API-KEY: <APIキー>" \
  -H "X-SITE-CODE: <サイトコード>" \
  -H "X-PREVIEW-TOKEN: pv_8f32d7a8f9a34e2c1b0d5e6f7a8b9c0d" \
  "https://api.cms.sharedan.co.jp/api/v1/posts/news/new-office-opening/preview"

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

// プレビューURL（.../preview/posts/news/?slug=...&token=...）の
// クエリから取り出した slug / token をそのまま渡す。
async function loadPreview(postType: string, slug: string, token: string) {
  try {
    // 下書き版（PostDetail）。形状は公開版 get() と完全に同一。
    const post = await cms.posts.getPreview(postType, slug, token);
    return post.body ? renderProseMirror(post.body) : '';
  } catch (err) {
    if (err instanceof ShareDanCmsApiError && err.isNotFound) {
      // トークンが不正／期限切れ（既定24h）／失効／対象不一致はすべて 404 に統一される。
      throw new Error('プレビューURLが無効か、有効期限が切れています');
    }
    throw err;
  }
}

---
// src/pages/preview/posts/news/index.astro
// CMSのプレビューURLテンプレートがこのページを指す:
//   https://<あなたのサイト>/preview/posts/news/?slug={SLUG}&token={PREVIEW_TOKEN}
// token は実行時にしか決まらないため、ここでは本文を焼かずガワだけを静的出力する。
---
<html lang="ja">
  <head>
    <!-- プレビューは検索エンジンにインデックスさせない（必須） -->
    <meta name="robots" content="noindex, nofollow" />
    <title>プレビュー</title>
  </head>
  <body>
    <div class="preview-banner">これは下書き（未公開）の内容です。</div>
    <article id="preview-root">プレビューを読み込んでいます…</article>

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

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

      const root = document.getElementById('preview-root')!;

      async function render() {
        const q = new URLSearchParams(location.search);
        const slug = q.get('slug');
        const token = q.get('token');
        if (!slug || !token) {
          root.textContent = 'プレビューURLが不正です。';
          return;
        }
        try {
          const post = await cms.posts.getPreview('news', slug, token);
          root.innerHTML = post.body ? renderProseMirror(post.body) : '';
          if (post.title) document.title = `${post.title}（プレビュー）`;
        } catch (err) {
          root.textContent =
            err instanceof ShareDanCmsApiError && err.isNotFound
              ? 'プレビューURLが無効か、有効期限が切れています。'
              : 'プレビューの取得に失敗しました。';
        }
      }
      render();
    </script>
  </body>
</html>