Wide Layout Support Restored
この PR は、#2482 で除去された wide レイアウト 機能を元に戻し、page-wide クラスと対応する CSS、そして wide: true フロントマターを再導入します。これにより、インデックスページや Visual Tests ページで広いコンテンツ領域が利用できるようになります。
背景
page-wide レイアウトは、ドキュメントのインデックスやコンポーネントのビジュアルテストで広い表示領域が必要なケースで利用されてきました。base.njk が page-wide クラスを付与することで、CSS 側で幅を拡張できる設計です。#2482 の変更でこの仕組みが削除された結果、レイアウトが狭くなり、デザインの一貫性が失われました。
wide レイアウトが失われる影響は、カードリストや長文テキストが狭い列に収まり、読みやすさが低下する点です。特に Visual Tests ページは各コンポーネントの比較表示が中心で、余白が不足すると判定が困難になります。したがって、広い領域の再導入は UI の可視性とアクセシビリティ向上に直結します。
結論として、元の wide レイアウト機構を復活させることは、既存のドキュメントデザインとユーザー体験を保つために必須でした。
技術的な変更
base.njk に条件付きクラスを再追加 しました。class 属性に {{ ' page-wide' if wide }} を埋め込むことで、フロントマターに wide が true の場合に page-wide が付与されます。これによりテンプレート側で簡潔にスイッチングできます。
@@ -69,7 +69,7 @@
</script>
</head>
<body
- class="layout-{{ layout | stripExtension }} page-{{ pageType }}">
+ class="layout-{{ layout | stripExtension }} page-{{ pageType }}{{ ' page-wide' if wide }}">
docs.css に幅拡張ルールを復元 しました。.page-wide セレクタで wa-page > main の max-inline-size を var(--content-width-l) に設定し、.max-line-length も同様に拡張しています。また、インデックスページの :has(.modern-card-list) に対する幅拡張も追加しました。
@@ -82,8 +82,14 @@ wa-page > main {
margin-inline: auto;
}
+/* increase max-inline-size for index pages */
+wa-page > main:has(.modern-card-list) {
+ max-inline-size: var(--content-width-m);
+}
+
/* The docs main column is wider than `wa-prose`'s default 65ch. Anchor the
- reading-column custom property to the docs token to keep the established width. */
+ reading-column custom property to the docs token so existing layouts —
+ default, modern-card-list, and page-wide — keep their established widths. */
#content {
--wa-prose-line-length: var(--content-width-s);
@@
.page-wide {
wa-page > main {
max-inline-size: var(--content-width-l);
.max-line-length {
max-inline-size: var(--line-length-l);
}
}
}
visual-tests.md にフロントマターを追加 しました。wide: true を設定することで、このページが page-wide レイアウトでレンダリングされます。ビジュアルテストは幅広い領域が必要なため、この変更は直接的な効果を持ちます。
@@ -2,6 +2,7 @@
title: Visual Tests
description: A page to visually test component styles against native styles.
layout: page
+wide: true
---
まとめると、テンプレート、CSS、マークダウンの三層で page-wide 機能が統合され、既存のページと新規ページの両方で広いレイアウトが利用可能になりました。
設計判断
元の実装を再利用する方針 が採用されました。page-wide クラスは既に他のレイアウト（default、modern-card-list）と同様の設計パターンで実装されており、再度ゼロから設計し直す必要がありませんでした。
幅のデフォルトは変更しない決定 も明示されています。Design Tokens インデックスはデフォルト幅のままにし、カードリストレイアウトは wide の影響を受けずに機能します。これにより、広いレイアウトが不要なページで余計なスタイル変更が走らないようにしています。
結論として、後方互換性と最小変更を重視した設計判断により、wide レイアウトの復活が安全かつ効率的に実装されました。
まとめ
本 PR は、Webawesome のドキュメントにおける wide レイアウト 機能を復活させ、テンプレート、CSS、フロントマターの三層で一貫した有効化手段を提供します。既存ページへの影響は最小限に抑えつつ、インデックスや Visual Tests で必要な広い表示領域を再び利用できるようになりました。