Base api to use i18n

book.js

@@ -9,7 +9,7 @@ module.exports = {
     gitbook: '3.1.1',
 
     // Use the "official" theme
-    plugins: ['theme-official@2.1.1', '-sharing', '-fontsettings', 'sitemap'],
+    plugins: ['sitemap'],
 
     variables: {
         version: pkg.version

docs/_layouts/website/page.html

@@ -1,26 +0,0 @@
-{% extends template.self %}
-
-{% block header_nav %}
-<a href="https://github.com/GitbookIO/gitbook/blob/master/docs/{{ file.path }}" target="_blank" class="btn btn-link pull-right hidden-xs">
-    <i class="octicon octicon-mark-github"></i> Edit on GitHub
-</a>
-<a href="{{ "faq.md"|resolveFile }}" class="btn btn-link pull-right hidden-xs">
-    F.A.Q
-</a>
-<a href="https://github.com/GitbookIO/gitbook/blob/master/CHANGES.md" target="_blank" class="btn btn-link pull-right hidden-xs">
-    {{ book.version }}
-</a>
-{% endblock %}
-
-{% block page %}
-{{ super() }}
-<hr>
-<div class="btn-group btn-group-justified">
-    {% if page.previous and page.previous.path %}
-    <a class="btn" href="{{ page.previous.path|resolveFile }}"><b>Previous:</b> {{ page.previous.title }}</a>
-    {% endif %}
-    {% if page.next and page.next.path %}
-    <a class="btn" href="{{ page.next.path|resolveFile }}"><b>Next:</b> {{ page.next.title }}</a>
-    {% endif %}
-</div>
-{% endblock %}

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

@@ -25,7 +25,7 @@ const ContextProvider = React.createClass({
 
     render() {
         const { context, children } = this.props;
-        return <Provider store={context}>{children}</Provider>;
+        return <Provider store={context.store}>{children}</Provider>;
     }
 });
 

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

@@ -2,7 +2,7 @@ const React = require('react');
 const intl = require('react-intl');
 const ReactRedux = require('react-redux');
 
-const IntlProvider = React.createClass({
+const I18nProvider = React.createClass({
     propTypes: {
         children: React.PropTypes.node
     },
@@ -19,4 +19,4 @@ const IntlProvider = React.createClass({
     }
 });
 
-module.exports = ReactRedux.connect()(IntlProvider);
+module.exports = ReactRedux.connect()(I18nProvider);

packages/gitbook-core/src/index.js

@@ -13,7 +13,7 @@ const HTMLContent = require('./components/HTMLContent');
 const Link = require('./components/Link');
 const Icon = require('./components/Icon');
 const Button = require('./components/Button');
-const IntlProvider = require('./components/IntlProvider');
+const I18nProvider = require('./components/I18nProvider');
 
 const { registerComponent } = require('./actions/components');
 const ACTIONS = require('./actions/TYPES');
@@ -38,7 +38,7 @@ module.exports = {
     composeReducer,
     registerComponent,
     // React Components
-    IntlProvider,
+    I18nProvider,
     InjectedComponent,
     InjectedComponentSet,
     HTMLContent,

packages/gitbook-core/src/lib/connect.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
+const { injectIntl } = require('react-intl');
 
 /**
  * Use the GitBook context provided by ContextProvider to map actions to props
@@ -34,6 +35,21 @@ function connectToActions(Component, mapActionsToProps) {
     });
 }
 
+/**
+ * Connect to i18n
+ * @param {ReactComponent} Component
+ * @return {ReactComponent}
+ */
+function connectToI18n(Component) {
+    return injectIntl(({intl, children, ...props}) => {
+        const i18n = {
+            t: (id, values) => intl.formatMessage({ id }, values)
+        };
+
+        return <Component {...props} i18n={i18n}>{children}</Component>;
+    });
+}
+
 /**
  * Connect a component to the GitBook context (store and actions).
  *
@@ -42,8 +58,11 @@ function connectToActions(Component, mapActionsToProps) {
  * @return {ReactComponent}
  */
 function connect(Component, mapStateToProps, mapActionsToProps) {
-    const connectToStore = ReactRedux.connect(mapStateToProps);
-    return connectToActions(connectToStore(Component), mapActionsToProps);
+    Component = ReactRedux.connect(mapStateToProps)(Component);
+    Component = connectToI18n(Component);
+    Component = connectToActions(Component, mapActionsToProps);
+
+    return Component;
 }
 
 module.exports = connect;

packages/gitbook-core/src/lib/renderWithContext.js

@@ -2,11 +2,12 @@ const React = require('react');
 
 const { InjectedComponent } = require('../components/InjectedComponent');
 const PJAXWrapper = require('../components/PJAXWrapper');
-const IntlProvider = require('../components/IntlProvider');
-const ContextProvider = require('../components/IntlProvider');
+const I18nProvider = require('../components/I18nProvider');
+const ContextProvider = require('../components/ContextProvider');
 
 /**
- * Render the application for a store
+ * Render the application for a GitBook context.
+ *
  * @param  {GitBookContext} context
  * @return {React.Element} element
  */
@@ -14,9 +15,9 @@ function renderWithContext(context) {
     return (
         <ContextProvider context={context}>
             <PJAXWrapper>
-                <IntlProvider>
+                <I18nProvider>
                     <InjectedComponent matching={{ role: 'Body' }} />
-                </IntlProvider>
+                </I18nProvider>
             </PJAXWrapper>
         </ContextProvider>
     );

packages/gitbook-core/src/shapes/i18n.js

@@ -0,0 +1,10 @@
+const React  = require('react');
+const {
+    func,
+    shape
+} = React.PropTypes;
+
+
+module.exports = shape({
+    t: func
+});

packages/gitbook-core/src/shapes/index.js

@@ -1,7 +1,10 @@
+const React  = require('react');
 const ImmutablePropTypes = require('react-immutable-proptypes');
 
 module.exports = {
     ...ImmutablePropTypes,
+    dispatch:       React.PropTypes.func,
+    i18n:           require('./i18n'),
     Page:           require('./Page'),
     File:           require('./File'),
     Summary:        require('./Summary'),

packages/gitbook-plugin-search/src/components/Input.js

@@ -6,7 +6,8 @@ const search = require('../actions/search');
 const SearchInput = React.createClass({
     propTypes: {
         query:    React.PropTypes.string,
-        dispatch: React.PropTypes.func
+        i18n:     GitBook.Shapes.i18n,
+        dispatch: GitBook.Shapes.dispatch
     },
 
     onChange(event) {
@@ -17,11 +18,16 @@ const SearchInput = React.createClass({
     },
 
     render() {
-        const { query } = this.props;
+        const { i18n, query } = this.props;
 
         return (
             <div className="Search/Input">
-                <input type="text" value={query} onChange={this.onChange} />
+                <input
+                    type="text"
+                    value={query}
+                    placeholder={i18n.t('SEARCH_PLACEHOLDER')}
+                    onChange={this.onChange}
+                />
             </div>
         );
     }

packages/gitbook-plugin-search/src/components/Results.js

@@ -20,13 +20,14 @@ const Result = React.createClass({
 
 const SearchResults = React.createClass({
     propTypes: {
-        query:    React.PropTypes.string,
+        i18n:     GitBook.Shapes.i18n,
         results:  GitBook.Shapes.list,
+        query:    React.PropTypes.string,
         children: React.PropTypes.node
     },
 
     render() {
-        const { query, results, children } = this.props;
+        const { i18n, query, results, children } = this.props;
 
         if (!query) {
             return React.Children.only(children);
@@ -34,7 +35,7 @@ const SearchResults = React.createClass({
 
         return (
             <div className="Search/ResultsContainer">
-                <h1>Results for "{query}"</h1>
+                <h1>{i18n.t('SEARCH_RESULTS_TITLE', { query, count: results.size })}</h1>
                 <div className="Search/Results">
                     {results.map((result, i) => {
                         return <Result key={i} result={result} />;