Merge pull request #42 from mbndr/master

Add language support

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`.

src/lang/de.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const de = {
+  headings: {
+    contact: 'Kontakt',
+    experience: 'Berufserfahrung',
+    education: 'Schulbildung',
+    skills: 'Qualifikationen'
+  }
+};
+export default de;

src/lang/en.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const en = {
+  headings: {
+    contact: 'Contact',
+    experience: 'Experience',
+    education: 'Education',
+    skills: 'Skills'
+  }
+};
+export default en;

src/person.js

@@ -82,5 +82,6 @@ export const PERSON = {
     city: 'New York',
     website: 'johndoe.com',
     github: 'johnyD'
-  }
+  },
+  lang: "en"
 };

src/resumes/left-right.vue

@@ -13,7 +13,7 @@
   </div>
   <div class="left half">
     <div class="experience">
-      <h3>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>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>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>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,19 +70,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('left-right', {
-  name: 'left-right',
-  data () {
-    return {
-      person: PERSON
-    };
-  }
-});
+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 -->

src/resumes/material-dark.vue

@@ -5,7 +5,7 @@
     <div class="heading" id="myselfpic">
     </div>
     <div class="section-headline">
-      Contact
+      {{ lang.headings.contact }}
     </div>
     <div class="item">
       <div class="icon">
@@ -77,7 +77,7 @@
 
     <div class="item last">
       <div class="section-headline">
-        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">Working 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">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,19 +123,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('material-dark', {
-  name: 'material-dark',
-  data () {
-    return {
-      person: PERSON
-    };
-  }
-});
+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 -->

src/resumes/oblique.vue

@@ -16,7 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>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>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>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>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,19 +73,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('oblique', {
-  name: 'oblique',
-  data () {
-    return {
-      person: PERSON
-    };
-  }
-});
+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 -->

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 };

src/resumes/side-bar.vue

@@ -15,7 +15,7 @@
               </div>
           </div>
           <div class="contact">
-              <h3>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>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>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>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,19 +88,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('side-bar', {
-  name: 'side-bar',
-  data () {
-    return {
-      person: PERSON
-    };
-  }
-});
+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 -->

src/resumes/template.vue

@@ -5,18 +5,11 @@
 </template>
 
 <script>
-import { PERSON as person } from '../person';
-
 import Vue from 'vue';
-// TODO rename vue component
-export default Vue.component('template', {
-  name: 'template',
-  data () {
-    return {
-      person
-    };
-  }
-});
+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 -->

src/terms.js

@@ -0,0 +1,6 @@
+import en from './lang/en';
+import de from './lang/de';
+
+export const terms = {
+  en, de
+};