feat: Localize keyboard search page

[darcywong00]

From the Sept 2023 team planning meetings M4 review of websites

While we would like to localize all the websites, it's too much content (keyman and help.keyman), so the immediate priority is the keyboard search page.

• Get the keyboard search strings into Crowdin (may need to be separate from the Keyman project due to syncing
• Have a way for user to select locale

---

Design documents:

• Localize Keyboard Search to design review presentation

From A19S23 standup, we'll also limit the scope to defer rtl / bidirection layout since the entire website would need a revamp.

---

Items to note from preliminary review comments. Some are TODO's

Framework

Using associative arrays to handle the localized strings. The strings will fallback: e.g. es, es-ES, ..., finally en

Not installing locales in the Docker image.

Localized strings will be loaded by
$strings = [domain][locale]

File hierarchy

_includes/locale/strings/
  keyboards/
    en.php
    es.php
  home
    en.php
    es.php
    km.php

TODOs

• How to specify locale:
  • UI - dropdown list near the "Support" tab on the upper right

  • It would be good to look at best practices around embedding locale in query strings vs path or domain etc. We need to consider our technology stack in making this decision.

• Set the lang attribute when using localized strings

[darcywong00]

Possibly use docusaurus along with crowdin...

[darcywong00]

nogo with docusaurus since it needs a static Markdown-generated site.

gettext

Now exploring Gettext CakePHP and .po files

Example
https://www.codeandweb.com/babeledit/tutorials/translation-with-gettext-and-php

Pros:
"Easy" to setup and generate po files

Cons:
Server has to install each locale (Docker image needs to add each locale and they're limited to xx_YY in /etc/locale.gen)

Setup:

1. In /_includes/includes/, create the folder <language>_<region>/LC_MESSAGES/
2. Copy a .po file into this new folder and translate / upload to crowdin
3. Convert .po file to .mo

msgfmt messages.po --output-file=messages.mo

4. Update Dockerfile image to include locale (involves uncommenting a locale in /etc/locale.gen)

[darcywong00]

Using gettext without setting server locale
https://stackoverflow.com/questions/2319060/using-php-gettext-extension-vs-php-arrays-in-multilingual-websites/2319192#2319192

https://forwardforce.io/configure-auto-translation-for-php-using-gettext-apache-and-docker/

[darcywong00]

For adding formatted strings with gettext
https://stackoverflow.com/a/16922727/1836776

Maybe add a wrapper
_s("welcome_string", $user_name) where welcome_string == "Hello %1$s" in the .po

so for the .po, we'd have:

# Welcome string for site visitors
#  parameter 1: string, name of site visitor
msgid "welcome_string"
msgstr "Hi there %1$s!"

And _s would be something like

function _s($s, ...) {
  return sprintf(_($s), ...);
}