2024-04-17 11:20:27 -04:00
|
|
|
<!DOCTYPE html>
|
2024-06-18 13:49:17 -04:00
|
|
|
<html lang="en" data-cdn-url="{% cdnUrl %}">
|
2024-04-17 11:20:27 -04:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta name="description" content="{{ description }}">
|
|
|
|
|
<meta name="theme-color" content="#787acf">
|
|
|
|
|
{% if noindex %}<meta name="robots" content="noindex">{% endif %}
|
|
|
|
|
|
|
|
|
|
<title>{{ title }}</title>
|
|
|
|
|
|
|
|
|
|
<link rel="icon" href="/assets/images/webawesome-logo.svg" />
|
|
|
|
|
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
|
|
|
|
|
|
|
|
|
|
{# Scripts #}
|
|
|
|
|
<script type="module" src="/assets/scripts/code-examples.js"></script>
|
2024-06-13 23:06:24 -04:00
|
|
|
<script type="module" src="/assets/scripts/color-scheme.js"></script>
|
2024-04-17 11:20:27 -04:00
|
|
|
<script type="module" src="/assets/scripts/copy-code.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>
|
|
|
|
|
|
|
|
|
|
{# Web Awesome #}
|
|
|
|
|
<script type="module" src="/dist/webawesome.loader.js"></script>
|
2024-04-17 11:53:26 -04:00
|
|
|
<link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
|
2024-04-17 11:20:27 -04:00
|
|
|
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
2024-04-17 11:53:26 -04:00
|
|
|
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
|
2024-04-17 11:56:31 -04:00
|
|
|
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
2024-04-17 11:20:27 -04:00
|
|
|
|
|
|
|
|
{# Docs styles #}
|
|
|
|
|
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
|
|
|
|
|
|
|
|
|
{# Set the theme to prevent flashing #}
|
|
|
|
|
<script>
|
|
|
|
|
document.documentElement.classList.toggle(
|
2024-06-13 23:06:24 -04:00
|
|
|
'wa-theme-default-dark',
|
|
|
|
|
sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
|
2024-04-17 11:20:27 -04:00
|
|
|
);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="layout-{{ layout | stripExtension }}">
|
|
|
|
|
|
|
|
|
|
<wa-page>
|
|
|
|
|
<header slot="header">
|
|
|
|
|
{# Logo #}
|
2024-06-13 23:06:24 -04:00
|
|
|
<div id="docs-branding">
|
2024-06-14 19:12:21 -04:00
|
|
|
{# Nav toggle #}
|
2024-06-17 14:15:32 -04:00
|
|
|
<wa-button appearance="text" data-toggle-nav>
|
2024-06-14 19:12:21 -04:00
|
|
|
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
|
|
|
|
|
</wa-button>
|
2024-06-13 23:06:24 -04:00
|
|
|
<a href="/" aria-label="Web Awesome">
|
2024-06-14 19:12:21 -04:00
|
|
|
<span class="only-desktop">{% include "logo.njk" %}</span>
|
|
|
|
|
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
|
2024-06-13 23:06:24 -04:00
|
|
|
</a>
|
2024-06-14 19:12:21 -04:00
|
|
|
<small id="version-number" class="only-desktop">{{ package.version }}</small>
|
|
|
|
|
<wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
|
2024-06-13 23:06:24 -04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="docs-toolbar">
|
|
|
|
|
{# Color scheme selector #}
|
|
|
|
|
<wa-dropdown id="color-scheme-selector">
|
2024-06-13 23:21:27 -04:00
|
|
|
<wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
|
2024-06-13 23:06:24 -04:00
|
|
|
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
|
|
|
|
|
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
|
2024-06-14 19:12:21 -04:00
|
|
|
<span class="only-light only-desktop">Light</span>
|
|
|
|
|
<span class="only-dark only-desktop">Dark</span>
|
2024-06-13 23:06:24 -04:00
|
|
|
</wa-button>
|
|
|
|
|
<wa-menu>
|
|
|
|
|
<wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
|
|
|
|
|
<wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
|
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
|
<wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
|
|
|
|
|
</wa-menu>
|
|
|
|
|
</wa-dropdown>
|
|
|
|
|
|
|
|
|
|
{# Search #}
|
2024-06-13 23:21:27 -04:00
|
|
|
<wa-button id="search-trigger" appearance="outline" size="small" data-search>
|
2024-06-13 23:06:24 -04:00
|
|
|
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
|
|
|
|
Search
|
2024-06-14 19:12:21 -04:00
|
|
|
<kbd slot="suffix" class="only-desktop">/</kbd>
|
2024-06-13 23:06:24 -04:00
|
|
|
</wa-button>
|
|
|
|
|
</div>
|
2024-04-17 11:20:27 -04:00
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
{# Sidebar #}
|
|
|
|
|
{% if hasSidebar %}
|
|
|
|
|
<aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
|
2024-06-17 16:34:27 -04:00
|
|
|
<wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
|
2024-04-17 11:20:27 -04:00
|
|
|
<nav>
|
|
|
|
|
{% include "sidebar.njk" %}
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
|
|
|
|
{% 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 #}
|
|
|
|
|
<nav id="outline-expandable">
|
|
|
|
|
<details class="outline-links">
|
|
|
|
|
<summary>On this page</summary>
|
|
|
|
|
</details>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
{% block beforeContent %}{% endblock %}
|
|
|
|
|
|
|
|
|
|
{% block content %}
|
|
|
|
|
<h1 class="title">{{ title }}</h1>
|
|
|
|
|
|
|
|
|
|
{{ content | safe }}
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
|
|
{% block afterContent %}{% endblock %}
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
{% include 'search.njk' %}
|
|
|
|
|
</wa-page>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
