Better organization in styleguide.

client/galaxy/scripts/components/Alert.md

@@ -1,12 +1,10 @@
-# Basic alert types
-
-Default alert:
+### Default alert
 
 ```js
 <Alert>An alert with all defaults</Alert>
 ```
 
-Alert variants:
+### Alert variants
 
 ```js
 <div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
@@ -14,7 +12,7 @@ Alert variants:
 </div>
 ```
 
-Dismissible:
+### Dismissible
 
 ```js
 <div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">

client/galaxy/scripts/components/Tags/StatelessTags.md

@@ -0,0 +1,11 @@
+### Default behavior with four simple tags
+
+```js
+<StatelessTags :value="['foo', 'bar', 'baz', 'quux']" />
+```
+
+### Limiting maximum tags to two
+
+```js
+<StatelessTags :value="['foo', 'bar', 'baz', 'quux']" maxVisibleTags=2 />
+```

client/styleguide.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const glob = require("glob");
+const fs = require("fs");
 const merge = require("webpack-merge");
 
 let webpackConfig = require("./webpack.config.js");
@@ -47,7 +48,17 @@ glob.sync("./galaxy/docs/galaxy-*.md").forEach(file => {
 const sections = [
     {
 	name: 'Components',
-	components: './galaxy/scripts/components/**/*.vue'
+	// Components that are directories will get their own section
+	sections: glob.sync("./galaxy/scripts/components/*").map(file => {
+	    if (fs.lstatSync(file).isDirectory()) {
+		return {
+		    name: path.basename(file),
+		    components: file + "/**/*.vue"
+		};
+	    }
+	}).filter( v => v ),
+	// ...while top level components are handled here.
+	components: './galaxy/scripts/components/*.vue',
     },
     {
 	name: 'Galaxy styles',