mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
776b980ce5
* adding decorative underline to utils.css * adding banner to base.njk * disabling sticky banner in layouts * adding logic to show/hide pageBanner * add changelog for `<wa-page>` fix in related Pro PR --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
143 lines
5.3 KiB
Plaintext
143 lines
5.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" 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/search-list.js"></script>
|
|
<script type="module" src="/assets/scripts/outline.js"></script>
|
|
<script type="module" src="/assets/scripts/color-scheme.js"></script>
|
|
<script type="module" src="/assets/scripts/theme.js"></script>
|
|
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
|
|
<script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
|
{% endblock %}
|
|
|
|
<script type="module">
|
|
// Set the initial color scheme before the page renders to prevent flashing
|
|
const value = localStorage.getItem('color-scheme') || 'auto';
|
|
const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
|
|
document.documentElement.classList.toggle('wa-dark', isDark);
|
|
</script>
|
|
</head>
|
|
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
|
|
{% if hasBanner == undefined %}
|
|
{% set hasBanner = true %}
|
|
{% endif %}
|
|
|
|
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
|
|
{% set waPageAttributes = waPageAttributes or {} %}
|
|
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
|
|
<wa-page
|
|
{% for key, value in mergedWaPageAttributes %}
|
|
{% if value != null and value != false %}
|
|
{{ key }}="{{ value }}"
|
|
{% endif %}
|
|
{% endfor %}
|
|
>
|
|
{% block pageBanner %}
|
|
{% if hasBanner %}
|
|
{#- WA Launch Banner -#}
|
|
{% include "_banner-wa-launch.njk" ignore missing %}
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block pageHeader %}
|
|
<header slot="header" class="wa-split">
|
|
{# Nav toggle #}
|
|
<wa-button appearance="plain" size="small" data-toggle-nav>
|
|
<wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
|
|
<wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
|
|
</wa-button>
|
|
|
|
{# Logo - Desktop #}
|
|
<a class="brand-logo wa-desktop-only" href="/" aria-label="Web Awesome">
|
|
{% include "logo.njk" %}
|
|
</a>
|
|
|
|
{#- Logo - mobile branding -#}
|
|
<a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">
|
|
{# Logo - Mobile #}
|
|
{% include "logo-simple.njk" %}
|
|
</a>
|
|
|
|
<div id="docs-toolbar" class="wa-cluster gap-s">
|
|
<div class="wa-desktop-only wa-cluster wa-gap-2xs">
|
|
{% include "theme-selector.njk" %}
|
|
{% include "color-scheme-selector.njk" %}
|
|
{% include "github-icon-buttons.njk" %}
|
|
</div>
|
|
{#- Login -#}
|
|
{% include "login-or-avatar.njk" ignore missing %}
|
|
</div>
|
|
</header>
|
|
{% endblock %}
|
|
|
|
{# Sidebar #}
|
|
{% if hasSidebar %}
|
|
{# Mobile selectors #}
|
|
<div class="wa-mobile-only" slot="navigation-header">
|
|
<div class="wa-cluster wa-gap-s">
|
|
<a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
|
|
<div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
|
|
{% include "theme-selector.njk" %}
|
|
{% include "color-scheme-selector.njk" %}
|
|
{% include "github-icon-buttons.njk" %}
|
|
</div>
|
|
</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 %}
|
|
<h1 class="title">{{ title }}</h1>
|
|
{% endblock %}
|
|
|
|
{% block beforeContent %}{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ content | safe }}
|
|
{% endblock %}
|
|
|
|
{% block afterContent %}{% endblock %}
|
|
</main>
|
|
|
|
{% include 'search.njk' %}
|
|
|
|
{# Footer #}
|
|
{% block pageFooter %}{% endblock %}
|
|
</wa-page>
|
|
|
|
</body>
|
|
</html>
|