docs(catalog): implement the shell and index page

PiperOrigin-RevId: 535752437
material-components · May 27, 2023 · 1d0a8ce · 1d0a8ce
1 parent 545ce0d
commit 1d0a8ce
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 0 deletions.
diff --git a/catalog/site/_includes/default.html b/catalog/site/_includes/default.html
@@ -0,0 +1,67 @@
+<!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"
+    />
+    <!-- Use the 11ty data system to set the title -->
+    <title>{% if title %}{{ title }}{% endif %}</title>
+
+    <!-- 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="/material-web/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="/material-web/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="/material-web/js/pages/global.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+    />
+    <!-- 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="/material-web/js/hydration-entrypoints/navigation.js">
+      <nav-drawer>
+        <top-app-bar slot="top-app-bar" baseURI="/material-web">
+          {% block topappbar %}{{ topappbar | safe }}{% endblock %}
+        </top-app-bar>
+        <main slot="app-content">
+          <!-- this is the content of the page -->
+          <!-- unrelated change to components -->
+          {% block content %}{{ content | safe }}{% endblock %}
+        </main>
+          <md-list listtabindex="-1">
+            {% for component in collections.component|filtersort('data.name') %}
+              <li>
+                <md-list-item-link
+                  href="/material-web{{ component.url }}"
+                  headline="{{ component.data.name }}"
+                  {% if component.url == page.url %}selected{% endif %}
+                  data-role=""
+                  itemtabindex="0"
+                ></md-list-item-link>
+              </li>
+            {% endfor %}
+          </md-list>
+      </nav-drawer>
+    </lit-island>
+  </body>
+</html>
diff --git a/catalog/site/css/global.css b/catalog/site/css/global.css
@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* latin */
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/material-web/fonts/google-sans/regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin -mono */
+@font-face {
+  font-family: 'Google Sans Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/material-web/fonts/google-sans/mono.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+  font-family: 'Google Sans', Roboto, system-ui;
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+  --catalog-top-app-bar-height: 48px;
+  --catalog-top-app-bar-padding-block: 12px;
+  scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2);
+
+  /* These values are copied from mio */
+  --catalog-display-xl-font-size: 88px;
+  --catalog-display-m-font-size: 45px;
+  --catalog-title-l-font-size: 22px;
+  --catalog-title-m-font-size: 16px;
+  --catalog-title-s-font-size: 14px;
+  --catalog-body-l-font-size: 16px;
+  --catalog-body-m-font-size: 14px;
+}
+
+@media screen and (max-width: 600px) {
+  :root {
+    --catalog-display-xl-font-size: 55px;
+    --catalog-title-l-font-size: 16px;
+    --catalog-body-l-font-size: 14px;
+    --catalog-body-m-font-size: 12px;
+  }
+}
+
+body {
+  margin: 0;
+  font-size: var(--catalog-body-l-font-size);
+}
+
+a {
+  color: var(--md-sys-color-primary);
+  text-decoration: none;
+}
+
+a:hover,
+a:focus-visible {
+  text-decoration: underline;
+}
+
+nav-drawer md-list-item-link[selected] {
+  --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-highest);
+}
+
+md-list {
+  --md-list-container-color: transparent;
+  display: block;
+  margin-inline: 12px;
+  min-width: unset;
+}
+
+md-list-item-link {
+  margin-block: 12px;
+  display: block;
+}
+
+md-list-item-link:first-of-type {
+  margin-block: 4px;
+}
+
+h1 {
+  font-size: 48px;
+}
diff --git a/catalog/site/css/home-page.css b/catalog/site/css/home-page.css
@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ h1,
+.subtitle {
+  text-align: center;
+}
diff --git a/catalog/site/fonts/google-sans/mono.woff2 b/catalog/site/fonts/google-sans/mono.woff2
diff --git a/catalog/site/fonts/google-sans/regular.woff2 b/catalog/site/fonts/google-sans/regular.woff2
diff --git a/catalog/site/index.html b/catalog/site/index.html
@@ -0,0 +1,17 @@
+{% extends 'default.html' %}
+
+{% block head %}
+  <script type="module" src="/material-web/js/pages/home-page.js"></script>
+  <link rel="stylesheet" href="/material-web/css/home-page.css">
+{% endblock %}
+
+{% block content %}
+
+<h1>Material Web</h1>
+<div class="subtitle">The official web component set for Material 3</div>
+
+<section>
+  TODO
+</section>
+
+{% endblock %}