kopia lustrzana https://github.com/shoelace-style/shoelace
168 wiersze
6.7 KiB
Plaintext
168 wiersze
6.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html
|
|
lang="en"
|
|
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>
|
|
|
|
{# 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/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 #}
|
|
<link rel="stylesheet" href="/dist/themes/light.css" />
|
|
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
|
<script type="module" src="/dist/shoelace-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('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
|
|
})();
|
|
</script>
|
|
|
|
{# 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="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>
|
|
|
|
{# Icon toolbar #}
|
|
<div id="icon-toolbar">
|
|
{# GitHub #}
|
|
<a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
|
|
<sl-icon name="github"></sl-icon>
|
|
</a>
|
|
|
|
{# Twitter #}
|
|
<a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
|
|
<sl-icon name="twitter"></sl-icon>
|
|
</a>
|
|
|
|
{# Theme selector #}
|
|
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
|
<sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
|
|
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
|
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
|
</sl-button>
|
|
<sl-menu>
|
|
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
|
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
|
<sl-divider></sl-divider>
|
|
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
|
</sl-menu>
|
|
</sl-dropdown>
|
|
</div>
|
|
|
|
<a
|
|
class="ks-banner{% if toc %} with-toc{% endif %}"
|
|
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
|
target="_blank"
|
|
>
|
|
<span>
|
|
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill="#f36944" d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
|
|
</svg>
|
|
<span>
|
|
<strong style="white-space: nowrap;">Get ready for more awesome!</strong>
|
|
Web Awesome, the next iteration of Shoelace, is on Kickstarter.
|
|
</span>
|
|
</span>
|
|
<span class="faux-button">Read Our Story</span>
|
|
</a>
|
|
|
|
<aside id="sidebar" data-preserve-scroll>
|
|
<header>
|
|
<a href="/">
|
|
<img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
|
|
</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>
|
|
<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>
|
|
<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
|
|
</sl-button>
|
|
</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 %}
|
|
|
|
<div class="content__body">
|
|
{% block content %}
|
|
{{ content | safe }}
|
|
{% endblock %}
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|