ページシェル・フッター・サイドバーの幅を統一しスタイルを整理
Web Awesome のドキュメントページは、ページシェル、フッター、サイドバーが個別に幅を定義していたため、ビューポートが変わるとレイアウトがずれるケースがありました。本 PR は幅を統一し、関連フラグとマークアップを整理することで、ページ全体の一貫性と保守性を向上させます。
背景
これまでは wa-prose が <main> に直接掛かり、wa-page::part(body) の横幅が可変でした。その結果、メイン、フッター、サイドバーが同一ベースラインで揃わず、デスクトップとモバイルで見た目が不揃いになることがありました。加えて、hasFlushMain、hasFramedMain、hasWideMain など名前が似通ったフラグが散在し、テンプレートロジックが複雑化していました。今回の変更は、幅の定数化とフラグの統一により、レイアウトの根本的なずれを解消することを目的としています。
技術的な変更
ページ幅の定数化 として utils.css に --page-max-inline-size: 90rem が導入され、.content-container の max-inline-size がこのカスタムプロパティに従うよう変更されました。
.content-container {
margin-inline: auto;
max-inline-size: var(--max-inline-size, var(--page-max-inline-size));
padding-inline: var(--content-padding-inline);
}
フラグ名の統一 が行われ、hasProseContent が has-prose-content、hasOutline が has-outline にリネームされました。base.njk では新しいクラス名に合わせて isProseWrapped を再計算し、body 要素に適切なクラスが付与されます。
{% set isProseWrapped = hasFramedMain != false and hasProseContent %}
<body class="layout-{{ layout | stripExtension }} page-{{ pageType }}{{ ' has-prose-content' if isProseWrapped }}{{ ' has-outline' if hasOutline }}">
アウトラインの構造分離 により、wa-prose ラップからアウトラインが外へ移動し、展開可能なアウトラインは <wa-details> コンポーネントで実装されました。outlineTransformer が listClass と linkIcon オプションを受け取り、リスト項目にアイコンを追加できるよう拡張されています。
export function outlineTransformer(options = {}) {
const { listClass = '', linkIcon = '' } = options;
// ...省略...
if (options.linkIcon) {
const icon = `<wa-icon name="${options.linkIcon}" variant="light" aria-hidden="true"></wa-icon>`;
liMarkup = `<li data-level="${level}" class="wa-cluster wa-gap-xs wa-flex-nowrap">${icon}<a href="${escapedHref}">${escapedText}</a></li>`;
} else {
liMarkup = `<li data-level="${level}"><a href="${escapedHref}">${escapedText}</a></li>`;
}
const li = parse(liMarkup);
サイドバーとナビゲーションのマークアップ整理 では、slot-navigation.njk のラッパーが <nav> に変更され、aria-label が付与されました。また、sidebar.njk が大幅にリファクタリングされ、コンポーネントリスト生成マクロ sidebarComponent が導入され、hasPro と isExperimental に応じた表示ロジックが統一されています。
{%- macro sidebarComponent(page, suppressProBadge=false) -%}
{%- set isExperimental = page.data.component && page.data.component.status == 'experimental' -%}
{%- set isPro = page.data.isProComponent && not suppressProBadge -%}
{%- if isPro %}<span class="wa-split">{% endif -%}
<a{% if isExperimental %} class="wa-cluster wa-gap-xs"{% endif %} href="{{ page.url }}">{{ page.data.title }}{% if isExperimental %} <wa-icon name="flask" aria-hidden="true" class="icon-shrink de-emphasize"></wa-icon>{% endif %}</a>
{%- if isPro %} {{ proBadge() }}</span>{% endif -%}
{%- endmacro %}
フッターとメイン領域のパディング調整 では、docs.css にメインのブロック・インラインパディングが --content-padding-inline と --wa-space-* トークンに基づく階層的設定へ変更され、フッターは常に var(--wa-space-xl) のパディングを保持するようになりました。
wa-page > main {
padding-block: var(--wa-space-xl);
padding-inline: var(--content-padding-inline);
margin-inline: auto;
}
@media screen and (min-width: 75rem) {
wa-page > main { padding-inline: var(--wa-space-4xl); }
}
:is(.layout-docs, .layout-component, .layout-page, .layout-page-outline, .layout-pattern) .page-footer {
padding: var(--wa-space-xl);
border-block-start: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
margin-block-start: var(--wa-space-2xl);
}
設計判断
幅の定数化 によってページ全体が同一ベースラインで揃うようになり、個別ページでの横幅調整が不要になりました。この設計は CSS カスタムプロパティだけで実装され、既存のスタイルシートへの影響を最小限に抑えています。フラグ命名の統一 は has* 系を一貫して使用することで、テンプレート側の条件式が直感的になり、保守時の誤認識リスクが低減されました。アウトラインの分離 はプロースタイリングとナビゲーションの相互依存を解消し、<wa-details> コンポーネントによるアクセシビリティ向上が実現されています。サイドバーのマクロ化 はコンポーネントリスト生成ロジックを一元管理し、将来的な項目追加や表示制御をコード変更なしで行える基盤を提供します。
まとめ
ページシェル、フッター、サイドバーの幅を統一し、フラグとマークアップを整理したことで、Web Awesome のドキュメントはレイアウトの一貫性と保守性が向上しました。これにより、個別ページで幅やクラスを個別に調整する必要がなくなり、コードベースがシンプルになっています。