[docs] Some last improvement before the release

docs/scripts/buildIcons.js

@@ -0,0 +1,33 @@
+// @flow
+
+import path from 'path';
+import gm from 'gm';
+import display from '../src/modules/scripts/display';
+
+const SIZES = [48, 70, 96, 150, 152, 192, 256, 310, 384, 512];
+const INPUT_ICON = path.join(__dirname, '../../static/logo.png');
+const OUTPUT_DIR = path.join(__dirname, '../../static/icons');
+
+display.info('Generating Icons');
+
+const promises = SIZES.map(
+  size =>
+    new Promise((resolve, reject) => {
+      gm(INPUT_ICON).resize(size, size).write(path.join(OUTPUT_DIR, `${size}x${size}.png`), err => {
+        if (err) {
+          reject(err);
+          return;
+        }
+
+        resolve();
+        display.success(`Size ${size} created`);
+      });
+    }),
+);
+
+Promise.all(promises).catch(err => {
+  setTimeout(() => {
+    display.error(err);
+    throw err;
+  }, 0);
+});

docs/src/modules/components/AppWrapper.js

@@ -14,11 +14,11 @@ import blue from 'material-ui/colors/blue';
 import pink from 'material-ui/colors/pink';
 import { lightTheme, darkTheme, setPrismTheme } from 'docs/src/modules/utils/prism';
 
-// Injected the styles after docssearch
+// Injected the insertion-point-jss after docssearch
 if (process.browser && !global.__INSERTION_POINT__) {
   global.__INSERTION_POINT__ = true;
   const styleNode = document.createComment('insertion-point-jss');
-  const docsearchStylesSheet = document.querySelector('#docsearch-styles-sheet');
+  const docsearchStylesSheet = document.querySelector('#insertion-point-jss');
 
   if (document.head && docsearchStylesSheet) {
     document.head.insertBefore(styleNode, docsearchStylesSheet.nextSibling);

docs/src/modules/components/withRoot.js

@@ -8,6 +8,18 @@ import wrapDisplayName from 'recompose/wrapDisplayName';
 import AppWrapper from 'docs/src/modules/components/AppWrapper';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import findPages from /* preval */ 'docs/src/modules/utils/findPages';
+import { loadCSS } from 'fg-loadcss/src/loadCSS';
+
+if (process.browser) {
+  loadCSS(
+    'https://fonts.googleapis.com/icon?family=Material+Icons',
+    document.querySelector('#insertion-point-jss'),
+  );
+  loadCSS(
+    'https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css',
+    document.querySelector('#insertion-point-jss'),
+  );
+}
 
 const pages = [
   {

docs/src/modules/scripts/display.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-console, flowtype/require-valid-file-annotation */
+
+import chalk from 'chalk';
+
+const display = {
+  info: (...args) => {
+    if (process.env.NODE_ENV === 'test') {
+      return;
+    }
+
+    console.info(chalk.cyan(`i  ${args.join(' ')}`));
+  },
+  error: (...args) => {
+    if (process.env.NODE_ENV === 'test') {
+      return;
+    }
+
+    console.error(chalk.bold.red(`✘  ${args.join(' ')}`));
+  },
+  success: (...args) => {
+    if (process.env.NODE_ENV === 'test') {
+      return;
+    }
+
+    console.log(chalk.green(`✔  ${args.join(' ')}`));
+  },
+};
+
+export default display;

next.config.js

@@ -30,6 +30,9 @@ module.exports = {
 
     return Object.assign({}, config, {
       plugins,
+      externals: Object.assign({}, {
+        fs: 'fs',
+      }),
       module: Object.assign({}, config.module, {
         rules: config.module.rules.concat([
           {

package.json

@@ -24,6 +24,7 @@
   "scripts": {
     "docs:deploy": "yarn docs:build && firebase deploy",
     "docs:api": "rimraf pages/api/* && babel-node ./docs/scripts/buildApi.js",
+    "docs:icons": "rimraf static/icons/* && babel-node ./docs/scripts/buildIcons.js",
     "docs:build": "cross-env BABEL_ENV=docs-production next build",
     "docs:dev": "cross-env BABEL_ENV=docs-development next dev",
     "docs:start": "next start",
@@ -89,7 +90,7 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-flow-react-proptypes": "^5.0.0",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-preval": "^1.4.3",
@@ -107,6 +108,7 @@
     "babel-preset-stage-1": "^6.24.1",
     "babel-register": "^6.26.0",
     "chai": "^4.1.1",
+    "clean-css": "^4.1.7",
     "cross-env": "^5.0.5",
     "doctrine": "^2.0.0",
     "enzyme": "^2.9.1",
@@ -123,12 +125,14 @@
     "eslint-plugin-react": "^7.2.1",
     "eslint-plugin-spellcheck": "^0.0.8",
     "eventsource-polyfill": "^0.9.6",
+    "fg-loadcss": "^1.3.1",
     "file-loader": "^0.11.2",
     "flow-bin": "^0.52.0",
     "flow-copy-source": "^1.2.0",
     "flow-typed": "^2.1.5",
     "fs-extra": "^4.0.1",
     "glob": "^7.1.2",
+    "gm": "^1.23.0",
     "jsdom": "^11.1.0",
     "json-loader": "^0.5.7",
     "karma": "^1.7.0",

pages/_document.js

@@ -3,6 +3,9 @@
 import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { getContext, setContext } from 'docs/src/modules/styles/context';
+import CleanCSS from 'clean-css';
+
+const cleanCSS = new CleanCSS();
 
 class MyDocument extends Document {
   render() {
@@ -11,6 +14,10 @@ class MyDocument extends Document {
       <html lang="en" dir="ltr">
         <Head>
           <title>Material-UI</title>
+          <meta
+            name="description"
+            content="React Components that Implement Google's Material Design."
+          />
           <meta charSet="utf-8" />
           {/* Use minimum-scale=1 to enable GPU rasterization */}
           <meta
@@ -31,18 +38,17 @@ class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
           />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
-            async
-          />
-          <link
-            id="docsearch-styles-sheet"
-            rel="stylesheet"
-            href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"
-            async
-            defer
+          <style id="insertion-point-jss" />
+          {/* Twitter */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:site" content="@MaterialUI" />
+          <meta name="twitter:title" content="Material-UI" />
+          <meta
+            name="twitter:description"
+            content="React Components that Implement Google's Material Design."
           />
+          <meta name="twitter:image" content="/static/icons/512x512.png" />
+          <link rel="shortcut icon" href="/static/favicon.ico" />
         </Head>
         <body>
           <Main />
@@ -77,13 +83,19 @@ MyDocument.getInitialProps = ctx => {
   const page = ctx.renderPage();
   // Get the context with the collected side effects.
   const context = getContext();
+
+  let css = context.sheetsRegistry.toString();
+  if (process.env.NODE_ENV === 'production') {
+    css = cleanCSS.minify(css).styles;
+  }
+
   return {
     ...page,
     styles: (
       <style
         id="jss-server-side"
         // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: context.sheetsRegistry.toString() }}
+        dangerouslySetInnerHTML={{ __html: css }}
       />
     ),
   };

pages/index.js

@@ -71,7 +71,7 @@ function PageHome(props) {
               {'Material-UI'}
             </Typography>
             <Typography type="headline" component="h2" color="inherit" className={classes.headline}>
-              {"A React component library implementing Google's Material Design"}
+              {"React Components that Implement Google's Material Design."}
             </Typography>
             <Button
               component={Link}

static/manifest.json

@@ -2,32 +2,32 @@
   "name": "Material-UI",
   "short_name": "Material-UI",
   "display": "standalone",
-  "start_url": "/?launcher=true",
+  "start_url": "/",
   "theme_color": "#2196f3",
-  "background_color": "#fafafa",
+  "background_color": "#2196f3",
   "icons": [
     {
-      "src": "/icons/48x48.png",
+      "src": "/static/icons/48x48.png",
       "sizes": "48x48"
     },
     {
-      "src": "/icons/96x96.png",
+      "src": "/static/icons/96x96.png",
       "sizes": "96x96"
     },
     {
-      "src": "/icons/192x192.png",
+      "src": "/static/icons/192x192.png",
       "sizes": "192x192"
     },
     {
-      "src": "/icons/256x256.png",
+      "src": "/static/icons/256x256.png",
       "sizes": "256x256"
     },
     {
-      "src": "/icons/384x384.png",
+      "src": "/static/icons/384x384.png",
       "sizes": "384x384"
     },
     {
-      "src": "/icons/512x512.png",
+      "src": "/static/icons/512x512.png",
       "sizes": "512x512"
     }
   ]

yarn.lock

@@ -626,14 +626,22 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-[email protected], babel-loader@^7.1.1:
+[email protected]:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.1.tgz#b87134c8b12e3e4c2a94e0546085bc680a2b8488"
   dependencies:
     find-cache-dir "^1.0.0"
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
+babel-loader@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+
 babel-messages@^6.23.0, babel-messages@^6.8.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -1760,6 +1768,12 @@ classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
+clean-css@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.7.tgz#b9aea4f85679889cf3eae8b40349ec4ebdfdd032"
+  dependencies:
+    source-map "0.5.x"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -2078,7 +2092,7 @@ [email protected], cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^4:
+cross-spawn@^4, cross-spawn@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
   dependencies:
@@ -3138,6 +3152,10 @@ fd-slicer@~1.0.1:
   dependencies:
     pend "~1.2.0"
 
+fg-loadcss@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/fg-loadcss/-/fg-loadcss-1.3.1.tgz#8930e820959faafbb242850eeec4f2d0259430cb"
+
 figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -3590,6 +3608,15 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+gm@^1.23.0:
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/gm/-/gm-1.23.0.tgz#80a2fe9cbf131515024846444658461269f52661"
+  dependencies:
+    array-parallel "~0.1.3"
+    array-series "~0.1.5"
+    cross-spawn "^4.0.0"
+    debug "~2.2.0"
+
 gm@~1.21.1:
   version "1.21.1"
   resolved "https://registry.yarnpkg.com/gm/-/gm-1.21.1.tgz#7ed5ed05db36d30c1943f39c3bc1c839b8f2361d"
@@ -7132,7 +7159,7 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-[email protected], source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+[email protected], source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"