Update Example

.eslintignore

@@ -1,6 +1,6 @@
 css
 dist
-example/index.js
+example/package-example.js
 lib
 **/node_modules
 scripts

.eslintrc

@@ -45,7 +45,7 @@
     }],
     "react/jsx-no-undef": 2,
     "react/jsx-key": 1,
-    "react/jsx-sort-props": [1, {"ignoreCase": true}],
+    "react/jsx-sort-props": [2, {"ignoreCase": true}],
     "react/no-direct-mutation-state": 2,
     "semi": [2, "always"],
     "space-before-function-paren": [1, "never"],

.gitignore

@@ -1,5 +1,5 @@
 dist
-example/index.js
+example/package-example.js
 lib
 node_modules
 npm-debug.log

example/components/Anchor.react.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Anchor = ({children, id}) => (
+  <a
+    className="anchor"
+    href={`#${id}`}
+    id={id}>
+    <span className="anchor-icon">#</span>
+    {children}
+  </a>
+);
+
+export default Anchor;

example/components/CodeSample.react.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Markdown from './Markdown.react';
+
+const START_STR = '/* example-start */';
+const END_STR = '/* example-end */';
+
+const CodeSample = React.createClass({
+  propTypes: {
+    lang: React.PropTypes.string,
+  },
+
+  getDefaultProps() {
+    return {
+      lang: 'jsx',
+    };
+  },
+
+  render() {
+    // Strip out extraneous parts of the code.
+    const code = this.props.children;
+    const startIndex = code.indexOf(START_STR) + START_STR.length + 1;
+    const endIndex = code.indexOf(END_STR);
+
+    return (
+      <Markdown className="code-sample">
+        {`\`\`\`${this.props.lang}
+${code.slice(startIndex, endIndex)}
+        \`\`\``}
+      </Markdown>
+    );
+  },
+});
+
+export default CodeSample;

example/components/Container.react.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Container = props => (
+  <div className="container">
+    {props.children}
+  </div>
+);
+
+export default Container;

example/components/ExampleSection.react.js

@@ -1,10 +1,39 @@
 import React from 'react';
 
-const ExampleSection = props => (
-  <div className="example-section">
-    <h4>{props.title}</h4>
-    {props.children}
-  </div>
-);
+import CodeSample from '../components/CodeSample.react';
+
+const ExampleSection = React.createClass({
+  getInitialState() {
+    return {
+      open: false,
+    };
+  },
+
+  render() {
+    const {children, code} = this.props;
+    const {open} = this.state;
+
+    return (
+      <div className="example-section">
+        <div className="example">
+          <div className="clearfix">
+            <h6>Example</h6>
+            <a
+              className="example-toggle-code"
+              onClick={e => {
+                e.preventDefault();
+                this.setState({open: !open});
+              }}
+              role="button">
+              {`${open ? 'Hide' : 'Show'} Code`}
+            </a>
+          </div>
+          {children}
+        </div>
+        {open ? <CodeSample>{code}</CodeSample> : null}
+      </div>
+    );
+  },
+});
 
 export default ExampleSection;

example/components/GithubStarsButton.react.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+
+const AUTHOR_REPO = 'ericgio/react-bootstrap-typeahead';
+
+const GitHubStarsButton = React.createClass({
+  componentDidMount() {
+    const node = findDOMNode(this);
+    node.dataset.style = window.innerWidth > 480 ? 'mega': null;
+  },
+
+  render() {
+    return (
+      <a
+        aria-label={`Star ${AUTHOR_REPO} on GitHub`}
+        className="github-button"
+        data-count-api={`/repos/${AUTHOR_REPO}#stargazers_count`}
+        data-count-aria-label="# stargazers on GitHub"
+        data-count-href={`/${AUTHOR_REPO}/stargazers`}
+        href={`https://github.com/${AUTHOR_REPO}`}>
+        Star
+      </a>
+    );
+  },
+});
+
+export default GitHubStarsButton;

example/components/Markdown.react.js

@@ -0,0 +1,33 @@
+import cx from 'classnames';
+import marked from 'marked';
+import React from 'react';
+
+const Markdown = React.createClass({
+  componentWillMount() {
+    marked.setOptions({
+      gfm: true,
+      tables: true,
+      breaks: true,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false,
+      highlight(code) {
+        return require('highlight.js').highlightAuto(code).value;
+      },
+    });
+  },
+
+  render() {
+    const html = marked.parse(this.props.children);
+
+    return (
+      <div
+        className={cx('markdown-body', this.props.className)}
+        dangerouslySetInnerHTML={{__html: html}}
+      />
+    );
+  },
+});
+
+export default Markdown;

example/components/Page.react.js

@@ -0,0 +1,110 @@
+import React, {Children, PropTypes} from 'react';
+import {Col, Jumbotron, NavItem, Row} from 'react-bootstrap';
+
+import Container from './Container.react';
+import PageFooter from './PageFooter.react';
+import PageHeader from './PageHeader.react';
+import PageMenu from './PageMenu.react';
+
+import getIdFromTitle from '../util/getIdFromTitle';
+
+const Page = React.createClass({
+  getInitialState() {
+    return {
+      activeHref: window.location.hash,
+    };
+  },
+
+  childContextTypes: {
+    onAfter: PropTypes.func.isRequired,
+    onBefore: PropTypes.func.isRequired,
+  },
+
+  getChildContext() {
+    return {
+      onAfter: this._onAfter,
+      onBefore: this._onBefore,
+    };
+  },
+
+  componentWillMount() {
+    this._hrefs = [];
+    this._sections = [];
+
+    Children.forEach(this.props.children, ({props}) => {
+      this._hrefs.push(`#${getIdFromTitle(props.title)}`);
+      this._sections.push(props.title);
+    });
+  },
+
+  render() {
+    const {children, title} = this.props;
+
+    return (
+      <div className="bs-docs-page">
+        <PageHeader />
+        <Jumbotron>
+          <Container>
+            <h1>{title}</h1>
+          </Container>
+        </Jumbotron>
+        <Container>
+          <Row>
+            <Col md={9}>
+              {children}
+            </Col>
+            <Col className="bs-docs-sidebar-holder" md={3}>
+              <PageMenu>
+                {this._sections.map(this._renderMenuItem)}
+              </PageMenu>
+            </Col>
+          </Row>
+        </Container>
+        <PageFooter />
+      </div>
+    );
+  },
+
+  _renderMenuItem(title, idx) {
+    const href = `#${getIdFromTitle(title)}`;
+    return (
+      <NavItem
+        active={href === this.state.activeHref}
+        key={idx}
+        onClick={() => this._handleMenuItemClick(href)}>
+        {title}
+      </NavItem>
+    );
+  },
+
+  _handleMenuItemClick(activeHref) {
+    window.location.hash = activeHref;
+    this._updateActiveHref(activeHref);
+  },
+
+  _onAfter(href) {
+    this._updateActiveHref(href);
+  },
+
+  _onBefore(href) {
+    const index = this._hrefs.indexOf(href) - 1;
+    this._updateActiveHref(this._hrefs[index]);
+  },
+
+  _updateActiveHref(activeHref, callback) {
+    if (this._updateActiveHrefHandle != null) {
+      return;
+    }
+
+    this._updateActiveHrefHandle = setTimeout(() => {
+      this._updateActiveHrefHandle = null;
+      this.setState({activeHref});
+    });
+  },
+});
+
+Page.propTypes = {
+  title: PropTypes.node.isRequired,
+};
+
+export default Page;