Add proper FAQ page and TTS instructions

Signed-off-by: meenbeese <meenbeese@tutanota.com>
Signed-off-by: S. Kozyr <s.trump@gmail.com>
Signed-off-by: Alexander Borsuk <me@alex.bio>

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 public
 translations.yaml
+.idea/*

README.md

@@ -25,6 +25,64 @@ Every merge into the _master_ branch deploys changes into the production at http
 Run `npm run news` to automatically download news from our [Telegram channel](https://t.me/OrganicMapsApp),
 then create a git commit and push it.
 
+## Taxonomy and F.A.Q. architecture
+
+Each MD page in `/faq/` has one or more taxonomy defined in header. E.g.:
+
+```yaml
+taxonomies:
+  faq: ["Android"]
+```
+
+Zola collects all such taxonomies:
+
+| File                 | Taxonomy key | Taxonomy value |
+| -------------------- | ------------ | -------------- |
+| android-lags.md      | `faq`        | `Android`      |
+| android-logs.md      | `faq`        | `Android`      |
+| general-team.md      | `faq`        | `General`      |
+| general-bugreport.md | `faq`        | `General`      |
+| ios-versions.md      | `faq`        | `iOS`          |
+| map-longtap.md       | `faq`        | `Map`          |
+| ...                  | ...          | ...            |
+
+After that Zola gets all values for `faq` taxonomy: `[General, Android, iOS, Map, ...]`. And generates pages:
+
+* For key `/faq/` with the list of values (see `templates/faq/list.html`)
+* For each value `/faq/general`, `/faq/android`, etc. with the list of questions (see `templates/faq/single.html`)
+
+If you want to add new question then create .md file with header:
+
+```yaml
+title: A full question that is the title of the page
+description: More detailed info with necessary keywords for better SEO
+slug: the-url-of-the-page-that-can-be-localized-for-better-seo
+taxonomies:
+  faq: ["General"]
+extra:
+  order: 40
+```
+
+Zola will add your question to specific F.A.Q. sub-page.
+
+If you need to translate the FAQ to a new language please add next lines to config.toml:
+
+```toml
+[languages.XX]
+taxonomies = [
+  {name = "faq", feed = false},
+]
+[languages.XX.translations]
+faq-menu-title = "{Translation of 'F.A.Q.' to a new language}"
+```
+
+**Limitation**: List of taxonomies at `/faq/` page is always alphabetical. So 'Android' is always the first, 'Bookmarks' is the second, 'General' is the third and so on.
+
+**Limitation**: Questions at any F.A.Q. sub-page are sorted by file name. An `extra.order` variable in .md content files is used for sorting articles.
+
+**Limitation**: Each F.A.Q. sub-page has only a name. No description, no icon. Only name 'Android', or 'iOS', or 'Routing', etc.
+
+
 ## Contribution
 
 Any good ideas and help with web site improvement are appreciated. And it's always better to discuss

config.toml

@@ -15,6 +15,10 @@ build_search_index = false
 
 ignored_content = [".DS_Store"]
 
+taxonomies = [
+  {name = "faq", feed = false},
+]
+
 [markdown]
 external_links_target_blank = true
 
@@ -31,6 +35,7 @@ stripe_usd = "https://donate-usd.organicmaps.app/"
 address = "Address"
 back = "Back to News"
 contact = "Contact Us"
+engines = "Supported TTS Engines"
 install-appgallery = "Install Organic Maps from Huawei AppGallery"
 install-appstore = "Install Organic Maps from the AppStore"
 install-googleplay = "Install Organic Maps from Google Play"
@@ -38,6 +43,7 @@ install-fdroid="Install Organic Maps from F-Droid"
 language = "English"
 name = "Name"
 token = "Token"
+faq-menu-title = "F.A.Q"
 
 # Please sort all other translation sections and values in alphabetical order.
 [languages.de]
@@ -89,10 +95,14 @@ language = "Polski"
 name = "Nazwa"
 token = "Token"
 [languages.ru]
+taxonomies = [
+  {name = "faq", feed = false},
+]
 [languages.ru.translations]
 address = "Адрес"
 back = "Назад к новостям"
 contact = "Связаться с нами"
+engines = "Поддерживаемые TTS движки"
 install-appgallery = "Установите Organic Maps из Huawei AppGallery"
 install-appstore = "Установите Organic Maps из AppStore"
 install-googleplay = "Установите Organic Maps из Google Play"
@@ -100,6 +110,8 @@ install-fdroid = "Установите Organic Maps из F-Droid"
 language = "Русский"
 name = "Название"
 token = "Токен"
+faq-menu-title = "Справка"
+
 [languages.tr]
 [languages.tr.translations]
 address = "Adres"

content/_index.md

@@ -114,4 +114,4 @@ Organic Maps is an [open-source software][github] licensed under the Apache Lice
 
 [fork]: https://en.wikipedia.org/wiki/Fork_(software_development)
 
-{{ references() }}
+{{ references() }}

content/faq/_index.md

@@ -0,0 +1,9 @@
+---
+title: Frequently Asked Questions
+description: This FAQ has answers to many questions about Organic Maps app, our contributors, and our project
+extra:
+  menu_title: F.A.Q.
+---
+
+### This page is replaced with taxonomy "faq" from templates/faq/list.html template
+This file is needed for top_menu.html and bottom_menu.html templates to show F.A.Q.

content/faq/_index.ru.md

@@ -0,0 +1,9 @@
+---
+title: Справка и часто задаваемые вопросы
+description: Ответы на вопросы о приложении Organic Maps и о нашем проекте
+extra:
+  menu_title: Справка
+---
+
+### This page is replaced with taxonomy "faq" from templates/faq/list.html template
+This file is needed for top_menu.html and bottom_menu.html templates to show F.A.Q.

content/faq/text-to-speech-android-tts/index.md

@@ -0,0 +1,62 @@
+---
+title: Text-to-Speech on Android
+description: Guide on how to make TTS work on Android
+
+taxonomies:
+  faq: ["Voice Directions"]
+
+extra:
+  order: 10
+---
+
+## Summary
+
+Organic Maps uses the system text-to-speech (TTS) engine for voice instructions. The default engines vary by device. The choices can include Google Text-to Speech, device manufacturer's engine or a third-party one.
+
+The official recommendation from Organic Maps is [RHVoice](https://rhvoice.org/), which is a free and open source speech engine that can be downloaded from [Google Play](https://play.google.com/store/apps/details?id=com.github.olga_yakovleva.rhvoice.android) and [F-Droid](https://f-droid.org/en/packages/com.github.olga_yakovleva.rhvoice.android/).
+
+## Instructions
+
+- Open the Settings app on your Android device.
+- Select Additional Settings and then select Accessibility.
+- Choose your preferred engine, speech rate and pitch.
+
+If you cannot find the relevant setting, open the settings app and search for Text-to-speech.
+
+P.S: Do note that these steps will vary based on the phone brand you are using.
+
+Said options may not appear if you don't have a TTS already installed on your device. Please refer to the table below to install any one of them that supports your native language.
+
+## Screenshots
+
+|             |             |             |
+| ----------- | ----------- | ----------- |
+![Settings](tts_config_1.jpg "Settings") | ![Additional Settings](tts_config_2.jpg "Additional Settings")|![Accessibility](tts_config_3.jpg "Accessibility")
+
+## Engines {#engines}
+
+Below is a comprehensive list showing several engines and the languages they support (download links can be found after the table):
+
+{{ tts_table() }}
+
+## Workarounds
+
+If you’re having trouble initializing the RHVoice TTS engine on LineageOS or other custom ROMs, try this workaround. RHVoice may not initialize properly and the app may crash, especially if you haven’t used any TTS engine on your phone before (e.g., new installation, factory reset, etc.). If you’re using a custom ROM like LineageOS <ins>without Google Play services and Speech Services by Google</ins>, and you want to use RHVoice as your preferred TTS engine, follow the instructions below as a workaround:
+
+1. Install the [eSpeak TTS engine](https://f-droid.org/en/packages/com.reecedunn.espeak) available on F-Droid
+2. Set it as the preferred system engine
+    - Go to LineageOS main **Settings**.
+    - Scroll down to **Accessibility**.
+    - Select **text-to-speech output** and **Preferred engine** (left side) and make sure **eSpeak** is selected.
+3. Go back and press **play** to see if it is working
+4. Install [RHVoice](https://f-droid.org/en/packages/com.github.olga_yakovleva.rhvoice.android/) available on F-droid.
+    - Open it, select the language you want to use, tap on the cloud icon (far left) to download voices.
+    - Press play button to verify if it is working
+5. Set **RHVoice** as preferred engine (see step 2)
+6. Now, you should be able to use RHVoice without any problems
+
+## Testing
+
+In order to test the voice instructions, you can tap on "Test Voice Directions (TTS, Text-To-Speech)" in OM "Settings → Voice Instructions" menu or you can actually start a navigation to receive any voice output. Organic Maps will not give you any voice instructions while you're standing still.
+
+![TTS Test](tts_test.png "TTS Test")

content/faq/text-to-speech-android-tts/index.ru.md

@@ -0,0 +1,63 @@
+---
+title: Синтез речи (Text-to-Speech, TTS) на Android
+description: Как настроить озвучку навигатора в Organic Maps на Android
+slug: синтез-речи-tts-на-android
+
+taxonomies:
+  faq: ["Голосовые подсказки"]
+
+extra:
+  order: 10
+---
+
+## Общая информация
+
+Organic Maps использует системные службы (движки) и настройки преобразования текста в речь (TTS) для голосовых инструкций. На разных устройствах используются разные движки по умолчанию. Можно выбрать Google Text-to Speech, движок производителя устройства (например, Samsung) или сторонний движок.
+
+Если системные движки вас не устраивают, можете попробовать установить [RHVoice](https://rhvoice.org/), это бесплатный речевой движок с открытым исходным кодом, который можно загрузить из [Google Play](https://play.google.com/store/apps/details?id=com.github.olga_yakovleva.rhvoice.android) и [F-Droid](https://f-droid.org/en/packages/com.github.olga_yakovleva.rhvoice.android/).
+
+## Инструкции
+
+- Откройте приложение "Настройки" на устройстве Android.
+- Выберите Дополнительные настройки, а затем выберите Доступность.
+- Выберите предпочтительный движок, скорость речи и высоту тона.
+
+Если вы не можете найти нужный параметр, откройте приложение "Настройки" и найдите "Текст в речь".
+
+P.S.: Обратите внимание, что эти шаги зависят от марки используемого телефона.
+
+Указанные опции могут не отображаться, если на вашем устройстве еще не установлен TTS. Обратитесь к таблице ниже, чтобы установить любой из них, поддерживающий ваш родной язык.
+
+## Скриншоты
+
+|             |             |             |
+| ----------- | ----------- | ----------- |
+| <img src="tts_config_1.jpg" width="400" alt="Настройка TTS"> | <img src='tts_config_2.jpg' width='400' alt='Screenshot 2'> | <img src='tts_config_3.jpg' width='400' alt='Screenshot 3'> |
+
+## Движки синтеза речи
+
+Ниже приведен полный список с указанием нескольких движков и поддерживаемых ими языков (ссылки на скачивание находятся после таблицы):
+
+{{ tts_table() }}
+
+## Проблемы с RHVoice
+
+Если у вас возникли проблемы с инициализацией механизма RHVoice TTS в LineageOS или других кастомных прошивках, попробуйте следующее. RHVoice может инициализироваться неправильно, и приложение может крешнуться, особенно если вы раньше не использовали какой-либо движок TTS на своем телефоне (например, новая установка, сброс настроек к заводским настройкам и т. д.). Если вы используете пользовательскую прошивку, например, LineageOS *без сервисов Google Play и речевых сервисов Google*, и вы хотите использовать RHVoice в качестве предпочтительного движка TTS, следуйте приведенным ниже инструкциям:
+
+1. Установите [eSpeak TTS engine](https://f-droid.org/en/packages/com.reecedunn.espeak), доступный на F-Droid.
+2. Установите его в качестве предпочтительного системного движка
+    - Перейдите в главный раздел LineageOS **Настройки**.
+    - Прокрутите вниз до **Доступность**.
+    - Выберите **Вывод текста в речь** и **Предпочитаемый движок** (слева) и убедитесь, что выбран **eSpeak**.
+3. Вернитесь назад и нажмите **play**, чтобы проверить, работает ли он.
+4. Установите программу [RHVoice](https://f-droid.org/en/packages/com.github.olga_yakovleva.rhvoice.android/), доступную на F-droid.
+    - Откройте его, выберите язык, который хотите использовать, нажмите на значок облака (крайний слева), чтобы загрузить голоса.
+    - Нажмите кнопку воспроизведения, чтобы проверить, работает ли он.
+5. Установите **RHVoice** в качестве предпочтительного движка (см. шаг 2).
+6. Теперь вы сможете использовать RHVoice без каких-либо проблем
+
+## Проверка синтеза речи
+
+Чтобы проверить голосовые инструкции, вы можете нажать на "Проверить голосовые подсказки (TTS, Text-To-Speech)" в меню OM "Настройки → Голосовые инструкции" или начать навигацию, чтобы услышать голосовые инструкции. Пока вы стоите на месте, голосовых инструкций не будет.
+
+<img src='tts_test.png' style='width:100%; max-width:400px' alt='Проверка работы синтеза речи'>

templates/base.html

@@ -1,7 +1,20 @@
 {%- if page %}
 {%- set resource = page %}
+{%- set resource_title = resource.title %}
+{%- set resource_path = resource.path %}
 {%- elif section %}
 {%- set resource = section %}
+{%- set resource_title = resource.title %}
+{%- set resource_path = resource.path %}
+{%- elif term %}
+{%- set resource = term %}{# taxonomy term has only 'name', 'slug' and 'path' properties #}
+{%- set resource_path = resource.path %}
+{%- set resource_title = resource.name %}
+{%- elif taxonomy %}{# taxonomy has only 'name' and 'slug' properties #}
+{% set resource = taxonomy.name ~ "/_index.md" %}
+{% set resource = get_section(path=resource) %}
+{%- set resource_title = resource.title %}
+{%- set resource_path = resource.path %}
 {%- endif %}
 
 <!DOCTYPE html>
@@ -13,13 +26,17 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 
+  {% block meta_description %}
+  {%- if resource.description -%}
   <meta name="description" content="{{ resource.description }}">
+  {% endif %}
+  {% endblock %}
 
   {% block rss %}
   <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
   {% endblock %}
 
-  <link rel="canonical" href="{{ config.base_url | safe }}{{ resource.path | safe }}">
+  <link rel="canonical" href="{{ config.base_url | safe }}{{ resource_path | safe }}">
 
   {%- set preview_image = 'images/screenshots/prague.jpg' -%}
   {%- if resource.extra.preview_image -%}
@@ -27,19 +44,19 @@
   {%- elif resource.assets %}
   {%- set basename = resource.assets[0] | split(pat='/') | last %}
   {%- if basename is ending_with('.jpg') or basename is ending_with('.jpeg') or basename is ending_with('.png') or basename is ending_with('.webp') %}
-  {%- set preview_image = resource.path ~ basename -%}
+  {%- set preview_image = resource_path ~ basename -%}
   {%- endif %}
   {%- endif %}
   <meta property="og:image" content="{{ get_url(path=preview_image) }}">
   <meta property="og:url" content="{{ current_url | safe }}">
   <meta property="og:type" content="website">
-  <meta property="og:title" content="{{ resource.title }}">
+  <meta property="og:title" content="{{ resource_title }}">
   {%- if resource.description -%}
   <meta property="og:description" content="{{ resource.description }}">
   {%- endif -%}
 
   <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="{{ resource.title }}">
+  <meta name="twitter:title" content="{{ resource_title }}">
   {%- if resource.description -%}
   <meta name="twitter:description" content="{{ resource.description }}">
   {%- endif -%}
@@ -57,7 +74,7 @@
 
   <link href="{{ get_url(path="main.css", cachebust=true) }}" rel="stylesheet" type="text/css">
 
-  <title>{{ resource.title }}</title>
+  <title>{{ resource_title }}</title>
 
   {%- if lang == config.default_language %}
   {% include 'language_redirect.html' %}
@@ -70,6 +87,9 @@
   </header>
 
   <main>
+  {% if page.taxonomies and page.taxonomies.faq %}{# Show FAQ breadcrumbs #}
+    {% include 'faq/faq-breadcrumbs.html' %}
+  {% endif %}
     {% block content %}{% endblock %}
   </main>
 

templates/bottom_menu.html

@@ -13,9 +13,9 @@
   {% endif %}
 
   {% if page.extra.menu_title %}
-  {% if resource.path != page.path %}<a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% endif %}
+  {% if resource_path != page.path %}<a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% endif %}
     <span>{{ page.extra.menu_title }}</span>
-    {%- if resource.path != page.path %}</a>{% endif %}
+    {%- if resource_path != page.path %}</a>{% endif %}
   &nbsp;
   {% endif %}
   {% endfor %}
@@ -23,4 +23,4 @@
   <a href="https://omaps.app/api" title="How to open Organic Maps from other apps and pass the data back">API</a>
   &nbsp;
   <a href="mailto:hello@organicmaps.app">{{ trans(key='contact', lang=lang) }}</a>
-</nav>
+</nav>

templates/faq/faq-breadcrumbs.html

@@ -0,0 +1,18 @@
+{# Build breadcrumbs in form:
+F.A.Q. Android • Bookmarks • General • iOS • Map • Routing • TTS
+
+If we generate /faq/android/, or /faq/general, or etc page then `term` variable is
+available with selected FAQ term.
+#}
+<p class="faq-breadcrumbs">
+    <span class="faq-title">{{ trans(key='faq-menu-title', lang=lang) }}</span>
+    {% set categories = get_taxonomy(kind='faq', lang=lang) | get(key="items") %}
+    {% for item in categories %}
+        •
+        {% if term and term.name == item.name %} {# Do not show link for current FAQ term #}
+            <span class="faq-taxonomy">{{ item.name }}</span>
+        {% else %}
+            <a href="{{ item.permalink }}" class="faq-taxonomy">{{ item.name }}</a>
+        {% endif %}
+    {% endfor %}
+</p>

templates/faq/list.html

@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+
+{% block content %}
+  <h1>{{ trans(key='faq-menu-title', lang=lang) }}</h1>
+  {%- for term in terms -%}
+  <h3><a href="{{term.permalink}}">{{term.name}}</a></h3>
+  <ul>
+    {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
+      <li><a href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></li>
+    {%- endfor -%}
+  </ul>
+  {%- endfor -%}
+{% endblock content %}

templates/faq/single.html

@@ -0,0 +1,9 @@
+{% extends 'base.html' %}
+
+{% block content %}
+  {% include 'faq/faq-breadcrumbs.html' %}
+  <h2>{{ term.name }}</h2>
+  {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
+  <h3><a href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></h3>
+  {%- endfor -%}
+{% endblock %}

templates/language_redirect.html

@@ -4,7 +4,7 @@
 // there were no previous redirects or explicit language selections before (see language_seletor.html)
 if (null === window.localStorage.getItem('lang')) {
   // ["en", "ru", ...]
-  var pageTranslations = {{ resource.translations | map(attribute="lang") | sort | json_encode() | safe }};
+  var pageTranslations = {{ resource | get(key="translations", default=[]) | map(attribute="lang") | sort | json_encode() | safe }};
   var userPreferredLanguages = navigator.languages ? navigator.languages : [navigator.language];
   outerLoop:
   for (var i = 0; i < userPreferredLanguages.length; i++) {

templates/language_selector.html

@@ -6,7 +6,8 @@
     }
   </script>
   <!-- Hidden checkbox is used for pure CSS toggle menu. -->
-  {% if resource.translations | length > 1 %}
+  {% set translations = resource | get(key="translations", default=[]) %}
+  {% if translations | length > 1 %}
   <input type="checkbox" id="lang-menu-trigger" class="lang-menu-trigger" />
   {% endif %}
   <label class="no-print" for="lang-menu-trigger">
@@ -14,7 +15,7 @@
   </label>
 
   <ul class="lang-menu no-print" role="navigation">
-    {% for translation in resource.translations | sort(attribute="lang") %}
+    {% for translation in translations | sort(attribute="lang") %}
     {% if lang != translation.lang %}
     <li class="lang-menu-item" role="menuitem">
       <a class="lang-menu-link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink | replace(from=config.base_url, to="") | safe }}">

templates/news/page.html

@@ -10,7 +10,7 @@
 
 {% for photo in resource.assets | sort %}
 {% set meta = get_image_metadata(path=photo) %}
-<img class="news_image{% if meta.width > meta.height %}_landscape{% endif %}" src="{{ resource.path | safe }}{{ photo | split(pat='/') | last }}" />
+<img class="news_image{% if meta.width > meta.height %}_landscape{% endif %}" src="{{ resource_path | safe }}{{ photo | split(pat='/') | last }}" />
 {% endfor %}
 
 <div class="back_to_news">

templates/page.html

@@ -1,3 +1,5 @@
+{# Generic template for any page -#}
+
 {% extends 'base.html' %}
 
 {% block content %}

templates/shortcodes/tts_table.md

@@ -0,0 +1,101 @@
+
+{{ trans(key='language', lang=lang) }} |   {{ trans(key='engines', lang=lang) }}
+:------------------|:----------------------------------------------------------
+Afrikaans          |   eSpeak
+Albanian           |   RHVoice, eSpeak
+Arabic             |   Vocalizer, Acapela, Nuance
+Aragonese          |   eSpeak
+Armenian           |   eSpeak
+Basque             |   Vocalizer, Nuance
+Bengal             |   Vocalizer, Google, Nuance
+Bhojpuri           |   Vocalizer, Nuance
+Bulgarian          |   Vocalizer, Nuance, eSpeak
+Cantonese          |   Vocalizer, Google, Nuance, eSpeak
+Catalan            |   Vocalizer, Acapela, Nuance, eSpeak
+Croatian           |   Vocalizer, Nuance, eSpeak
+Czech              |   Vocalizer, Acapela, Nuance, eSpeak
+Danish             |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Dongbei            |   Vocalizer
+Dutch (BE)         |   Vocalizer, Nuance
+Dutch (NL)         |   Vocalizer, Google, Acapela, Ivona, Nuance
+English (AU)       |   Vocalizer, Google, Acapela, Nuance, RHVoice
+English (IE)       |   Vocalizer, Nuance
+English (IN)       |   Vocalizer, Google, Acapela, Nuance
+English (SCT)      |   Vocalizer, Nuance, RHVoice
+English (UK)       |   Vocalizer, Google, Acapela, Yandex, RHVoice, eSpeak
+English (US)       |   Vocalizer, Google, Acapela, Ivona, Yandex, Nuance, RHVoice, eSpeak
+English (ZA)       |   Vocalizer, Nuance
+Esperanto          |   RHVoice, eSpeak
+Estonian           |   eSpeak
+Faroese            |   Acapela
+Farsi              |   Vocalizer, Nuance, eSpeak
+Finnish            |   Vocalizer, Google, Acapela, Nuance, eSpeak
+French (BE)        |   Vocalizer
+French (CA)        |   Vocalizer, Nuance
+French (FR)        |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Galician           |   Vocalizer, Nuance
+Georgian           |   RHVoice, eSpeak
+German             |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Greek              |   Vocalizer, Acapela, Nuance, eSpeak
+Hebrew             |   Vocalizer, Nuance
+Hindi              |   Vocalizer, Nuance, eSpeak
+Hungarian          |   Vocalizer, Google, Nuance, eSpeak
+Icelandic          |   eSpeak
+Indonesian         |   Vocalizer, Google, Nuance, eSpeak
+Irish              |   eSpeak
+Italian            |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Japanese           |   Vocalizer, Google, Acapela, Nuance
+Kannada            |   Vocalizer, Nuance, eSpeak
+Korean             |   Vocalizer, Google, Acapela, Nuance
+Kurdish            |   eSpeak
+Kyrgyz             |   RHVoice
+Latvian            |   eSpeak
+Lithuanian         |   eSpeak
+Lojban             |   eSpeak
+Macedonian         |   RHVoice, eSpeak
+Malay              |   Vocalizer, Nuance, eSpeak
+Malayalam          |   eSpeak
+Mandarin (CN)      |   Vocalizer, Acapela, eSpeak
+Mandarin (TW)      |   Vocalizer, Google, Nuance
+Marathi            |   Vocalizer, Nuance
+Nepalese           |   eSpeak
+Norwegian          |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Polish             |   Vocalizer, Google, Acapela, Ivona, Nuance, RHVoice, eSpeak
+Portuguese (BR)    |   Vocalizer, RHVoice
+Portuguese (PT)    |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Punjabi            |   eSpeak
+Romanian           |   Vocalizer, Ivona, Nuance, eSpeak
+Russian            |   Vocalizer, Google, Acapela, Ivona, Yandex, RHVoice, eSpeak
+Serbian            |   eSpeak
+Shaanxi            |   Vocalizer
+Shanghainese       |   Vocalizer
+Sichuanese         |   Vocalizer
+Slovak             |   Vocalizer, Nuance, eSpeak
+Slovenian          |   Vocalizer
+Spanish (AR)       |   Vocalizer, Nuance
+Spanish (CL)       |   Vocalizer, Nuance
+Spanish (CO)       |   Vocalizer
+Spanish (ES)       |   Vocalizer, Google, Acapela, Ivona, Nuance, eSpeak
+Spanish (MX)       |   Vocalizer
+Swahili            |   eSpeak
+Swedish            |   Vocalizer, Ivona, Nuance, eSpeak
+Tamil              |   Vocalizer, Nuance, eSpeak
+Telugu             |   Vocalizer
+Tatar              |   RHVoice
+Thai               |   Vocalizer, Google, Nuance
+Turkish            |   Vocalizer, Google, Acapela, Ivona, Yandex, Nuance, eSpeak
+Ukrainian          |   Vocalizer, Nuance, RHVoice
+Valencian          |   Vocalizer
+Vietnamese         |   Vocalizer, Nuance, eSpeak
+Welsh              |   eSpeak
+
+---
+
+- [Acapela Voices TTS](https://play.google.com/store/apps/details?id=com.acapelagroup.android.tts)
+- [Amazon Ivona TTS](https://apkpure.com/ivona-text-to-speech-hq/com.ivona.tts/download)
+- [eSpeak TTS](https://f-droid.org/en/packages/com.reecedunn.espeak/)
+- [Google Speech Services](https://play.google.com/store/apps/details?id=com.google.android.tts)
+- [RHVoice TTS)](https://play.google.com/store/apps/details?id=com.github.olga_yakovleva.rhvoice.android)
+- [Vocalizer (Code Factory)](https://play.google.com/store/apps/details?id=es.codefactory.vocalizertts)
+- [Vocalizer 2 (Nuance)](https://nvda.ru/sintezatory-rechi-vocalizer-expressive2-dlja-nvda#)
+- [Yandex SpeechKit TTS](https://4pda.to/forum/index.php?showtopic=200728&st=4200#download)

templates/top_menu.html

@@ -8,7 +8,8 @@
     {% for page in [
       get_section(path="news/_index.md"),
       get_page(path="donate/index.md"),
-      get_page(path="support-us/index.md")
+      get_page(path="support-us/index.md"),
+      get_section(path="faq/_index.md"),
     ] %}
     {% set translated = page.translations | filter(attribute='lang', value=lang) | first %}
     {% if translated %}
@@ -18,10 +19,10 @@
         {% set page = get_page(path=translated.path) %}
       {% endif %}
     {% endif %}
-    <span class="top_menu_{{ page.path | split(pat="/") | reverse | nth(n=1) }} top_menu_item{% if page.path != resource.path %}">
+    <span class="top_menu_{{ page.path | split(pat="/") | reverse | nth(n=1) }} top_menu_item{% if page.path != resource_path %}">
       <a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% else %}_active">{% endif %}
         <span>{{ page.extra.menu_title }}</span>
-        {%- if page.path != resource.path %}</a>{% endif %}
+        {%- if page.path != resource_path %}</a>{% endif %}
     </span>
     •
     {% endfor %}