diff options
Diffstat (limited to 'packages')
7 files changed, 84 insertions, 11 deletions
diff --git a/packages/gitbook-core/src/actions/navigation.js b/packages/gitbook-core/src/actions/navigation.js index a467d23..0d00687 100644 --- a/packages/gitbook-core/src/actions/navigation.js +++ b/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 }; diff --git a/packages/gitbook-core/src/components/Link.js b/packages/gitbook-core/src/components/Link.js new file mode 100644 index 0000000..2f909de --- /dev/null +++ b/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; diff --git a/packages/gitbook-core/src/index.js b/packages/gitbook-core/src/index.js index 0a5d8c5..f002d9e 100644 --- a/packages/gitbook-core/src/index.js +++ b/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 }; diff --git a/packages/gitbook-plugin-theme-default/less/Summary.less b/packages/gitbook-plugin-theme-default/less/Summary.less index d7cdae5..b57a403 100644 --- a/packages/gitbook-plugin-theme-default/less/Summary.less +++ b/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; + } } } diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less index 8f16632..a988847 100644 --- a/packages/gitbook-plugin-theme-default/less/variables.less +++ b/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%); diff --git a/packages/gitbook-plugin-theme-default/package.json b/packages/gitbook-plugin-theme-default/package.json index a98fae9..349bace 100644 --- a/packages/gitbook-plugin-theme-default/package.json +++ b/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": "*", diff --git a/packages/gitbook-plugin-theme-default/src/components/Summary.js b/packages/gitbook-plugin-theme-default/src/components/Summary.js index 8c5c4a1..ba21a04 100644 --- a/packages/gitbook-plugin-theme-default/src/components/Summary.js +++ b/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: { |