Update stylguidist configuration

styleguide.config.js

@@ -1,9 +1,44 @@
+const path = require('path')
 module.exports = {
-	components: 'src/components/**/[A-Z]*.js',
+	title: "webqueue2 Frontend Docs",
+	version: "0.0.1",
+
+	// How the example source code is shown.
+	// [ "collapse", "expand", "hide" ]
+	// Default: collapse
+	exampleMode: "collapse",
+
+	// How methods and props are shown.
+	// [ "collapse", "expand", "hide" ]
+	// Default: collapse
+	usageMode: "collapse",
+
+	// Creates separate pages for top level nav items.
+	// Default: "false"
+	pagePerSection: true,
+
+	// Styleguide Includes
+	require: [
+		// Material UI Resources
+		path.join(__dirname, "docs/Styleguidist/material-icon.css"),
+		path.join(__dirname, "docs/Styleguidist/roboto-font.css"),
+	],
+
 	sections: [
 		{
 			name: "Getting Started",
-			content: "./src/Styleguidist Introduction.md",
+			content: "./docs/Styleguidist/Introduction.md",
+		},
+		{
+			name: "Components",
+			components: 'src/components/**/[A-Z]*.js',
 		}
-	]
-  }
+	],
+
+	template: {
+		favicon: "public/favicon.ico",
+	},
+
+	styles: "styleguide.style.js",
+	theme: "styleguide.theme.js"
+}

styleguide.style.js

@@ -0,0 +1,10 @@
+module.exports = {
+
+	// Render Area for Componenet Examples
+	Playground: {
+		preview: {
+			backgroundColor: "#efefef",
+			padding: "1em"
+		}
+	},
+}

styleguide.theme.js

@@ -0,0 +1,4 @@
+// See https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts
+module.exports = {
+	maxWidth: "1400px",
+}