fix: accessibility, SEO, typos, styling, favicons

angular.json

@@ -36,11 +36,13 @@
                 "glob": "favicon.ico",
                 "input": "src",
                 "output": "/"
-              }
+              },
+              "src/robots.txt",
+              "src/sitemap.xml"
             ],
             "styles": [
               {
-                "input": "src/main.scss"
+                "input": "src/styles.scss"
               },
               {
                 "input": "src/highlightjs/material-light.scss"
@@ -70,6 +72,7 @@
           },
           "configurations": {
             "production": {
+              "commonChunk": false,
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -115,7 +118,7 @@
             "scripts": [],
             "styles": [
               {
-                "input": "src/main.scss"
+                "input": "src/styles.scss"
               },
               {
                 "input": "src/highlightjs/material-light.scss"

src/_app-theme.scss

@@ -15,7 +15,6 @@
 @import './styles/svg-theme';
 @import './styles/tables-theme';
 
-
 // Styles for the docs app that are based on the current theme.
 @mixin material-docs-app-theme($theme) {
   $primary: map-get($theme, primary);
@@ -61,3 +60,9 @@
   @include nav-bar-theme($theme);
   @include table-of-contents-theme($theme);
 }
+
+// Define the light theme.
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
+
+$theme: mat-light-theme($primary, $accent);

src/app/pages/homepage/homepage.html

@@ -21,7 +21,7 @@ <h2> Material Design components for Angular</h2>
     <div class="docs-homepage-promo-desc">
       <h2>Sprint from Zero to App</h2>
       <p>Hit the ground running with comprehensive, modern UI components that work across
-        the web, mobile and desktop.</p>
+        the web, mobile, and desktop.</p>
     </div>
   </div>
   <div class="docs-homepage-row docs-homepage-reverse-row">
@@ -44,7 +44,7 @@ <h2>Fast and Consistent</h2>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Versatile</h2>
-      <p>Themable, for when you need to stay on brand or just have a favorite color.
+      <p>Themeable, for when you need to stay on brand or just have a favorite color.
         Accessible and internationalized so that all users are welcome.</p>
     </div>
   </div>
@@ -60,7 +60,7 @@ <h2>Optimized for Angular</h2>
     </div>
   </div>
   <div class="docs-homepage-bottom-start">
-    <a mat-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
+    <a mat-raised-button class="docs-button" routerLink="/guide/getting-started" color="accent">Get started</a>
   </div>
 </div>
 

src/app/pages/page-title/page-title.ts

@@ -7,17 +7,19 @@ import {Title} from '@angular/platform-browser';
 @Injectable()
 export class ComponentPageTitle {
   _title = '';
+  _originalTitle = 'Angular Material UI component library';
 
   get title(): string { return this._title; }
 
   set title(title: string) {
     this._title = title;
     if (title !== '') {
-      title = `${title} | `;
+      title = `${title} | Angular Material`;
+    } else {
+      title = this._originalTitle;
     }
-    this.bodyTitle.setTitle(`${title}Angular Material`);
+    this.bodyTitle.setTitle(title);
   }
 
-  constructor(private bodyTitle: Title) { }
-
+  constructor(private bodyTitle: Title) {}
 }

src/app/shared/footer/footer.html

@@ -5,19 +5,23 @@
       <div class="footer-logo">
         <img class="docs-footer-angular-logo"
           src="../../../assets/img/homepage/angular-white-transparent.svg"
-          alt="angular">
+          alt="Angular icon">
         <span><a href="https://angular.io">Learn Angular</a></span>
       </div>
     </div>
 
     <div class="docs-footer-version">
+      <img class="angular-material-logo" src="../../../assets/img/angular-material-logo.svg"
+           alt="Angular Material icon">
       <span class="version">Current Version: {{version}}</span>
     </div>
 
     <div class="docs-footer-copyright">
-      <span>Powered by Google ©2010-2019.</span>
-      <a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
-      <span>Documentation licensed under CC BY 4.0.</span>
+      <div>
+        <span>Powered by Google ©2010-2019.</span>
+        <a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
+        <span>Documentation licensed under CC BY 4.0.</span>
+      </div>
     </div>
   </div>
 </footer>

src/app/shared/footer/footer.scss

@@ -20,8 +20,18 @@
 }
 
 .docs-footer-version {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   flex: 1;
-  text-align: center;
+
+  .angular-material-logo {
+    height: 40px;
+    margin: 10px 0 10px 16px;
+  }
+  .version {
+    margin: 0 40px;
+  }
 }
 
 .docs-footer-copyright {
@@ -30,7 +40,18 @@
   justify-content: flex-end;
   flex-direction: column;
   min-width: 225px;
-  text-align: center;
+  margin-top: 16px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-end;
+    text-align: center;
+  }
+
+  @media (min-width: 885px) {
+    margin-top: 0;
+  }
 }
 
 .docs-footer-logo span {
@@ -49,7 +70,8 @@ a {
   text-decoration: none;
   color: inherit;
 
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: underline;
   }
 }

src/assets/img/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="assets/img/favicons/mstile-150x150.png?v=8.2.3"/>
+      <TileColor>#3f51b5</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

src/assets/img/favicons/manifest.json

@@ -5,36 +5,15 @@
   "background_color": "#3F51B5",
   "start_url": "/",
   "display": "standalone",
-  "orientation": "portrait",
   "icons": [
     {
-      "src": "./android-chrome-36x36.png",
-      "sizes": "36x36",
-      "type": "image/png"
-    },
-    {
-      "src": "./android-chrome-48x48.png",
-      "sizes": "48x48",
-      "type": "image/png"
-    },
-    {
-      "src": "./android-chrome-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "./android-chrome-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "./android-chrome-144x144.png",
-      "sizes": "144x144",
+      "src": "/assets/img/favicons/android-chrome-192x192.png?v=8.2.3",
+      "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "./android-chrome-192x192.png",
-      "sizes": "192x192",
+      "src": "/assets/img/favicons/android-chrome-512x512.png?v=8.2.3",
+      "sizes": "512x512",
       "type": "image/png"
     }
   ]

src/index.html

@@ -1,24 +1,79 @@
 <!doctype html>
-<html>
+<html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>Angular Material</title>
+  <title>Angular Material UI component library</title>
+  <link rel="canonical" href="https://material.angular.io">
   <base href="/">
+
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="translucent">
   <meta name="mobile-web-app-capable" content="yes">
+  <meta name="theme-color" content="#3F50B5">
+  <meta name="description" content="UI component infrastructure and Material Design components for mobile and desktop Angular web applications.">
+  <meta name="keywords" content="angular, material design, material, angular material, web, ui, components, responsive, accessibility, typescript, css, mobile web, open source">
+  <meta name="author" content="Angular Components Team">
+
+  <!--Twitter card metadata-->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@Angular" />
+  <meta name="twitter:creator" content="@Angular" />
+  <meta name="twitter:title" content="Angular Material" />
+  <meta name="twitter:description" content="UI component infrastructure and Material Design components for Angular web applications." />
+  <meta name="twitter:image" content="https://material.angular.io/assets/img/site-preview.png">
+
+  <!--Facebook Open Graph-->
+  <meta property="og:url" content="https://material.angular.io/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Angular Material" />
+  <meta property="og:site_name" content="Angular Material">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:description" content="UI component infrastructure and Material Design components for Angular web applications." />
+  <meta property="og:image" content="https://material.angular.io/assets/img/site-preview.png" />
+  <meta property="og:image:secure_url" content="https://material.angular.io/assets/img/site-preview.png" />
+  <meta property="og:image:type" content="image/png">
+  <meta property="og:image:width" content="1339" />
+  <meta property="og:image:height" content="943" />
+
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png?v=8.2.3">
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png?v=8.2.3">
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png?v=8.2.3">
+  <link rel="manifest" href="assets/img/favicons/manifest.json?v=8.2.3">
+  <link rel="mask-icon" href="assets/img/favicons/safari-pinned-tab.svg?v=8.2.3" color="#3f51b5">
+  <link rel="shortcut icon" href="assets/img/favicons/favicon.ico?v=8.2.3">
+  <meta name="msapplication-TileColor" content="#3f51b5">
+  <meta name="msapplication-config" content="assets/img/favicons/browserconfig.xml?v=8.2.3">
+  <meta name="theme-color" content="#3f51b5">
 
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="icon" type="image/x-icon" href="assets/img/favicons/favicon.ico">
-  <link rel="icon" type="image/png" href="assets/img/favicons/favicon-32x32.png" sizes="32x32">
-  <link rel="icon" type="image/png" href="assets/img/favicons/favicon-194x194.png" sizes="194x194">
-  <link rel="icon" type="image/png" href="assets/img/favicons/favicon-96x96.png" sizes="96x96">
-  <link rel="icon" type="image/png" href="assets/img/favicons/favicon-16x16.png" sizes="16x16">
-  <link rel="icon" type="image/png" href="assets/img/favicons/android-chrome-192x192.png"
-      sizes="192x192">
-  <link rel="manifest" href="assets/img/favicons/manifest.json">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300&display=swap" rel="stylesheet">
+
+  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!--Structured Data-->
+  <script type="application/ld+json">
+    {
+      "@context": "http://schema.org",
+      "@type": "WebApplication",
+      "name": "Angular Material",
+      "description": "UI component infrastructure and Material Design components for Angular web applications.",
+      "url": "https://material.angular.io",
+      "image": "https://material.angular.io/assets/img/site-preview.png",
+      "screenshot": "https://material.angular.io/assets/img/site-preview.png",
+      "applicationCategory": "Software Documentation",
+      "operatingSystem": "Android, Chrome OS, iOS, iPadOS, macOS, OS X, Linux, Windows",
+      "author": {
+        "@type": "Organization",
+        "name": "Angular",
+        "description": "Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.",
+        "url": "https://angular.io",
+        "logo": "https://angular.io/assets/images/logos/angular/angular.svg"
+      }
+    }
+  </script>
 </head>
 
 <body class="docs-app-background">

src/robots.txt

@@ -0,0 +1,3 @@
+Sitemap: https://material.angular.io/sitemap.xml
+User-agent: *
+Disallow:

src/sitemap.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+  <url>
+    <loc>https://material.angular.io</loc>
+    <changefreq>yearly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://material.angular.io/guides</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://material.angular.io/components/categories</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://material.angular.io/cdk/categories</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>

src/main.scss → src/styles.scss

@@ -1,19 +1,11 @@
-@import '~@angular/material/theming';
 @import './app-theme';
 @import './styles/api';
 @import './styles/markdown';
 @import './styles/tables';
 @import './styles/general';
 
-
 // Include material core styles.
 @include mat-core();
 
-
-// Define the light theme.
-$primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
-
-$theme: mat-light-theme($primary, $accent);
 @include angular-material-theme($theme);
 @include material-docs-app-theme($theme);

tools/deploy.sh

@@ -30,8 +30,6 @@ echo ""
 
 read -rp "Press <ENTER> to continue.."
 
-npm run build-themes
-
-"$(npm bin)"/ng build --aot --prod --build-optimizer=false
-"$(npm bin)"/firebase use $projectId
-"$(npm bin)"/firebase deploy
+yarn prod-build
+yarn firebase use $projectId
+yarn firebase deploy