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);