microsoft-webui-press 3.0.3

<!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}}}*/
      }
    }

    @media not (forced-colors: active) {
      :root[data-theme="light"] {
        color-scheme: light;
        /*{{{tokens.light}}}*/
      }

      :root[data-theme="dark"] {
        color-scheme: dark;
        /*{{{tokens.dark}}}*/
      }
    }
  </style>
  {{{headTags}}}
  <script>
    /* Restore independent scroll containers before native snapshots when
       the shell is parsed. Otherwise skip the animation and restore on
       DOMContentLoaded without blocking first paint. */
    (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(event) {
        var m = main();
        var transition = event && event.viewTransition;
        if (transition && !m) {
          // Only consume the rejection caused by our cancellation.
          transition.ready.catch(function (error) {
            if (!(error instanceof DOMException && error.name === 'AbortError')) throw error;
          });
          transition.skipTransition();
        }
        var s = sidebar();
        var v = sessionStorage.getItem(SIDEBAR_KEY);
        if (s && v !== null) s.scrollTop = +v;
        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}}">
  <a class="skip-link" href="#main-content">Skip to content</a>
  <webui-press-region name="site.navigation">
    <header class="nav-bar">
      <a href="{{site.base}}" class="logo">
        <img src="{{site.base}}logo.svg" alt="{{site.title}}" />
        <span>{{site.title}}</span>
      </a>
      <docs-site-navigation
        :navigation="{{navigation}}"
        :sections="{{sidebar.sections}}"
        section="{{page.section}}"
        ?home="{{page.isHome}}"
        ?full-layout="{{page.layout == 'full'}}"
        :open="{{page.mobileNavigationOpen}}"
      ></docs-site-navigation>
    </header>
  </webui-press-region>
  <webui-press-region name="site.announcement" />

  <if condition="page.isHome">
    <main class="main-content" id="main-content" tabindex="-1">
      <div class="home-container">
        <webui-press-region name="home.hero" layout="home">
          <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>
          </if>
        </webui-press-region>
        <webui-press-region name="home.afterHero" layout="home" />
        <webui-press-region name="home.features" layout="home">
          <if condition="hero">
            <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>
                    <h2>{{feature.title}}</h2>
                  </div>
                  <p>{{feature.description}}</p>
                </div>
              </for>
            </div>
          </if>
        </webui-press-region>
        <webui-press-region name="home.footer" layout="home">
          <if condition="footer">
            <footer class="site-footer">
              {{{footer.html}}}
            </footer>
          </if>
        </webui-press-region>
      </div>
    </main>
  </if>

  <if condition="!page.isHome">
    <div class="layout">
    <webui-press-region name="doc.sidebar" layout="doc">
      <aside class="sidebar" aria-label="Documentation sections">
        <docs-sidebar-navigation
          :sections="{{sidebar.sections}}"
        ></docs-sidebar-navigation>
      </aside>
    </webui-press-region>

    <main class="main-content" id="main-content" tabindex="-1">
      <webui-press-region name="doc.context" layout="doc">
        <if condition="sidebar.currentSection">
          <div class="mobile-page-context" aria-label="Current location">
            <span>{{sidebar.currentSection}}</span>
            <span aria-hidden="true">/</span>
            <strong>{{page.title}}</strong>
          </div>
        </if>
      </webui-press-region>
      <webui-press-region name="doc.beforeContent" layout="doc" />
      <webui-press-region name="page.beforeContent" layout="page" />
      <webui-press-region name="full.beforeContent" layout="full" />
      <article class="doc-content">
        {{{page.content}}}
      </article>
      <webui-press-region name="doc.afterContent" layout="doc" />
      <webui-press-region name="page.afterContent" layout="page" />
      <webui-press-region name="full.afterContent" layout="full" />
      <webui-press-region name="doc.pageNavigation" layout="doc">
        <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>
      </webui-press-region>
      <webui-press-region name="doc.footer" layout="doc">
        <if condition="footer">
          <footer class="site-footer">
            {{{footer.html}}}
          </footer>
        </if>
      </webui-press-region>
      <webui-press-region name="page.footer" layout="page">
        <if condition="footer">
          <footer class="site-footer">
            {{{footer.html}}}
          </footer>
        </if>
      </webui-press-region>
    </main>
  </div>
  </if>
</body>

</html>