From 877def604ca2463c423e09f031338bfd6b0085e4 Mon Sep 17 00:00:00 2001
From: mbndr <maxi-binder@web.de>
Date: Thu, 14 Sep 2017 16:04:56 +0200
Subject: [PATCH 1/4] add language support

---
 src/lang/de.js                | 10 ++++++++++
 src/lang/en.js                | 10 ++++++++++
 src/person.js                 |  3 ++-
 src/resumes/left-right.vue    | 12 +++++++-----
 src/resumes/material-dark.vue | 12 +++++++-----
 src/resumes/oblique.vue       | 12 +++++++-----
 src/resumes/side-bar.vue      | 12 +++++++-----
 src/resumes/template.vue      |  3 ++-
 src/terms.js                  |  6 ++++++
 9 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 src/lang/de.js
 create mode 100644 src/lang/en.js
 create mode 100644 src/terms.js

diff --git a/src/lang/de.js b/src/lang/de.js
new file mode 100644
index 0000000..a562ad9
--- /dev/null
+++ b/src/lang/de.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+const de = {
+  headings: {
+    contact: 'Kontakt',
+    experience: 'Erfahrung',
+    education: 'Schulbildung',
+    skills: 'Fähigkeiten',
+  }
+};
+export default de;
diff --git a/src/lang/en.js b/src/lang/en.js
new file mode 100644
index 0000000..6eb1692
--- /dev/null
+++ b/src/lang/en.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+const en = {
+  headings: {
+    contact: 'Contact',
+    experience: 'Experience',
+    education: 'Education',
+    skills: 'Skills',
+  }
+};
+export default en;
diff --git a/src/person.js b/src/person.js
index 6d9d2c3..6ec1e73 100755
--- a/src/person.js
+++ b/src/person.js
@@ -82,5 +82,6 @@ export const PERSON = {
     city: 'New York',
     website: 'johndoe.com',
     github: 'johnyD'
-  }
+  },
+  lang: "de"
 };
diff --git a/src/resumes/left-right.vue b/src/resumes/left-right.vue
index 91c0b6f..f0af3b7 100755
--- a/src/resumes/left-right.vue
+++ b/src/resumes/left-right.vue
@@ -13,7 +13,7 @@
   </div>
   <div class="left half">
     <div class="experience">
-      <h3>Experience</h3>
+      <h3>{{ terms[person.lang].headings.experience }}</h3>
       <div class="experience-block" v-for="experience in person.experience">
         <span class="company"> {{experience.company}} </span>
         <span class="job-title"> {{experience.position}} </span>
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="contact">
-      <h3>Contact</h3>
+      <h3>{{ terms[person.lang].headings.contact }}</h3>
       <table>
         <tr>
           <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
@@ -49,13 +49,13 @@
   </div>
   <div class="right half">
     <div class="education">
-      <h3>Education</h3>
+      <h3>{{ terms[person.lang].headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <span class="degree">{{education.degree}}</span>
         <span class="degree-description">{{education.description}}</span>
       </div>
     </div>
-    <h3>Skills</h3>
+    <h3>{{ terms[person.lang].headings.skills }}</h3>
     <div class="skills">
       <div class="skill-block" v-for="skill in person.skills">
         <span class="skill">{{skill.name}}</span>
@@ -73,13 +73,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('left-right', {
   name: 'left-right',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });
diff --git a/src/resumes/material-dark.vue b/src/resumes/material-dark.vue
index ce46b5d..9862163 100755
--- a/src/resumes/material-dark.vue
+++ b/src/resumes/material-dark.vue
@@ -5,7 +5,7 @@
     <div class="heading" id="myselfpic">
     </div>
     <div class="section-headline">
-      Contact
+      {{ terms[person.lang].headings.contact }}
     </div>
     <div class="item">
       <div class="icon">
@@ -77,7 +77,7 @@
 
     <div class="item last">
       <div class="section-headline">
-        Skills
+        {{ terms[person.lang].headings.skills }}
       </div>
       <div class="skill" v-for="skill in person.skills">
         <div class="right">
@@ -98,7 +98,7 @@
       <div>{{person.position}}</div>
     </div>
 
-    <div class="section-headline">Working experience</div>
+    <div class="section-headline">{{ terms[person.lang].headings.experience }}</div>
     <div class="block" v-for="experience in person.experience">
       <div class="block-helper"></div>
       <div class="headline">{{experience.position}} - {{experience.company}}</h3>
@@ -108,7 +108,7 @@
         </p>
       </div>
     </div>
-    <div class="section-headline">Education</div>
+    <div class="section-headline">{{ terms[person.lang].headings.education }}</div>
     <div class="block" v-for="education in person.education">
       <div class="block-helper"></div>
       <div class="headline">{{education.degree}}</div>
@@ -126,13 +126,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('material-dark', {
   name: 'material-dark',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });
diff --git a/src/resumes/oblique.vue b/src/resumes/oblique.vue
index fb0154a..03735bd 100755
--- a/src/resumes/oblique.vue
+++ b/src/resumes/oblique.vue
@@ -16,7 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>Experience</h3>
+      <h3>{{ terms[person.lang].headings.experience }}</h3>
 
       <div class="experience-block" v-for="experience in person.experience">
         <div class="row">
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="education">
-      <h3>Education</h3>
+      <h3>{{ terms[person.lang].headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <div class="row">
           <span class="degree">{{education.degree}}</span>
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="skill-section">
-      <h3>Skills</h3>
+      <h3>{{ terms[person.lang].headings.skills }}</h3>
       <div class="skills" v-for="skill in person.skills">
         <div class="skill-block">
           <i class="material-icons">details</i>
@@ -55,7 +55,7 @@
       <span>{{person.skillDescription}} </span>
     </div>
     <div class="contact">
-      <h3>Contact</h3>
+      <h3>{{ terms[person.lang].headings.contact }}</h3>
       <a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
       <span>;&nbsp;</span>
       <a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
@@ -76,13 +76,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('oblique', {
   name: 'oblique',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });
diff --git a/src/resumes/side-bar.vue b/src/resumes/side-bar.vue
index 879db71..82fe36f 100755
--- a/src/resumes/side-bar.vue
+++ b/src/resumes/side-bar.vue
@@ -15,7 +15,7 @@
               </div>
           </div>
           <div class="contact">
-              <h3>Contact</h3>
+              <h3>{{ terms[person.lang].headings.contact }}</h3>
               <div class="contact-row">
                   <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
               </div>
@@ -47,7 +47,7 @@
       </div>
       <div class="right-col">
           <div class="experience">
-              <h3>Experience</h3>
+              <h3>{{ terms[person.lang].headings.experience }}</h3>
                   <div class="experience-block" v-for="experience in person.experience">
                       <div class="row">
                           <span class="company"> {{experience.company}} -</span>
@@ -62,7 +62,7 @@
                   </div>
           </div>
           <div class="education">
-              <h3>Education</h3>
+              <h3>{{ terms[person.lang].headings.education }}</h3>
                   <div class="education-block" v-for="education in person.education">
                       <div class="row">
                           <span class="degree">{{education.degree}}</span>
@@ -73,7 +73,7 @@
                   </div>
           </div>
           <div class="skills-block">
-              <h3>Skills</h3>
+              <h3>{{ terms[person.lang].headings.skills }}</h3>
               <div class="skills">
                       <div class="skill" v-for="skill in person.skills">
                           <span class="skill-name">{{skill.name}}</span>
@@ -91,13 +91,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('side-bar', {
   name: 'side-bar',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });
diff --git a/src/resumes/template.vue b/src/resumes/template.vue
index 029c07d..3664fa1 100644
--- a/src/resumes/template.vue
+++ b/src/resumes/template.vue
@@ -6,6 +6,7 @@
 
 <script>
 import { PERSON as person } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 // TODO rename vue component
@@ -13,7 +14,7 @@ export default Vue.component('template', {
   name: 'template',
   data () {
     return {
-      person
+      person, terms
     };
   }
 });
diff --git a/src/terms.js b/src/terms.js
new file mode 100644
index 0000000..49a84bd
--- /dev/null
+++ b/src/terms.js
@@ -0,0 +1,6 @@
+import en from './lang/en';
+import de from './lang/de';
+
+export const terms = {
+  en, de
+};

From 5ddbb8f5fd876defdfea3f4ca4277e53e4da107d Mon Sep 17 00:00:00 2001
From: mbndr <maxi-binder@web.de>
Date: Thu, 14 Sep 2017 19:33:30 +0200
Subject: [PATCH 2/4] language adjustments

---
 src/lang/de.js | 4 ++--
 src/lang/en.js | 2 +-
 src/person.js  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lang/de.js b/src/lang/de.js
index a562ad9..e6aa180 100644
--- a/src/lang/de.js
+++ b/src/lang/de.js
@@ -2,9 +2,9 @@
 const de = {
   headings: {
     contact: 'Kontakt',
-    experience: 'Erfahrung',
+    experience: 'Berufserfahrung',
     education: 'Schulbildung',
-    skills: 'Fähigkeiten',
+    skills: 'Qualifikationen'
   }
 };
 export default de;
diff --git a/src/lang/en.js b/src/lang/en.js
index 6eb1692..1335226 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -4,7 +4,7 @@ const en = {
     contact: 'Contact',
     experience: 'Experience',
     education: 'Education',
-    skills: 'Skills',
+    skills: 'Skills'
   }
 };
 export default en;
diff --git a/src/person.js b/src/person.js
index 6ec1e73..df01def 100755
--- a/src/person.js
+++ b/src/person.js
@@ -83,5 +83,5 @@ export const PERSON = {
     website: 'johndoe.com',
     github: 'johnyD'
   },
-  lang: "de"
+  lang: "en"
 };

From 30c083335050b338cfb327687cb3b09f2f7387b1 Mon Sep 17 00:00:00 2001
From: mbndr <maxi-binder@web.de>
Date: Thu, 14 Sep 2017 19:35:19 +0200
Subject: [PATCH 3/4] decrease redundancy in templates

---
 src/resumes/left-right.vue    | 26 ++++++++------------------
 src/resumes/material-dark.vue | 26 ++++++++------------------
 src/resumes/oblique.vue       | 26 ++++++++------------------
 src/resumes/resumes.js        | 24 ++++++++++++++++++++++++
 src/resumes/side-bar.vue      | 26 ++++++++------------------
 src/resumes/template.vue      | 16 ++++------------
 6 files changed, 60 insertions(+), 84 deletions(-)

diff --git a/src/resumes/left-right.vue b/src/resumes/left-right.vue
index f0af3b7..9d9b694 100755
--- a/src/resumes/left-right.vue
+++ b/src/resumes/left-right.vue
@@ -13,7 +13,7 @@
   </div>
   <div class="left half">
     <div class="experience">
-      <h3>{{ terms[person.lang].headings.experience }}</h3>
+      <h3>{{ lang.headings.experience }}</h3>
       <div class="experience-block" v-for="experience in person.experience">
         <span class="company"> {{experience.company}} </span>
         <span class="job-title"> {{experience.position}} </span>
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="contact">
-      <h3>{{ terms[person.lang].headings.contact }}</h3>
+      <h3>{{ lang.headings.contact }}</h3>
       <table>
         <tr>
           <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
@@ -49,13 +49,13 @@
   </div>
   <div class="right half">
     <div class="education">
-      <h3>{{ terms[person.lang].headings.education }}</h3>
+      <h3>{{ lang.headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <span class="degree">{{education.degree}}</span>
         <span class="degree-description">{{education.description}}</span>
       </div>
     </div>
-    <h3>{{ terms[person.lang].headings.skills }}</h3>
+    <h3>{{ lang.headings.skills }}</h3>
     <div class="skills">
       <div class="skill-block" v-for="skill in person.skills">
         <span class="skill">{{skill.name}}</span>
@@ -70,21 +70,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('left-right', {
-  name: 'left-right',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'left-right';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/resumes/material-dark.vue b/src/resumes/material-dark.vue
index 9862163..3a0b4bb 100755
--- a/src/resumes/material-dark.vue
+++ b/src/resumes/material-dark.vue
@@ -5,7 +5,7 @@
     <div class="heading" id="myselfpic">
     </div>
     <div class="section-headline">
-      {{ terms[person.lang].headings.contact }}
+      {{ lang.headings.contact }}
     </div>
     <div class="item">
       <div class="icon">
@@ -77,7 +77,7 @@
 
     <div class="item last">
       <div class="section-headline">
-        {{ terms[person.lang].headings.skills }}
+        {{ lang.headings.skills }}
       </div>
       <div class="skill" v-for="skill in person.skills">
         <div class="right">
@@ -98,7 +98,7 @@
       <div>{{person.position}}</div>
     </div>
 
-    <div class="section-headline">{{ terms[person.lang].headings.experience }}</div>
+    <div class="section-headline">{{ lang.headings.experience }}</div>
     <div class="block" v-for="experience in person.experience">
       <div class="block-helper"></div>
       <div class="headline">{{experience.position}} - {{experience.company}}</h3>
@@ -108,7 +108,7 @@
         </p>
       </div>
     </div>
-    <div class="section-headline">{{ terms[person.lang].headings.education }}</div>
+    <div class="section-headline">{{ lang.headings.education }}</div>
     <div class="block" v-for="education in person.education">
       <div class="block-helper"></div>
       <div class="headline">{{education.degree}}</div>
@@ -123,21 +123,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('material-dark', {
-  name: 'material-dark',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'material-dark';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/resumes/oblique.vue b/src/resumes/oblique.vue
index 03735bd..1bca49e 100755
--- a/src/resumes/oblique.vue
+++ b/src/resumes/oblique.vue
@@ -16,7 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>{{ terms[person.lang].headings.experience }}</h3>
+      <h3>{{ lang.headings.experience }}</h3>
 
       <div class="experience-block" v-for="experience in person.experience">
         <div class="row">
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="education">
-      <h3>{{ terms[person.lang].headings.education }}</h3>
+      <h3>{{ lang.headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <div class="row">
           <span class="degree">{{education.degree}}</span>
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="skill-section">
-      <h3>{{ terms[person.lang].headings.skills }}</h3>
+      <h3>{{ lang.headings.skills }}</h3>
       <div class="skills" v-for="skill in person.skills">
         <div class="skill-block">
           <i class="material-icons">details</i>
@@ -55,7 +55,7 @@
       <span>{{person.skillDescription}} </span>
     </div>
     <div class="contact">
-      <h3>{{ terms[person.lang].headings.contact }}</h3>
+      <h3>{{ lang.headings.contact }}</h3>
       <a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
       <span>;&nbsp;</span>
       <a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
@@ -73,21 +73,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('oblique', {
-  name: 'oblique',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'oblique';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/resumes/resumes.js b/src/resumes/resumes.js
index 661f422..d53ebe8 100644
--- a/src/resumes/resumes.js
+++ b/src/resumes/resumes.js
@@ -3,3 +3,27 @@ import '../resumes/material-dark.vue';
 import '../resumes/left-right.vue';
 import '../resumes/oblique.vue';
 import '../resumes/side-bar.vue';
+
+import { PERSON } from '../person';
+import { terms } from '../terms';
+
+// Called by templates to decrease redundancy
+function getVueOptions (name) {
+  let opt = {
+    name: name,
+    data () {
+      return {
+        person: PERSON,
+        terms: terms
+      };
+    },
+    computed: {
+      lang () {
+        return this.terms[this.person.lang];
+      }
+    }
+  };
+  return opt;
+}
+
+export { getVueOptions };
diff --git a/src/resumes/side-bar.vue b/src/resumes/side-bar.vue
index 82fe36f..5b3cee5 100755
--- a/src/resumes/side-bar.vue
+++ b/src/resumes/side-bar.vue
@@ -15,7 +15,7 @@
               </div>
           </div>
           <div class="contact">
-              <h3>{{ terms[person.lang].headings.contact }}</h3>
+              <h3>{{ lang.headings.contact }}</h3>
               <div class="contact-row">
                   <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
               </div>
@@ -47,7 +47,7 @@
       </div>
       <div class="right-col">
           <div class="experience">
-              <h3>{{ terms[person.lang].headings.experience }}</h3>
+              <h3>{{ lang.headings.experience }}</h3>
                   <div class="experience-block" v-for="experience in person.experience">
                       <div class="row">
                           <span class="company"> {{experience.company}} -</span>
@@ -62,7 +62,7 @@
                   </div>
           </div>
           <div class="education">
-              <h3>{{ terms[person.lang].headings.education }}</h3>
+              <h3>{{ lang.headings.education }}</h3>
                   <div class="education-block" v-for="education in person.education">
                       <div class="row">
                           <span class="degree">{{education.degree}}</span>
@@ -73,7 +73,7 @@
                   </div>
           </div>
           <div class="skills-block">
-              <h3>{{ terms[person.lang].headings.skills }}</h3>
+              <h3>{{ lang.headings.skills }}</h3>
               <div class="skills">
                       <div class="skill" v-for="skill in person.skills">
                           <span class="skill-name">{{skill.name}}</span>
@@ -88,21 +88,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('side-bar', {
-  name: 'side-bar',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'side-bar';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/resumes/template.vue b/src/resumes/template.vue
index 3664fa1..6fc386b 100644
--- a/src/resumes/template.vue
+++ b/src/resumes/template.vue
@@ -5,19 +5,11 @@
 </template>
 
 <script>
-import { PERSON as person } from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-// TODO rename vue component
-export default Vue.component('template', {
-  name: 'template',
-  data () {
-    return {
-      person, terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'TEMPLATE-NAME'; // TODO change name
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

From d3987501a1e38fe053c6040a4aaa3ba3004f4a1e Mon Sep 17 00:00:00 2001
From: mbndr <maxi-binder@web.de>
Date: Thu, 14 Sep 2017 19:37:42 +0200
Subject: [PATCH 4/4] update dev-docs

---
 DEVELOPER.md | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/DEVELOPER.md b/DEVELOPER.md
index 33c4609..bc14144 100644
--- a/DEVELOPER.md
+++ b/DEVELOPER.md
@@ -19,12 +19,9 @@ In the directory `src/resumes` you will find all existing templates.
 
 1. Create a copy of `src/resumes/template.vue`.
 
-2. Rename file and update component name:
+2. Rename file and update template name:
 ```javascript
-export default Vue.component('TEMPLATE-NAME', {
-  name: 'TEMPLATE-NAME',
-  ...
-});
+let name = 'TEMPLATE-NAME';
 ```
 
 3. Import the newly added template in `src/resumes/resumes.js`.