Agrim/dapi547/langswitcher

docusaurus.config.js

@@ -17,7 +17,6 @@ const config = {
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'binary-com', // Usually your GitHub org/user name.
   projectName: 'deriv-api-docs', // Usually your repo name.
-  trailingSlash: false,
 
   customFields: {
     trackJsToken: process.env.TRACKJS_TOKEN,
@@ -28,7 +27,7 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en', 'es', 'fr'],
+    locales: ['en', 'es', 'fr', 'pt'],
     localeConfigs: {
       en: {
         label: 'English',
@@ -124,6 +123,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {

i18n/pt/docusaurus-plugin-content-docs/current/intro.md

@@ -17,7 +17,7 @@ keywords:
 description: Obtenha uma visão geral dos exemplos de código e linguagens da API Deriv disponíveis e como utilizá-la para criar a sua aplicação de negociação.
 ---
 
-importar RenderOfficialContents de '@site/src/components/RenderOfficialContents';
+import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
 
 A nossa Documentação está dividida em diferentes secções:
 

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@deriv/deriv-api": "^1.0.11",
+    "@deriv/quill-icons": "^1.22.7",
     "@deriv/ui": "^0.8.0",
     "@docusaurus/core": "^3.3.2",
     "@docusaurus/plugin-client-redirects": "^3.3.2",

src/components/AccountSwitcher/account_switcher.module.scss

@@ -73,7 +73,7 @@
       width: rem(1.5);
       height: rem(1.5);
       transform: rotate(0deg);
-      transition: transform .2s ease-in-out;
+      transition: transform 0.2s ease-in-out;
     }
   }
 

src/components/CustomCheckbox/custom_checkbox.module.scss

@@ -1,50 +1,50 @@
 @use 'src/styles/utility' as *;
 
 .customCheckboxContainer {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  min-width: rem(1.6);
+  padding-top: rem(0.8);
+  z-index: 0;
+  margin-bottom: auto;
+  @media screen and (min-width: 992px) {
+    align-items: center;
+  }
+  label {
+    cursor: pointer;
+    margin-left: rem(1.5);
+  }
+  .checkboxContainer {
     position: relative;
+    width: rem(1.5);
+    height: rem(1.5);
+  }
+  .customCheckbox {
+    position: absolute;
+    background-repeat: no-repeat;
+    display: inline-block;
+    border: 2px solid var(--ifm-color-emphasis-500);
     min-width: rem(1.6);
-    padding-top: rem(0.8);
-    z-index: 0;
-    margin-bottom: auto;
-    @media screen and (min-width: 992px) {
-        align-items: center;
+    height: rem(1.6);
+    border-radius: 2px;
+    transition: background-color 0.25s, border-color 0.25s;
+    z-index: 1;
+  }
+  input {
+    // The original checkbox has to be hidden, but still be clickable
+    // Hence, opacity 0 is used instead of visibility or display
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+    width: rem(1.5);
+    height: rem(1.5);
+    position: absolute;
+    &:checked + .customCheckbox {
+      background-image: url(/img/check.svg);
+      background-position: center;
+      background-color: var(--colors-coral500);
+      border-color: var(--colors-coral500);
     }
-    label {
-        cursor: pointer;
-        margin-left: rem(1.5);
-    }
-    .checkboxContainer {
-        position: relative;
-        width: rem(1.5);
-        height: rem(1.5);
-    }
-    .customCheckbox {
-        position: absolute;
-        background-repeat: no-repeat;
-        display: inline-block;
-        border: 2px solid var(--ifm-color-emphasis-500);
-        min-width: rem(1.6);
-        height: rem(1.6);
-        border-radius: 2px;
-        transition: background-color 0.25s, border-color 0.25s;
-        z-index: 1;
-    }
-    input {
-        // The original checkbox has to be hidden, but still be clickable
-        // Hence, opacity 0 is used instead of visibility or display
-        cursor: pointer;
-        opacity: 0;
-        z-index: 2;
-        width: rem(1.5);
-        height: rem(1.5);
-        position: absolute;
-        &:checked + .customCheckbox {
-            background-image: url(/img/check.svg);
-            background-position: center;
-            background-color: var(--colors-coral500);
-            border-color: var(--colors-coral500);
-        }
-    }
-}
+  }
+}

src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss

@@ -1,26 +1,26 @@
 @use 'src/styles/utility' as *;
 
 .selectedAccount {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  .accountInfoContainer {
     display: flex;
-    height: 100%;
-    align-items: center;
-    .accountInfoContainer {
-        display: flex;
-        flex-direction: column;
-        margin-left: rem(1);
-        .accountType {
-            font-size: rem(1.6);
-        }
-        .accountId {
-            font-size: rem(1.2);
-            color: var(--ifm-color-emphasis-700);
-        }
+    flex-direction: column;
+    margin-left: rem(1);
+    .accountType {
+      font-size: rem(1.6);
     }
-    div {
-        line-height: initial;
+    .accountId {
+      font-size: rem(1.2);
+      color: var(--ifm-color-emphasis-700);
     }
-    img {
-        width: rem(2.4);
-        height: rem(2.4);
-    }
-}
+  }
+  div {
+    line-height: initial;
+  }
+  img {
+    width: rem(2.4);
+    height: rem(2.4);
+  }
+}

src/components/CustomSelectDropdown/custom_select_item.module.scss

@@ -1,32 +1,32 @@
 @use 'src/styles/utility' as *;
 
 .customSelectItem {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  font-size: rem(1.4);
+  transition: background-color 0.2s;
+  border-radius: 3px;
+  padding: rem(1);
+  height: rem(5.2);
+  line-height: rem(2);
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--ifm-color-emphasis-100);
+  }
+  img {
+    width: rem(3.2);
+    height: rem(3.2);
+  }
+  .accountInfoContainer {
     display: flex;
-    width: 100%;
-    align-items: center;
-    font-size: rem(1.4);
-    transition: background-color 0.2s;
-    border-radius: 3px;
-    padding: rem(1);
-    height: rem(5.2);
+    flex-direction: column;
+    margin-left: rem(1);
     line-height: rem(2);
-
-    &:hover {
-        cursor: pointer;
-        background-color: var(--ifm-color-emphasis-100);
-    }
-    img {
-        width: rem(3.2);
-        height: rem(3.2);
-    }
-    .accountInfoContainer {
-        display: flex;
-        flex-direction: column;
-        margin-left: rem(1);
-        line-height: rem(2);
-        .accountId {
-            font-size: rem(1);
-            color: var(--ifm-color-emphasis-600);
-        }
+    .accountId {
+      font-size: rem(1);
+      color: var(--ifm-color-emphasis-600);
     }
+  }
 }

src/components/NavbarSeparator/NavbarSeparator.module.scss

@@ -1,18 +1,18 @@
 @use 'src/styles/utility' as *;
 
 .separatorContainer {
-    display: flex;
-    height: 100%;
-    padding: 0 rem(1.6);
-    align-items: center;
-    justify-content: center;
-    .navbarSeparator {
-        display: inline-block;
-        height: rem(3.2);
-        width: 1px;
-        background-color: var(--ifm-color-emphasis-300);
-    }
-    @media (max-width: 1200px) {
-        display: none;
-    }
-}
+  display: flex;
+  height: 100%;
+  padding: 0 rem(1.6);
+  align-items: center;
+  justify-content: center;
+  .navbarSeparator {
+    display: inline-block;
+    height: rem(3.2);
+    width: 1px;
+    background-color: var(--ifm-color-emphasis-300);
+  }
+  @media (max-width: 1200px) {
+    display: none;
+  }
+}

src/components/SearchButton/SearchButton.module.scss

@@ -1,11 +1,11 @@
 @use 'src/styles/utility' as *;
 
 .searchButton {
-    width: rem(2.4);
-    height: rem(2.4);
-    background-image: url('/img/search-bold.svg');
-    background-repeat: no-repeat;
-    background-size: rem(1.6) rem(1.6);
-    background-position: center;
-    cursor: pointer;
+  width: rem(2.4);
+  height: rem(2.4);
+  background-image: url('/img/search-bold.svg');
+  background-repeat: no-repeat;
+  background-size: rem(1.6) rem(1.6);
+  background-position: center;
+  cursor: pointer;
 }

src/components/SkeletonText/SkeletonText.module.scss

@@ -1,7 +1,12 @@
 @use 'src/styles/utility' as *;
 
 .skeleton {
-  background-image: linear-gradient(to right, var(--ifm-color-emphasis-0), var(--ifm-color-emphasis-100), var(--ifm-color-emphasis-200));
+  background-image: linear-gradient(
+    to right,
+    var(--ifm-color-emphasis-0),
+    var(--ifm-color-emphasis-100),
+    var(--ifm-color-emphasis-200)
+  );
   padding: rem(1);
   height: rem(2);
   margin-bottom: rem(1.6);
@@ -10,8 +15,13 @@
 }
 
 .skeleton:before {
-  content: " ";
-  background-image: linear-gradient(to right, var(--ifm-color-emphasis-200), var(--ifm-color-emphasis-100), var(--ifm-color-emphasis-0));
+  content: ' ';
+  background-image: linear-gradient(
+    to right,
+    var(--ifm-color-emphasis-200),
+    var(--ifm-color-emphasis-100),
+    var(--ifm-color-emphasis-0)
+  );
   width: 100%;
   height: 100%;
   display: inline-block;

src/components/Spinner/Spinner.module.scss

@@ -14,7 +14,7 @@
     overflow: hidden;
     animation: rotating 0.5s linear infinite;
     &:before {
-      content: "";
+      content: '';
       left: 50%;
       top: 50%;
       width: 70%;

src/components/UserNavbarItem/UserNavbarItem.module.scss

@@ -19,7 +19,7 @@
   background-color: var(--colors-coral500);
   border-radius: 16px;
   padding: rem(1) rem(1.6);
-  transition: background-color .2s;
+  transition: background-color 0.2s;
   font-size: rem(1.4);
   &:hover {
     color: var(--ifm-color-emphasis-0);

src/components/UserNavbarItem/index.tsx

@@ -1,3 +1,4 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import useLogout from '@site/src/hooks/useLogout';
@@ -10,13 +11,15 @@ interface IProps {
 
 const UserNavbarItem = ({ mobile }: IProps) => {
   const [authUrl, setAuthUrl] = useState<string>('');
-
+  const {
+    i18n: { currentLocale },
+  } = useDocusaurusContext();
   const { is_logged_in } = useAuthContext();
   const { logout } = useLogout();
   const { getUrl } = useLoginUrl();
 
   useEffect(() => {
-    const url = getUrl('en');
+    const url = getUrl(currentLocale);
     setAuthUrl(url);
   }, [getUrl]);