なぜ必要なのか

記事中心のサイトに一部の操作機能を加えたい。読むだけの本文まで大きなアプリとして準備すると余計な負担が生まれます。

どう解決するのか

Markdown記事3件とレイアウト1つから開始します。次へで一覧と記事HTML3件を生成し、ホスティング経由でブラウザーへ届けます。任意の保存アイランドを有効にしても本文は読めます。レイアウト欠落はビルドを停止します。静的ファイルだけでは個人の保存記録を維持できません。前へは前段階、リセット・再読み込みは初期状態に戻ります。

Astro: 概念シミュレーション

概念シミュレーション

Astro

次へでソース → ビルド → 出力 → ホスト → ブラウザーをたどります。

  1. 01 Markdown記事3件 + レイアウト
    • A17.md
    • B04.md
    • C99.md
    • 共通レイアウト
  2. 02 Astroコンポーネントのビルド

    待機

  3. 03 生成HTMLファイル 0

    index.html · A17.html · B04.html · C99.html

  4. 04 静的ホスト · ファイル公開
  5. 05 ブラウザー · 記事3件を読む

Markdown記事3件 + レイアウト

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

どんな考え方なのか

AstroはコンテンツをHTMLに描画し、選んだアイランドにクライアント側の操作を追加します。ここでは静的出力を使いますが、サーバーレンダリングにも対応します。

アイランドと別の保存APIを組み合わせます。

出典