Mark article as active in summary

packages/gitbook-core/src/actions/navigation.js

@@ -2,6 +2,8 @@
 
 /**
  * Fetch a new page and update the store accordingly
+ * @param {String} uri
+ * @return {Action} action
  */
 function fetchPage(uri) {
     return (dispatch, getState) => {
@@ -9,6 +11,16 @@ function fetchPage(uri) {
     };
 }
 
+/**
+ * Fetch a new article
+ * @param {SummaryArticle} article
+ * @return {Action} action
+ */
+function fetchArticle(article) {
+    return fetchPage(article.path);
+}
+
 module.exports = {
-    fetchPage
+    fetchPage,
+    fetchArticle
 };

packages/gitbook-core/src/components/Link.js

@@ -0,0 +1,38 @@
+const React = require('react');
+const SummaryArticleShape = require('../shapes/SummaryArticle');
+
+const Link = React.createClass({
+    propTypes: {
+        children: React.PropTypes.node,
+        href:     React.PropTypes.string,
+        to:       React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            SummaryArticleShape
+        ])
+    },
+
+    getHref() {
+        const { to, href } = this.props;
+
+        if (href) {
+            return href;
+        }
+
+        if (typeof to === 'string') {
+            return to;
+        }
+
+        if (typeof to.ref === 'string') {
+            // TODO: normalize url
+            return to.ref;
+        }
+    },
+
+    render() {
+        const { children, ...props } = this.props;
+        const href = this.getHref();
+        return <a href={href} {...props}>{children}</a>;
+    }
+});
+
+module.exports = Link;

packages/gitbook-core/src/index.js

@@ -5,6 +5,7 @@ const { Flex, Box } = require('reflexbox');
 const { InjectedComponent, InjectedComponentSet } = require('./components/InjectedComponent');
 const { ImportLink, ImportScript, ImportCSS } = require('./components/Import');
 const HTMLContent = require('./components/HTMLContent');
+const Link = require('./components/Link');
 
 const { registerComponent } = require('./actions/components');
 const ACTIONS = require('./actions/TYPES');
@@ -39,6 +40,7 @@ module.exports = {
     ImportCSS,
     FlexLayout: Flex,
     FlexBox: Box,
+    Link,
     // Utilities
     Shapes
 };

packages/gitbook-plugin-theme-default/less/Summary.less

@@ -33,5 +33,12 @@
 
     a:hover {
         text-decoration: underline;
+        color: @summary-article-hover-color;
+    }
+
+    &.active, {
+        a {
+            color: @summary-article-hover-color;
+        }
     }
 }

packages/gitbook-plugin-theme-default/less/variables.less

@@ -1,8 +1,9 @@
 // Sidebar
-@sidebar-background:        rgb(250, 250, 250);
-@sidebar-border-color:      rgba(0, 0, 0, 0.0666667);
+@sidebar-background:          rgb(250, 250, 250);
+@sidebar-border-color:        rgba(0, 0, 0, 0.0666667);
 // Summary
-@summary-header-color:      #939da3;
-@summary-article-padding-v: 10px;
-@summary-article-padding-h: 15px;
-@summary-article-color:     hsl(207, 15%, 25%);
+@summary-header-color:        #939da3;
+@summary-article-padding-v:   10px;
+@summary-article-padding-h:   15px;
+@summary-article-color:       hsl(207, 15%, 25%);
+@summary-article-hover-color: hsl(207, 100%, 50%);

packages/gitbook-plugin-theme-default/package.json

@@ -12,6 +12,7 @@
     "react": "^15.3.1"
   },
   "devDependencies": {
+    "classnames": "^2.2.5",
     "font-awesome": "^4.6.3",
     "gitbook-markdown-css": "^1.0.1",
     "gitbook-plugin": "*",

packages/gitbook-plugin-theme-default/src/components/Summary.js

@@ -1,23 +1,35 @@
 const React = require('react');
+const classNames = require('classnames');
 const GitBook = require('gitbook-core');
 
-const SummaryArticle = React.createClass({
+let SummaryArticle = React.createClass({
     propTypes: {
+        active: React.PropTypes.bool,
         article: GitBook.Shapes.SummaryArticle
     },
 
     render() {
-        const { article } = this.props;
+        const { article, active } = this.props;
+        const className = classNames('SummaryArticle', {
+            active
+        });
 
         return (
             <GitBook.InjectedComponent matching={{ role: 'summary:article' }} props={this.props}>
-                <li className="SummaryArticle">
-                    <span>{article.title}</span>
+                <li className={className}>
+                    {article.ref ?
+                        <GitBook.Link to={article}>{article.title}</GitBook.Link>
+                        : <span>{article.title}</span>}
                 </li>
             </GitBook.InjectedComponent>
         );
     }
 });
+SummaryArticle = GitBook.connect(SummaryArticle, ({page}, {article}) => {
+    return {
+        active: page.level === article.level
+    };
+});
 
 const SummaryArticles = React.createClass({
     propTypes: {