From 9113a265ba23892b87815f0dcacf31cef2694c4d Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Sun, 6 Sep 2020 13:32:32 -0400 Subject: i18n Support; French support --- components/Footer.vue | 2 +- components/Navbar.vue | 61 ++- config/i18n.js | 8 + locales/en.json | 49 +++ locales/fr.json | 49 +++ nuxt.config.js | 33 +- package.json | 25 +- pages/blog/index.vue | 4 +- pages/index.vue | 55 ++- pages/projects/index.vue | 22 +- pages/videos/index.vue | 6 +- yarn.lock | 978 ++++++++++++++++++++++------------------------- 12 files changed, 692 insertions(+), 600 deletions(-) create mode 100644 config/i18n.js create mode 100644 locales/en.json create mode 100644 locales/fr.json diff --git a/components/Footer.vue b/components/Footer.vue index 8c6d144..762158f 100644 --- a/components/Footer.vue +++ b/components/Footer.vue @@ -2,7 +2,7 @@
-

© Copyright 2018-{{ new Date().getFullYear() }} Andrew Lee. All rights reserved.

+

{{ $t('FooterCopyright') }}
diff --git a/components/Navbar.vue b/components/Navbar.vue index f52e902..a066aaf 100644 --- a/components/Navbar.vue +++ b/components/Navbar.vue @@ -10,9 +10,18 @@ - {{ item.title }} + {{ $t('HomeText') }} + {{ $t('BlogText') }} + {{ $t('ProjectsText') }} + {{ $t('VideosText') }} + + + {{ locale.name }} + + Hey there! This is just a temporary message saying that the french option is in beta! If you see some problems with my french, be sure to make a pull request or point it out on my issues page! + @@ -23,14 +32,32 @@ - - - mdi-{{ item.icon }} - - - {{ item.title }} - - + + + {{ $t('HomeText') }} + + + + + {{ $t('BlogText') }} + + + + + {{ $t('ProjectsText') }} + + + + + {{ $t('VideosText') }} + + + + + + {{ locale.name }} + + @@ -41,17 +68,19 @@ export default { name: 'Navbar', data () { return { - drawer: false, - items: [ - { title: 'Home', link: '/', icon: 'home' }, - { title: 'Blog', link: '/blog', icon: 'blog' }, - { title: 'Projects', link: '/projects', icon: 'projects' }, - { title: 'Videos', link: '/videos', icon: 'videos' } - ] + drawer: false + } + }, + computed: { + availableLocales () { + return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale) } } } diff --git a/config/i18n.js b/config/i18n.js new file mode 100644 index 0000000..4dc0d63 --- /dev/null +++ b/config/i18n.js @@ -0,0 +1,8 @@ +import en from '../locales/en.json' +import fr from '../locales/fr.json' + +export default { + locale: 'en', + fallbackLocale: 'en', + messages: { en, fr} +} \ No newline at end of file diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 0000000..b3f88ce --- /dev/null +++ b/locales/en.json @@ -0,0 +1,49 @@ +{ + "HomeText": "Home", + "WelcomeTitle": "Hello, I'm Andrew Lee!", + "WelcomeSubtitle": "Welcome to my personal website.", + "AboutMe": "About Me", + "AboutMeText": "Hello, I'm Andrew Lee and I'm currently 16 years old. I like to program and play some games sometimes.", + "PlatformsTitle": "Platforms", + "TimelineTitle": "Timeline", + "TimelineContent2014": "2014: Created my first YouTube channel The Alee Diamond.", + "TimelineContent2015": "2015: First got into programming and learned HTML and Batch.", + "TimelineContent2016": "2016: Learned a bit of VB, The Alee Diamond rebranded into Andrew Lee and AleeTechyPlays is born.", + "TimelineContent2017": "2017: Learned JavaScript and C#.", + "ProgrammingLanguagesTitle": "Programming Languages", + "FavouriteGamesTitle": "Favourite Games", + "BadgesTitle": "Badges", + "AleePCPartsTitle": "AleePC Parts", + "AleePCPartsTypeText": "Part Type", + "AleePCPartsNameText": "Part Name", + "AleePCPartsCPU": "CPU", + "AleePCPartsCPUCooler": "CPU Cooler", + "AleePCPartsMemory": "Memory", + "AleePCPartsMainStorage": "Main Storage", + "AleePCPartsSecondStorage": "Second Storage", + "AleePCPartsMotherboard": "Motherboard", + "AleePCPartsCase": "Case", + "AleePCPartsPowerSupply": "Power Supply", + "CreditsTitle": "Credits", + "CreditsGPLText": "Website is licensed under", + "CreditsContent1": "Created using", + "CreditsContent2": "Hosted on", + "ContactMeTitle": "Contact Me", + "ContactMeText": "If you want to ask me questions or just want to contact me. Contact me at", + "BlogText": "Blog", + "BlogSubtitle": "This is where I post stuff here.", + "ProjectsText": "Projects", + "ProjectsSubtitle": "My current and past projects goes here.", + "ProjectsWebsite": "Website", + "ProjectsALP": "A future company that I'm planning on running.", + "ProjectsAleeBot": "An all-in-one bot that's made from the Discord.JS api.", + "ProjectsDLMP3": "A Discord bot that plays local mp3 audio tracks.", + "ProjectsFirstWebsite": "The first website that \"I\" in 2013.", + "ProjectsWWP": "The second website that I worked on as an assignment. Originally hosted in Mozilla Thimble and started in 2016.", + "ProjectsRPIMenu": "A full screen menu. Programmed for the Raspberry Pi.", + "VideosText": "Videos", + "VideosSubtitle": "This is where you see my videos.", + "VideosButton": "View more videos here", + "Footer": "Footer", + "FooterCopyright": "© Copyright 2018-2020 Andrew Lee. All rights reserved." +} \ No newline at end of file diff --git a/locales/fr.json b/locales/fr.json new file mode 100644 index 0000000..54a879d --- /dev/null +++ b/locales/fr.json @@ -0,0 +1,49 @@ +{ + "HomeText": "Accueil", + "WelcomeTitle": "Salut, Je Suis Andrew Lee!", + "WelcomeSubtitle": "Bienvenue a mon Site Web.", + "AboutMe": "À propos de moi", + "AboutMeText": "Bonjour, Je m'appelle Andrew Lee et J'ai 16 ans. J'aime programme et je joue au jeux vidéos quelquefois.", + "PlatformsTitle": "Plateformes", + "TimelineTitle": "Ligne du Temps", + "TimelineContent2014": "2014: Établi mon chaîne de YouTube \"The Alee Diamond\".", + "TimelineContent2015": "2015: Premier entré dans la programmation et appris HTML et Batch.", + "TimelineContent2016": "2016: Appris un peu de VB, The Alee Diamond renommé en Andrew Lee et AleeTechyPlays est né.", + "TimelineContent2017": "2017: Appris JavaScript et C#.", + "ProgrammingLanguagesTitle": "Langage de Programmation", + "FavouriteGamesTitle": "Mon Jeux de Vidéo Préféré", + "BadgesTitle": "Badges", + "AleePCPartsTitle": "AleePC Pièces", + "AleePCPartsTypeText": "Pièces Type", + "AleePCPartsNameText": "Pièces Nom", + "AleePCPartsCPU": "CPU", + "AleePCPartsCPUCooler": "Refroidisseur CPU", + "AleePCPartsMemory": "Mémoire", + "AleePCPartsMainStorage": "Stockage Principal", + "AleePCPartsSecondStorage": "Deuxième Stockage\n", + "AleePCPartsMotherboard": "Carte Mère", + "AleePCPartsCase": "Boîte", + "AleePCPartsPowerSupply": "Source de Courant", + "CreditsTitle": "Crédits", + "CreditsGPLText": "Le site web est sous licence", + "CreditsContent1": "Créé avec", + "CreditsContent2": "Hébergé sur", + "ContactMeTitle": "Contactez Moi", + "ContactMeText": "Si tu veux demande moi une question ou contactez moi. Contactez moi à", + "BlogText": "Blog", + "BlogSubtitle": "Je poste des trucs ici.", + "ProjectsText": "Projets", + "ProjectsSubtitle": "Mon actuel et passé projet est ici.", + "ProjectsWebsite": "Site Web", + "ProjectsALP": "Une future entreprise que je prévois de courir.", + "ProjectsAleeBot": "Un tout en un bot c'est fait en Discord.JS api.", + "ProjectsDLMP3": "Un discord bot qui joue local mp3 audio pistes.", + "ProjectsFirstWebsite": "La première site web \"je\" fais en 2013.", + "ProjectsWWP": "Le deuxième site web j'ai travaillé en tant que mission. Initialement hébergé sur Mozilla Thimble et a commencé en 2016.", + "ProjectsRPIMenu": "Un menu plein écran. Programmé pour le Raspberry Pi.", + "VideosText": "Vidéos", + "VideosSubtitle": "C'est ici que vous voyez mes vidéos en ligne.", + "VideosButton": "Voir plus de vidéos ici", + "Footer": "Footer", + "FooterCopyright": "© Droits d'Auteur 2018-2020 Andrew Lee. Tous les droits sont réservés." +} \ No newline at end of file diff --git a/nuxt.config.js b/nuxt.config.js index 833c978..2c39420 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,4 +1,5 @@ import colors from 'vuetify/es5/util/colors' +import i18n from './config/i18n' module.exports = { mode: 'universal', @@ -14,7 +15,7 @@ module.exports = { { rel: 'icon', type: 'image/x-icon', - href: 'favicon.ico' + href: '/favicon.ico' } ] }, @@ -36,14 +37,36 @@ module.exports = { buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module', - '@nuxtjs/vuetify' + '@nuxtjs/vuetify', + ], /* ** Nuxt.js modules */ - modules: ['@nuxtjs/pwa', '@nuxtjs/markdownit'], + modules: [ + '@nuxtjs/markdownit', + [ + 'nuxt-i18n', + { + defaultLocale: 'en', + locales: [ + { + code: 'en', + iso: 'en-US', + name: 'English' + }, + { + code: 'fr', + iso: 'fr-FR', + name: 'Français' + } + ], + vueI18n: i18n + } +] + ], - markdownit: { + markdown: { injected: true }, @@ -60,7 +83,7 @@ module.exports = { primary: colors.blue.darken2, accent: colors.grey.darken3, secondary: colors.amber.darken3, - info: colors.teal.lighten1, + info: colors.teal.darken1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 diff --git a/package.json b/package.json index 7c6c940..d5a72fe 100644 --- a/package.json +++ b/package.json @@ -15,24 +15,23 @@ }, "dependencies": { "@nuxtjs/markdownit": "^1.2.10", - "@nuxtjs/pwa": "^3.0.0-beta.20", "node-sass": "^4.14.1", - "nuxt": "^2.13.3", - "nuxt-mobile": "^1.0.1", - "prettier": "^2.0.5", - "vuetify": "^2.3.6" + "nuxt": "^2.14.4", + "nuxt-i18n": "^6.13.12", + "prettier": "^2.1.1", + "vuetify": "^2.3.10" }, "devDependencies": { - "@nuxtjs/eslint-config": "^2.0.0", - "@nuxtjs/eslint-module": "^1.0.0", - "@nuxtjs/vuetify": "^1.11.0", - "babel-eslint": "^10.0.1", - "eslint": "^6.8.0", - "eslint-config-prettier": "^6.10.0", + "@nuxtjs/eslint-config": "^3.1.0", + "@nuxtjs/eslint-module": "^2.0.0", + "@nuxtjs/vuetify": "^1.11.2", + "babel-eslint": "^10.1.0", + "eslint": "^7.8.1", + "eslint-config-prettier": "^6.11.0", "eslint-config-standard": "^14.1.1", - "eslint-plugin-import": "^2.20.2", + "eslint-plugin-import": "^2.22.0", "eslint-plugin-node": "^11.1.0", - "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", "eslint-plugin-vue": "^6.2.2" diff --git a/pages/blog/index.vue b/pages/blog/index.vue index 38e578c..c2763ae 100644 --- a/pages/blog/index.vue +++ b/pages/blog/index.vue @@ -2,8 +2,8 @@
-

Blog

-

This is where I post stuff here.

+

{{ $t('BlogText') }}

+

{{ $t('BlogSubtitle') }}

 diff --git a/pages/index.vue b/pages/index.vue index 25d7014..754d193 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -5,17 +5,17 @@

-

Hello, I'm Andrew Lee!

+

{{ $t('WelcomeTitle') }}


-

Welcome to my personal website.

+

{{ $t('WelcomeSubtitle') }}

-

About Me

-

Hello, I'm Andrew Lee and I'm currently 16 years old. I like to program and play some games sometimes.

-

Platforms

+

{{ $t('AboutMe') }}

+

{{ $t('AboutMeText') }}

+

{{ $t('PlatformsTitle') }}

mdi-youtube Youtube @@ -37,12 +37,9 @@ mdi-reddit Reddit -

Timeline

-

2014: Created my first YouTube channel The Alee Diamond.
- 2015: First got into programming and learned HTML and Batch.
- 2016: Learned a bit of VB, The Alee Diamond rebranded into Andrew Lee and AleeTechyPlays is born.
- 2017: Learned JavaScript and C#.

-

Programming Languages

+

{{ $t('TimelineTitle') }}

+

{{ $t('TimelineContent2014') }}
{{ $t('TimelineContent2015') }}
{{ $t('TimelineContent2016') }}
{{ $t('TimelineContent2017') }}

+

{{ $t('ProgrammingLanguagesTitle') }}

  • C#
  • C++
    • @@ -51,7 +48,7 @@
  • Vue
  • Python
-

Favorite Games

+

{{ $t('FavouriteGamesTitle') }}

  • Splatoon 2
  • Animal Crossing: New Horizons
    • @@ -62,63 +59,63 @@
  • Software Inc
  • Hacknet
-

Badges

+

{{ $t('BadgesTitle') }}

Hack The Box TryHackMe
-

AleePC Parts

+

{{ $t('AleePCPartsTitle') }}

- Part Type - Part Name + {{ $t('AleePCPartsTypeText') }} + {{ $t('AleePCPartsNameText') }} - CPU + {{ $t('AleePCPartsCPU') }} AMD - Ryzen 3 2200G 3.5 GHz Quad-Core Processor - CPU Cooler + {{ $t('AleePCPartsCPUCooler') }} Cooler Master - Hyper T2 54.8 CFM Sleeve Bearing CPU Cooler - Memory + {{ $t('AleePCPartsMemory') }} Corsair - Vengeance LPX 16 GB (2 x 8 GB) DDR4-2400 - Main Storage + {{ $t('AleePCPartsMainStorage') }} Western Digital Blue 250 GB M.2-2280 Solid State Drive - Second Storage + {{ $t('AleePCPartsSecondStorage') }} Western Digital Blue 2 TB 3.5" 5400RPM Internal Hard Drive - Motherboard + {{ $t('AleePCPartsMotherboard') }} ASRock - B450M-HDV Micro ATX AM4 - Case + {{ $t('AleePCPartsCase') }} Rosewill - FBM-X1 MicroATX Mini Tower Case - Power Supply + {{ $t('AleePCPartsPowerSupply') }} EVGA - 500 W 80+ Certified ATX Power Supply
-

Credits

-

Website is licensed under GPL-3.0.

-

Created using Vue.JS, NuxtJS and Vuetify. Hosted on Netlify.

+

{{ $t('CreditsTitle') }}

+

{{ $t('CreditsGPLText') }} GPL-3.0.

+

{{ $t('CreditsContent1') }} Vue.JS, NuxtJS & Vuetify. {{ $t('CreditsContent2') }} Netlify.

-

Contact Me

-

If you want to ask me questions or just want to contact me. Contact me at andrew@alee14.me.

+

{{ $t('ContactMeTitle') }}

+

{{ $t('ContactMeText') }} andrew@alee14.me.

 diff --git a/pages/projects/index.vue b/pages/projects/index.vue index 745607c..d5e7605 100644 --- a/pages/projects/index.vue +++ b/pages/projects/index.vue @@ -1,17 +1,17 @@