Initial commit

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/dependabot.yml

@@ -0,0 +1,14 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'monthly'
+      day: 'monday'
+      time: '09:00'
+      timezone: 'Asia/Tokyo'

.github/workflows/ci.yml

@@ -0,0 +1,42 @@
+name: CI
+
+on: push
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Lint
+        run: npm run lint

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Build to static-production branch
+
+on:
+  push:
+    branches:
+      - release
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      # https://github.com/s0/git-publish-subdir-action
+      - name: Push to production branch
+        uses: s0/git-publish-subdir-action@master
+        env:
+          REPO: self
+          BRANCH: static-production
+          FOLDER: dist
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,21 @@
+# build output
+stats.html
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+save-exact=true

.nvmrc

@@ -0,0 +1 @@
+20

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+public/

.prettierrc.js

@@ -0,0 +1,20 @@
+/** @type {import('prettier').Config} */
+export default {
+  plugins: [
+    '@trivago/prettier-plugin-sort-imports',
+    'prettier-plugin-astro',
+    'prettier-plugin-css-order',
+    'prettier-plugin-tailwindcss',
+  ],
+  printWidth: 100,
+  singleQuote: true,
+  semi: false,
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
+}

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "unifiedjs.vscode-mdx"
+  ],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,51 @@
+{
+  /* Text Editor */
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "never",
+    "source.fixAll": "explicit"
+  },
+  // https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode#default-formatter
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/33#issuecomment-1025156688
+  "editor.wordWrap": "on",
+
+  /* Text Editor > Formatting */
+  "editor.formatOnSave": true,
+
+  /* Text Editor > Suggestions */
+  "editor.quickSuggestions": {
+    // https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#editor.quicksuggestions
+    "strings": "on"
+  },
+
+  /* Text Editor > Files */
+  "files.associations": {
+    // https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#files.associations
+    "*.css": "tailwindcss"
+  },
+
+  /* Extensions > Emmet */
+  "emmet.includeLanguages": {
+    "astro": "html",
+    "mdx": "javascriptreact",
+    "tailwindcss": "css"
+  },
+
+  /* Extensions > Tailwind CSS IntelliSense */
+  // https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#tailwindcss.classattributes
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list"],
+  // https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#tailwindcss.emmetcompletions
+  "tailwindCSS.emmetCompletions": true,
+
+  /* Extensions > TypeScript */
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  /* Extensions > ESLint */
+  // https://github.com/ota-meshi/eslint-plugin-astro?tab=readme-ov-file#visual-studio-code
+  "eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
+  "eslint.experimental.useFlatConfig": true,
+
+  /* Extensions > Prettier */
+  // https://gist.github.com/JLarky/b26a165d628984723fe285201ca699e5
+  "prettier.documentSelectors": ["**/*.astro"]
+}

README.md

@@ -0,0 +1,140 @@
+# playground-template
+
+このリポジトリは、 [playground](https://github.com/devjam/playground)のサブモジュールとして追加される前提のテンプレートリポジトリで、[sdenv](https://github.com/yuheiy/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](https://github.com/devjam/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 ブランチを参照しています。
+
+## コマンドラインインターフェース
+
+依存パッケージのインストール:
+
+```bash
+npm ci
+```
+
+---
+
+`meta.json`の作成:
+
+※`npm ci` 完了後に自動実行されるので、基本的に自分でコマンドを打つ必要はありません。
+
+```bash
+npm run setup:init
+```
+
+対話型CLIでプロジェクトについての質問に答えることで`src/meta.json`が作成されます。
+
+> [!CAUTION]
+> meta.json は親リポジトリで一覧表示するために必要な情報になります。削除しないでください。
+
+---
+
+meta.jsonのアップデート:
+
+```bash
+npm run update:meta
+```
+
+> [!NOTE]
+> meta.json は手動変更も出来てしまいますが、既存のtagとの表記揺れ対策や文字数のバリデーションチェックも兼ねているので、上記コマンドを実行して変更するようにしてください。
+
+---
+
+ローカルサーバーの起動:
+
+```bash
+npm run dev
+```
+
+---
+
+本番用ビルド:
+
+```bash
+npm run build
+```
+
+---
+
+ソースコードの静的検証:
+
+```bash
+npm run lint
+```
+
+---
+
+ソースコードの自動修正:
+
+```bash
+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](https://docs.astro.build/en/core-concepts/project-structure/)」も参照してください。
+
+> [!NOTE]
+> sdenvからの変更点として、実装に大きく影響ありそうな箇所で以下変更を行っています。
+>
+> - `tailwind.config.cjs` の変更
+>   - `screens`の変更
+>   - `spacing` と `fontSize` をpx感覚で指定できるように（`px-10`と指定すると左右に`0.625rem`分のpaddingがつく）
+>   - 最低限タイトルの背景で使う色やフォントの追加

astro.config.ts

@@ -0,0 +1,18 @@
+import mdx from '@astrojs/mdx'
+import tailwind from '@astrojs/tailwind'
+import icon from 'astro-icon'
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://playground.shiftbrain.com/',
+  base: '/post/template',
+  server: { open: '/post/template' },
+  prefetch: true,
+  integrations: [mdx(), tailwind({ nesting: true }), icon()],
+  vite: {
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
+  },
+})