Create better docs organization

build/webpack.base.conf.js

@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../');
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/docs/index.js'
   },
   output: {
     path: config.build.assetsRoot,

package.json

@@ -15,8 +15,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
-    "vue": "^1.0.26"
+    "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim"
   },
   "devDependencies": {
     "babel-core": "^6.10.4",
@@ -46,9 +45,11 @@
     "sass-loader": "^4.0.0",
     "shelljs": "^0.7.0",
     "url-loader": "^0.5.7",
+    "vue": "^1.0.26",
     "vue-hot-reload-api": "^1.3.3",
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^8.5.3",
+    "vue-router": "^0.7.13",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.13.1",
     "webpack-dev-middleware": "^1.6.1",

src/docs/config.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import VueMaterial from '../vue-material';
+
+for (let component in VueMaterial) {
+  if (component === 'MdTheme') {
+    Vue.use(VueMaterial[component], {
+      'bottom-bar': {
+        primary: 'teal'
+      }
+    });
+  } else {
+    Vue.use(VueMaterial[component]);
+  }
+}

src/docs/index.js

@@ -1,25 +1,27 @@
-import './docs.scss';
+/* Third Party */
+import Vue from 'vue';
 
-import Avatar from './Avatar';
-import BottomBar from './BottomBar';
-import Buttons from './Buttons';
-import ButtonToggle from './ButtonToggle';
-import Icon from './Icon';
-import Ripple from './Ripple';
-import List from './List';
-import Sidenav from './Sidenav';
-import Theme from './Theme';
-import Toolbar from './Toolbar';
+/* Configs */
+import './stylesheets/docs.scss';
+import './config.js';
+import router from './routes.js';
+
+let App = Vue.extend({
+  data() {
+    return {
+      showSidenav: false
+    };
+  },
+  methods: {
+    toggleSidenav() {
+      this.showSidenav = !this.showSidenav;
+    }
+  }
+});
+
+router.afterEach(function() {
+  router.app.toggleSidenav();
+});
+
+router.start(App, '#app');
 
-export default {
-  Avatar,
-  BottomBar,
-  Buttons,
-  ButtonToggle,
-  Icon,
-  Ripple,
-  List,
-  Sidenav,
-  Theme,
-  Toolbar
-};

src/docs/routes.js

@@ -0,0 +1,67 @@
+/* Third Party */
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+/* Pages */
+import Avatar from './pages/Avatar';
+import BottomBar from './pages/BottomBar';
+import Buttons from './pages/Buttons';
+import ButtonToggle from './pages/ButtonToggle';
+import Icon from './pages/Icon';
+import Ripple from './pages/Ripple';
+import List from './pages/List';
+import Sidenav from './pages/Sidenav';
+import Theme from './pages/Theme';
+import Toolbar from './pages/Toolbar';
+
+
+Vue.use(VueRouter);
+
+let router = new VueRouter({
+  hashbang: false
+});
+
+router.map({
+  '/avatar': {
+    name: 'avatar',
+    component: Avatar
+  },
+  '/bottom-bar': {
+    name: 'bottomBar',
+    component: BottomBar
+  },
+  '/button': {
+    name: 'button',
+    component: Buttons
+  },
+  '/button-toggle': {
+    name: 'buttonToggle',
+    component: ButtonToggle
+  },
+  '/icon': {
+    name: 'icon',
+    component: Icon
+  },
+  '/ripple': {
+    name: 'ripple',
+    component: Ripple
+  },
+  '/list': {
+    name: 'list',
+    component: List
+  },
+  '/sidenav': {
+    name: 'sidenav',
+    component: Sidenav
+  },
+  '/theme': {
+    name: 'theme',
+    component: Theme
+  },
+  '/toolbar': {
+    name: 'toolbar',
+    component: Toolbar
+  }
+});
+
+export default router;

src/main.js

@@ -1,70 +0,0 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-import './vue-material';
-import Docs from './docs/index';
-
-Vue.use(VueRouter);
-
-let router = new VueRouter({
-  hashbang: false
-});
-let App = Vue.extend({
-  data() {
-    return {
-      showSidenav: false
-    };
-  },
-  methods: {
-    toggleSidenav() {
-      this.showSidenav = !this.showSidenav;
-    }
-  }
-});
-
-router.map({
-  '/avatar': {
-    name: 'avatar',
-    component: Docs.Avatar
-  },
-  '/bottom-bar': {
-    name: 'bottomBar',
-    component: Docs.BottomBar
-  },
-  '/button': {
-    name: 'button',
-    component: Docs.Buttons
-  },
-  '/button-toggle': {
-    name: 'buttonToggle',
-    component: Docs.ButtonToggle
-  },
-  '/icon': {
-    name: 'icon',
-    component: Docs.Icon
-  },
-  '/ripple': {
-    name: 'ripple',
-    component: Docs.Ripple
-  },
-  '/list': {
-    name: 'list',
-    component: Docs.List
-  },
-  '/sidenav': {
-    name: 'sidenav',
-    component: Docs.Sidenav
-  },
-  '/theme': {
-    name: 'theme',
-    component: Docs.Theme
-  },
-  '/toolbar': {
-    name: 'toolbar',
-    component: Docs.Toolbar
-  }
-});
-
-router.start(App, '#app');
-router.afterEach(function() {
-  router.app.toggleSidenav();
-});

src/vue-material.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import './core/core';
 import MdTheme from './components/mdTheme';
 import MdInkRipple from './components/mdInkRipple';
@@ -11,18 +10,15 @@ import MdSidenav from './components/mdSidenav';
 import MdAvatar from './components/mdAvatar';
 import MdList from './components/mdList';
 
-Vue.use(MdInkRipple);
-Vue.use(MdButton);
-Vue.use(MdButtonToggle);
-Vue.use(MdIcon);
-Vue.use(MdBottomBar);
-Vue.use(MdToolbar);
-Vue.use(MdSidenav);
-Vue.use(MdAvatar);
-Vue.use(MdList);
-
-Vue.use(MdTheme, {
-  'bottom-bar': {
-    primary: 'teal'
-  }
-});
+export default {
+  MdAvatar,
+  MdBottomBar,
+  MdButton,
+  MdButtonToggle,
+  MdIcon,
+  MdInkRipple,
+  MdList,
+  MdSidenav,
+  MdToolbar,
+  MdTheme
+};