Skip to content

Latest commit

 

History

History
140 lines (94 loc) · 4.79 KB

README.md

File metadata and controls

140 lines (94 loc) · 4.79 KB
Raw

playground-template

このリポジトリは、 playgroundのサブモジュールとして追加される前提のテンプレートリポジトリで、sdenvを元に作成されています。

⚠️リポジトリ名の命名規則

リポジトリ名は必ず playground-[name] の形式で命名してください。

  • [name]は 単語間をハイフンでつなげるkebab-caseで表記してください。
    • 例) snow-sample
  • [name] はプロジェクトの詳細URLのスラグになります。
  • リポジトリ名に基づいて、astro.config.ts の base 値が自動的に更新されます (npm ci 実行後)。

例:リポジトリ名が「playground-particle」の場合

✅ 親リポジトリ(playground)に追加する前にやること

1. サムネイルの差し替え

プロジェクトのサムネイルを適切な画像に差し替えてください。親リポジトリで一覧表示のサムネイルとして使用されます。デフォルトではダミー画像が配置されています。

  • 場所: /public/thumbnail.webp
  • サイズ: 800x800

Caution

ファイル名は thumbnail.webp のままにしてください。他の名前や拡張子に変更しないでください。

2. OG画像の差し替え

デフォルトのものから更新してください。

  • 場所: /src/assets/opengraph-image.png

3. static-productionブランチへ静的ファイルのビルド

release ブランチへのマージ後、GitHub Actionsが静的ファイルをビルドし static-production ブランチに自動的にビルドします。

Tip

親プロジェクトは static-production ブランチを参照しています。

コマンドラインインターフェース

依存パッケージのインストール:

npm ci

meta.jsonの作成:

※npm ci 完了後に自動実行されるので、基本的に自分でコマンドを打つ必要はありません。

npm run setup:init

対話型CLIでプロジェクトについての質問に答えることでsrc/meta.jsonが作成されます。

Caution

meta.json は親リポジトリで一覧表示するために必要な情報になります。削除しないでください。

meta.jsonのアップデート:

npm run update:meta

Note

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がつく）
    • 最低限タイトルの背景で使う色やフォントの追加