		@@ -13,2 +13,3 @@ // components/DocItem.jsx


		var DocItem = React.createClass({
		@@ -22,3 +23,4 @@ render: function () {
		group,
		parameter
		parameter,
		styleguide
		} = this.props;
		@@ -34,2 +36,3 @@ return (
		<OutputExample {...this.props} />

		<Segment title="Uses" data={this.props.require}><Require /></Segment>
		@@ -36,0 +39,0 @@ <Segment title="Used By" data={this.props.usedBy}><UsedBy /></Segment>

docs/components/Index.jsx

		// components/Index.jsx
		var React = require('react');
		import {groupBy} from 'lodash';
		import DocItem from './DocItem.jsx';
		import Navigation from './Navigation';
		import Styleguide from './Styleguide';

		var Index = React.createClass({
		render: function () {
		var {styleguide, docs} = this.props;
		var styles = groupBy(styleguide.sections, (ii) => ii.reference.split('.')[0]);
		return (
		<main className="wrapper">
		<Navigation {...this.props.data}/>
		<Navigation docs={docs} styleguide={styleguide}/>
		<div className="Content">
		<h1>Bruce</h1>
		{this.props.data.map((item, key) => <DocItem key={key} {...item}/>)}
		{styleguide.sections.map((item, key) => <Styleguide key={'styleguide-' + key} {...item} />)}
		{docs.map((item, key) => <DocItem key={key} {...item} styleguide={styles[item.context.name]}/>)}
		</div>
		@@ -15,0 +20,0 @@ </main>

docs/components/Navigation.jsx

		@@ -18,10 +18,17 @@ import React from 'react';

		function renderStyle(item, key) {
		return <li key={key}><a href={`#${item.header}`}>{item.header}</a></li>
		}


		export default (props) => {
		var groups = groupBy(props, 'group[0]');
		var docs = groupBy(props.docs, 'group[0]');
		return (
		<ul className="Navigation left">
		{map(groups, renderGroup)}
		<li key="styleguide"><strong><a href="#styleguide">styleguide</a></strong></li>
		<ul>{map(props.styleguide.sections, renderStyle)}</ul>

		{map(docs, renderGroup)}
		</ul>
		)
		}

docs/docs.js

		@@ -11,5 +11,7 @@ import React from 'react';
		var sassdocs = require("!!sassdoc-loader!../bruce.scss");
		var styleguide = require("!!raw!kss!sass!./styleguide.scss");
		// console.log(styleguide);

		function createElement(Component, props) {
		return <Component {...props} data={sassdocs} />
		return <Component {...props} data={{docs:sassdocs, styleguide: styleguide}} />
		}
		@@ -20,2 +22,3 @@

		var Styles = require('./styleguide.scss');
		var Styles = require('./scss/main.scss');
		@@ -22,0 +25,0 @@

package.json

		{
		"name": "bruce",
		"title": "Bruce",
		"version": "0.1.1",
		"version": "0.2.0",
		"description": "SCSS Helpers",
		@@ -57,3 +57,3 @@ "repository": {
		"build": "webpack --progress --colors --config webpack.production.config.js",
		"dev": "webpack-dev-server --progress --colors",
		"dev": "webpack-dev-server --no-info",
		"start": "npm run dev"
		@@ -60,0 +60,0 @@ },

docs/scss/main.scss