プロモーション用バナー・ダイアログをBuild Awesome Kickstarter向けに刷新
Web Awesomeドキュメントサイトのサイト告知コンポーネントを、旧来のWAローンチセール用バナー・ダイアログからBuild Awesome Kickstarter告知用に入れ替えました。テンプレートの差し替えにとどまらず、CSSカスタムプロパティの設計も刷新されています。
背景
これまでドキュメントサイトには、Web Awesomeのローンチを祝う20%割引プロモーション用の _banner-wa-launch.njk と _dialog-wa-launch.njk が組み込まれていました。これらはStripeの割引アクティブ状態とユーザーのProプラン保有状況を条件に表示するコンポーネントで、キャンペーン終了に伴い不要となっています。
新たに告知すべき内容は、静的サイトジェネレーターEleventyが「Build Awesome」としてリブランドされるKickstarterキャンペーンです。対象が変わったことで、表示条件の仕組み（Stripeの割引フラグ参照）から、シンプルなlocalStorageによる「一度見た」フラグ管理へと設計方針も変化しています。
技術的な変更
テンプレートの入れ替えは base.njk のinclude箇所2か所を変更するだけで完結し、ファイル命名規則も整理されています。
変更前:
{#- WA Launch Banner -#}
{% include "_banner-wa-launch.njk" ignore missing %}
...
{#- Site-Wide Dialog -#}
{% include "_dialog-wa-launch.njk" ignore missing %}
変更後:
{#- BA Kickstarter Banner -#}
{% include "banner-ba-kickstarter.njk" ignore missing %}
...
{#- BA Kickstarter Dialog -#}
{% include "dialog-ba-kickstarter.njk" ignore missing %}
ファイル名から先頭のアンダースコアが除かれ、プレフィックスも wa-launch から ba-kickstarter に統一されました。
新しいダイアログ dialog-ba-kickstarter.njk では、表示制御ロジックが大きく変わっています。旧ダイアログはStripeのAPIレスポンス（req.stripe.discount.active）を条件にNunjucksのサーバーサイドレンダリング段階で表示を制御していましたが、新ダイアログはその条件を廃止し、クライアントサイドのlocalStorageキー dialog-build-awesome-kickstarter-dismissed のみで管理します。また、ダイアログ内にはVimeoのiframeが埋め込まれており、loading="lazy" 属性と data-vimeo-src による遅延ロードが採用されています。
CSSの変更では、 docs.css からWAローンチ用のカスタムブランドカラー定義（--wa-color-brand-* の上書き）が47行削除されました。代わりに utils.css にユーティリティクラス .brand-build-awesome が追加され、Build Awesome固有のグリーン系カラーパレットが定義されています。ダークモード対応も .wa-dark .brand-build-awesome セレクターで明示的に記述されています。
.brand-build-awesome {
--wa-color-brand-50: var(--brand-build-awesome-green);
--wa-color-brand-60: #43a57d;
--wa-color-brand: var(--wa-color-brand-60);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
/* ... */
}
.wa-dark .brand-build-awesome {
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
/* ... */
}
設計判断
ブランドカラーの定義場所が docs.css の特定IDセレクター（#dialog-site）から、utils.css の汎用クラス（.brand-build-awesome）へ移動した点は注目に値します。旧実装ではバナーとダイアログでそれぞれ同一の --wa-color-brand-* 上書きコードが重複していましたが、新実装ではクラスを付与するだけで両コンポーネントに一貫したブランドカラーが適用されます。
表示条件をサーバーサイドのStripe連携からクライアントサイドのlocalStorageに切り替えた判断は、バックエンドとの依存を排除しシンプルさを優先した設計です。Kickstarterキャンペーンは「見たら閉じる」という一方向のライフサイクルで十分なため、リアルタイムの外部APIを参照する必要がなくなっています。
まとめ
この変更は単なるコンテンツ差し替えにとどまらず、ブランドカラーの定義をIDセレクターからユーティリティクラスへ移行し、表示制御ロジックをサーバーサイドからクライアントサイドへ簡素化する設計改善も同時に行っています。.brand-build-awesome クラスの汎用化により、今後同様のブランドコンポーネントを追加する際の再利用性も高まっています。