diff options
Diffstat (limited to 'src/components/QuestionSummary.astro')
| -rw-r--r-- | src/components/QuestionSummary.astro | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/QuestionSummary.astro b/src/components/QuestionSummary.astro new file mode 100644 index 0000000..96ec6f8 --- /dev/null +++ b/src/components/QuestionSummary.astro @@ -0,0 +1,88 @@ +--- +/** + * QuestionSummary — 一般質問の「まとめ」表と FAQPage JSON-LD を単一のデータ源から生成。 + * + * ## 使い方(新規一般質問ページを作成する際のルール) + * + * 1. Markdown の表(| 質問 | 答弁概要 |)は **書かない**。 + * 2. 代わりにこのコンポーネントを import して使う: + * + * ```mdx + * import QuestionSummary from '@/components/QuestionSummary.astro'; + * + * <QuestionSummary + * headline="ページのタイトル" + * datePublished="2025-06-06" + * qa={[ + * { question: "① 質問文", answer: "答弁テキスト", anchor: "-見出し名" }, + * { question: "② 質問文", answer: "答弁テキスト", anchor: "-見出し名" }, + * ]} + * /> + * ``` + * + * 3. 表の更新は qa 配列を編集するだけ。表表示と JSON-LD が自動で同期される。 + * + * - question: 表の「質問」列の内容(番号付きで) + * - answer: 表の「答弁概要」列のテキスト(リンク構文なしのプレーンテキスト) + * - anchor: 詳細セクションへのアンカー(見出しから自動生成されるID) + * - headline: ページのタイトル(JSON-LD の headline に使われる) + * - datePublished: 質問日(ISO 8601: YYYY-MM-DD) + */ + +export interface QA { + /** 質問文(例: "通報後に作成する文書と保存期間は。") */ + question: string; + /** 答弁概要のテキスト(リンク構文を含まないプレーンテキスト) */ + answer: string; + /** 詳細セクションへのアンカー(例: "-通報後に作成する文書と保存期間は") */ + anchor: string; +} + +export interface Props { + /** Q&A の配列 */ + qa: QA[]; + /** ページの表題 */ + headline?: string; + /** 公開日(ISO 8601形式: YYYY-MM-DD) */ + datePublished?: string; +} + +const { qa, headline, datePublished } = Astro.props; +--- + +{ + qa.length > 0 && ( + <script type="application/ld+json" is:inline set:html={JSON.stringify({ + "@context": "https://schema.org", + "@type": "FAQPage", + ...(headline && { headline }), + ...(datePublished && { datePublished }), + "mainEntity": qa.map((item) => ({ + "@type": "Question", + "name": item.question, + "acceptedAnswer": { + "@type": "Answer", + "text": item.answer, + }, + })), +})} /> + ) +} + +<!-- まとめ表(人間向け) --> +<table> + <thead> + <tr> + <th>質問</th> + <th>答弁概要(クリックで詳細)</th> + </tr> + </thead> + <tbody> + {qa.map((item) => ( + <tr> + <td>{item.question}</td> + <td><a href={`#${item.anchor}`}>{item.answer}</a></td> + </tr> + ))} + </tbody> +</table> |
