docs: how to translate dashboard (#292)

* add cloud translation api package

* feat: Script that auto generates translations for other languages

* add comments

* fix: broken translation

* improve translation

* update locck file

* clean up

* all round trasnlations check

* checkpoint

* finish up

* move to dev dependencies

* fix vercel build error

* translations fix

* - add documentation
- translation bug fix

* quick adjust

* PR Fixes

* add new line

* update docs

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte

@@ -47,7 +47,7 @@
   />
 </svelte:head>
 
-<UpgradeBanner>Upgrade your plan to generate certificates</UpgradeBanner>
+<UpgradeBanner>{$t('upgrade.certificate')}</UpgradeBanner>
 
 <main class="md:-ml-3 md:-mr-3 px-2 mt-2">
   <div class="flex-1 flex flex-col lg:flex-row justify-between gap-3 w-full mb-3 h-4/5">

apps/dashboard/src/lib/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte

@@ -10,8 +10,8 @@
       {$t('course.navItem.certificates.locked_certificate')}
     </p>
     <p class="text-sm font-normal text-center">
-      {$t('course.navItem.certificates.locked_certificate_body_1')} <br />
-      {$t('course.navItem.certificates.locked_certificate_body_2')}
+      {$t('course.navItem.certificates.instructor_unlock')} <br />
+      {$t('course.navItem.certificates.contact_instructor')}
     </p>
   </div>
 </Box>

apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte

@@ -41,20 +41,24 @@
 
   const options = [
     {
-      title: $t('course.navItem.lessons.exercises.new_exercise_modal.options.1'),
-      subtitle: $t('course.navItem.lessons.exercises.new_exercise_modal.options.subtitle_1'),
+      title: $t('course.navItem.lessons.exercises.new_exercise_modal.options.from_scratch'),
+      subtitle: $t(
+        'course.navItem.lessons.exercises.new_exercise_modal.options.from_scratch_subtitle'
+      ),
       type: Type.SCRATCH,
       isDisabled: false
     },
     {
-      title: $t('course.navItem.lessons.exercises.new_exercise_modal.options.2'),
-      subtitle: $t('course.navItem.lessons.exercises.new_exercise_modal.options.subtitle_2'),
+      title: $t('course.navItem.lessons.exercises.new_exercise_modal.options.use_template'),
+      subtitle: $t(
+        'course.navItem.lessons.exercises.new_exercise_modal.options.use_template_subtitle'
+      ),
       type: Type.TEMPLATE,
       isDisabled: false
     },
     {
-      title: $t('course.navItem.lessons.exercises.new_exercise_modal.options.3'),
-      subtitle: $t('course.navItem.lessons.exercises.new_exercise_modal.options.subtitle_3'),
+      title: $t('course.navItem.lessons.exercises.new_exercise_modal.options.use_ai'),
+      subtitle: $t('course.navItem.lessons.exercises.new_exercise_modal.options.use_ai_subtitle'),
       type: Type.AI,
       isDisabled: false
     }

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte

@@ -177,8 +177,8 @@
         {$t('course.navItem.lessons.materials.tabs.video.add_video.oops')}
       </h3>
       <p class="text-center text-xs font-normal text-[#ADADAD]">
-        {$t('course.navItem.lessons.materials.tabs.video.add_video.sorry')}<br />
-        {$t('course.navItem.lessons.materials.tabs.video.add_video.sorry_2')}
+        {$t('course.navItem.lessons.materials.tabs.video.add_video.big_file')}<br />
+        {$t('course.navItem.lessons.materials.tabs.video.add_video.maximum_size')}
       </p>
     </span>
     <PrimaryButton
@@ -194,8 +194,8 @@
         {$t('course.navItem.lessons.materials.tabs.video.add_video.oops')}
       </h3>
       <p class="text-center text-xs font-normal text-[#ADADAD]">
-        {$t('course.navItem.lessons.materials.tabs.video.add_video.sorry_3')}<br />
-        {$t('course.navItem.lessons.materials.tabs.video.add_video.sorry_4')}
+        {$t('course.navItem.lessons.materials.tabs.video.add_video.unsupported_format')}<br />
+        {$t('course.navItem.lessons.materials.tabs.video.add_video.format')}
       </p>
     </span>
     <PrimaryButton

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -102,7 +102,7 @@
 
       if (updateError) {
         console.error('Error updating translation:', updateError.message);
-        snackbar.error('Updating translations failed');
+        snackbar.error('snackbar.materials.update_translations');
       }
     } else {
       const { error: insertError } = await supabase.from('lesson_language').insert({
@@ -113,7 +113,7 @@
 
       if (insertError) {
         console.error('Error inserting translation:', insertError.message);
-        snackbar.error('Creating new translations failed');
+        snackbar.error('snackbar.materials.creating_new');
         return;
       }
 

apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte

@@ -138,13 +138,13 @@
   $: {
     navItems = [
       {
-        label: $t('course.navItems.1'),
+        label: $t('course.navItems.nav_news_feed'),
         to: getNavItemRoute($course.id),
         hideSortIcon: true,
         isPaidFeature: false
       },
       {
-        label: $t('course.navItems.2'),
+        label: $t('course.navItems.nav_lessons'),
         to: getLessonsRoute($course.id),
         hideSortIcon: false,
         isPaidFeature: false,
@@ -152,13 +152,13 @@
         isExpanded: isStudent ? true : $page.url.pathname.includes('/lessons')
       },
       {
-        label: $t('course.navItems.3'),
+        label: $t('course.navItems.nav_attendance'),
         to: getNavItemRoute($course.id, 'attendance'),
         isPaidFeature: false,
         hideSortIcon: true
       },
       {
-        label: $t('course.navItems.4'),
+        label: $t('course.navItems.nav_submissions'),
         to: getNavItemRoute($course.id, 'submissions'),
         hideSortIcon: true,
         isPaidFeature: false,
@@ -167,13 +167,13 @@
         }
       },
       {
-        label: $t('course.navItems.5'),
+        label: $t('course.navItems.nav_marks'),
         to: getNavItemRoute($course.id, 'marks'),
         isPaidFeature: false,
         hideSortIcon: true
       },
       {
-        label: $t('course.navItems.6'),
+        label: $t('course.navItems.nav_people'),
         to: getNavItemRoute($course.id, 'people'),
         isPaidFeature: false,
         hideSortIcon: true,
@@ -182,7 +182,7 @@
         }
       },
       {
-        label: $t('course.navItems.7'),
+        label: $t('course.navItems.nav_certificates'),
         to: getNavItemRoute($course.id, 'certificates'),
         hideSortIcon: true,
         isPaidFeature: true,
@@ -195,7 +195,7 @@
         }
       },
       {
-        label: $t('course.navItems.8'),
+        label: $t('course.navItems.nav_landing_page'),
         to: getNavItemRoute($course.id, 'landingpage'),
         hideSortIcon: true,
         isPaidFeature: false,
@@ -204,7 +204,7 @@
         }
       },
       {
-        label: $t('course.navItems.9'),
+        label: $t('course.navItems.nav_settings'),
         to: getNavItemRoute($course.id, 'settings'),
         hideSortIcon: true,
         isPaidFeature: false,

apps/dashboard/src/lib/components/Course/components/Settings/index.svelte

@@ -288,7 +288,7 @@
     </Column>
     <Column sm={8} md={8} lg={8}>
       {#if $isFreePlan}
-        <UpgradeBanner>Upgrade to download lessons</UpgradeBanner>
+        <UpgradeBanner>{$t('upgrade.download_lessons')}</UpgradeBanner>
       {:else}
         <Toggle size="sm" bind:toggled={$settings.lesson_download}>
           <span slot="labelA" style="color: gray">{$t('course.navItem.settings.disabled')}</span>
@@ -304,7 +304,7 @@
     </Column>
     <Column sm={8} md={8} lg={8}>
       {#if $isFreePlan}
-        <UpgradeBanner>Upgrade to download course</UpgradeBanner>
+        <UpgradeBanner>{$t('upgrade.download_course')}</UpgradeBanner>
       {:else}
         <PrimaryButton
           variant={VARIANTS.OUTLINED}