docs/_includes/base.njk

<!DOCTYPE html>
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
  <head>
    {% include 'head.njk' %}
    <meta name="theme-color" content="#f36944">

    <script type="module" src="/assets/scripts/code-examples.js"></script>

    <script type="module" src="/assets/scripts/scroll.js"></script>
    <script type="module" src="/assets/scripts/turbo.js"></script>
    <script type="module" src="/assets/scripts/search.js"></script>
    <script type="module" src="/assets/scripts/outline.js"></script>
    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>

    {# Docs styles #}
    <link rel="stylesheet" href="/assets/styles/docs.css" />

    {% block head %}{% endblock %}
  </head>
  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
    <wa-page view="desktop" disable-navigation-toggle="">
      <header slot="header" class="wa-split">
        {# Logo #}
        <div id="docs-branding">
          {# Nav toggle #}
          <wa-button appearance="plain" size="small" data-toggle-nav>
            <wa-icon name="bars" label="Toggle navigation"></wa-icon>
          </wa-button>

          <a href="/" aria-label="Web Awesome">
            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
          </a>
          <small id="version-number" class="only-desktop">{{ package.version }}</small>
          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
        </div>

        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
          {# Desktop selectors #}
          <div class="only-desktop wa-cluster wa-gap-xs">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>

          {# Search #}
          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
            Search
            <kbd slot="suffix" class="only-desktop">/</kbd>
          </wa-button>

          {# Login #}
          {% server "loginOrAvatar" %}
        </div>
      </header>

      {# Sidebar #}
      {% if hasSidebar %}
        {# Mobile selectors #}
        <div class="wa-mobile-only" slot="navigation-header">
          <div class="wa-cluster wa-gap-xs">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
        </div>
        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
          {% include "sidebar.njk" %}
        </div>
      {% endif %}

      {# Outline #}
      {% if hasOutline %}
        <aside slot="aside" id="outline" class="docs-aside">
          <nav id="outline-standard" class="outline-links">
            <h2><a href="#content">{{ title }}</a></h2>
          </nav>
        </aside>
      {% endif %}


      {# Main #}
      <main id="content">
        {# Expandable outline #}
        {% if hasOutline %}
        <nav id="outline-expandable">
          <details class="outline-links">
            <summary>On this page</summary>
          </details>
        </nav>
        {% endif %}

        <div id="flashes">{% server "flashes" %}</div>

        {% block header %}
          {% include 'breadcrumbs.njk' %}
          <h1 class="title">{{ title }}</h1>
        {% endblock %}

        {% block content %}
          {{ content | safe }}
        {% endblock %}

        {% block afterContent %}{% endblock %}
      </main>

      {% include 'search.njk' %}
    </wa-page>

  </body>
</html>
oh no where did astro go 2024-04-17 11:20:27 -04:00			`<!DOCTYPE html>`
Add FOUCE utilities (#686) * add fouce utilities * add comment * Update docs/docs/installation.md Co-authored-by: Lea Verou <lea@verou.me> * commit PR suggestion * rename wa-reduce-fouce to wa-cloak * remove class as requested * add cloak class * wait a cycle * move turbo to same file * reduce fade * disable SSR and add Turbo FOUCE helper * disable SSR * fix test suite * workflow dispatch * update fouce util * no need to remove cloak class * simplify fouce util * add allDefined util * update changelog --------- Co-authored-by: Lea Verou <lea@verou.me> Co-authored-by: konnorrogers <konnor5456@gmail.com> 2025-03-24 16:33:24 -04:00			`<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`<head>`
Rewrite color scheme logic (#481) - Minimize needless swaps - Centralize logic - Use an actual `<wa-select>` rather than hacking it with `<wa-dropdown>` - Move shared includes to shared template - Rewrite critical theme JS - Refactor of theme picker code - Utilize view transitions better and use them for color scheme too - Do not store default value in localStorage - Removed unused `*-wide` templates - Fixed #482 2025-01-10 15:32:28 -05:00			`{% include 'head.njk' %}`
fix theme color 2024-06-20 12:30:24 -04:00			`<meta name="theme-color" content="#f36944">`
Fix remember scroll (#148) * add data-turbo-track * add data-turbo-track * add debugging * add debugging * remove nopreview * move top level * move top level * move top level * remove data-turbo-track * add comment to base.njk * prettier 2024-06-25 15:57:43 -04:00
oh no where did astro go 2024-04-17 11:20:27 -04:00			`<script type="module" src="/assets/scripts/code-examples.js"></script>`
Themes category in docs (#477) Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Co-authored-by: lindsaym-fa <dev@lindsaym.design> 2025-01-13 13:14:12 -05:00
oh no where did astro go 2024-04-17 11:20:27 -04:00			`<script type="module" src="/assets/scripts/scroll.js"></script>`
			`<script type="module" src="/assets/scripts/turbo.js"></script>`
			`<script type="module" src="/assets/scripts/search.js"></script>`
			`<script type="module" src="/assets/scripts/outline.js"></script>`
Save palette MVP, fixes #746 (#755) 2025-02-18 16:11:40 -05:00			`{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}`
add plausible 2024-06-21 10:45:02 -04:00			`<script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>`
oh no where did astro go 2024-04-17 11:20:27 -04:00
			`{# Docs styles #}`
			`<link rel="stylesheet" href="/assets/styles/docs.css" />`
Improve theme remixing UI (#724) Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> 2025-02-07 11:35:12 -05:00
			`{% block head %}{% endblock %}`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`</head>`
Implement `wide` page-level data 2025-01-22 13:16:35 -05:00			`<body class="layout-{{ layout \| stripExtension }}{{ ' page-wide' if wide }}">`
Fix remember scroll (#148) * add data-turbo-track * add data-turbo-track * add debugging * add debugging * remove nopreview * move top level * move top level * move top level * remove data-turbo-track * add comment to base.njk * prettier 2024-06-25 15:57:43 -04:00			`<!-- use view="desktop" as default to reduce layout jank on desktop site. -->`
add layout toggling (#294) * Add nav toggling * fix comments * fix comments * prettier * add comments / docs * prettier * fix up page stuff * prettier * Add comment * minor fixes * prettier 2024-12-10 13:53:08 -05:00			`<wa-page view="desktop" disable-navigation-toggle="">`
Fix mobile theme selector; fixes #440 (#446) * Fix styling * Fix mobile theme selector label 2025-01-08 15:01:20 -05:00			`<header slot="header" class="wa-split">`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`{# Logo #}`
update docs header 2024-06-13 23:06:24 -04:00			`<div id="docs-branding">`
improve docs header responsiveness 2024-06-14 19:12:21 -04:00			`{# Nav toggle #}`
`text`→`plain` (for `appearance` and utils) rel #330 2024-12-18 12:51:13 -05:00			`<wa-button appearance="plain" size="small" data-toggle-nav>`
improve docs header responsiveness 2024-06-14 19:12:21 -04:00			`<wa-icon name="bars" label="Toggle navigation"></wa-icon>`
			`</wa-button>`
add layout toggling (#294) * Add nav toggling * fix comments * fix comments * prettier * add comments / docs * prettier * fix up page stuff * prettier * Add comment * minor fixes * prettier 2024-12-10 13:53:08 -05:00
update docs header 2024-06-13 23:06:24 -04:00			`<a href="/" aria-label="Web Awesome">`
Page utils & native styles 2024-12-19 17:34:25 -05:00			`<span class="wa-desktop-only">{% include "logo.njk" %}</span>`
			`<span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>`
update docs header 2024-06-13 23:06:24 -04:00			`</a>`
improve docs header responsiveness 2024-06-14 19:12:21 -04:00			`<small id="version-number" class="only-desktop">{{ package.version }}</small>`
Rename `tinted` → `filled` 2024-12-18 13:11:21 -05:00			`<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>`
update docs header 2024-06-13 23:06:24 -04:00			`</div>`

Fix mobile theme selector; fixes #440 (#446) * Fix styling * Fix mobile theme selector label 2025-01-08 15:01:20 -05:00			`<div id="docs-toolbar" class="wa-cluster wa-gap-xs">`
move selectors to sidebar on mobile 2024-12-09 17:56:10 -05:00			`{# Desktop selectors #}`
Fix mobile theme selector; fixes #440 (#446) * Fix styling * Fix mobile theme selector label 2025-01-08 15:01:20 -05:00			`<div class="only-desktop wa-cluster wa-gap-xs">`
move selectors to sidebar on mobile 2024-12-09 17:56:10 -05:00			`{% include "preset-theme-selector.njk" %}`
			`{% include "color-scheme-selector.njk" %}`
			`</div>`
update docs header 2024-06-13 23:06:24 -04:00
			`{# Search #}`
rename 'outline' buttons to 'outlined' 2024-06-20 16:40:13 -04:00			`<wa-button id="search-trigger" appearance="outlined" size="small" data-search>`
update docs header 2024-06-13 23:06:24 -04:00			`<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>`
			`Search`
improve docs header responsiveness 2024-06-14 19:12:21 -04:00			`<kbd slot="suffix" class="only-desktop">/</kbd>`
update docs header 2024-06-13 23:06:24 -04:00			`</wa-button>`
11ty for webawesome-app (#803) * working on integration * 11ty for webawesome + app * add flashes * additional changes * prettier * add note about nunjucks * prettier 2025-03-18 13:04:24 -04:00
			`{# Login #}`
			`{% server "loginOrAvatar" %}`
update docs header 2024-06-13 23:06:24 -04:00			`</div>`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`</header>`

			`{# Sidebar #}`
			`{% if hasSidebar %}`
fix various page issues (#286) * fix dialog issues * fix various page issues * prettier 2024-12-09 19:00:16 -05:00			`{# Mobile selectors #}`
Page utils & native styles 2024-12-19 17:34:25 -05:00			`<div class="wa-mobile-only" slot="navigation-header">`
Fix mobile theme selector; fixes #440 (#446) * Fix styling * Fix mobile theme selector label 2025-01-08 15:01:20 -05:00			`<div class="wa-cluster wa-gap-xs">`
move selectors to sidebar on mobile 2024-12-09 17:56:10 -05:00			`{% include "preset-theme-selector.njk" %}`
			`{% include "color-scheme-selector.njk" %}`
			`</div>`
fix various page issues (#286) * fix dialog issues * fix various page issues * prettier 2024-12-09 19:00:16 -05:00			`</div>`
			`<div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>`
			`{% include "sidebar.njk" %}`
			`</div>`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`{% endif %}`

			`{# Outline #}`
			`{% if hasOutline %}`
			`<aside slot="aside" id="outline" class="docs-aside">`
			`<nav id="outline-standard" class="outline-links">`
			`<h2><a href="#content">{{ title }}</a></h2>`
			`</nav>`
			`</aside>`
			`{% endif %}`

11ty for webawesome-app (#803) * working on integration * 11ty for webawesome + app * add flashes * additional changes * prettier * add note about nunjucks * prettier 2025-03-18 13:04:24 -04:00
oh no where did astro go 2024-04-17 11:20:27 -04:00			`{# Main #}`
			`<main id="content">`
			`{# Expandable outline #}`
11ty for webawesome-app (#803) * working on integration * 11ty for webawesome + app * add flashes * additional changes * prettier * add note about nunjucks * prettier 2025-03-18 13:04:24 -04:00			`{% if hasOutline %}`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`<nav id="outline-expandable">`
			`<details class="outline-links">`
			`<summary>On this page</summary>`
			`</details>`
			`</nav>`
11ty for webawesome-app (#803) * working on integration * 11ty for webawesome + app * add flashes * additional changes * prettier * add note about nunjucks * prettier 2025-03-18 13:04:24 -04:00			`{% endif %}`

			`<div id="flashes">{% server "flashes" %}</div>`
oh no where did astro go 2024-04-17 11:20:27 -04:00
Template-tweaks - Move breadcrumbs to separate template - Rename `beforeContent` to `header` - Move breadcrumbs inside header 2025-01-09 01:59:59 -05:00			`{% block header %}`
			`{% include 'breadcrumbs.njk' %}`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`<h1 class="title">{{ title }}</h1>`
Template-tweaks - Move breadcrumbs to separate template - Rename `beforeContent` to `header` - Move breadcrumbs inside header 2025-01-09 01:59:59 -05:00			`{% endblock %}`
oh no where did astro go 2024-04-17 11:20:27 -04:00
Template-tweaks - Move breadcrumbs to separate template - Rename `beforeContent` to `header` - Move breadcrumbs inside header 2025-01-09 01:59:59 -05:00			`{% block content %}`
oh no where did astro go 2024-04-17 11:20:27 -04:00			`{{ content \| safe }}`
			`{% endblock %}`

			`{% block afterContent %}{% endblock %}`
			`</main>`

			`{% include 'search.njk' %}`
			`</wa-page>`
Initial SSR implementation (#157) * continued ssr work * continued ssr work * prettier * all components now rendering * everything finally works * fix type issues * working on breadcrumb * working on breadcrumb * radio group * convert all tests to ssr * prettier * test suite finally passing * add layout stuff * add changelog * fix TS issue * fix tests * fixing deploy stuff * get QR code displaying * fix tests * fix tests * prettier * condense hydration stuff * prettier * comment out range test * fixing issues * use base fixtures * fixing examples * dont vendor * fix import of hydration support * adding notes * add notesg * add ssr loader * fix build * prettier * add notes * add notes * prettier * fixing bundled stuff * remove cdn * remove cdn * prettier * fiixng tests * prettier * split jobs?? * prettier * fix build stuff * add reset mouse and await aTimeout * prettier * fix improper tests * prettier * bail on first * fix linting * only test form with client * redundancy on ssr-loader?? * maybe this will work * prettier * try callout now * fix form.test.ts * fix form.test.ts * prettier * fix forms * fix forms * try again * prettier * add some awaits * prettier * comment out broken SSR tests * prettier * comment out broken SSR tests * prettier * dont skip in CI * upgrade playwright to beta * prettier * try some trickery * try some trickery * await updateComplete * try to fix form.test.ts * import hydrateable elements 1 time * prettier * fix input defaultValue issues * fix form controls to behave like their native counterpartS * add changelog entry * prettier * fix unexpected behavior with range / button 2024-09-11 10:25:42 -04:00
oh no where did astro go 2024-04-17 11:20:27 -04:00			`</body>`
			`</html>`