refactor: Lighthouse audits (#331)

Fix render-page middleware Move assets to public folder Add robots.txt
openpitrix · Sep 6, 2018 · e54ecee · e54ecee
1 parent 7fc8cde
commit e54ecee
Show file tree

Hide file tree

Showing 50 changed files with 54 additions and 51 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,6 +1,7 @@
 build/
 dist/
-docker/
 docs/
 node_modules/
 reports/
+public/
+.cache/
diff --git a/src/assets/1-1.svg → public/1-1.svg b/src/assets/1-1.svg → public/1-1.svg
diff --git a/src/assets/1-2.svg → public/1-2.svg b/src/assets/1-2.svg → public/1-2.svg
diff --git a/src/assets/1-3.svg → public/1-3.svg b/src/assets/1-3.svg → public/1-3.svg
diff --git a/src/assets/banner.png → public/banner.png b/src/assets/banner.png → public/banner.png
diff --git a/src/assets/css/normalize.min.css → public/css/normalize.min.css b/src/assets/css/normalize.min.css → public/css/normalize.min.css
diff --git a/src/assets/favicon.ico → public/favicon.ico b/src/assets/favicon.ico → public/favicon.ico
diff --git a/src/assets/fonts/roboto/Roboto-Bold.ttf → public/fonts/roboto/Roboto-Bold.ttf b/src/assets/fonts/roboto/Roboto-Bold.ttf → public/fonts/roboto/Roboto-Bold.ttf
diff --git a/src/assets/fonts/roboto/Roboto-Bold.woff → public/fonts/roboto/Roboto-Bold.woff b/src/assets/fonts/roboto/Roboto-Bold.woff → public/fonts/roboto/Roboto-Bold.woff
diff --git a/src/assets/fonts/roboto/Roboto-Bold.woff2 → public/fonts/roboto/Roboto-Bold.woff2 b/src/assets/fonts/roboto/Roboto-Bold.woff2 → public/fonts/roboto/Roboto-Bold.woff2
diff --git a/...assets/fonts/roboto/Roboto-BoldItalic.ttf → public/fonts/roboto/Roboto-BoldItalic.ttf b/...assets/fonts/roboto/Roboto-BoldItalic.ttf → public/fonts/roboto/Roboto-BoldItalic.ttf
diff --git a/...ssets/fonts/roboto/Roboto-BoldItalic.woff → public/fonts/roboto/Roboto-BoldItalic.woff b/...ssets/fonts/roboto/Roboto-BoldItalic.woff → public/fonts/roboto/Roboto-BoldItalic.woff
diff --git a/...sets/fonts/roboto/Roboto-BoldItalic.woff2 → public/fonts/roboto/Roboto-BoldItalic.woff2 b/...sets/fonts/roboto/Roboto-BoldItalic.woff2 → public/fonts/roboto/Roboto-BoldItalic.woff2
diff --git a/src/assets/fonts/roboto/Roboto-Italic.ttf → public/fonts/roboto/Roboto-Italic.ttf b/src/assets/fonts/roboto/Roboto-Italic.ttf → public/fonts/roboto/Roboto-Italic.ttf
diff --git a/src/assets/fonts/roboto/Roboto-Italic.woff → public/fonts/roboto/Roboto-Italic.woff b/src/assets/fonts/roboto/Roboto-Italic.woff → public/fonts/roboto/Roboto-Italic.woff
diff --git a/src/assets/fonts/roboto/Roboto-Italic.woff2 → public/fonts/roboto/Roboto-Italic.woff2 b/src/assets/fonts/roboto/Roboto-Italic.woff2 → public/fonts/roboto/Roboto-Italic.woff2
diff --git a/src/assets/fonts/roboto/Roboto-Medium.ttf → public/fonts/roboto/Roboto-Medium.ttf b/src/assets/fonts/roboto/Roboto-Medium.ttf → public/fonts/roboto/Roboto-Medium.ttf
diff --git a/src/assets/fonts/roboto/Roboto-Medium.woff → public/fonts/roboto/Roboto-Medium.woff b/src/assets/fonts/roboto/Roboto-Medium.woff → public/fonts/roboto/Roboto-Medium.woff
diff --git a/src/assets/fonts/roboto/Roboto-Medium.woff2 → public/fonts/roboto/Roboto-Medium.woff2 b/src/assets/fonts/roboto/Roboto-Medium.woff2 → public/fonts/roboto/Roboto-Medium.woff2
diff --git a/...sets/fonts/roboto/Roboto-MediumItalic.ttf → public/fonts/roboto/Roboto-MediumItalic.ttf b/...sets/fonts/roboto/Roboto-MediumItalic.ttf → public/fonts/roboto/Roboto-MediumItalic.ttf
diff --git a/...ets/fonts/roboto/Roboto-MediumItalic.woff → public/fonts/roboto/Roboto-MediumItalic.woff b/...ets/fonts/roboto/Roboto-MediumItalic.woff → public/fonts/roboto/Roboto-MediumItalic.woff
diff --git a/...ts/fonts/roboto/Roboto-MediumItalic.woff2 → ...ic/fonts/roboto/Roboto-MediumItalic.woff2 b/...ts/fonts/roboto/Roboto-MediumItalic.woff2 → ...ic/fonts/roboto/Roboto-MediumItalic.woff2
diff --git a/src/assets/fonts/roboto/Roboto-Regular.ttf → public/fonts/roboto/Roboto-Regular.ttf b/src/assets/fonts/roboto/Roboto-Regular.ttf → public/fonts/roboto/Roboto-Regular.ttf
diff --git a/src/assets/fonts/roboto/Roboto-Regular.woff → public/fonts/roboto/Roboto-Regular.woff b/src/assets/fonts/roboto/Roboto-Regular.woff → public/fonts/roboto/Roboto-Regular.woff
diff --git a/src/assets/fonts/roboto/Roboto-Regular.woff2 → public/fonts/roboto/Roboto-Regular.woff2 b/src/assets/fonts/roboto/Roboto-Regular.woff2 → public/fonts/roboto/Roboto-Regular.woff2
diff --git a/src/assets/fonts/roboto/roboto.css → public/fonts/roboto/roboto.css b/src/assets/fonts/roboto/roboto.css → public/fonts/roboto/roboto.css
diff --git a/src/assets/logo_dark.svg → public/logo_dark.svg b/src/assets/logo_dark.svg → public/logo_dark.svg
diff --git a/src/assets/logo_grey.svg → public/logo_grey.svg b/src/assets/logo_grey.svg → public/logo_grey.svg
diff --git a/src/assets/logo_light.svg → public/logo_light.svg b/src/assets/logo_light.svg → public/logo_light.svg
diff --git a/src/assets/none.svg → public/none.svg b/src/assets/none.svg → public/none.svg
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/server/config.yml b/server/config.yml
@@ -4,10 +4,10 @@
 host: 127.0.0.1
 port: 8000
 
-favicon: src/assets/favicon.ico
+favicon: public/favicon.ico
 
 static:
-  /assets: src/assets
+  /: public
   /locales: src/locales
   development:
     /build: build

diff --git a/server/local_config.yml.example b/server/local_config.yml.example
@@ -1,5 +1,6 @@
 ---
 
 serverUrl: http://127.0.0.1:9100
-
+socketUrl: ws://127.0.0.1:9100/v1/io
 apiVersion: v1
+
diff --git a/server/render-page.js b/server/render-page.js
@@ -19,19 +19,22 @@ const readManifest = (file, prefix = '/dist') => {
 };
 
 const renderPage = (options = {}) => {
-  Object.assign(defaultOptions, options);
+  options = Object.assign({}, defaultOptions, options);
 
-  const isProd = !!options.isProd;
+  const isProd = Boolean(options.isProd);
   const bundlePrefix = isProd ? '/dist' : '/build';
+  let manifest = {};
 
-  const manifest = readManifest('build-hash.json');
+  if (isProd) {
+    manifest = readManifest('build-hash.json', bundlePrefix);
+  }
 
   const normalizeCssFilePath = css_file => {
     if (css_file.startsWith('http')) {
       return css_file;
     }
     if (css_file.startsWith('/css')) {
-      return `/assets${css_file}`;
+      return `/${css_file}`;
     }
 
     if (isProd) {
@@ -71,14 +74,15 @@ const renderPage = (options = {}) => {
   };
 
   return `<!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="Description" content="OpenPitrix: Application Management Platform on Multi-Cloud Environment">
     <title>${options.title}</title>
-    <link rel="shortcut icon" href="/assets/favicon.ico" />
-    <link rel="stylesheet" href="/assets/css/normalize.min.css" />
-    <link rel="stylesheet" href="/assets/fonts/roboto/roboto.css" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/css/normalize.min.css" />
+    <link rel="stylesheet" href="/fonts/roboto/roboto.css" />
     
     ${renderCss(isProd && 'bundle.css')}
   </head>

diff --git a/src/components/Banner/index.jsx b/src/components/Banner/index.jsx
@@ -25,9 +25,9 @@ class Banner extends PureComponent {
     return (
       <div className={classnames('banner', styles.banner)}>
         <div className={styles.wrapper}>
-          <img className="banner-img-1" src="/assets/1-1.svg" alt="" />
-          <img className="banner-img-2" src="/assets/1-2.svg" alt="" />
-          <img className="banner-img-3" src="/assets/1-3.svg" alt="" />
+          <img className="banner-img-1" src="/1-1.svg" alt="" />
+          <img className="banner-img-2" src="/1-2.svg" alt="" />
+          <img className="banner-img-3" src="/1-3.svg" alt="" />
           <div className={styles.title}>{t('brand.slogan')}</div>
           <Input.Search
             className={styles.search}

diff --git a/src/components/Base/Icon/index.jsx b/src/components/Base/Icon/index.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { isNumber, noop } from 'lodash';
 
-import styles from './index.scss';
+import svgSprite from 'utils/icons';
 
-import svgSprite from 'assets/icons';
+import './index.scss';
 
 const prepend = (el, target) => {
   if (target.firstChild) {

diff --git a/src/components/Base/Icon/index.scss b/src/components/Base/Icon/index.scss
@@ -59,12 +59,4 @@
     }
   }
 
-  // styles from alert component
-  //.icon {
-  //  --icon-status-info: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMjE5MUNBIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4ek05IDUuNjgxYTEuMzEyIDEuMzEyIDAgMSAwIDAtMi42MjMgMS4zMTIgMS4zMTIgMCAwIDAgMCAyLjYyM3pNOCA3LjUxNlYxNWgyVjcuNTE2SDh6Ii8+PC9nPjwvc3ZnPg==');
-  //  --icon-status-success: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMDBBQTcyIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4em0tMi4xMTUtNi45NEw0LjQ5NCA4LjY3bC0xLjQxNSAxLjQxNCAzLjgwNiAzLjgwNiA3LjU0OC03LjU0OC0xLjQxNC0xLjQxNC02LjEzNCA2LjEzNHoiLz48L2c+PC9zdmc+');
-  //  --icon-status-warning: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTItM2gyNHYyNEgtMnoiLz48cGF0aCBmaWxsPSIjRjVDNDE0IiBkPSJNMTAgMGwxMCAxNy4zMkgwTDEwIDB6bTAgMTYuMDAxYTEgMSAwIDEgMCAwLTIgMSAxIDAgMCAwIDAgMnpNOSA2bC4yIDdoMS42bC4yLTdIOXoiLz48L2c+PC9zdmc+');
-  //  --icon-status-error: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjQ0EyNjIxIiBkPSJNMTIuNzI4IDBMMTggNS4yNzJ2Ny40NTZMMTIuNzI4IDE4SDUuMjcyTDAgMTIuNzI4VjUuMjcyTDUuMjcyIDBoNy40NTZ6bS0yLjMxNCA5bDMuNDY2LTMuNDY2LTEuNDE0LTEuNDE0TDkgNy41ODYgNS41MzYgNC4xMjIgNC4xMjIgNS41MzYgNy41ODYgOSA0LjEyIDEyLjQ2NmwxLjQxNCAxLjQxNEw5IDEwLjQxNGwzLjQ2NCAzLjQ2NCAxLjQxNC0xLjQxNEwxMC40MTQgOXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTAuNDE0IDlsMy40NjQgMy40NjQtMS40MTQgMS40MTRMOSAxMC40MTQgNS41MzQgMTMuODggNC4xMiAxMi40NjYgNy41ODYgOSA0LjEyMiA1LjUzNmwxLjQxNC0xLjQxNEw5IDcuNTg2bDMuNDY2LTMuNDY2IDEuNDE0IDEuNDE0eiIvPjwvZz48L3N2Zz4=');
-  //}
-
 }
diff --git a/src/components/Base/Image/index.jsx b/src/components/Base/Image/index.jsx
@@ -43,7 +43,7 @@ export default class Image extends React.Component {
     const { failed } = this.state;
 
     if (failed) {
-      const nonIcon = '/assets/none.svg';
+      const nonIcon = '/none.svg';
       const sizeStyle = {
         width: iconSize + 'px',
         height: iconSize + 'px'

diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
@@ -17,7 +17,7 @@ export default class Card extends PureComponent {
   render() {
     const { icon, name, desc, fold } = this.props;
     const iconSize = fold ? 36 : 48;
-    const noneIcon = '/assets/none.svg';
+    const noneIcon = '/none.svg';
 
     return (
       <div className={classnames(styles.card, { [styles.foldCard]: fold })}>

diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -24,11 +24,11 @@ export default class Footer extends PureComponent {
         <div className={styles.wrapper}>
           <div className={styles.inner}>
             <span className={styles.logo}>
-              <img src="/assets/logo_grey.svg" alt="logo" height="100%" />
+              <img src="/logo_grey.svg" alt="logo" height="100%" />
             </span>
             <ul className={styles.terms}>
               <li>
-                <a target="_blank" href="https://openpitrix.io">
+                <a target="_blank" href="https://openpitrix.io" rel="noreferrer">
                   {t('About')}
                 </a>
                 {/* <span className={styles.dot} />
@@ -45,7 +45,7 @@ export default class Footer extends PureComponent {
                 >
                   中文
                 </a>
-                <span className={styles.dot}/>
+                <span className={styles.dot} />
                 <a
                   href="#"
                   onClick={this.changeLocale.bind(null, 'en')}

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -74,7 +74,7 @@ class Header extends Component {
       rootStore: { fixNav }
     } = this.props;
     const isDark = !isHome || fixNav;
-    const logoUrl = isDark ? '/assets/logo_light.svg' : '/assets/logo_dark.svg';
+    const logoUrl = isDark ? '/logo_light.svg' : '/logo_dark.svg';
     const needShowSearch = isDark && isHome;
     const appSearch = match.params.search;
 

diff --git a/src/components/Nav/index.jsx b/src/components/Nav/index.jsx
@@ -22,8 +22,8 @@ export default class Nav extends PureComponent {
 
     return (
       <div className={classnames(styles.nav, className)}>
+        <p className={styles.caption}>{t('Categories')}</p>
         <ul className={styles.subNav}>
-          <p>{t('Categories')}</p>
           {navs.map(nav => (
             <li key={nav.category_id}>
               <NavLink

diff --git a/src/components/Nav/index.scss b/src/components/Nav/index.scss
@@ -2,20 +2,23 @@
 
 .nav {
   padding-top: 32px;
+
+  .caption {
+    margin: 0 0 20px;
+    line-height: 20px;
+    font-size: $font16;
+    font-weight: bold;
+    color: $N500;
+  }
+
   .subNav {
     padding: 0;
     margin-top: $base-margin;
     //margin-right: -2px;
     &:first-of-type {
       margin-top: 0;
     }
-    p {
-      margin: 0 0 20px;
-      line-height: 20px;
-      font-size: $font16;
-      font-weight: bold;
-      color: $N500;
-    }
+
     li {
       margin: 12px 0;
       height: 20px;

diff --git a/src/components/Rectangle/AppImages/index.jsx b/src/components/Rectangle/AppImages/index.jsx
@@ -16,7 +16,7 @@ export default class AppImages extends Component {
 
   render() {
     const { apps, total, t } = this.props;
-    const nonIcon = '/assets/none.svg';
+    const nonIcon = '/none.svg';
 
     return (
       <div className={styles.appImages}>

diff --git a/src/components/TdName/index.jsx b/src/components/TdName/index.jsx
@@ -49,7 +49,7 @@ export default class TdName extends React.Component {
   renderIcon() {
     const { noIcon, image } = this.props;
     const isIcon = ['appcenter', 'cluster'].includes(image);
-    const nonIcon = '/assets/none.svg';
+    const nonIcon = '/none.svg';
 
     if (noIcon) {
       return null;

diff --git a/src/pages/AppDetail/Meta/index.jsx b/src/pages/AppDetail/Meta/index.jsx
@@ -7,7 +7,7 @@ import { get } from 'lodash';
 import styles from './index.scss';
 
 const Meta = ({ app }) => {
-  const iconSrc = '/assets/None48.svg';
+  const iconSrc = '/none.svg';
 
   return (
     <div className={styles.meta}>

diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
@@ -28,7 +28,7 @@ export default class Login extends Component {
       <div className={styles.login}>
         <div className={styles.loginContent}>
           <div className={styles.loginTitle}>
-            <Logo url="/assets/logo_light.svg" />
+            <Logo url="/logo_light.svg" />
           </div>
           <div className={styles.loginForm}>
             <h1>{t('Login OpenPitrix')}</h1>

diff --git a/src/assets/icons.js → src/utils/icons.js b/src/assets/icons.js → src/utils/icons.js
diff --git a/test/pages/__snapshots__/Home.test.js.snap b/test/pages/__snapshots__/Home.test.js.snap
@@ -10,11 +10,12 @@ exports[`Home basic render 1`] = `
     <div
       class="nav nav"
     >
+      <p
+        class="caption"
+      />
       <ul
         class="subNav"
-      >
-        <p />
-      </ul>
+      />
     </div>
     <div
       class="appList apps"

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -45,12 +45,12 @@ const clientConfig = {
       {
         test: /\.(jpg|png|svg)(\?.+)?$/,
         use: 'url-loader?limit=100000',
-        include: [resolve(__dirname, 'src/assets'), resolve(__dirname, 'src/components')]
+        include: [resolve(__dirname, 'public'), resolve(__dirname, 'src/components')]
       },
       {
         test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/,
         use: 'file-loader',
-        include: [resolve(__dirname, 'src/assets'), resolve(__dirname, 'src/components')]
+        include: [resolve(__dirname, 'public'), resolve(__dirname, 'src/components')]
       },
       {
         test: /\.scss$/,
@@ -89,7 +89,6 @@ const clientConfig = {
       filename: 'bundle.css',
       allChunks: true
     }),
-    // new webpack.NamedModulesPlugin(),
     new WriteHashPlugin(),
     // new webpack.optimize.OccurrenceOrderPlugin(),
     // new webpack.optimize.UglifyJsPlugin({
@@ -139,15 +138,15 @@ const serverConfig = {
       {
         test: /\.(jpg|png|svg)(\?.+)?$/,
         loader: 'url-loader?limit=100000',
-        include: [resolve(__dirname, 'src/assets'), resolve(__dirname, 'src/components')],
+        include: [resolve(__dirname, 'public'), resolve(__dirname, 'src/components')],
         options: {
           emit: false // don't copy the files
         }
       },
       {
         test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/,
         loader: 'file-loader',
-        include: [resolve(__dirname, 'src/assets'), resolve(__dirname, 'src/components')],
+        include: [resolve(__dirname, 'public'), resolve(__dirname, 'src/components')],
         options: {
           emit: false
         }