Skip to content
This repository has been archived by the owner on Aug 15, 2024. It is now read-only.

Adding Languages

Ray Estrada edited this page Oct 12, 2022 · 8 revisions

Adding a new language

Term Description Example
[LANG-CODE] placement variable for when the 2 character language code for the new language needs to be used. Standardized language codes can be found here: https://www.loc.gov/standards/iso639-2/php/code_list.php English: en, Spanish: es, French: fr

1. Adding the translation data to the codebase

  1. Within config/_default/languages.json add the global configuration information for the new language.

    1. Below is an example of the format done in English and a description of each parameter value. This step initializes the language in the Hugo environment and provides some global parameters to the template. Check that each value is included in the new language's configuration.

      Example Format:

        "en": {
          "contentDir": "content/en",
          "title": "Voter Registration",
          "languageName": "English",
            …
          }
      
    2. Global Value Descriptions:

      • "en": 2 character [LANG-CODE]. Use this code list for reference: https://www.loc.gov/standards/iso639-2/php/code_list.php
      • "contentDir": Points to the location of the language's markdown files in the content folder. Each language's content directory is set using the contentDir param and must be "content/<language code>".
      • "title": How the title of the page should appear in the browser tab translated from "Voter Registration".
      • "languageName": Endonymic name of the language.
      • "weight": Order it displays in the language selector list.
      • "Owner": The text that appears above the site logo in the navigation bar.
      • "language_direction": The direction the language is read in.
        • "ltr" for languages that are written from the left to the right (like English)
        • "rtl" for languages that are written from the right to the left (like Arabic)
      • "publishDir": Points to the location of where the files are getting generated and must be tmp/public/[LANG-CODE].
      • "register_path": The path segment for the registered value. In English it's "register" and in Spanish it's "registrar". All other translations will use the english "register" path.
      • "go_back": "Go back" translated to the language being added.
      • "skip_text": "Skip to main content" translated to the language being added.
      • "meta__title": "Register to vote" translated to the language being added.
      • "meta__description": "Find voter registration options in your state." translated to the language being added.
      • "english_only": "(in English)" translated to the language being added.
      • "last_updated": "Last Updated" translated to the language being added.
      • "select_language": "Select Language" translated to the language being added.
      • "english_languageName": The English name of the language being added.
  2. Create a new folder to hold the template data in data/translations/[LANG-CODE]. Distribute the translated data into individual JSON files following this structure:

        data
        └─── translations
            └─── [LANG-CODE]
                │   accordion.json
                │   day_number.json
                │   error.json
                │   footer.json
                │   homepage.json
                │   months.json
                │   register.json
                │   state_data.json
                │   years.json            
    

2. Compiling the content and testing

  1. npm run build to convert the data json into markdown content files.
  2. npm start to test.
  3. Navigate to a state page and check that the "Last Updated" date is formatted properly according to the translation provided. Check that Hugo's date format function properly translates the date. If it does not you will need to create a custom format in layouts/partials/date.html.

3. Updating state data

  1. If you try to edit the .md content files directly, they will be overridden by gulp. Follow these steps to edit state data safely.
    1. Add or edit state data in data/translations/[LANG-CODE]/state-data.json
    2. Run npm run build to regenerate the content files