[docs] Some last improvement before the release (mui#7847)

Author: oliviertassinari

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}