mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
110 lines
4.4 KiB
HTML
110 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
|
|
/>
|
|
{% if isComponent %}
|
|
{% set pageTitle = title or name %}
|
|
{% else %}
|
|
{% set pageTitle = title %}
|
|
{% endif %}
|
|
<!-- Use the 11ty data system to set the title -->
|
|
<title>Material Web{% if pageTitle %} - {{ pageTitle }}{% endif %}</title>
|
|
<!-- Set the color of the url bar on mobile to match theme -->
|
|
<meta name="theme-color" content="#251f16" />
|
|
<link href="/images/favicon.svg" rel="icon" sizes="any" type="image/svg+xml">
|
|
<!-- Inlines the global css in site/css/global.css -->
|
|
{% inlinecss "global.css" %}
|
|
<!-- MUST be loaded before any lit bundle. allows hydration of SSRd components -->
|
|
<script type="module" src="/js/ssr-utils/lit-hydrate-support.js"></script>
|
|
<!-- Loads definition for <lit-island>. See docs for @11ty/is-land for usage -->
|
|
<script type="module" src="/js/ssr-utils/lit-island.js"></script>
|
|
<!-- Inlines the material theming logic since we want to prevent FOUC -->
|
|
{% inlinejs "inline/apply-saved-theme.js" %}
|
|
<script type="module" src="/js/pages/global.js"></script>
|
|
<noscript>
|
|
<link rel="stylesheet" href="/css/no-js.css" />
|
|
</noscript>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap"
|
|
/>
|
|
<!-- If JS is disabled just show the contents without the polyfill -->
|
|
<noscript
|
|
><style>
|
|
body[dsd-pending] {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
<!-- Allows sub-templates to insert into the head -->
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<!-- dsd-pending hides body until the polyfill has run on browsers that do not support DSD -->
|
|
<body dsd-pending>
|
|
<!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->
|
|
{% inlinejs "ssr-utils/dsd-polyfill.js" %}
|
|
<lit-island on:idle import="/js/hydration-entrypoints/navigation.js">
|
|
<nav-drawer page-title="{{name}}" {% if hasToc %}has-toc{% endif %}>
|
|
<top-app-bar slot="top-app-bar" baseURI="/">
|
|
{% block topappbar %}{{ topappbar | safe }}{% endblock %}
|
|
</top-app-bar>
|
|
|
|
{% if hasToc %}
|
|
<section slot="toc">{% block toc %}{% endblock %}</section>
|
|
{% endif %}
|
|
|
|
<main id="main-content" slot="app-content" tabindex="0">
|
|
<!-- this is the content of the page -->
|
|
<!-- unrelated change to components -->
|
|
{% block content %}{{ content | mdMarkdown | safe }}{% endblock %}
|
|
</main>
|
|
<md-list
|
|
aria-label="List of pages and components"
|
|
role="menubar"
|
|
class="nav">
|
|
<!-- About section -->
|
|
<md-item><div slot="headline">About</div></md-item>
|
|
{% for file in collections.about|filtersort('data.order') %}
|
|
<md-list-item
|
|
href="{{ file.url }}"
|
|
role="menuitem"
|
|
{% if file.url == page.url %}selected{% endif %}
|
|
type="link"
|
|
tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
|
|
>{{ file.data.name }}</md-list-item>
|
|
{% endfor %}
|
|
<md-divider role="separator"></md-divider>
|
|
<!-- Theming section -->
|
|
<md-item><div slot="headline">Theming</div></md-item>
|
|
{% for file in collections.theming|filtersort('data.order') %}
|
|
<md-list-item
|
|
href="{{ file.url }}"
|
|
type="menuitem"
|
|
{% if file.url == page.url %}selected{% endif %}
|
|
type="link"
|
|
tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
|
|
>{{ file.data.name }}</md-list-item>
|
|
{% endfor %}
|
|
<md-divider role="separator"></md-divider>
|
|
<!-- Components section -->
|
|
<md-item><div slot="headline">Components</div></md-item>
|
|
{% for file in collections.component|filtersort('data.name') %}
|
|
<md-list-item
|
|
href="{{ file.url }}"
|
|
role="menuitem"
|
|
{% if file.url == page.url %}selected{% endif %}
|
|
type="link"
|
|
tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
|
|
>{{ file.data.name }}</md-list-item>
|
|
{% endfor %}
|
|
</md-list>
|
|
</nav-drawer>
|
|
</lit-island>
|
|
</body>
|
|
</html>
|