このリポジトリは、 playgroundのサブモジュールとして追加される前提のテンプレートリポジトリで、sdenvを元に作成されています。
リポジトリ名は必ず playground-[name] の形式で命名してください。
- [name]は 単語間をハイフンでつなげるkebab-caseで表記してください。
- 例) snow-sample
- [name] はプロジェクトの詳細URLのスラグになります。
- リポジトリ名に基づいて、astro.config.ts の base 値が自動的に更新されます (npm ci 実行後)。
例:リポジトリ名が「playground-particle」の場合
- 詳細URL：https://playground.shiftbrain.com/post/particle/
- astro.config.ts：
base: '/post/particle'
✅ 親リポジトリ(playground)に追加する前にやること
プロジェクトのサムネイルを適切な画像に差し替えてください。親リポジトリで一覧表示のサムネイルとして使用されます。デフォルトではダミー画像が配置されています。
- 場所: /public/thumbnail.webp
- サイズ: 800x800
Caution
ファイル名は thumbnail.webp のままにしてください。他の名前や拡張子に変更しないでください。
デフォルトのものから更新してください。
- 場所: /src/assets/opengraph-image.png
release ブランチへのマージ後、GitHub Actionsが静的ファイルをビルドし static-production ブランチに自動的にビルドします。
Tip
親プロジェクトは static-production ブランチを参照しています。
依存パッケージのインストール:
npm cimeta.jsonの作成:
※npm ci 完了後に自動実行されるので、基本的に自分でコマンドを打つ必要はありません。
npm run setup:init対話型CLIでプロジェクトについての質問に答えることでsrc/meta.jsonが作成されます。
Caution
meta.json は親リポジトリで一覧表示するために必要な情報になります。削除しないでください。
meta.jsonのアップデート:
npm run update:metaNote
meta.json は手動変更も出来てしまいますが、既存のtagとの表記揺れ対策や文字数のバリデーションチェックも兼ねているので、上記コマンドを実行して変更するようにしてください。
ローカルサーバーの起動:
npm run dev本番用ビルド:
npm run buildソースコードの静的検証:
npm run lintソースコードの自動修正:
npm run fix.
├── public/ # ビルドによって加工されないアセット
├── src/ # サイトのソースコード
│ ├── assets/ # ビルドによって加工されるアセット
│ ├── components/ # Astroコンポーネント
│ ├── content/ # Astroのコンテンツコレクション
│ ├── icons/ # astro-iconから参照されるSVGファイル
│ ├── layouts/ # ページの構造を規定するAstroコンポーネント
│ ├── pages/ # ページのためのAstroコンポーネント
│ ├── scripts/ # クライアントサイドで利用されるスクリプト
│ └── styles/ # Tailwind CSSによって読み込まれるCSSファイル
│ └── meta.json # 一覧表示のために必要な情報がまとまったjson
├── astro.config.ts # Astroの設定
├── package.json # 依存パッケージを管理するための設定
├── postcss.config.cjs # PostCSSの設定
├── tailwind.config.cjs # Tailwind CSSの設定
└── tsconfig.json # TypeScriptの設定
詳しくは、Astro公式ドキュメントの「Project Structure」も参照してください。
Note
sdenvからの変更点として、実装に大きく影響ありそうな箇所で以下変更を行っています。
tailwind.config.cjsの変更screensの変更spacingとfontSizeをpx感覚で指定できるように（px-10と指定すると左右に0.625rem分のpaddingがつく）- 最低限タイトルの背景で使う色やフォントの追加