fix: accessibility, SEO, typos, styling (#649)

add lang to html tag
add robots.txt and sitemap.xml
enable build-optimizer
add Angular Material icon to footer
fix typos
use accent color on 2nd Get started button on homepage
improve page title SEO
better format copyright in footer
add structured data, open graph, twitter to index
preconnect and dns-prefetch fonts
add apple-touch-icon links
add site description, keywords, author, theme-color, Content-Type, etc.
update favicons to Angular Material icons
- support macOS touchbar and Windows 8/10 icons
disable Angular CLI commonChunk
refactor `main.scss` to `styles.scss` to be consistent with CLI

Author: Splaktar

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/angular-material-logo.svg

@@ -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/android-chrome-144x144.png

@@ -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/assets/img/favicons/android-chrome-192x192.png

@@ -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/assets/img/favicons/android-chrome-36x36.png

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

src/assets/img/favicons/android-chrome-48x48.png

@@ -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/assets/img/favicons/android-chrome-512x512.png

@@ -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);

src/assets/img/favicons/android-chrome-72x72.png

@@ -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