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/CourseLandingPage/components/Editor/HeaderForm.svelte

@@ -33,7 +33,7 @@
   labelClassName="font-bold"
   label={$t('course.navItem.landing_page.editor.header_form.short_video')}
   placeholder="www.youtube.com/watch?v=uYRq60G5XTk"
-  helperMessage="Enter a link to a youtube video"
+  helperMessage={$t('course.navItem.landing_page.editor.header_form.helper')}
   type="text"
   bind:value={course.metadata.videoUrl}
 />

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/InstructorForm.svelte

@@ -62,7 +62,7 @@
 
 <div class="mt-5">
   <label for="upload" class="font-bold"
-    >{$t('course.navItem.landing_page.editor.instructure_form.upload')}</label
+    >{$t('course.navItem.landing_page.editor.instructor_form.upload')}</label
   >
   <UploadImage bind:avatar src={imgUrl} />
 </div>
@@ -70,22 +70,22 @@
 <TextField
   className="mt-5"
   labelClassName="font-bold"
-  label={$t('course.navItem.landing_page.editor.instructure_form.name')}
-  placeholder={$t('course.navItem.landing_page.editor.instructure_form.name_placeholder')}
+  label={$t('course.navItem.landing_page.editor.instructor_form.name')}
+  placeholder={$t('course.navItem.landing_page.editor.instructor_form.name_placeholder')}
   bind:value={name}
 />
 
 <TextField
   className="mt-5"
   labelClassName="font-bold"
-  label={$t('course.navItem.landing_page.editor.instructure_form.role')}
+  label={$t('course.navItem.landing_page.editor.instructor_form.role')}
   placeholder="e.g Software developer"
   bind:value={role}
 />
 
 <TextArea
-  label={$t('course.navItem.landing_page.editor.instructure_form.about')}
-  placeholder={$t('course.navItem.landing_page.editor.instructure_form.about_placeholder')}
+  label={$t('course.navItem.landing_page.editor.instructor_form.about')}
+  placeholder={$t('course.navItem.landing_page.editor.instructor_form.about_placeholder')}
   rows={6}
   className="mt-5"
   labelClassName="font-bold"
@@ -95,7 +95,7 @@
 <TextField
   className="mt-5"
   labelClassName="font-bold"
-  label={$t('course.navItem.landing_page.editor.instructure_form.total')}
+  label={$t('course.navItem.landing_page.editor.instructor_form.total')}
   type="number"
   bind:value={courseNo}
 />

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/ReviewsForm.svelte

@@ -11,6 +11,7 @@
   import ReviewFormEditor from './ReviewFormEditor.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { processErrors } from '$lib/utils/functions/validator';
+  import { t } from '$lib/utils/functions/translations';
 
   export let course = {};
 
@@ -125,7 +126,7 @@
 
     <!-- create reviews button -->
     <PrimaryButton
-      label="Add Reviews"
+      label={$t('course.navItem.landing_page.editor.reviews_form.add_reviews')}
       variant={VARIANTS.CONTAINED}
       onClick={addReviewForm}
       className="w-5 rounded-md mt-8"

apps/dashboard/src/lib/components/CourseLandingPage/components/Editor/index.svelte

@@ -47,43 +47,43 @@
     {
       key: 1,
       path: '',
-      title: $t('course.navItem.landing_page.editor.title.1')
+      title: $t('course.navItem.landing_page.editor.title.header')
     },
     {
       key: 2,
       path: 'metadata.requirements',
-      title: $t('course.navItem.landing_page.editor.title.2'),
+      title: $t('course.navItem.landing_page.editor.title.requirement'),
       enableAIWriter: true,
-      initPrompt: 'Please write few requirements needed to take this course:'
+      initPrompt: $t('course.navItem.landing_page.editor.title.requirement')
     },
     {
       key: 3,
       path: 'metadata.description',
-      title: $t('course.navItem.landing_page.editor.title.3'),
+      title: $t('course.navItem.landing_page.editor.title.description'),
       enableAIWriter: true,
       initPrompt: 'Please write a detailed course description for this course:'
     },
     {
       key: 4,
       path: 'metadata.goals',
-      title: $t('course.navItem.landing_page.editor.title.4'),
+      title: $t('course.navItem.landing_page.editor.title.goals'),
       enableAIWriter: true,
       initPrompt: 'What should a student expect to learn from this course:'
     },
     {
       key: 5,
       path: '',
-      title: $t('course.navItem.landing_page.editor.title.5')
+      title: $t('course.navItem.landing_page.editor.title.reviews')
     },
     {
       key: 6,
       path: '',
-      title: $t('course.navItem.landing_page.editor.title.6')
+      title: $t('course.navItem.landing_page.editor.title.instructor')
     },
     {
       key: 7,
       path: '',
-      title: $t('course.navItem.landing_page.editor.title.7')
+      title: $t('course.navItem.landing_page.editor.title.pricing')
     }
   ];
   let selectedSection: Section | null = null;

apps/dashboard/src/lib/components/CourseLandingPage/constants.ts

@@ -13,26 +13,26 @@ export const SECTION_KEYS = {
 export const NAV_ITEMS = [
   {
     key: SECTION_KEYS.REQUIREMENT,
-    label: 'course.navItem.landing_page.editor.title.2'
+    label: 'course.navItem.landing_page.editor.title.requirement'
   },
   {
     key: SECTION_KEYS.DESCRIPTION,
-    label: 'course.navItem.landing_page.editor.title.3'
+    label: 'course.navItem.landing_page.editor.title.description'
   },
   {
     key: SECTION_KEYS.GOALS,
-    label: 'course.navItem.landing_page.editor.title.4'
+    label: 'course.navItem.landing_page.editor.title.goals'
   },
   {
     key: SECTION_KEYS.LESSONS,
-    label: 'course.navItems.2'
+    label: 'course.navItems.nav_lessons'
   },
   {
     key: SECTION_KEYS.REVIEWS,
-    label: 'course.navItem.landing_page.editor.title.5'
+    label: 'course.navItem.landing_page.editor.title.reviews'
   },
   {
     key: SECTION_KEYS.INSTRUCTOR,
-    label: 'course.navItem.landing_page.editor.title.6'
+    label: 'course.navItem.landing_page.editor.title.instructor'
   }
 ];