Back to Main Docs © Copyright 2022

# Brand/Project Name

- Open `/static/text/brand.js`
- Here's bellow the available brand attribute

      module.exports = {
        starter: {
          name: 'Luxi Starter',
          desc: 'Luxi Starter - React Starter Template',
          prefix: 'luxi',
          footerText: 'Luxi Theme All Rights Reserved 2019',
          logoText: 'Luxi Theme',
          projectName: 'Starter Project',
          url: 'luxi.ux-maestro.com',
          img: '/static/images/logo.png',
          notifMsg: 'Donec sit amet nulla sed arcu pulvinar ultricies commodo id ligula.'
        }
      };

- Those attribute will affect in HTML ‹head› content and other branding name

# Change Layout(RTL) and Theme

This template has 20 Themes with dark/light appearance. And also support for RTL direction. You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step.

- Open `/pages/_app.js`
- Then change the `state.theme` value. Here's the available api:

  Key | Type | Available Value | Example
  --- | --- | --- | ---
  `Color:` | String | `'oceanBlue'`, `'greenLeaf'`, `'greyscale'`, `'cloud'`, `'violet'`, etc | `...appTheme('oceanBlue', themeType),`
  `Theme mode:` | String | `'light'`, `'dark'`, | `...appTheme('oceanBlue', 'dark'),`
  `direction:` | String | `ltr`, `rtl`, | `direction: 'rtl'`

  Here's the complete code, for greenLeaf color in dark mode with RTL direction

      // file: app/redux/modules/uiReducer.js
      state = {
        loading: true,
        theme: {
          ...appTheme('greenLeaf', 'dark'),
          direction: 'rtl'
        }
      }

# Youtube Config

This template us React Youtube a simple react component acting as a thin layer over the YouTube IFrame Player API. To use this feature we recommend to use https in production. If not there will be some warnings in browser console related cookies and security.

You can disable this feature by open `/youtube.js` then set set `use: false`.

# Set Language

- ##### To set default language

  1. Open `/i18n.js`
  2. change `defaultLanguage: 'en'` to other initial locale i.e. `id` for Bahasa Indonesia

- ##### Add new language

  1. By default, next-i18next expects your translations to be organised as such by create new language JSON library in `/static/locales/[localCode]/`

         └── static
             └── locales
                 ├── en
                 |   └── common.json
                 └── de
                     └── common.json

  2. You can check the available local code here https://github.com/ladjs/i18n-locales
  3. Then register it in `/i18n.js`
  4. Declaring namespace dependencies in `_document.js`

         MyDocument.getInitialProps = async ctx => {
           return {
             namespacesRequired: ['common', 'landing-theme'],
           }
         })

- ##### Put the messages to the React Components

  1. Choose page that one to be translated, i.e `/pages/index.js`
  2. Then add namespace dependencies

         Landing.getInitialProps = async () => ({
           namespacesRequired: ['common', 'landing-theme'],
         })

  3. Pick one of sample Components with cointaining text
  4. Import withTranslation

         import { withTranslation } from '~/i18n';

  5. Basically the message value is String. And next step is replace/add every string in components
  6. Register `t` function to props

         t: PropTypes.func.isRequired

  7. Add messages inside components

         <Typography component="p">
           {t('landing-theme:footer_counter')}
         <Typography>

  8. The last step, wrap the component with `withTranslation`, then open your translated page.

         export default withTranslation(['landing-theme'])(Counter);