2023-06-06 08:22:18 -04:00
|
|
|
<!DOCTYPE html>
|
2023-06-06 09:21:07 -04:00
|
|
|
<html
|
|
|
|
|
lang="en"
|
2023-06-06 08:22:18 -04:00
|
|
|
data-layout="{{ layout }}"
|
|
|
|
|
data-shoelace-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>
|
|
|
|
|
|
2023-06-07 17:23:57 -04:00
|
|
|
{# Opt out of Turbo caching #}
|
|
|
|
|
<meta name="turbo-cache-control">
|
|
|
|
|
|
2023-06-06 08:22:18 -04:00
|
|
|
{# 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/logo.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) }}" />
|
|
|
|
|
|
|
|
|
|
{# Shoelace #}
|
2023-08-31 12:06:32 -04:00
|
|
|
<link rel="stylesheet" href="/dist/themes/default.css" />
|
2023-06-20 14:01:58 -04:00
|
|
|
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
2023-06-06 08:22:18 -04:00
|
|
|
|
2023-08-31 12:06:32 -04:00
|
|
|
{# 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">
|
2023-06-07 17:23:57 -04:00
|
|
|
|
|
|
|
|
{# Turbo + Scroll positioning #}
|
2023-06-08 11:12:31 -04:00
|
|
|
<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>
|
2023-06-06 08:22:18 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<a id="skip-to-main" class="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>
|
|
|
|
|
|
2023-06-08 00:15:07 -04:00
|
|
|
<aside id="sidebar" data-preserve-scroll>
|
2023-06-06 08:22:18 -04:00
|
|
|
<header>
|
|
|
|
|
<a href="/">
|
2023-08-31 12:06:32 -04:00
|
|
|
{% include 'workmark.njk' %}
|
2023-06-06 08:22:18 -04:00
|
|
|
</a>
|
|
|
|
|
<div class="sidebar-version">
|
|
|
|
|
{{ meta.version }}
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="sidebar-buttons">
|
|
|
|
|
<sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
|
|
|
|
|
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
|
|
|
|
</sl-button>
|
2023-06-28 15:27:21 -04:00
|
|
|
<sl-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
|
|
|
|
|
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
|
|
|
|
</sl-button>
|
2023-06-06 08:22:18 -04:00
|
|
|
<sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
|
|
|
|
|
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
2023-06-06 09:21:07 -04:00
|
|
|
</sl-button>
|
2023-06-06 08:22:18 -04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
|
|
|
|
<sl-icon name="search"></sl-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 %}
|
2023-06-06 09:21:07 -04:00
|
|
|
|
2023-06-06 08:22:18 -04:00
|
|
|
<div class="content__body">
|
|
|
|
|
{% block content %}
|
|
|
|
|
{{ content | safe }}
|
|
|
|
|
{% endblock %}
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
