docs: day 2, lw001 - multi-language support

2024-10-08 22:17:05 +01:00
parent f6edaefc6a
commit 972195b634
5 changed files with 75 additions and 6 deletions
@@ -48,7 +48,7 @@ li {

 .prose :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
-  margin-top: 8px;
+  margin-top: 20px;
 }
 .prose :is(h1) {
  font-size: 2em;
@@ -70,8 +70,8 @@ li {
 }

 .prose :is(p, li) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
+  margin-top: 0.7em;
+  margin-bottom: 0em;
  color: #374151;
 }

@@ -119,3 +119,15 @@ li {
  background-size: cover;
  background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
 }
+
+.embed {
+  width: 100%;
+  height: 315px;
+  border-radius: 0.375rem;
+}
+
+@media (min-width: 640px) {
+  .embed {
+    width: 560px;
+  }
+}
@@ -17,7 +17,7 @@ We are excited to announce more customisations coming into our learning manageme

 ## Demo

-<iframe class="mb-5" width="560" height="315" src="https://www.youtube.com/embed/y46mvF_1IWk?si=W39qbrW3KJ3DGO3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<iframe class="embed mb-5" src="https://www.youtube.com/embed/y46mvF_1IWk?si=W39qbrW3KJ3DGO3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

 ## Your Student Dashboard

@@ -33,7 +33,7 @@ In this launch week, we will show you some of the steps we've taken to allow com
 Below are all the features for each day that we will be sharing. As the day goes by, this list will be updated:

 1. Day 1 - [Brand Customisations](/blog/brand-customisations)
-2. Day 2 - 😁
+2. Day 2 - [Multi-Language Support](/blog/multi-language)
 3. Day 3 - 🤩
 4. Day 4 - 🤯
 5. Day 5 - 😉
@@ -0,0 +1,53 @@
+---
+title: 'Introducing Multi-language Support'
+description: 'We now support 8 languages in both our admin dashboard and student dashboard.'
+imageUrl: 'https://assets.cdn.clsrio.com/blog/multi-language-support.png'
+date: '2024-10-08'
+author: Rotimi Best
+avatar: /blog/best.jpg
+role: Founder
+tags: ['Launch Week', 'LMS', 'Internationalisation']
+published: true
+---
+
+![multi-language-support](https://assets.cdn.clsrio.com/blog/multi-language-support.png)
+_ClassroomIO now supports 8 languages_
+
+We are happy to share that within the ClassroomIO dashboard and your dedicated student dashboard we now support 8 languages including English. These 8 languages include:
+
+1. English
+2. French
+3. German
+4. Portugese
+5. Spanish
+6. Russian
+7. Hindi
+8. Vietnamese
+
+The best thing about this feature is that you can have students from different countries use your LMS in any of the above languages without any extra effort on your end. This means that educators can create a localised experience for each student consuming their content from different countries around the world.
+
+To change your language within the dashboard, you can go to the settings page by clicking your profile picture at the bottom left and select your preferred language in the drop down in the Profiles tab.
+
+![select-language-settings](https://assets.cdn.clsrio.com/blog/select-language-settings.png)
+_Language selector in ClassroomIO Dashboard._
+
+## We went a step further 😁
+
+Now that our whole application is in 8 languages, that means you should be able to also add content for your courses in those languages right? YES YES YES. For customers creating international courses that can be consumed by people from different countries, this is a very crucial feature.
+
+Well how does it work? You can go into the course builder, open a lesson you want to add content into and start typing. By default the content will be stored in English language. If you want to add content for another language, just change the language at the top right and start typing. ITS THAT SIMPLE
+
+Oh we even hooked up our AI content generator with it as well, you can switch to any language and the AI will generate content for the specific lesson, in your selected language.
+
+### Quick demo
+
+<video class="embed mb-5" controls poster="https://assets.cdn.clsrio.com/blog/multi-language-support.png">
+  <source src="https://assets.cdn.clsrio.com/blog/language-editor-demo.mov" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+## Next steps
+
+All translations in our app are stored in a JSON file which we generate and keep up to date using Google translate. This means that it might not be 100% accurate and there could be some mistakes when use  our dashboard in other languages. If you do find any issues with our translations, please do open an [issue on Github](https://github.com/classroomio/classroomio/issues/new/choose) with the correct translation and we'd be so happy to fix it.
+
+If you are a native speaker of any of the 7 languages and want to contribute, please feel free to nitpick into our [translations](https://github.com/classroomio/classroomio/tree/main/apps/dashboard/src/lib/utils/translations) and open a PR with the fixes. Every contribution is valuable and will be gladly welcomed 😊
@@ -161,7 +161,11 @@
          }}
        >
          <div
-            class="text-black no-underline cursor-pointer flex items-center justify-between gap-2.5 px-2.5 py-2 mb-2 {NavClasses.item}"
+            class="text-black no-underline cursor-pointer flex items-center justify-between gap-2.5 px-2.5 py-2 mb-2 {NavClasses.item} {$page.url.pathname.includes(
+              'settings'
+            )
+              ? NavClasses.active
+              : 'dark:text-white'}"
          >
            <div class="flex text-start items-center justify-start space-x-1 w-full">
              <Avatar