Web Awesomeドキュメントに製品横断ナビゲーションを追加

Web Awesomeのドキュメントサイトに、Web Awesome、Font Awesome、Eleventyといった関連製品間を行き来できる統合ナビゲーションシステムが実装されました。この変更により、複数の製品を横断する開発者がシームレスに情報にアクセスできるようになります。

背景

Web AwesomeはFont AwesomeやEleventyと同じエコシステム（Awesomeverse）に属しており、これらの製品を併用する開発者が多く存在します。しかし、従来は各製品のドキュメントサイトが独立しており、製品間の移動には手動でURLを入力する必要がありました。#2057は、この課題に対処するため、ヘッダー部分に製品横断ナビゲーションを追加しています。

コンパニオンPRとして、webawesome-app#298とwebawesome-pro#143が関連リポジトリにも同様の変更を適用しており、Awesomeverse全体で統一されたナビゲーション体験を実現しています。

技術的な変更

製品ナビゲーションの実装には、レスポンシブ対応と再利用性を考慮した構造が採用されました。

ナビゲーションコンポーネントの追加

新しく追加された nav-products.njk は、製品ナビゲーションバーのメイン実装です：

<div class="wrapper-nav-products">
  <nav class="nav-products nav-products-full" aria-label="Awesomeverse Products + Links">
    <div class="nav-products-primary wa-split wa-align-items-stretch">
      <div class="wa-cluster wa-align-items-stretch wa-gap-0">
        <a href="/" class="product product-web-awesome product-active" aria-label="Web Awesome">
          {% include "logo-web-awesome.njk" %}
        </a>
        <a href="https://fontawesome.com" class="product product-font-awesome" id="product-font-awesome">
          <wa-icon name="font-awesome" family="brands"></wa-icon>
        </a>
        <wa-tooltip for="product-font-awesome">Font Awesome</wa-tooltip>
        <a href="https://eleventy.dev" class="product product-eleventy" id="product-eleventy">
          <wa-icon src="/assets/images/logo-eleventy-icon.svg"></wa-icon>
        </a>
        <wa-tooltip for="product-eleventy">Eleventy</wa-tooltip>
      </div>
      <div class="nav-products-secondary wa-cluster wa-gap-2xs">
        <wa-button appearance="plain" href="https://www.podcastawesome.com" id="product-podcast-awesome">
          <wa-icon name="microphone-lines"></wa-icon>
        </wa-button>
        <wa-tooltip for="product-podcast-awesome">Podcast Awesome</wa-tooltip>
        <wa-button appearance="plain" href="https://blog.fontawesome.com" id="product-blog-awesome">
          <wa-icon name="newspaper"></wa-icon>
        </wa-button>
        <wa-tooltip for="product-blog-awesome">Blog Awesome</wa-tooltip>
      </div>
    </div>
  </nav>
</div>

この構造は、プライマリ製品（Web Awesome、Font Awesome、Eleventy）とセカンダリ製品（Podcast Awesome、Blog Awesome）を視覚的に区別しており、wa-split と wa-cluster ユーティリティクラスを用いて柔軟なレイアウトを実現しています。

ロゴシステムのリファクタリング

インラインSVGから専用のロゴコンポーネントへの移行が行われました。例えば、Web Awesomeのロゴは以下のように独立したファイルとして定義されています：

<svg class="logo-svg awesome-logo logo-web-awesome" width="105" height="16" viewBox="0 0 105 16" fill="none">
<path class="logo-text" fill-rule="evenodd" clip-rule="evenodd" fill="var(--logo-text-fill, #183153)" d="..."/>
<path class="logo-icon" d="..." fill="var(--logo-icon-fill, #F36944)"/>
</svg>

このSVGは、CSS カスタムプロパティ（--logo-text-fill、--logo-icon-fill）を使用してテーマに応じた色の切り替えを可能にしています。ダークモード対応が utils.css で定義されています：

.logo-svg.awesome-logo {
  --logo-text-fill: var(--wa-color-text-normal);
}

html.wa-dark .logo-svg.awesome-logo {
  --logo-text-fill: var(--wa-color-text-loud);
}

従来の logo.njk や logo-simple.njk は削除され、各製品ごとに独立したロゴコンポーネント（logo-web-awesome.njk、logo-font-awesome.njk、logo-eleventy.njk）に置き換わりました。

ページヘッダー構造の再編

base.njk のヘッダー構造が大幅に変更され、製品ナビゲーションとドキュメントナビゲーションを階層的に配置する構造になりました：

変更前:

<wa-page>
  <header slot="header">
    <div class="header-main">
      <a href="/" class="header-logo">
        {% include "logo.njk" %}
      </a>
      <!-- 検索ボックスとナビゲーション -->
    </div>
  </header>
</wa-page>

変更後:

<wa-page>
  {% include "nav-products.njk" %}
  <header slot="header">
    <div class="header-main">
      {% include "header-logo-simple.njk" %}
      {% include "search-trigger-button.njk" %}
      {% include "nav-docs.njk" %}
      {% include "nav-toggle.njk" %}
    </div>
  </header>
</wa-page>

ヘッダーのロゴは、製品アイコンのみを表示する header-logo-simple.njk に置き換えられ、ドキュメントナビゲーション（Components、Patterns、Themes）は独立した nav-docs.njk として分離されました。

バナー実装の変更

プロモーションバナーの実装が、カスタムマークアップから wa-callout コンポーネントを使用する方式に変更されました：

変更前:

<div slot="banner" class="banner-wa-launch wa-dark">
  <div class="banner-content wa-split">
    <div class="wa-cluster wa-gap-s">
      <wa-icon name="badge-percent" class="banner-icon"></wa-icon>
      <p class="wa-body-s"><!-- バナー本文 --></p>
    </div>
    <wa-button appearance="outlined"><!-- CTA --></wa-button>
  </div>
</div>

変更後:

<div slot="banner" class="wrapper-banner">
  <wa-callout appearance="accent" variant="neutral" class="banner banner-wa-launch">
    <wa-icon slot="icon" family="duotone" name="badge-percent"></wa-icon>
    <div class="wa-split">
      <p class="wa-body-s"><!-- バナー本文 --></p>
      <wa-button appearance="accent" variant="brand" size="small"><!-- CTA --></wa-button>
    </div>
  </wa-callout>
</div>

この変更により、バナーのスタイリングがWeb Awesomeのコンポーネントシステムに統合され、カスタムCSSの量が削減されました。

設計判断

本PRは、複数の設計判断を含んでいます。

CSS カスタムプロパティによるテーマ対応

ロゴシステムは、直接色を指定するのではなく、CSS カスタムプロパティを経由してテーマから色を取得する方式を採用しました。これにより、ロゴ自体のSVGマークアップを変更せずに、テーマの切り替えだけで表示色を変更できます。各製品のブランドカラーは、カスタムプロパティとして utils.css で一元管理されています：

:root {
  --brand-web-awesome-orange: var(--wa-brand-orange);
  --brand-font-awesome-blue: #418fde;
  --brand-eleventy-green: #00a776;
}

この方式は、将来的に他の製品やテーマを追加する際の拡張性を考慮した判断といえます。

レスポンシブ対応の二重化

ナビゲーションシステムは、デスクトップ向けの nav-products.njk とモバイル向けの nav-products-drawer.njk という2つのバリエーションを持ちます。前者はフルサイズのロゴとラベルを表示し、後者はアイコンのみを表示してツールチップで製品名を補完します。この二重実装は、画面サイズによって異なるUXを提供するための意図的な選択です。

コンポーネントの分離と再利用

ヘッダーの各要素（ロゴ、検索ボックス、ナビゲーション、ドロワートグル）が独立したincludeファイルとして分離されました。この変更と、複数のコンパニオンPRが関連リポジトリに同様の変更を適用していることから、コンポーネントの再利用性を重視した設計であることが示唆されます。

まとめ

本PRは、ナビゲーション機能の追加だけでなく、ロゴシステムのリファクタリングとコンポーネント分離を通じて、Web Awesomeのドキュメントサイトを製品横断的なエコシステムに統合しています。CSS カスタムプロパティを活用したテーマ対応と、レスポンシブデザインへの配慮により、将来的な拡張性とユーザー体験の両立を実現した変更です。