mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
130 lines
4.9 KiB
Plaintext
130 lines
4.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html
|
|
lang="en"
|
|
data-layout="{{ layout }}"
|
|
data-wa-version="{{ meta.version }}"
|
|
>
|
|
<head>
|
|
{# Metadata #}
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="{{ meta.description }}" />
|
|
<title>{{ meta.title }}</title>
|
|
|
|
{# Opt out of Turbo caching #}
|
|
<meta name="turbo-cache-control">
|
|
|
|
{# Stylesheets #}
|
|
<link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
|
|
<link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
|
|
<link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
|
|
|
|
{# Favicons #}
|
|
<link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
|
|
|
|
{# Twitter Cards #}
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:creator" content="shoelace_style" />
|
|
<meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
|
|
|
|
{# OpenGraph #}
|
|
<meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
|
|
<meta property="og:title" content="{{ meta.title }}" />
|
|
<meta property="og:description" content="{{ meta.description }}" />
|
|
<meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
|
|
|
|
{# Web Awesome #}
|
|
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
|
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
|
<link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
|
|
<script type="module" src="/dist/autoloader.js"></script>
|
|
|
|
{# Set the initial theme and menu states here to prevent flashing #}
|
|
<script>
|
|
(() => {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const theme = localStorage.getItem('theme') || 'auto';
|
|
document.documentElement.classList.toggle('wa-theme-default-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
|
|
})();
|
|
</script>
|
|
|
|
{# Web Fonts #}
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
|
|
|
|
{# Turbo + Scroll positioning #}
|
|
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
|
|
<script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
|
|
<script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
|
|
<script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
|
|
<script src="{{ assetUrl('scripts/search.js') }}" defer></script>
|
|
</head>
|
|
<body>
|
|
<a id="skip-to-main" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
|
|
Skip to main content
|
|
</a>
|
|
|
|
{# Menu toggle #}
|
|
<button id="menu-toggle" type="button" aria-label="Menu">
|
|
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
|
|
<aside id="sidebar" data-preserve-scroll>
|
|
<header>
|
|
<a href="/">
|
|
{% include 'logo.njk' %}
|
|
</a>
|
|
<div class="sidebar-version">
|
|
{{ meta.version }}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="sidebar-buttons">
|
|
<wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
|
|
<wa-icon slot="prefix" name="github" family="brands"></wa-icon> Code
|
|
</wa-button>
|
|
<wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
|
|
<wa-icon slot="prefix" name="star" variant="solid"></wa-icon> Star
|
|
</wa-button>
|
|
<wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
|
|
<wa-icon slot="prefix" name="twitter" family="brands"></wa-icon> Follow
|
|
</wa-button>
|
|
</div>
|
|
|
|
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
|
<wa-icon name="search"></wa-icon>
|
|
<span>Search</span>
|
|
</button>
|
|
|
|
<nav>
|
|
{% include 'sidebar.njk' %}
|
|
</nav>
|
|
</aside>
|
|
|
|
{# Content #}
|
|
<main>
|
|
<a id="main-content"></a>
|
|
<article id="content" class="content{% if toc %} content--with-toc{% endif %}">
|
|
{% if toc %}
|
|
<div class="content__toc">
|
|
<ul>
|
|
<li class="top"><a href="#">{{ meta.title }}</a></li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="content__body">
|
|
{% block content %}
|
|
{{ content | safe }}
|
|
{% endblock %}
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|