site: fix 404

site/component/Header/index.jsx

@@ -17,15 +17,7 @@ export default class Header extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      menuVisible: false,
-      menuMode: 'horizontal',
-      isFirstFrame: true,
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener('scroll', debounce(() => {
+    this.onScroll = debounce(() => {
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
       const clientHeight = document.documentElement.clientHeight;
       if (scrollTop >= clientHeight) {
@@ -33,13 +25,25 @@ export default class Header extends React.Component {
       } else {
         this.setState({ isFirstFrame: true });
       }
-    }, 100));
+    }, 100);
 
-    document.addEventListener('click', () => {
+    this.onDocumentClick = () => {
       this.setState({
         menuVisible: false,
       });
-    });
+    };
+
+    this.state = {
+      menuVisible: false,
+      menuMode: 'horizontal',
+      isFirstFrame: true,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.onScroll);
+
+    document.addEventListener('click', this.onDocumentClick);
 
     enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
       match: () => {
@@ -51,6 +55,11 @@ export default class Header extends React.Component {
     });
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll);
+    document.removeEventListener('click', this.onDocumentClick);
+  }
+
   handleMenuIconClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();

site/entry/index.jsx

@@ -52,32 +52,38 @@ ReactDOM.render(
       <Route path="components" component={ReactComponents}>
         {utils.generateIndex(reactComponents)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(reactComponents)}
           component={utils.getChildrenWrapper(reactComponents)} />
       </Route>
       {redirects}
       <Route path="docs/react" component={ReactComponents}>
         {utils.generateIndex(reactComponents)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(reactComponents)}
           component={utils.getChildrenWrapper(reactComponents)} />
       </Route>
       <Route path="docs/practice" component={Practice}>
         {utils.generateIndex(practice)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(practice)}
           component={utils.getChildrenWrapper(practice)} />
       </Route>
       <Route path="docs/pattern" component={Pattern}>
         {utils.generateIndex(pattern)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(pattern)}
           component={utils.getChildrenWrapper(pattern)} />
       </Route>
       <Route path="docs/spec" component={Spec}>
         {utils.generateIndex(spec)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(spec)}
           component={utils.getChildrenWrapper(spec)} />
       </Route>
       <Route path="docs/resource" component={Resource}>
         {utils.generateIndex(resource)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(resource)}
           component={utils.getChildrenWrapper(resource)} />
       </Route>
     </Route>

site/entry/utils.js

@@ -61,15 +61,30 @@ export function generateIndex(data) {
 const pathToFile = {};
 Object.keys(redirects).forEach((key) => pathToFile[redirects[key]] = key);
 pathToFile['docs/react/changelog'] = './CHANGELOG'; // TODO
+
+function getDoc(data, props) {
+  const trimedPathname = props.location.pathname.replace(/^\//, '');
+  const processedPathname = pathToFile[trimedPathname] || trimedPathname;
+  const doc = data[`${processedPathname}.md`] ||
+          data[`${processedPathname}/index.md`];
+  return doc;
+}
+
 export function getChildrenWrapper(data) {
   return function childrenWrapper(props) {
-    const trimedPathname = props.location.pathname.replace(/^\//, '');
-    const processedPathname = pathToFile[trimedPathname] || trimedPathname;
-    const doc = data[`${processedPathname}.md`] ||
-            data[`${processedPathname}/index.md`];
+    const doc = getDoc(data, props);
     const hasDemos = demosList[doc.meta.fileName];
     return !hasDemos ?
       <Article {...props} content={doc} /> :
       <ComponentDoc {...props} doc={doc} />;
   };
 }
+
+export function getEnterHandler(data) {
+  return function handleEnter(nextState, replace) {
+    const doc = getDoc(data, nextState);
+    if (!doc) {
+      replace('/404');
+    }
+  };
+}