Add the initial blogs page

zooldeveloper · Jun 7, 2023 · ba3a9c2 · ba3a9c2
1 parent 4c7805c
commit ba3a9c2
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 43 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -6,7 +6,8 @@
      const isHomePage = ref(true);
 
      watch(() => route.name, (newValue, oldValue) => {
-        if(newValue === 'projects-id' && oldValue !== 'projects-id') {
+        if(newValue === 'projects-id' && oldValue !== 'projects-id' ||
+          newValue === 'blogs' && oldValue !== 'blogs') {
           isHomePage.value = false;
         }
     }, {immediate: true});
@@ -105,11 +106,12 @@
           </button>
           <nav  :class="['navbar ', { active: navOpen }]">
                <ul>
-                    <li><NuxtLink :to="$t('home_path')" class="current-section">{{ $t('home_title') }}</NuxtLink></li>
-                    <li v-show="isHomePage"><NuxtLink :to="$t('skills_path')">{{ $t('skills_title') }}</NuxtLink></li>
-                    <li v-show="isHomePage"><NuxtLink :to="$t('portfolio_path')">{{ $t('portfolio_title') }}</NuxtLink></li>
-                    <!-- <li v-show="isHomePage"><NuxtLink :to="$t('education_path')">{{ $t('education_title') }}</NuxtLink></li> -->
-                    <li v-show="isHomePage"><NuxtLink :to="$t('contact_path')">{{ $t('contact_title') }}</NuxtLink></li>
+                    <li><NuxtLink to="/" class="current-section">{{ $t('header.home_title') }}</NuxtLink></li>
+                    <li v-show="isHomePage"><NuxtLink to="#skills">{{ $t('header.skills_title') }}</NuxtLink></li>
+                    <li v-show="isHomePage"><NuxtLink to="#portfolio">{{ $t('header.portfolio_title') }}</NuxtLink></li>
+                    <!-- <li v-show="isHomePage"><NuxtLink to="#education">{{ $t('header.education_title') }}</NuxtLink></li> -->
+                    <li><NuxtLink to="/blogs">{{ $t('header.blog_title') }}</NuxtLink></li>
+                    <li v-show="isHomePage"><NuxtLink to="#contact">{{ $t('header.contact_title') }}</NuxtLink></li>
                     <li class="navbar__color-switcher">
                          <i v-if="$colorMode.preference === 'dark'" @click="toggleMode('light')" role="button">
                               <Icon name="sun" id="sun"/>

diff --git a/composables/onWatchRoute.ts b/composables/onWatchRoute.ts
@@ -0,0 +1,11 @@
+import { useRoute } from 'vue-router';
+
+export const useWatchRoute = (routeName: string): void => {
+    const route = useRoute();
+
+    watch(() => route.name, (newValue, oldValue): void => {
+        if(newValue !== routeName && oldValue === routeName) {
+            location.reload();
+        } 
+    });
+}
diff --git a/locales/ar.json b/locales/ar.json
@@ -1,17 +1,15 @@
 {
     "main_title": "زول مطور {pipe} مختار سليمان {pipe} موقع مطور ويب ",
     "main_description": "مطور ويب للواجهة الأمامية و Frontend. متخصص في JavaScript {pipe} Vue.js {pipe} React.js {pipe} اقيم في مدينة نانت ، فرنسا  .وخريج معهد وأدوات تطوير الويب الأخرى OpenClassrooms",
+    "header": {   
+        "home_title": "الصفحة الرئيسية",
+        "skills_title": "المهارات",   
+        "portfolio_title": "الأعمال",    
+        "education_title": "التعليم",
+        "blog_title": "مدونة",
+        "contact_title": "تواصل معنا"
+    },
     "logo_img_desc": "شعار زول ديفالبر",
-    "home_title": "الصفحة الرئيسية",
-    "home_path": "/",
-    "skills_title": "المهارات",
-    "skills_path": "#skills",
-    "portfolio_title": "الأعمال",
-    "portfolio_path": "#portfolio",
-    "education_title": "التعليم",
-    "education_path": "#education",
-    "contact_title": "تواصل معنا",
-    "contact_path": "#contact",
     "network_aria_label": "{iconName} رابط الي حساب مختار في",
 
     "main_heading": {
@@ -182,5 +180,8 @@
             "additional_info": "تواصل معنا لإخطارنا عن هذه المشكلة."
         },
         "btn": "العودة الي الصفحة الرئيسية"
+    },
+    "blogs": {
+        "main_title": "ستكون المدونات متاحة قريبا!"
     }
 }
diff --git a/locales/en.json b/locales/en.json
@@ -1,17 +1,15 @@
 {    
     "main_title": "Zool Developer {pipe} Mukhtar Sulaiman {pipe} Web Developer Portfolio",
     "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",
+    "header": {
+        "home_title": "Home",
+        "skills_title": "Skills",
+        "portfolio_title": "Portfolio",
+        "education_title": "Education",
+        "blog_title": "Blog",
+        "contact_title": "Contact"
+    },
     "logo_img_desc": "zool developer logo",
-    "home_title": "Home",
-    "home_path": "/",
-    "skills_title": "Skills",
-    "skills_path": "#skills",
-    "portfolio_title": "Portfolio",
-    "portfolio_path": "#portfolio",
-    "education_title": "Education",
-    "education_path": "#education",
-    "contact_title": "Contact",
-    "contact_path": "#contact",
     "network_aria_label": "link to Mukhtar's {iconName} account",
 
     "main_heading": {
@@ -182,5 +180,8 @@
             "additional_info": "Contact us to fix it."
         },
         "btn": "Go to home page"
+    },
+    "blogs": {
+        "main_title": "Blogs will be available soon!"
     }
 }
diff --git a/locales/fr.json b/locales/fr.json
@@ -1,17 +1,15 @@
 {
     "main_title": "Zool Developer {pipe} Mukhtar Sulaiman {pipe} Portfolio Développeur Web",
     "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",
+    "header": {
+        "home_title": "Accueil",
+        "skills_title": "Compétences",
+        "portfolio_title": "Portfolio",
+        "education_title": "Formations",
+        "blog_title": "Blogs",
+        "contact_title": "Contact"
+    },
     "logo_img_desc": "logo zool developer",
-    "home_title": "Accueil",
-    "home_path": "/",
-    "skills_title": "Compétences",
-    "skills_path": "#skills",
-    "portfolio_title": "Portfolio",
-    "portfolio_path": "#portfolio",
-    "education_title": "Formations",
-    "education_path": "#education",
-    "contact_title": "Contact",
-    "contact_path": "#contact",
     "network_aria_label": "lien vers le compte {iconName} de Mukhtar",
 
     "main_heading": {
@@ -182,5 +180,8 @@
             "additional_info": "Contactez-nous pour y remédier."
         },
         "btn": "Retour à la page d'accueil"
+    },
+    "blogs": {
+        "main_title": "Les blogs seront bientôt disponibles !"
     }
 }
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+    import { useWatchRoute } from "~/composables/onWatchRoute";
+
+    useWatchRoute('blogs');
+</script>
+
+<template>
+    <main>
+       <h1>{{ $t('blogs.main_title') + ' 😉' }}</h1>
+    </main>
+</template>
+
+
+<style lang="scss" scoped>
+    main {
+        width: 100vw;
+        height: 100vh;
+
+        h1 {
+            margin-top: 12rem;
+            font-size: 1.5rem;
+            text-align: center;
+            font-weight: 200;
+            opacity: .8;
+        }
+    }
+</style>
diff --git a/pages/projects/[id].vue b/pages/projects/[id].vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
     import { useRoute } from 'vue-router';
+    import { useWatchRoute } from "~/composables/onWatchRoute";
+
+    useWatchRoute('projects-id');
     
     const { locale, t } = useI18n();
 
@@ -10,13 +13,6 @@
     if (!project.value) {
         throw createError({ statusCode: 404, fatal: true})
     }
-   
-    // Try to find a better solution!
-    watch(() => route.name, (newValue, oldValue): void => {
-        if(newValue === 'index' && oldValue !== 'index') {
-            location.reload();
-        }
-    });
 
 </script>