Skip to content

Commit

Permalink
feat: Add i18n support !
Browse files Browse the repository at this point in the history
  • Loading branch information
ebanDev committed Jul 12, 2024
1 parent 66700ee commit 939d236
Show file tree
Hide file tree
Showing 10 changed files with 2,600 additions and 3,177 deletions.
8 changes: 3 additions & 5 deletions components/About.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<template>
<section id="about">
<h1>Hi there, I’m <span>Eban</span> !</h1>
<h2>Welcome to my corner of the internet 🌱</h2>
<p>i’m a student building in the realms of sysadmin, web development, and cybersecurity to catalyze radical
change</p>
<h1>{{ $t('hi') }} <span>Eban</span>, {{ $t('work') }}</h1>
<p>{{ $t('aboutDesc') }}</p>
</section>
</template>

Expand All @@ -29,4 +27,4 @@ p {
padding-top: 150px;
}
}
</style>
</style>
8 changes: 4 additions & 4 deletions components/InlineArticles.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
<div class="header">
<div class="titles">
<h2>Bytes of <span>insight</span></h2>
<h3>articles i’ve written</h3>
<h3>{{ $t('articleListDesc') }}</h3>
</div>

<router-link to="/articles" >
<button>
See more
{{ $t('viewAll') }}
</button>
</router-link>
</div>
Expand Down Expand Up @@ -68,7 +68,7 @@
a:first-child {
margin-left: 15px;
}
a:last-child {
margin-right: 15px;
}
Expand All @@ -85,4 +85,4 @@ const useRouter = useNuxtApp().$router
const {data, pending, error} = await useAsyncData("all_posts", fetchArticles);
const posts = data._value.posts.filter(x => x.Highlighted)
</script>
</script>
2 changes: 1 addition & 1 deletion components/Organizations.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<section id="organizations">
<h2>Building <span>movements</span></h2>
<h3>organizations i’ve been involved in</h3>
<h3>{{ $t('organizationsListDesc') }}</h3>
<div class="cardList">
<OrgCard v-for="organization in organizations" :key="organization.name" :description="organization.description"
:image="organization.image" :name="organization.name" :url="organization.url"></OrgCard>
Expand Down
4 changes: 2 additions & 2 deletions components/Projects.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const projects = await fetchProjects();
<div class="header">
<div class="titles">
<h2>Crafting <span>projects</span></h2>
<h3>ventures i’m working on</h3>
<h3>{{$t('projectsListDesc')}}</h3>
</div>
</div>

Expand Down Expand Up @@ -48,4 +48,4 @@ const projects = await fetchProjects();
width: 75vw;
}
}
</style>
</style>
20 changes: 19 additions & 1 deletion components/TopNav.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup>
const { locale, setLocale } = useI18n()
let scrolled = ref(false)
const useRouter = useNuxtApp().$router
Expand Down Expand Up @@ -36,6 +37,14 @@ onMounted(() => {
<a href="https://terminal.eban.eu.org" target="_blank">
<Icon name="lucide:terminal-square"/>
</a>
<a @click="setLocale('fr')" v-if="locale !== 'fr'">
<Icon name="ph:translate-bold"/>
FR
</a>
<a @click="setLocale('en')" v-else>
<Icon name="ph:translate-bold"/>
EN
</a>
</div>
</header>
</template>
Expand Down Expand Up @@ -78,6 +87,15 @@ header {
display: flex;
gap: 10px;
a {
cursor: pointer;
transition: 0.1s all ease;
&:hover {
transform: scale(1.1);
}
}
.icon {
height: 22px;
width: auto;
Expand Down Expand Up @@ -147,4 +165,4 @@ header {
}
}
}
</style>
</style>
24 changes: 24 additions & 0 deletions i18n.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export default defineI18nConfig(() => ({
legacy: false,
locale: 'en',
messages: {
en: {
hi: 'Hi there 👋, I’m',
work: 'web developer and designer.',
aboutDesc: 'I’m a student and freelance in the realms of sysadmin, web development and design. I believe in the power of technology to catalyze radical change.',
articleListDesc: 'articles i’ve written',
viewAll: 'See more',
projectsListDesc: 'ventures i’m working on',
organizationsListDesc: 'organizations i’ve been involved in'
},
fr: {
hi: 'Salut 👋, je suis',
work: 'développeur web et designer.',
aboutDesc: 'Je suis un étudiant et, en parallèle, freelance dans le domaine du développement et du design web. Je crois en la puissance de la technologie pour catalyser un changement radical.',
articleListDesc: 'articles que j’ai écrit',
viewAll: 'Voir plus',
projectsListDesc: 'projets sur lesquels je travaille',
organizationsListDesc: 'organisations dans lesquelles j’ai été impliqué'
}
}
}))
126 changes: 67 additions & 59 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,69 +1,77 @@
export default defineNuxtConfig({
modules: [
'@nuxt/image-edge',
'@nuxtjs/google-fonts',
'nuxt-schema-org',
'@nuxtjs/sitemap',
'@vueuse/nuxt',
'nuxt-icon'
],
modules: [
'@nuxt/image-edge',
'@nuxtjs/google-fonts',
'nuxt-schema-org',
'@nuxtjs/sitemap',
'@vueuse/nuxt',
'nuxt-icon',
"@nuxtjs/i18n"
],

build: {
transpile: ['vue-notion'],
},
i18n: {
locales: ['en', 'fr'],
defaultLocale: 'fr',
vueI18n: './i18n.config.ts'
},

routeRules: {
'/': {prerender: true},
'/articles': {prerender: true},
},
build: {
transpile: ['vue-notion'],
},

image: {
format: ['avif', 'webp', 'jpg'],
provider: 'ipx',
ipx: {
modifiers: {
format: 'avif',
},
},
},
routeRules: {
'/': {prerender: true},
'/articles': {prerender: true},
},

app: {
head: {
title: 'Eban Rami',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'theme-color', content: '#2E6934'},
{name: 'apple-mobile-web-app-status-bar-style', content: '#2E6934'},
{name: 'lang', content: 'fr'},
{name: 'author', content: 'Eban Rami'},
{name: 'description', content: 'i’m a student building in the realms of sysadmin, web development, and cybersecurity to catalyze radical change'}
],
htmlAttrs: {
lang: 'fr'
}
}
},
image: {
format: ['avif', 'webp', 'jpg'],
provider: 'ipx',
ipx: {
modifiers: {
format: 'avif',
},
},
},

app: {
head: {
title: 'Eban Rami',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'theme-color', content: '#2E6934'},
{name: 'apple-mobile-web-app-status-bar-style', content: '#2E6934'},
{name: 'lang', content: 'fr'},
{name: 'author', content: 'Eban Rami'},
{name: 'description', content: 'i’m a student building in the realms of sysadmin, web development, and cybersecurity to catalyze radical change'}
],
htmlAttrs: {
lang: 'fr'
}
}
},

site: {
url: 'https://eban.eu.org',
},
site: {
url: 'https://eban.eu.org',
},

sitemap: {
discoverImages: false
},
sitemap: {
discoverImages: false
},

googleFonts: {
download: true,
families: {
'Poppins': [100, 200, 300, 400, 500, 600, 700, 800],
'DM Serif Display': true
}
},
googleFonts: {
download: true,
families: {
'Poppins': [100, 200, 300, 400, 500, 600, 700, 800],
'DM Serif Display': true
}
},

css: [
'normalize.css/normalize.css',
'@/assets/scss/main.scss',
],
})
css: [
'normalize.css/normalize.css',
'@/assets/scss/main.scss',
],

compatibilityDate: '2024-07-12',
})
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"devDependencies": {
"@nuxtjs/google-fonts": "^3.2.0",
"@nuxtjs/i18n": "^8.3.1",
"@nuxtjs/sitemap": "^5.2.0",
"node-sass": "^9.0.0",
"nuxt": "^3.11.1",
Expand Down
4 changes: 2 additions & 2 deletions pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<TopNav/>
<About/>
<InlineArticles/>
<Projects />
<Organizations/>
</template>
<InlineArticles/>
</template>
Loading

0 comments on commit 939d236

Please sign in to comment.