ADD dynamic resumes

DEVELOPER.md

@@ -0,0 +1,6 @@
+# Developer Docs
+
+## Adding a new template
+
+1. Create a new file `src/components/resume-X`.
+2. Copy 

package.json

@@ -7,6 +7,7 @@
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "pdf": "node node/app.js",
+    "template": "node node/template/template.js",
     "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
@@ -40,6 +41,7 @@
     "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cpx": "^1.5.0",
     "cross-env": "^4.0.0",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
@@ -80,6 +82,7 @@
     "phantomjs-prebuilt": "^2.1.14",
     "postcss": "^6.0.1",
     "postcss-cssnext": "^2.11.0",
+    "rename": "^1.0.4",
     "request": "^2.81.0",
     "request-promise": "^4.2.1",
     "rimraf": "^2.6.0",

src/pages/resume.vue

@@ -2,11 +2,7 @@
 <div class="page-wrapper">
   <div class="page">
     <div class="page-inner">
-      <resume-material-dark v-if="$route.params.resumeid==='material-dark'"></resume-material-dark>
-      <resume-material-blue v-if="$route.params.resumeid==='material-blue'"></resume-material-blue>
-      <resume-left-right v-if="$route.params.resumeid==='left-right'"></resume-left-right>
-      <resume-oblique v-if="$route.params.resumeid==='oblique'"></resume-oblique>
-      <resume-side-bar v-if="$route.params.resumeid==='side-bar'"></resume-side-bar>
+      <component :is="$route.params.resumeid"></component>
     </div>
   </div>
 </div>
@@ -16,11 +12,7 @@
 import Vue from 'vue';
 import * as chromeShadowFixer from 'chrome-shadow-fixer';
 import * as textFitter from 'text-fitter';
-import '../components/resume-material-dark.vue';
-import '../components/resume-material-blue.vue';
-import '../components/resume-left-right.vue';
-import '../components/resume-oblique.vue';
-import '../components/resume-side-bar.vue';
+import '../resumes/resumes';
 export default Vue.component('resume', {
   name: 'app',
   mounted: () => {

src/resumes/left-right.vue

@@ -75,8 +75,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-left-right', {
-  name: 'resume-left-right',
+export default Vue.component('left-right', {
+  name: 'left-right',
   data () {
     return {
       person: PERSON

src/resumes/material-blue.vue

@@ -134,8 +134,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-material-blue', {
-  name: 'resume-material-blue',
+export default Vue.component('material-blue', {
+  name: 'material-blue',
   data () {
     return {
       person: PERSON

src/resumes/material-dark.vue

@@ -128,8 +128,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-material-dark', {
-  name: 'resume-material-dark',
+export default Vue.component('material-dark', {
+  name: 'material-dark',
   data () {
     return {
       person: PERSON

src/resumes/oblique.vue

@@ -78,8 +78,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-oblique', {
-  name: 'resume-oblique',
+export default Vue.component('oblique', {
+  name: 'oblique',
   data () {
     return {
       person: PERSON

src/resumes/resumes.js

@@ -0,0 +1,5 @@
+import '../resumes/material-dark.vue';
+import '../resumes/material-blue.vue';
+import '../resumes/left-right.vue';
+import '../resumes/oblique.vue';
+import '../resumes/side-bar.vue';

src/resumes/side-bar.vue

@@ -89,8 +89,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-side-bar', {
-  name: 'resume-side-bar',
+export default Vue.component('side-bar', {
+  name: 'side-bar',
   data () {
     return {
       person: PERSON

src/resumes/template.vue

@@ -10,8 +10,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-template', {
-  name: 'resume-template',
+export default Vue.component('template', {
+  name: 'template',
   data () {
     return {
       person: PERSON