microsoft-webui-press 0.0.21

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="color-scheme" content="light dark" />
  <script>
    /* Apply theme synchronously before first paint to prevent
       flash-of-wrong-theme on cross-document navigation. */
    (function () {
      try {
        var t = localStorage.getItem('theme');
        if (!t) t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', t);
      } catch (e) {}
    })();
  </script>
  <base href="{{site.base}}" />
  <meta name="base" content="{{site.base}}" />
  <title>{{page.title}} | {{site.title}}</title>
  <meta name="description" content="{{page.description}}" />
  <meta property="og:title" content="{{page.title}} | {{site.title}}" />
  <meta property="og:description" content="{{page.description}}" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary" />
  <link rel="icon" href="{{site.base}}logo.svg" />
  <style>
    :root {
      /*{{{tokens.light}}}*/
    }

    @media (prefers-color-scheme: dark) {
      :root {
        /*{{{tokens.dark}}}*/
      }
    }

    :root[data-theme="dark"] {
      /*{{{tokens.dark}}}*/
    }
  </style>
  {{{headTags}}}
  <script>
    /* Preserve sidebar scroll across cross-document navigations.
       The page itself is not scrollable; sidebar and main-content own their
       own scrollbars. Runs BEFORE pagereveal fires (and before first paint)
       so restored positions are what view transitions animate to,
       eliminating the end-of-transition jump. */
    (function () {
      var SIDEBAR_KEY = 'webui-press:sidebar-scroll';
      var MAIN_KEY_PREFIX = 'webui-press:main-scroll:';
      function sidebar() { return document.querySelector('.sidebar'); }
      function main() { return document.querySelector('.main-content'); }
      function mainKey() { return MAIN_KEY_PREFIX + location.pathname + location.search; }
      function save() {
        var s = sidebar();
        if (s) sessionStorage.setItem(SIDEBAR_KEY, s.scrollTop);
        var m = main();
        if (m) sessionStorage.setItem(mainKey(), m.scrollTop);
      }
      function restore() {
        var s = sidebar();
        var v = sessionStorage.getItem(SIDEBAR_KEY);
        if (s && v !== null) s.scrollTop = +v;
        var m = main();
        if (!m) return;
        if (!location.hash) {
          var mv = sessionStorage.getItem(mainKey());
          if (mv !== null) m.scrollTop = +mv;
        }
        if (document.activeElement === document.body) {
          m.focus({ preventScroll: true });
        }
      }
      window.addEventListener('pageswap', save);
      window.addEventListener('pagehide', save);
      if ('onpagereveal' in window) {
        window.addEventListener('pagereveal', restore);
      }
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', restore, { once: true });
      } else {
        restore();
      }
    })();
  </script>
</head>

<body data-layout="{{page.layout}}">
  <header class="nav-bar">
    <a href="{{site.base}}" class="logo">
      <img src="{{site.base}}logo.svg" alt="{{site.title}}" />
      <span>{{site.title}}</span>
    </a>
    <nav class="nav-links">
      <for each="link in navigation">
        <a href="{{link.link}}" class="nav-link" ?active="{{link.section == page.section}}">{{link.text}}</a>
      </for>
      <docs-search></docs-search>
      <docs-theme-toggle></docs-theme-toggle>
      <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu">☰</button>
    </nav>
  </header>

  <if condition="page.isHome">
    <main class="main-content" tabindex="-1">
      <div class="home-container">
        <if condition="hero">
          <div class="home-hero">
            <h1>{{site.title}}</h1>
            <if condition="hero.text">
              <p class="hero-text">{{hero.text}}</p>
            </if>
            <p class="tagline">{{hero.tagline}}</p>
            <div class="home-actions">
              <for each="action in hero.actions">
                <if condition="action.brand">
                  <a href="{{action.link}}" class="btn-brand">{{action.text}}</a>
                </if>
                <if condition="!action.brand">
                  <a href="{{action.link}}" class="btn-alt">{{action.text}}</a>
                </if>
              </for>
            </div>
          </div>
          <if condition="hero.manifesto">
            <p class="hero-manifesto">{{hero.manifesto}}</p>
          </if>
          <div class="features-grid">
            <for each="feature in hero.features">
              <div class="feature-card">
                <div class="feature-card-header">
                  <div class="feature-icon">{{feature.icon}}</div>
                  <h3>{{feature.title}}</h3>
                </div>
                <p>{{feature.description}}</p>
              </div>
            </for>
          </div>
        </if>
        <if condition="footer">
          <footer class="site-footer">
            {{{footer.html}}}
          </footer>
        </if>
      </div>
    </main>
  </if>

  <if condition="!page.isHome">
    <div class="layout">
    <aside class="sidebar">
      <for each="section in sidebar.sections">
        <div class="sidebar-group">
          <h3 class="sidebar-title">{{section.title}}</h3>
          <ul class="sidebar-items">
            <for each="item in section.items">
              <li>
                <if condition="item.hasChildren">
                  <if condition="item.link">
                    <if condition="item.active">
                      <a href="{{item.link}}" class="sidebar-link sidebar-link-active">{{item.text}}</a>
                    </if>
                    <if condition="!item.active">
                      <a href="{{item.link}}" class="sidebar-link">{{item.text}}</a>
                    </if>
                  </if>
                  <if condition="!item.link">
                    <span class="sidebar-parent-label">{{item.text}}</span>
                  </if>
                  <ul class="sidebar-children">
                    <for each="child in item.children">
                      <li>
                        <if condition="child.active">
                          <a href="{{child.link}}" class="sidebar-link sidebar-link-active">{{child.text}}</a>
                        </if>
                        <if condition="!child.active">
                          <a href="{{child.link}}" class="sidebar-link">{{child.text}}</a>
                        </if>
                      </li>
                    </for>
                  </ul>
                </if>
                <if condition="!item.hasChildren">
                  <if condition="item.active">
                    <a href="{{item.link}}" class="sidebar-link sidebar-link-active">{{item.text}}</a>
                  </if>
                  <if condition="!item.active">
                    <a href="{{item.link}}" class="sidebar-link">{{item.text}}</a>
                  </if>
                </if>
              </li>
            </for>
          </ul>
        </div>
      </for>
    </aside>

    <main class="main-content" tabindex="-1">
      <article class="doc-content">
        {{{page.content}}}
      </article>

      <nav class="page-nav">
        <if condition="prev">
          <a href="{{prev.link}}">← {{prev.text}}</a>
        </if>
        <if condition="!prev">
          <span></span>
        </if>
        <if condition="next">
          <a href="{{next.link}}">{{next.text}} →</a>
        </if>
      </nav>
      <if condition="footer">
        <footer class="site-footer">
          {{{footer.html}}}
        </footer>
      </if>
    </main>
  </div>
  </if>
</body>

</html>