Add multilingual support for blog section and update Vue i18n configu…

…ration
abdessamadbettal · Dec 13, 2024 · 01e2236 · 01e2236
1 parent b3e5788
commit 01e2236
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 7 deletions.
diff --git a/config/vue-i18n-generator.php b/config/vue-i18n-generator.php
@@ -7,7 +7,7 @@
     |--------------------------------------------------------------------------
     |
     | The file path for the compiled Vue i18n file.
-    |
+    |  Run this cmd for generate transalations -->  php artisan vue:translations
     */
 
     'outputFile' => resource_path('js/i18n/locales.js'),

diff --git a/lang/ar/home.php b/lang/ar/home.php
@@ -8,4 +8,7 @@
     'features' => 'الميزات',
     'blogs' => 'المدونات',
     'documentation' => 'التوثيق',
+    'see_more_posts' => 'عرض المزيد من المقالات',
+    'latest_blogs' => 'أحدث المقالات',
+    'latest_blogs_text' => 'اقرأ أحدث المقالات من مدونتنا.',
 ];
diff --git a/lang/en/home.php b/lang/en/home.php
@@ -8,4 +8,7 @@
     'features' => 'Features',
     'blogs' => 'Blogs',
     'documentation' => 'Documentation',
+    'see_more_posts' => 'See more posts',
+    'latest_blogs' => 'Latest Blogs',
+    'latest_blogs_text' => 'Read the latest posts from our blog.',
 ];
diff --git a/lang/es/home.php b/lang/es/home.php
@@ -8,4 +8,7 @@
     'features' => 'Características',
     'blogs' => 'Blogs',
     'documentation' => 'Documentación',
+    'see_more_posts' => 'Ver más publicaciones',
+    'latest_blogs' => 'Últimos Blogs',
+    'latest_blogs_text' => 'Lea las últimas publicaciones de nuestro blog.',
 ];
diff --git a/lang/fr/home.php b/lang/fr/home.php
@@ -8,4 +8,7 @@
     'features' => 'Fonctionnalités',
     'blogs' => 'Blogs',
     'documentation' => 'Documentation',
+    'see_more_posts' => 'Voir plus de publications',
+    'latest_blogs' => 'Derniers Blogs',
+    'latest_blogs_text' => 'Lisez les dernières publications de notre blog.',
 ];
diff --git a/resources/js/Components/Blog/BlogSection.vue b/resources/js/Components/Blog/BlogSection.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="container relative md:mt-24 mt-16">
         <div class="grid grid-cols-1 pb-6 text-center">
-            <h3 class="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">{{ $t('travel_blogs')
+            <h3 class="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">{{ $t('latest_blogs')
                 }}</h3>
 
-            <p class="text-slate-400 max-w-xl mx-auto">{{ $t('simple_text') }}</p>
+            <p class="text-slate-400 max-w-xl mx-auto">{{ $t('latest_blogs_text') }}</p>
         </div>
 
         <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mt-6 gap-6">
@@ -20,11 +20,16 @@
             </template>
             <BlogCard v-else v-for="item in posts" :key="item.id" :item="item" />
         </div>
+        <div class="mt-6 text-center">
+            <Link :href="route('posts.index')" class="text-slate-400 hover:text-primary-500 inline-block cursor-pointer">{{ $t('see_more_posts') }}
+                <i class="mdi mdi-arrow-right align-middle"></i></Link>
+        </div>
     </div>
 </template>
 
 <script>
 import BlogCard from '@/Components/Blog/BlogCard.vue';
+import { Link } from '@inertiajs/vue3';
 
 export default {
     name: 'BlogSection',

diff --git a/resources/js/i18n/locales.js b/resources/js/i18n/locales.js
@@ -46,7 +46,10 @@ export default {
             "view_on_github": "عرض على GitHub",
             "features": "الميزات",
             "blogs": "المدونات",
-            "documentation": "التوثيق"
+            "documentation": "التوثيق",
+            "see_more_posts": "عرض المزيد من المقالات",
+            "latest_blogs": "أحدث المقالات",
+            "latest_blogs_text": "اقرأ أحدث المقالات من مدونتنا."
         },
         "mail": {
             "about_us": "معلومات عنا",
@@ -301,7 +304,10 @@ export default {
             "view_on_github": "View on GitHub",
             "features": "Features",
             "blogs": "Blogs",
-            "documentation": "Documentation"
+            "documentation": "Documentation",
+            "see_more_posts": "See more posts",
+            "latest_blogs": "Latest Blogs",
+            "latest_blogs_text": "Read the latest posts from our blog."
         },
         "mail": {
             "about_us": "About us",
@@ -556,7 +562,10 @@ export default {
             "view_on_github": "Ver en GitHub",
             "features": "Características",
             "blogs": "Blogs",
-            "documentation": "Documentación"
+            "documentation": "Documentación",
+            "see_more_posts": "Ver más publicaciones",
+            "latest_blogs": "Últimos Blogs",
+            "latest_blogs_text": "Lea las últimas publicaciones de nuestro blog."
         },
         "mail": {
             "about_us": "Sobre nosotros",
@@ -809,7 +818,10 @@ export default {
             "view_on_github": "Voir sur GitHub",
             "features": "Fonctionnalités",
             "blogs": "Blogs",
-            "documentation": "Documentation"
+            "documentation": "Documentation",
+            "see_more_posts": "Voir plus de publications",
+            "latest_blogs": "Derniers Blogs",
+            "latest_blogs_text": "Lisez les dernières publications de notre blog."
         },
         "mail": {
             "about_us": "À propos de nous",