feat: dynamic language switch for the skill picker

src/components/LangPicker.vue

@@ -13,15 +13,8 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { Locales } from '@/locales';
 
-// Define the props by using Vue's canonical way.
-const LangPickerProps = Vue.extend({
-  props: {
-    name: String
-  }
-})
-
 @Component({})
-export default class LangPicker extends LangPickerProps {
+export default class LangPicker extends Vue {
 	private locales: Locales[] = [Locales.EN, Locales.FR];
 
 	get current(): string {

src/components/SkillPicker.vue

@@ -33,12 +33,12 @@
 							<span :key='proj.name'>, </span>
 						</template>
 					</h3>
-					<p v-html='details.text'></p>
+					<p v-html='details.text[$i18n.locale]'></p>
 				</section>
 
 			</div>
 
-			<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
+			<input type='button' v-show='this.sel != null' :value="$t('skills.browse')" @click='browse()'/>
 		</div>
 
 		<div class='spacer'></div>
@@ -60,7 +60,7 @@ interface Details {
 	icon: string|null;
 	title: string;
 	projects: Project[];
-	text: string;
+	text: { [key in Locales]: string };
 }
 
 const DEFAULT_TAG = tTag.All;
@@ -175,7 +175,7 @@ export default class SkillPicker extends Vue {
 			icon,
 			title:    this.$t(skillLabel(id)).toString(),
 			projects: projects.bySkill(id),
-			text:     skill.info[this.$i18n.locale as Locales],
+			text:     skill.info,
 		};
 	}
 

src/locales/en.json

@@ -15,6 +15,7 @@
 	"skills.featured-before":  "Featured in",
 	"skills.featured-after-1": "project",
 	"skills.featured-after-n": "projects",
+	"skills.browse":           "Browse projects",
 
 	"tag.all": "All",
 	"tag.web": "Web",

src/locales/fr.json

@@ -15,6 +15,7 @@
 	"skills.featured-before":  "Apparaît dans",
 	"skills.featured-after-1": "projet",
 	"skills.featured-after-n": "projets",
+	"skills.browse":           "Parcourir les projets",
 
 	"tag.all": "Tout",
 	"tag.web": "Web",