Skip to content

Commit ba3a9c2

Browse files
zooldeveloperzooldeveloper
committed
Add the initial blogs page
1 parent 4c7805c commit ba3a9c2

File tree

7 files changed

+82
-43
lines changed

7 files changed

+82
-43
lines changed

‎components/Header.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
const isHomePage = ref(true);
77
88
watch(() => route.name, (newValue, oldValue) => {
9-
if(newValue === 'projects-id' && oldValue !== 'projects-id') {
9+
if(newValue === 'projects-id' && oldValue !== 'projects-id' ||
10+
newValue === 'blogs' && oldValue !== 'blogs') {
1011
isHomePage.value = false;
1112
}
1213
}, {immediate: true});
@@ -105,11 +106,12 @@
105106
</button>
106107
<nav :class="['navbar ', { active: navOpen }]">
107108
<ul>
108-
<li><NuxtLink :to="$t('home_path')" class="current-section">{{ $t('home_title') }}</NuxtLink></li>
109-
<li v-show="isHomePage"><NuxtLink :to="$t('skills_path')">{{ $t('skills_title') }}</NuxtLink></li>
110-
<li v-show="isHomePage"><NuxtLink :to="$t('portfolio_path')">{{ $t('portfolio_title') }}</NuxtLink></li>
111-
<!-- <li v-show="isHomePage"><NuxtLink :to="$t('education_path')">{{ $t('education_title') }}</NuxtLink></li> -->
112-
<li v-show="isHomePage"><NuxtLink :to="$t('contact_path')">{{ $t('contact_title') }}</NuxtLink></li>
109+
<li><NuxtLink to="/" class="current-section">{{ $t('header.home_title') }}</NuxtLink></li>
110+
<li v-show="isHomePage"><NuxtLink to="#skills">{{ $t('header.skills_title') }}</NuxtLink></li>
111+
<li v-show="isHomePage"><NuxtLink to="#portfolio">{{ $t('header.portfolio_title') }}</NuxtLink></li>
112+
<!-- <li v-show="isHomePage"><NuxtLink to="#education">{{ $t('header.education_title') }}</NuxtLink></li> -->
113+
<li><NuxtLink to="/blogs">{{ $t('header.blog_title') }}</NuxtLink></li>
114+
<li v-show="isHomePage"><NuxtLink to="#contact">{{ $t('header.contact_title') }}</NuxtLink></li>
113115
<li class="navbar__color-switcher">
114116
<i v-if="$colorMode.preference === 'dark'" @click="toggleMode('light')" role="button">
115117
<Icon name="sun" id="sun"/>

‎composables/onWatchRoute.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { useRoute } from 'vue-router';
2+
3+
export const useWatchRoute = (routeName: string): void => {
4+
const route = useRoute();
5+
6+
watch(() => route.name, (newValue, oldValue): void => {
7+
if(newValue !== routeName && oldValue === routeName) {
8+
location.reload();
9+
}
10+
});
11+
}

‎locales/ar.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
{
22
"main_title": "زول مطور {pipe} مختار سليمان {pipe} موقع مطور ويب ",
33
"main_description": "مطور ويب للواجهة الأمامية و Frontend. متخصص في JavaScript {pipe} Vue.js {pipe} React.js {pipe} اقيم في مدينة نانت ، فرنسا .وخريج معهد وأدوات تطوير الويب الأخرى OpenClassrooms",
4+
"header": {
5+
"home_title": "الصفحة الرئيسية",
6+
"skills_title": "المهارات",
7+
"portfolio_title": "الأعمال",
8+
"education_title": "التعليم",
9+
"blog_title": "مدونة",
10+
"contact_title": "تواصل معنا"
11+
},
412
"logo_img_desc": "شعار زول ديفالبر",
5-
"home_title": "الصفحة الرئيسية",
6-
"home_path": "/",
7-
"skills_title": "المهارات",
8-
"skills_path": "#skills",
9-
"portfolio_title": "الأعمال",
10-
"portfolio_path": "#portfolio",
11-
"education_title": "التعليم",
12-
"education_path": "#education",
13-
"contact_title": "تواصل معنا",
14-
"contact_path": "#contact",
1513
"network_aria_label": "{iconName} رابط الي حساب مختار في",
1614

1715
"main_heading": {
@@ -182,5 +180,8 @@
182180
"additional_info": "تواصل معنا لإخطارنا عن هذه المشكلة."
183181
},
184182
"btn": "العودة الي الصفحة الرئيسية"
183+
},
184+
"blogs": {
185+
"main_title": "ستكون المدونات متاحة قريبا!"
185186
}
186187
}

‎locales/en.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
{
22
"main_title": "Zool Developer {pipe} Mukhtar Sulaiman {pipe} Web Developer Portfolio",
33
"main_description": "Frontend web developer. Specialized in JavaScript {pipe} Vue.js {pipe} React.js {pipe} and other web development tools. Based in Nantes, France and alumnus of OpenClassrooms",
4+
"header": {
5+
"home_title": "Home",
6+
"skills_title": "Skills",
7+
"portfolio_title": "Portfolio",
8+
"education_title": "Education",
9+
"blog_title": "Blog",
10+
"contact_title": "Contact"
11+
},
412
"logo_img_desc": "zool developer logo",
5-
"home_title": "Home",
6-
"home_path": "/",
7-
"skills_title": "Skills",
8-
"skills_path": "#skills",
9-
"portfolio_title": "Portfolio",
10-
"portfolio_path": "#portfolio",
11-
"education_title": "Education",
12-
"education_path": "#education",
13-
"contact_title": "Contact",
14-
"contact_path": "#contact",
1513
"network_aria_label": "link to Mukhtar's {iconName} account",
1614

1715
"main_heading": {
@@ -182,5 +180,8 @@
182180
"additional_info": "Contact us to fix it."
183181
},
184182
"btn": "Go to home page"
183+
},
184+
"blogs": {
185+
"main_title": "Blogs will be available soon!"
185186
}
186187
}

‎locales/fr.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
{
22
"main_title": "Zool Developer {pipe} Mukhtar Sulaiman {pipe} Portfolio Développeur Web",
33
"main_description": "Développeur web Front-end. Spécialisé en JavaScript {pipe} Vue.js {pipe} React.js {pipe} et d'autres outils de développement web. Basé à Nantes, France et ancien élève d'OpenClassrooms",
4+
"header": {
5+
"home_title": "Accueil",
6+
"skills_title": "Compétences",
7+
"portfolio_title": "Portfolio",
8+
"education_title": "Formations",
9+
"blog_title": "Blogs",
10+
"contact_title": "Contact"
11+
},
412
"logo_img_desc": "logo zool developer",
5-
"home_title": "Accueil",
6-
"home_path": "/",
7-
"skills_title": "Compétences",
8-
"skills_path": "#skills",
9-
"portfolio_title": "Portfolio",
10-
"portfolio_path": "#portfolio",
11-
"education_title": "Formations",
12-
"education_path": "#education",
13-
"contact_title": "Contact",
14-
"contact_path": "#contact",
1513
"network_aria_label": "lien vers le compte {iconName} de Mukhtar",
1614

1715
"main_heading": {
@@ -182,5 +180,8 @@
182180
"additional_info": "Contactez-nous pour y remédier."
183181
},
184182
"btn": "Retour à la page d'accueil"
183+
},
184+
"blogs": {
185+
"main_title": "Les blogs seront bientôt disponibles !"
185186
}
186187
}

‎pages/blogs/index.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import { useWatchRoute } from "~/composables/onWatchRoute";
3+
4+
useWatchRoute('blogs');
5+
</script>
6+
7+
<template>
8+
<main>
9+
<h1>{{ $t('blogs.main_title') + ' 😉' }}</h1>
10+
</main>
11+
</template>
12+
13+
14+
<style lang="scss" scoped>
15+
main {
16+
width: 100vw;
17+
height: 100vh;
18+
19+
h1 {
20+
margin-top: 12rem;
21+
font-size: 1.5rem;
22+
text-align: center;
23+
font-weight: 200;
24+
opacity: .8;
25+
}
26+
}
27+
</style>

‎pages/projects/[id].vue‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<script setup lang="ts">
22
import { useRoute } from 'vue-router';
3+
import { useWatchRoute } from "~/composables/onWatchRoute";
4+
5+
useWatchRoute('projects-id');
36
47
const { locale, t } = useI18n();
58
@@ -10,13 +13,6 @@
1013
if (!project.value) {
1114
throw createError({ statusCode: 404, fatal: true})
1215
}
13-
14-
// Try to find a better solution!
15-
watch(() => route.name, (newValue, oldValue): void => {
16-
if(newValue === 'index' && oldValue !== 'index') {
17-
location.reload();
18-
}
19-
});
2016
2117
</script>
2218

0 commit comments

Comments
 (0)