site: add not found page (#1518)

404.html

@@ -1,6 +1,3 @@
-<p>找不到此页，三秒后返回首页...</p>
 <script>
-setTimeout(function() {
-  location.href = '/';
-}, 3000);
+  location.href = '/#' + location.pathname.replace('#', '?scrollTo=');
 </script>

site/component/Demo/index.jsx

@@ -69,7 +69,7 @@ export default class Demo extends React.Component {
             </pre>
           </div>
           {
-            style ?
+            highlightedStyle ?
               <div key="style" className="highlight">
                 <pre>
                   <code className="css" dangerouslySetInnerHTML={{

site/component/NotFound/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router';
+import './index.less';
+
+export default function NotFound() {
+  return (
+    <div id="page-404">
+      <section>
+        <h1>404</h1>
+        <p>你要找的页面不存在 <Link to="/">返回首页</Link></p>
+      </section>
+      <style dangerouslySetInnerHTML={{
+        __html: '#react-content { height: 100%; background-color: #fff }'
+      }} />
+    </div>
+  );
+}

site/component/NotFound/index.less

@@ -0,0 +1,30 @@
+#page-404 {
+  background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: 100%;
+  position: relative;
+
+  section {
+    position: absolute;
+    top: 48%;
+    left: 55%;
+    margin: -103px 0 0 -120px;
+
+    text-align: center;
+  }
+
+  h1 {
+    color: #2DB7F5;
+    font-size: 120px;
+    font-weight: 500;
+  }
+
+  p {
+    color: #666;
+    font-size: 18px;
+  }
+}

site/entry/index.jsx

@@ -6,6 +6,7 @@ import * as utils from './utils';
 import '../common/lib';
 import App from '../component/App';
 import Home from '../component/Home';
+import NotFound from '../component/NotFound';
 import practice from '../../_data/practice';
 import pattern from '../../_data/pattern';
 import reactComponents from '../../_data/react-components';
@@ -75,6 +76,7 @@ ReactDOM.render(
           component={utils.getChildrenWrapper(resource)} />
       </Route>
     </Route>
+    <Route path="*" component={NotFound} />
   </Router>
   , document.getElementById('react-content')
 );