create-ampless 0.2.0-alpha.16 → 0.2.0-alpha.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ja.md +77 -0
- package/README.md +3 -0
- package/dist/templates/_shared/RUNBOOK.ja.md +135 -0
- package/dist/templates/_shared/RUNBOOK.md +3 -0
- package/dist/templates/_shared/app/(admin)/admin/mcp-tokens/page.tsx +5 -0
- package/dist/templates/_shared/app/api/admin/mcp-tokens/route.ts +6 -0
- package/dist/templates/_shared/app/api/mcp/route.ts +9 -0
- package/dist/templates/_shared/package.json +8 -8
- package/dist/templates/blog/README.ja.md +22 -0
- package/dist/templates/blog/README.md +17 -44
- package/dist/templates/corporate/README.ja.md +18 -0
- package/dist/templates/corporate/README.md +12 -13
- package/dist/templates/dads/README.ja.md +31 -0
- package/dist/templates/dads/README.md +13 -16
- package/dist/templates/docs/README.ja.md +24 -0
- package/dist/templates/docs/README.md +10 -12
- package/dist/templates/landing/README.ja.md +20 -0
- package/dist/templates/landing/README.md +14 -18
- package/dist/templates/minimal/README.ja.md +14 -0
- package/dist/templates/minimal/README.md +9 -44
- package/package.json +1 -1
package/README.ja.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
|
|
4
|
+
# create-ampless
|
|
5
|
+
|
|
6
|
+
[ampless](https://github.com/heavymoons/ampless) プロジェクト向け CLI スキャフォールディングツール。
|
|
7
|
+
|
|
8
|
+
> **プレリリース / アルファ版。** v1.0 まではマイナーバージョンでも破壊的変更が入る可能性があります。`@alpha` タグを使用してください(`@latest` タグは v1.0 まで存在しません)。
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npx create-ampless@alpha
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
ウィザードが以下を順に案内します:
|
|
15
|
+
|
|
16
|
+
1. プロジェクト名
|
|
17
|
+
2. サイト名(デフォルトの `<title>` および OGP `siteName` として使用)
|
|
18
|
+
3. テーマ — v0.1 では `blog`
|
|
19
|
+
4. プラグイン — `seo`、`rss`、`webhook`
|
|
20
|
+
|
|
21
|
+
出力は AWS Amplify Gen 2 バックエンド定義を含む Next.js 15(App Router)プロジェクトです。`/admin` に管理パネル、`/` にパブリックブログが設置され、選択したプラグインが `cms.config.ts` にあらかじめ設定されます。また運用メモ用の `RUNBOOK.md` も生成されます。
|
|
22
|
+
|
|
23
|
+
## 生成されたプロジェクトでの次のステップ
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
cd my-project
|
|
27
|
+
npm install
|
|
28
|
+
npx ampx sandbox # AWS 開発リソースをプロビジョニングし amplify_outputs.json を生成
|
|
29
|
+
npm run dev # http://localhost:3000
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
`/login` でサインアップすると、最初に登録したユーザーが自動的に `ampless-admin` Cognito グループに昇格します。
|
|
33
|
+
|
|
34
|
+
## ワンショットデプロイ:`--deploy`
|
|
35
|
+
|
|
36
|
+
ウィザードは `npx` から Amplify Hosting の URL まで一気に進めることもできます:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npx create-ampless@alpha my-site --deploy
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
このフラグを追加すると、スキャフォールディング後に以下が実行されます:
|
|
43
|
+
|
|
44
|
+
1. `git init` + 初回コミット
|
|
45
|
+
2. GitHub リポジトリを作成(`gh repo create`)してプッシュ
|
|
46
|
+
3. 新しいリポジトリに紐付けた `aws amplify create-app`
|
|
47
|
+
4. `aws amplify create-branch main`
|
|
48
|
+
5. `aws amplify start-job --job-type RELEASE`
|
|
49
|
+
6. `--domain` を指定した場合はオプションで `aws amplify create-domain-association`
|
|
50
|
+
|
|
51
|
+
コマンドラインに指定が不足している場合はインタラクティブに確認します。CI 向けのフル指定の例:
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npx create-ampless@alpha my-site --deploy \
|
|
55
|
+
--github-owner my-org \
|
|
56
|
+
--github-private \
|
|
57
|
+
--aws-region us-east-1 \
|
|
58
|
+
--domain example.com --subdomain blog \
|
|
59
|
+
--skip-confirm
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
apex ドメインが同じ AWS アカウントの Route 53 でホストされている場合、ACM の検証が完了すると Amplify が DNS レコードを自動作成します。それ以外の場合、CLI がレジストラで追加すべき正確な CNAME を表示します。
|
|
63
|
+
|
|
64
|
+
### デプロイの要件
|
|
65
|
+
|
|
66
|
+
- [`gh`](https://cli.github.com/) のインストールと認証(`gh auth login`)
|
|
67
|
+
- [`aws`](https://aws.amazon.com/cli/) のインストールと設定(`aws configure`)
|
|
68
|
+
- `repo` スコープを持つ GitHub トークン(`--github-token` → `GITHUB_TOKEN` 環境変数 → `gh auth token` → インタラクティブプロンプトの順で解決)
|
|
69
|
+
|
|
70
|
+
## 動作要件
|
|
71
|
+
|
|
72
|
+
- Node.js >= 20
|
|
73
|
+
- AWS アカウントと `aws configure` の設定済み(サンドボックス / パイプラインデプロイは AWS に直接アクセスします)
|
|
74
|
+
|
|
75
|
+
## ライセンス
|
|
76
|
+
|
|
77
|
+
[MIT](../../LICENSE)
|
package/README.md
CHANGED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
> English: [RUNBOOK.md](./RUNBOOK.md)
|
|
2
|
+
>
|
|
3
|
+
|
|
4
|
+
# ランブック
|
|
5
|
+
|
|
6
|
+
ampless で構築したサイトの運用手順書です。
|
|
7
|
+
|
|
8
|
+
## AppSync API キー(自動更新)
|
|
9
|
+
|
|
10
|
+
パブリックブログの読み取り(`listPublishedPosts`、`getPublishedPost`、`listPostsByTag`)は AppSync API キーで保護されています。このキーは `amplify_outputs.json` に含まれているため、**公開サイトを訪問した誰もが確認できる**状態にあります。低信頼度のクレデンシャルとして扱ってください。このキーが持つ権限は上記 3 つのカスタムクエリを呼び出すことのみであり、それらのクエリは `status === 'published'` の行しか返しません。
|
|
11
|
+
|
|
12
|
+
### なぜ API キーなのか(Identity Pool ゲストロールではなく)?
|
|
13
|
+
|
|
14
|
+
Amplify Gen 2 の `a.handler.custom` リゾルバーは `allow.guest()` や `allow.authenticated('identityPool')` をサポートしておらず、apiKey / userPool / lambda / group / owner のみが使用可能です。v0.1 では簡潔さを優先して API キーを選択しました。パブリック読み取りを Lambda 関数データソース(`a.handler.function`)に移行することは v0.2 の候補です。
|
|
15
|
+
|
|
16
|
+
### 自動更新 — ローテーション手順は不要
|
|
17
|
+
|
|
18
|
+
`api-key-renewer` Lambda(`amplify/functions/api-key-renewer/` を参照)は、毎月 1 日の UTC 03:00 に EventBridge スケジュールで起動します。`AppSync.UpdateApiKey` を呼び出して既存キーの `expires` を「現時点 + 364 日」に延長するため、以下が保証されます:
|
|
19
|
+
|
|
20
|
+
- キー ID は変化しない
|
|
21
|
+
- `amplify_outputs.json` は引き続き有効
|
|
22
|
+
- Next.js アプリの再ビルドは不要
|
|
23
|
+
- 常に約 334 日以上の残有効期限が維持される
|
|
24
|
+
|
|
25
|
+
手動で確認または実行したい場合:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
# 現在の有効期限を確認
|
|
29
|
+
aws appsync list-api-keys \
|
|
30
|
+
--region <amplify_outputs.json の data.aws_region> \
|
|
31
|
+
--api-id <amplify_outputs.json の data.url から導出した api-id>
|
|
32
|
+
|
|
33
|
+
# 手動実行(サンドボックスを長期間停止した後など)
|
|
34
|
+
aws lambda invoke \
|
|
35
|
+
--function-name $(aws lambda list-functions \
|
|
36
|
+
--query "Functions[?contains(FunctionName,'api-key-renewer')].FunctionName | [0]" \
|
|
37
|
+
--output text) \
|
|
38
|
+
/tmp/out.json && cat /tmp/out.json
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### キーの漏洩が疑われる場合
|
|
42
|
+
|
|
43
|
+
有効期限の延長ではなく、キーの値そのものをローテーションする即時対応を行います:
|
|
44
|
+
|
|
45
|
+
1. `amplify/data/resource.ts` のコメントを編集して CFN 更新を強制する
|
|
46
|
+
2. `npx ampx sandbox`(サンドボックス)または `npx ampx pipeline-deploy ...`(本番)を実行 — Amplify がキーの値を再生成する
|
|
47
|
+
3. Next.js アプリを再デプロイして SSR が新しい `data.api_key` を参照するようにする
|
|
48
|
+
|
|
49
|
+
## 一般的な操作
|
|
50
|
+
|
|
51
|
+
### ユーザーのグループ昇格 / 降格
|
|
52
|
+
|
|
53
|
+
AWS Cognito コンソールから操作します:
|
|
54
|
+
|
|
55
|
+
1. User Pool → Users → 対象ユーザーを選択
|
|
56
|
+
2. Group memberships → グループに追加 / グループから削除
|
|
57
|
+
3. ユーザーに一度サインアウトしてサインインし直してもらい、新しいクレームを適用させる
|
|
58
|
+
|
|
59
|
+
グループの種類: `ampless-admin`(フル CRUD + 運用操作)、`ampless-editor`(コンテンツ CRUD)、`ampless-reader`(将来の REST/MCP API 利用者向けに予約済み)。
|
|
60
|
+
|
|
61
|
+
### ユーザーパスワードのリセット(管理者による上書き)
|
|
62
|
+
|
|
63
|
+
ロックアウトされており、メールによる復旧が利用できない場合:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
aws cognito-idp admin-set-user-password \
|
|
67
|
+
--user-pool-id <amplify_outputs.json の auth.user_pool_id> \
|
|
68
|
+
--region <リージョン> \
|
|
69
|
+
--username <メールアドレス> \
|
|
70
|
+
--password '<新しいパスワード>' --permanent
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
`/login` ページにはセルフサービスの「パスワードを忘れた場合」フローもあります。
|
|
74
|
+
|
|
75
|
+
### Post テーブルのバックアップからの復元
|
|
76
|
+
|
|
77
|
+
DynamoDB のポイントインタイムリカバリ(PITR)は v0.1 の `defineData` では有効になっていません。AWS コンソール → DynamoDB → Tables → `<投稿テーブル名>` → Backups → Edit PITR から手動で有効化してください。有効化後は `aws dynamodb restore-table-to-point-in-time` で新しいテーブルに復元し、その後アイテムをライブテーブルに移行する作業が必要です。
|
|
78
|
+
|
|
79
|
+
### 失敗したプラグインイベントの確認
|
|
80
|
+
|
|
81
|
+
処理に失敗したプロセッサー呼び出しは、`amplify/backend.ts` で作成された共有イベント DLQ(`EventsDlq`)に送られます。SQS コンソールまたは `aws sqs receive-message --queue-url <dlq-url> --max-number-of-messages 10` でメッセージを確認してください。v0.1 には自動アラームがないため、定期的な手動確認を推奨します。あるいは `ApproximateNumberOfMessagesVisible` に CloudWatch アラームを設定してください。
|
|
82
|
+
|
|
83
|
+
## マルチサイト / カスタムドメイン
|
|
84
|
+
|
|
85
|
+
ampless は 1 つの Amplify Hosting デプロイメントから複数のサイトを配信できます。各サイトは `siteId` で識別され、`cms.config.ts` 内で 1 つ以上のホスト名に紐づけられます:
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
sites: {
|
|
89
|
+
blog: {
|
|
90
|
+
domains: ['blog.example.com', 'www.example.com'],
|
|
91
|
+
name: 'My Blog',
|
|
92
|
+
url: 'https://blog.example.com',
|
|
93
|
+
},
|
|
94
|
+
docs: {
|
|
95
|
+
domains: ['docs.example.com'],
|
|
96
|
+
name: 'Docs',
|
|
97
|
+
url: 'https://docs.example.com',
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
ミドルウェア(`middleware.ts`)が受信リクエストの `Host` を `siteId` にマッピングし、パスを `/_sites/{siteId}/...` に内部リライトします。サブドメインと完全に分離されたドメインはアプリケーション層では等価です — AWS 側の設定のみが異なります。
|
|
103
|
+
|
|
104
|
+
### シングルドメイン運用
|
|
105
|
+
|
|
106
|
+
`sites` が未定義または 1 エントリのみの場合、ampless はシングルサイトモード(`siteId='default'`)で動作します。SSR レスポンスはルートごとのキャッシュディレクティブに従います(ルートごとに `Cache-Control: public, s-maxage=...` を指定することで CloudFront キャッシュを利用できます)。
|
|
107
|
+
|
|
108
|
+
### マルチサイトモードの注意事項:SSR キャッシュの強制無効化
|
|
109
|
+
|
|
110
|
+
2 つ以上のサイトが設定されている場合、ミドルウェアはすべてのパブリックレスポンスに `Cache-Control: private, no-store` を付加します。これは Amplify Hosting の CloudFront がキャッシュキーに `Host` を含まないため、キャッシュを有効にすると `https://site1/foo` と `https://site2/foo` がエッジでコンテンツを混在させてしまうためです。このトレードオフとして、すべてのパブリック読み取りが Lambda にヒットします。この制約を解消するには、Amplify Hosting から独自管理の CloudFront + Open Next スタックへの移行が必要です(ロードマップ:v1.0 以降)。
|
|
111
|
+
|
|
112
|
+
### Amplify Hosting へのカスタムドメイン追加
|
|
113
|
+
|
|
114
|
+
バインドしたいドメインごとに以下を実施します:
|
|
115
|
+
|
|
116
|
+
1. **Amplify Hosting コンソール** → アプリ → **Domain management** → **Add domain** を選択。
|
|
117
|
+
2. 頂点ドメイン(`example.com`)と接続したいサブドメインを入力します。Amplify が ACM 証明書と CloudFront SAN エントリを自動でプロビジョニングします。
|
|
118
|
+
3. DNS を更新:
|
|
119
|
+
- **Route 53 / Amplify 管理の DNS プロバイダー**:Amplify が CNAME を作成してくれるので、確認するだけです。
|
|
120
|
+
- **外部 DNS**(Cloudflare、Squarespace など):Amplify が表示する CNAME / DNS 検証レコードをコピーします。ACM のメール検証もフォールバックとして使用できます。
|
|
121
|
+
4. **Domain activation** が完了するまで待ちます(通常 15〜60 分。証明書の検証が最も時間がかかります)。
|
|
122
|
+
5. 新しいドメインを `cms.config.ts` の対応する `sites.{id}.domains[]` に追加して再デプロイします:
|
|
123
|
+
```bash
|
|
124
|
+
git add cms.config.ts && git commit -m "feat: add docs.example.com"
|
|
125
|
+
git push # Amplify Hosting が自動検出します
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
エンドツーエンドで確認:
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
curl -I https://docs.example.com/ # 200 とドキュメントサイトの HTML
|
|
132
|
+
curl -sI https://docs.example.com/ | grep -i cache # Cache-Control: private, no-store
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
リクエストが `404 Site not found` を返す場合、そのホストはいずれの `sites.*.domains[]` にも登録されていません — 設定を修正して再デプロイしてください。
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { admin } from '@/lib/admin'
|
|
2
|
+
import { createMcpRoute } from '@ampless/admin/api'
|
|
3
|
+
|
|
4
|
+
// `force-dynamic` keeps CloudFront from caching MCP responses. Each
|
|
5
|
+
// tool call must hit the SSR Lambda — caching would serve stale or
|
|
6
|
+
// cross-token responses.
|
|
7
|
+
export const dynamic = 'force-dynamic'
|
|
8
|
+
export const runtime = 'nodejs'
|
|
9
|
+
export const { POST } = createMcpRoute(admin)
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"@tiptap/pm": "^3.23.4",
|
|
23
23
|
"@tiptap/react": "^3.23.4",
|
|
24
24
|
"@tiptap/starter-kit": "^3.23.4",
|
|
25
|
-
"@ampless/plugin-og-image": "^0.2.0-alpha.
|
|
26
|
-
"@ampless/plugin-rss": "^0.2.0-alpha.
|
|
27
|
-
"@ampless/plugin-seo": "^0.2.0-alpha.
|
|
28
|
-
"@ampless/plugin-webhook": "^0.2.0-alpha.
|
|
29
|
-
"@ampless/admin": "^0.2.0-alpha.
|
|
30
|
-
"@ampless/backend": "^0.2.0-alpha.
|
|
31
|
-
"@ampless/runtime": "^0.2.0-alpha.
|
|
25
|
+
"@ampless/plugin-og-image": "^0.2.0-alpha.6",
|
|
26
|
+
"@ampless/plugin-rss": "^0.2.0-alpha.6",
|
|
27
|
+
"@ampless/plugin-seo": "^0.2.0-alpha.6",
|
|
28
|
+
"@ampless/plugin-webhook": "^0.2.0-alpha.6",
|
|
29
|
+
"@ampless/admin": "^0.2.0-alpha.17",
|
|
30
|
+
"@ampless/backend": "^0.2.0-alpha.8",
|
|
31
|
+
"@ampless/runtime": "^0.2.0-alpha.9",
|
|
32
32
|
"@digital-go-jp/tailwind-theme-plugin": "^0.3.4",
|
|
33
|
-
"ampless": "^0.2.0-alpha.
|
|
33
|
+
"ampless": "^0.2.0-alpha.6",
|
|
34
34
|
"aws-amplify": "^6.10.0",
|
|
35
35
|
"class-variance-authority": "^0.7.1",
|
|
36
36
|
"clsx": "^2.1.1",
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
# Blog テーマ
|
|
4
|
+
|
|
5
|
+
shadcn/ui のデフォルトに準じたニュートラル系モノクロ。時系列の投稿フィード、個別投稿ページ、タグ別一覧を提供します。
|
|
6
|
+
|
|
7
|
+
## カスタマイズ
|
|
8
|
+
|
|
9
|
+
`/admin/sites/<siteId>/theme` で設定:
|
|
10
|
+
|
|
11
|
+
- **プライマリカラー** — ボタン、リンク、強調表示の背景色
|
|
12
|
+
- **アクセントカラー**
|
|
13
|
+
- **フォーカスリング**
|
|
14
|
+
- **破壊的操作** — 削除等の操作色
|
|
15
|
+
- **角丸**
|
|
16
|
+
- **本文フォント** — システムサンセリフ / セリフ (Georgia) / セリフ (Iowan) / 等幅
|
|
17
|
+
- **トップに固定する記事のスラッグ** — 公開済み投稿を 1 件ホームの先頭に固定
|
|
18
|
+
- **ロゴ画像 URL**
|
|
19
|
+
- **ヘッダーナビ** — ラベル + URL のペア
|
|
20
|
+
- **フッターリンク** — ラベル + URL のペア
|
|
21
|
+
|
|
22
|
+
サイトごとのライト/ダークカラースキームは ampless の標準テーマトークン経由で反映されます。
|
|
@@ -1,49 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
# Blog theme
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
Neutral monochrome with shadcn/ui defaults. Chronological post feed, single-post page, and tag listing.
|
|
4
6
|
|
|
5
|
-
##
|
|
7
|
+
## Customizing
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
In `/admin/sites/<siteId>/theme`:
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
- **Primary color** — buttons, links, accent fills
|
|
12
|
+
- **Accent color**
|
|
13
|
+
- **Focus ring**
|
|
14
|
+
- **Destructive** — color used for destructive actions
|
|
15
|
+
- **Corner radius**
|
|
16
|
+
- **Body font** — System sans / Serif (Georgia) / Serif (Iowan) / Monospace
|
|
17
|
+
- **Featured post slug** — pin one published post to the top of the home page
|
|
18
|
+
- **Logo image URL**
|
|
19
|
+
- **Header navigation** — label + URL pairs
|
|
20
|
+
- **Footer links** — label + URL pairs
|
|
12
21
|
|
|
13
|
-
|
|
14
|
-
# Requires AWS credentials configured (`aws configure`).
|
|
15
|
-
# First run takes ~5–10 min to provision resources;
|
|
16
|
-
# amplify_outputs.json is regenerated each time before dev starts.
|
|
17
|
-
npm run sandbox
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Then open [http://localhost:3000](http://localhost:3000).
|
|
21
|
-
|
|
22
|
-
## First admin user
|
|
23
|
-
|
|
24
|
-
Open [http://localhost:3000/login](http://localhost:3000/login) and click **Create admin account**. The first user to register is automatically added to the `ampless-admin` Cognito group.
|
|
25
|
-
|
|
26
|
-
After that, manage content from `/admin`:
|
|
27
|
-
|
|
28
|
-
- `/admin` — dashboard
|
|
29
|
-
- `/admin/posts` — list / create / edit posts (tiptap editor)
|
|
30
|
-
- `/admin/media` — upload images to S3
|
|
31
|
-
|
|
32
|
-
## Production deploy
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
git init && git add . && git commit -m "init"
|
|
36
|
-
git remote add origin <your-repo>
|
|
37
|
-
git push
|
|
38
|
-
# Then connect the repo to AWS Amplify Hosting in the AWS console.
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Customize
|
|
42
|
-
|
|
43
|
-
- `cms.config.ts` — site name, media delivery mode, plugins
|
|
44
|
-
- `app/` — Next.js App Router pages (`(public)/` for the blog, `(admin)/` for the CMS)
|
|
45
|
-
- `amplify/` — Amplify Gen 2 backend definitions (auth / data / storage)
|
|
46
|
-
|
|
47
|
-
## Plugins
|
|
48
|
-
|
|
49
|
-
Enabled: {{plugins}}
|
|
22
|
+
Per-site light/dark color scheme is honored through the standard ampless theme tokens.
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
# Corporate テーマ
|
|
4
|
+
|
|
5
|
+
企業サイト向けの落ち着いたレイアウト。明るい背景にネイビーの配色、ヒーロー + お知らせ一覧構成、ヘッダー / フッターナビ付き。
|
|
6
|
+
|
|
7
|
+
## カスタマイズ
|
|
8
|
+
|
|
9
|
+
`/admin/sites/<siteId>/theme` で設定:
|
|
10
|
+
|
|
11
|
+
- **タグライン** — ヒーロー内、サイト名の上に表示される短いフレーズ
|
|
12
|
+
- **プライマリカラー**
|
|
13
|
+
- **角丸**
|
|
14
|
+
- **トップストーリーのスラッグ** — ヒーローとお知らせ一覧の間に公開済み投稿を 1 件フィーチャー
|
|
15
|
+
- **ロゴ画像 URL**
|
|
16
|
+
- **ヘッダーナビ** — ラベル + URL のペア
|
|
17
|
+
- **フッターリンク** — ラベル + URL のペア
|
|
18
|
+
- **フッター注記** — 住所 / 会社情報 / 追加の注意書き
|
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
# Corporate theme
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
Conservative business / company-site layout with hero and news section. Navy on near-white, header + footer navigation.
|
|
4
6
|
|
|
5
7
|
## Customizing
|
|
6
8
|
|
|
7
9
|
In `/admin/sites/<siteId>/theme`:
|
|
8
10
|
|
|
9
|
-
- Tagline
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
npm install
|
|
18
|
-
npm run sandbox
|
|
19
|
-
```
|
|
11
|
+
- **Tagline** — short phrase shown above the site name in the hero
|
|
12
|
+
- **Primary color**
|
|
13
|
+
- **Corner radius**
|
|
14
|
+
- **Top story slug** — feature one published post between the hero and the news section
|
|
15
|
+
- **Logo image URL**
|
|
16
|
+
- **Header navigation** — label + URL pairs
|
|
17
|
+
- **Footer links** — label + URL pairs
|
|
18
|
+
- **Footer legend** — address / company info / extra small print
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
# DADS テーマ
|
|
4
|
+
|
|
5
|
+
デジタル庁デザインシステム準拠のレイアウト。政府・自治体・公共系サイト向け。高コントラスト、アクセシビリティ重視、装飾控えめ。公式の **[デジタル庁デザインシステム Tailwind プラグイン](https://github.com/digital-go-jp/tailwind-theme-plugin)**(`@digital-go-jp/tailwind-theme-plugin`、MIT)をベースに構築されています。
|
|
6
|
+
|
|
7
|
+
## プラグインが提供する機能
|
|
8
|
+
|
|
9
|
+
- **カラーパレット** — プライマリカラーに `solidBlue`(`#0017c1`)を使用し、DADS の全スケール(ライトブルー、シアン、グリーン、ライム、イエロー、オレンジ、レッド、マゼンタ)を Tailwind クラス(`bg-blue-900`、`text-blue-50` など)で利用可能
|
|
10
|
+
- **タイポグラフィ** — プラグイン経由で `fontFamily.sans` に Noto Sans JP を設定。`--ampless-body-font` として参照可能
|
|
11
|
+
- **ボーダー半径** — `rounded-4` / `rounded-6` が利用可能
|
|
12
|
+
|
|
13
|
+
`tokens.css` がプラグインの CSS 変数(`--color-blue-900` など)を ampless 標準のテーマ変数(`--primary`、`--background` など)にバインドするため、共有 chrome(SiteHeader、SiteFooter、shadcn ボタンなど)が自動的に DADS カラーで描画されます。
|
|
14
|
+
|
|
15
|
+
DADS が新しいパレットバージョンを公開した場合、`@digital-go-jp/tailwind-theme-plugin` をバージョンアップするだけでテーマに反映されます。
|
|
16
|
+
|
|
17
|
+
## カスタマイズ
|
|
18
|
+
|
|
19
|
+
`/admin/sites/<siteId>/theme` で設定:
|
|
20
|
+
|
|
21
|
+
- **ロゴ画像 URL** — 組織マーク
|
|
22
|
+
- **プライマリカラー** — デフォルトは DADS の `solidBlue`。DADS 以外の色に変更するとサイトは DADS 準拠ではなくなります。
|
|
23
|
+
- **トップストーリーのスラッグ** — ヒーローとお知らせ一覧の間に公開済み投稿を 1 件フィーチャー
|
|
24
|
+
- **ヘッダーナビ** — ラベル + URL のペア
|
|
25
|
+
- **フッターリンク** — ラベル + URL のペア
|
|
26
|
+
- **フッター注記** — 住所 / 機関情報 / 追加の注意書き
|
|
27
|
+
|
|
28
|
+
## 注意事項
|
|
29
|
+
|
|
30
|
+
- ダークモードは反転色による近似実装です。プラグイン 0.3.4 時点では DADS の公式ダークパレットは存在しません。公式ダークパレットが公開された際は、`tokens.css` のダーク変数バインディングを更新してください。
|
|
31
|
+
- このプラグインはデザイントークンのみを提供します。フル DADS コンポーネント(ボタン、アラート、タブなど)については [design-system-example-components](https://github.com/digital-go-jp/design-system-example-components) を参照し、必要に応じて取り込んでください。
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
# DADS theme
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
Government / public-sector layout following the Digital Agency Design System aesthetic. High contrast, accessibility-first, minimal decoration. Built on the official **[Digital Agency Design System Tailwind plugin](https://github.com/digital-go-jp/tailwind-theme-plugin)** (`@digital-go-jp/tailwind-theme-plugin`, MIT).
|
|
4
6
|
|
|
5
7
|
## What's plugin-backed
|
|
6
8
|
|
|
@@ -8,27 +10,22 @@ DADS theme — built on the official **[Digital Agency Design System Tailwind pl
|
|
|
8
10
|
- **Typography** — `fontFamily.sans` set to Noto Sans JP via the plugin; surfaced through `--ampless-body-font`
|
|
9
11
|
- **Border radii** — `rounded-4` / `rounded-6` available
|
|
10
12
|
|
|
11
|
-
`
|
|
13
|
+
`tokens.css` binds the plugin's CSS variables (`--color-blue-900` etc.) to the standard ampless theme variables (`--primary`, `--background`, ...) so all shared chrome (SiteHeader, SiteFooter, shadcn buttons, etc.) automatically renders in DADS colors.
|
|
12
14
|
|
|
13
|
-
When DADS publishes a new palette version, bumping `@digital-go-jp/tailwind-theme-plugin`
|
|
15
|
+
When DADS publishes a new palette version, bumping `@digital-go-jp/tailwind-theme-plugin` is enough — the theme picks it up.
|
|
14
16
|
|
|
15
17
|
## Customizing
|
|
16
18
|
|
|
17
19
|
In `/admin/sites/<siteId>/theme`:
|
|
18
20
|
|
|
19
|
-
- **Logo image URL** —
|
|
20
|
-
- **Primary color** — defaults to DADS solidBlue
|
|
21
|
-
- **Top story slug** — feature one published post between hero and news
|
|
22
|
-
- **Header navigation
|
|
21
|
+
- **Logo image URL** — organization mark
|
|
22
|
+
- **Primary color** — defaults to DADS `solidBlue`. Changing to a non-DADS color makes the site no longer DADS-conformant.
|
|
23
|
+
- **Top story slug** — feature one published post between the hero and the news section
|
|
24
|
+
- **Header navigation** — label + URL pairs
|
|
25
|
+
- **Footer links** — label + URL pairs
|
|
26
|
+
- **Footer legend** — address / agency info / extra small print
|
|
23
27
|
|
|
24
28
|
## Notes
|
|
25
29
|
|
|
26
|
-
- Dark mode uses an inverted approximation. DADS doesn't ship an official dark palette as of plugin 0.3.4; when one lands, update `
|
|
30
|
+
- Dark mode uses an inverted approximation. DADS doesn't ship an official dark palette as of plugin 0.3.4; when one lands, update `tokens.css` to bind the dark variables.
|
|
27
31
|
- The plugin only provides design tokens. For full DADS components (buttons, alerts, tabs, etc.), see [design-system-example-components](https://github.com/digital-go-jp/design-system-example-components) and adapt as needed.
|
|
28
|
-
|
|
29
|
-
## Getting started
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install
|
|
33
|
-
npm run sandbox
|
|
34
|
-
```
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
# Docs テーマ
|
|
4
|
+
|
|
5
|
+
サイドバー主導のドキュメントレイアウト。サイドバー項目は通常のリンクに加え、**タグ駆動セクション**を組み合わせられます — `tag:<name>` 形式の項目を入れると、そのタグが付いた公開済み投稿の一覧に自動展開されます。タグでコンテンツを整理するだけでナビゲーションに自動反映されます。
|
|
6
|
+
|
|
7
|
+
## カスタマイズ
|
|
8
|
+
|
|
9
|
+
`/admin/sites/<siteId>/theme` で設定:
|
|
10
|
+
|
|
11
|
+
- **プライマリカラー**
|
|
12
|
+
- **角丸**
|
|
13
|
+
- **コードフォント** — システム等幅 / JetBrains Mono
|
|
14
|
+
- **サイドバーナビ** — 各行は `ラベル` + `URL`。URL には以下を指定可能:
|
|
15
|
+
- パス(`/getting-started`)
|
|
16
|
+
- 外部 URL(`https://...`)
|
|
17
|
+
- タグ参照(`tag:tutorials`)→ 見出し + タグ付き投稿一覧として描画
|
|
18
|
+
- **ロゴ画像 URL**
|
|
19
|
+
- **ヘッダーナビ** — トップレベルのリンク
|
|
20
|
+
- **フッターリンク** — ラベル + URL のペア
|
|
21
|
+
|
|
22
|
+
## 執筆のヒント
|
|
23
|
+
|
|
24
|
+
投稿に `guide` タグを付けて、サイドバーに URL `tag:guide` の行を追加するだけ。新しい記事を公開しても手動でリンクを編集する必要はなく、サイドバーに自動で並びます。
|
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
# Docs theme
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
Sidebar-led documentation layout. The sidebar combines plain links with **tag-driven sections** — a sidebar entry of the form `tag:<name>` auto-expands into a list of every published post with that tag. Lets writers organize content by tag and have it appear in nav automatically.
|
|
4
6
|
|
|
5
7
|
## Customizing
|
|
6
8
|
|
|
7
9
|
In `/admin/sites/<siteId>/theme`:
|
|
8
10
|
|
|
11
|
+
- **Primary color**
|
|
12
|
+
- **Corner radius**
|
|
13
|
+
- **Code font** — System monospace / JetBrains Mono
|
|
9
14
|
- **Sidebar navigation** — each row is `Label` + `URL`. The URL can be:
|
|
10
15
|
- a path (`/getting-started`)
|
|
11
16
|
- an external URL (`https://...`)
|
|
12
17
|
- a tag reference (`tag:tutorials`) → renders as a heading + list of tagged posts
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
18
|
+
- **Logo image URL**
|
|
19
|
+
- **Header navigation** — top-level links
|
|
20
|
+
- **Footer links** — label + URL pairs
|
|
16
21
|
|
|
17
22
|
## Authoring tip
|
|
18
23
|
|
|
19
24
|
Tag a post `guide` (in the post editor) and add a sidebar row with URL `tag:guide`. The sidebar will list that post automatically — no manual link editing every time you publish.
|
|
20
|
-
|
|
21
|
-
## Getting started
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install
|
|
25
|
-
npm run sandbox
|
|
26
|
-
```
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
# Landing テーマ
|
|
4
|
+
|
|
5
|
+
1 ページ完結型のヒーロー中心レイアウト。任意で「最新記事」グリッドも併設可能。ヘッダー / フッターナビ設定とウォームコーラル系アクセントパレットを備えます。
|
|
6
|
+
|
|
7
|
+
## カスタマイズ
|
|
8
|
+
|
|
9
|
+
`/admin/sites/<siteId>/theme` で設定:
|
|
10
|
+
|
|
11
|
+
- **ヒーロー見出し** — 空欄ならサイト名を使用
|
|
12
|
+
- **ヒーローサブ見出し** — 空欄ならサイト説明を使用
|
|
13
|
+
- **CTA ボタンのテキスト**
|
|
14
|
+
- **CTA リンク先**
|
|
15
|
+
- **プライマリカラー**
|
|
16
|
+
- **角丸**
|
|
17
|
+
- **フィーチャー記事のスラッグ** — 公開済み投稿を 1 件ホームに固定
|
|
18
|
+
- **ロゴ画像 URL**
|
|
19
|
+
- **ヘッダーナビ** — ラベル + URL のペア
|
|
20
|
+
- **フッターリンク** — ラベル + URL のペア
|
|
@@ -1,24 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
# Landing theme
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
Single-page hero focus with optional "Latest" post grid. Hero-led layout with configurable header / footer nav and a warm-coral accent palette.
|
|
4
6
|
|
|
5
7
|
## Customizing
|
|
6
8
|
|
|
7
9
|
In `/admin/sites/<siteId>/theme`:
|
|
8
10
|
|
|
9
|
-
- Hero headline
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
npm install
|
|
21
|
-
npm run sandbox # provision the AWS backend + start Next.js
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
See the project README for full setup.
|
|
11
|
+
- **Hero headline** — empty falls back to the site name
|
|
12
|
+
- **Hero subheadline** — empty falls back to the site description
|
|
13
|
+
- **CTA button text**
|
|
14
|
+
- **CTA URL**
|
|
15
|
+
- **Primary color**
|
|
16
|
+
- **Corner radius**
|
|
17
|
+
- **Featured post slug** — pin one published post to the home page
|
|
18
|
+
- **Logo image URL**
|
|
19
|
+
- **Header navigation** — label + URL pairs
|
|
20
|
+
- **Footer links** — label + URL pairs
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
> English: [README.md](./README.md)
|
|
2
|
+
>
|
|
3
|
+
# Minimal テーマ
|
|
4
|
+
|
|
5
|
+
shadcn/ui のカラートークンをベースにした、暖色系ニュートラル地にソフトブルーをアクセントとした構成。カスタマイズ項目を絞ったシンプルなブログレイアウトで、デザインを主張させたくない場合に向きます。
|
|
6
|
+
|
|
7
|
+
## カスタマイズ
|
|
8
|
+
|
|
9
|
+
`/admin/sites/<siteId>/theme` で設定:
|
|
10
|
+
|
|
11
|
+
- **プライマリカラー**
|
|
12
|
+
- **角丸**
|
|
13
|
+
|
|
14
|
+
以上です。フォントや複数のアクセントカラー、フッター / ナビゲーションの制御など、より細かい調整が必要な場合は `blog` テーマを利用してください。
|
|
@@ -1,49 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
> 日本語版: [README.ja.md](./README.ja.md)
|
|
2
|
+
>
|
|
3
|
+
# Minimal theme
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
Soft blue accent on a warm-neutral background, derived from shadcn/ui's color tokens. Stripped-down blog layout with very few customization knobs — pick this when you want the design to disappear.
|
|
4
6
|
|
|
5
|
-
##
|
|
7
|
+
## Customizing
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
In `/admin/sites/<siteId>/theme`:
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
npm install
|
|
11
|
+
- **Primary color**
|
|
12
|
+
- **Corner radius**
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
# Requires AWS credentials configured (`aws configure`).
|
|
15
|
-
# First run takes ~5–10 min to provision resources;
|
|
16
|
-
# amplify_outputs.json is regenerated each time before dev starts.
|
|
17
|
-
npm run sandbox
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Then open [http://localhost:3000](http://localhost:3000).
|
|
21
|
-
|
|
22
|
-
## First admin user
|
|
23
|
-
|
|
24
|
-
Open [http://localhost:3000/login](http://localhost:3000/login) and click **Create admin account**. The first user to register is automatically added to the `ampless-admin` Cognito group.
|
|
25
|
-
|
|
26
|
-
After that, manage content from `/admin`:
|
|
27
|
-
|
|
28
|
-
- `/admin` — dashboard
|
|
29
|
-
- `/admin/posts` — list / create / edit posts (tiptap editor)
|
|
30
|
-
- `/admin/media` — upload images to S3
|
|
31
|
-
|
|
32
|
-
## Production deploy
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
git init && git add . && git commit -m "init"
|
|
36
|
-
git remote add origin <your-repo>
|
|
37
|
-
git push
|
|
38
|
-
# Then connect the repo to AWS Amplify Hosting in the AWS console.
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Customize
|
|
42
|
-
|
|
43
|
-
- `cms.config.ts` — site name, media delivery mode, plugins
|
|
44
|
-
- `app/` — Next.js App Router pages (`(public)/` for the blog, `(admin)/` for the CMS)
|
|
45
|
-
- `amplify/` — Amplify Gen 2 backend definitions (auth / data / storage)
|
|
46
|
-
|
|
47
|
-
## Plugins
|
|
48
|
-
|
|
49
|
-
Enabled: {{plugins}}
|
|
14
|
+
That's it. For richer customization (fonts, multiple accent colors, footer / nav controls), use the `blog` theme.
|