Embedded faq (#246)
* Created draft for embedded faq.html. English only Signed-off-by: S. Kozyr <s.trump@gmail.com> * Added translations to embedded faq Signed-off-by: S. Kozyr <s.trump@gmail.com> * Added Español. Fixed zh-Hans Signed-off-by: S. Kozyr <s.trump@gmail.com> * Added missing "Go to Top" link. Added missing title. Signed-off-by: S. Kozyr <s.trump@gmail.com> * Removed extra <p> tags Signed-off-by: S. Kozyr <s.trump@gmail.com> * Added two more questions to embedded FAQ Signed-off-by: S. Kozyr <s.trump@gmail.com> * Added new translation key 'more-info-om'. Updated embedded-faq.html to use this translation. Signed-off-by: S. Kozyr <s.trump@gmail.com> * Added new translation key 'go-to-top'. Updated embedded-faq.html to use this translation. Signed-off-by: S. Kozyr <s.trump@gmail.com> * Apply comments suggestions from code review Co-authored-by: Alexander Borsuk <170263+biodranik@users.noreply.github.com> Signed-off-by: Sergiy Kozyr <s.trump@gmail.com> * Faq embedded template formatting and fixes Signed-off-by: Alexander Borsuk <me@alex.bio> --------- Signed-off-by: S. Kozyr <s.trump@gmail.com> Signed-off-by: Sergiy Kozyr <s.trump@gmail.com> Signed-off-by: Alexander Borsuk <me@alex.bio> Co-authored-by: Alexander Borsuk <170263+biodranik@users.noreply.github.com> Co-authored-by: Alexander Borsuk <me@alex.bio>
This commit is contained in:
GitHub
parent
19bb7f431d
commit
0dcbd44c4c
4 changed files with 243 additions and 1 deletions
22
config.toml
22
config.toml
|
|
@ -51,12 +51,14 @@ contact = "Contact Us"
|
|||
edit-on-github = "Edit on GitHub"
|
||||
engines = "Supported TTS Engines"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "Go to Top"
|
||||
install-appgallery = "Install Organic Maps from Huawei AppGallery"
|
||||
install-appstore = "Install Organic Maps from the AppStore"
|
||||
install-googleplay = "Install Organic Maps from Google Play"
|
||||
install-fdroid="Install Organic Maps from F-Droid"
|
||||
language = "English"
|
||||
language-word = "Language"
|
||||
more-info-om = "For more information please visit our web-site"
|
||||
name = "Name"
|
||||
token = "Token"
|
||||
|
||||
|
|
@ -156,12 +158,14 @@ contact = "Kontakt"
|
|||
edit-on-github = "Auf GitHub bearbeiten"
|
||||
engines = "Unterstützte TTS-Modelle"
|
||||
faq-menu-title = "FAQ"
|
||||
go-to-top = "Nach oben"
|
||||
install-appgallery = "Installiere Organic Maps aus der Huawei AppGallery"
|
||||
install-appstore = "Installiere Organic Maps aus dem AppStore"
|
||||
install-googleplay = "Installiere Organic Maps von Google Play"
|
||||
install-fdroid = "Installiere Organic Maps aus F-Droid"
|
||||
language = "Deutsch"
|
||||
language-word = "Sprache"
|
||||
more-info-om = "Für weitere Informationen besuchen Sie bitte unsere Website"
|
||||
name = "Name"
|
||||
token = "Token"
|
||||
[languages.es]
|
||||
|
|
@ -176,12 +180,14 @@ contact = "Contacte con nosotros"
|
|||
edit-on-github = "Editar en GitHub"
|
||||
engines = "Compatibilidad con motores TTS"
|
||||
faq-menu-title = "Preguntas frecuentes"
|
||||
go-to-top = "Arriba"
|
||||
install-appgallery = "Instalar Organic Maps desde la AppGallery de Huawei"
|
||||
install-appstore = "Instalar Organic Maps desde el AppStore"
|
||||
install-googleplay = "Instalar Organic Maps desde Google Play"
|
||||
install-fdroid = "Instalar Organic Maps desde F-Droid"
|
||||
language = "Español"
|
||||
language-word = "Idioma"
|
||||
more-info-om = "Para más información, visite nuestro sitio web"
|
||||
name = "Nombre"
|
||||
token = "Ficha"
|
||||
[languages.eu]
|
||||
|
|
@ -216,12 +222,14 @@ contact = "Nous contacter"
|
|||
edit-on-github = "Modifier sur GitHub"
|
||||
engines = "Moteurs TTS pris en charge"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "En haut"
|
||||
install-appgallery = "Installer Organic Maps depuis l'AppGallery de Huawei"
|
||||
install-appstore = "Installer Organic Maps depuis l'AppStore"
|
||||
install-googleplay = "Installer Organic Maps depuis Google Play"
|
||||
install-fdroid = "Installer Organic Maps depuis F-Droid"
|
||||
language = "Français"
|
||||
language-word = "Langue"
|
||||
more-info-om = "Pour plus d'informations, veuillez visiter notre site web"
|
||||
name = "Nom"
|
||||
token = "Jeton"
|
||||
[languages.hi]
|
||||
|
|
@ -378,12 +386,14 @@ contact = "Kontakt z nami"
|
|||
edit-on-github = "Edytuj na GitHub"
|
||||
engines = "Supported TTS Engines"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "Idź na górę"
|
||||
install-appgallery = "Zainstaluj Organic Maps z Huawei AppGallery"
|
||||
install-appstore = "Zainstaluj Organic Maps z AppStore"
|
||||
install-googleplay = "Zainstaluj Organic Maps z Google Play"
|
||||
install-fdroid = "Zainstaluj Organic Maps z F-Droid"
|
||||
language = "Polski"
|
||||
language-word = "Języki"
|
||||
more-info-om = "Aby uzyskać więcej informacji, odwiedź naszą stronę internetową"
|
||||
name = "Nazwa"
|
||||
token = "Token"
|
||||
|
||||
|
|
@ -399,12 +409,14 @@ contact = "Contate-nos"
|
|||
edit-on-github = "Editar no GitHub"
|
||||
engines = "Compatibilidade com TTS"
|
||||
faq-menu-title = "Perguntas frequentes"
|
||||
go-to-top = "Ir para o início"
|
||||
install-appgallery = "Instale Organic Maps a partir da Huawei AppGallery"
|
||||
install-appstore = "Instale Organic Maps a partir da AppStore"
|
||||
install-googleplay = "Instale Organic Maps a partir da Google Play"
|
||||
install-fdroid = "Instale Organic Maps a partir do F-Droid"
|
||||
language = "Português (Brasil)"
|
||||
language-word = "Idioma"
|
||||
more-info-om = "Para mais informações, visite o nosso sítio web"
|
||||
name = "Nome"
|
||||
token = "Token"
|
||||
|
||||
|
|
@ -420,12 +432,14 @@ contact = "Связаться с нами"
|
|||
edit-on-github = "Редактировать на GitHub"
|
||||
engines = "Поддерживаемые TTS движки"
|
||||
faq-menu-title = "Справка"
|
||||
go-to-top = "Наверх"
|
||||
install-appgallery = "Установите Organic Maps из Huawei AppGallery"
|
||||
install-appstore = "Установите Organic Maps из AppStore"
|
||||
install-googleplay = "Установите Organic Maps из Google Play"
|
||||
install-fdroid = "Установите Organic Maps из F-Droid"
|
||||
language = "Русский"
|
||||
language-word = "Язык"
|
||||
more-info-om = "Больше информации на нашем сайте"
|
||||
name = "Название"
|
||||
token = "Токен"
|
||||
|
||||
|
|
@ -462,12 +476,14 @@ contact = "İletişim"
|
|||
edit-on-github = "GitHub'da Düzenle"
|
||||
engines = "Supported TTS Engines"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "Başa Git"
|
||||
install-appgallery = "Organic Maps'i Huawei AppGallery'den İndir"
|
||||
install-appstore = "Organic Maps'i AppStore'dan İndir"
|
||||
install-googleplay = "Organic Maps'i Google Play'den İndir"
|
||||
install-fdroid = "Organic Maps'i F-Droid'den İndir"
|
||||
language = "Türkçe"
|
||||
language-word = "Dil"
|
||||
more-info-om = "Daha fazla bilgi için lütfen web sitemizi ziyaret edin"
|
||||
name = "Ad"
|
||||
token = "Belirteç"
|
||||
|
||||
|
|
@ -483,12 +499,14 @@ contact = "Контакти"
|
|||
edit-on-github = "Редагувати на GitHub"
|
||||
engines = "Supported TTS Engines"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "До початку"
|
||||
install-appgallery = "Встановіть Organic Maps з Huawei AppGallery"
|
||||
install-appstore = "Встановіть Organic Maps з AppStore"
|
||||
install-googleplay = "Встановіть Organic Maps з Google Play"
|
||||
install-fdroid = "Встановіть Organic Maps з F-Droid"
|
||||
language = "Українська"
|
||||
language-word = "Мова"
|
||||
more-info-om = "Для отримання додаткової інформації, будь ласка, відвідайте наш веб-сайт"
|
||||
name = "Назва"
|
||||
token = "Токен"
|
||||
|
||||
|
|
@ -504,12 +522,14 @@ contact = "联系我们"
|
|||
edit-on-github = "在 GitHub 上编辑"
|
||||
engines = "Supported TTS Engines"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "回到顶部"
|
||||
install-appgallery = "从华为应用商店安装Organic Maps"
|
||||
install-appstore = "从Apple AppStore安装Organic Maps"
|
||||
install-googleplay = "从Google Play安装Organic Maps"
|
||||
install-fdroid = "从F-Droid安装Organic Maps"
|
||||
language = "简体中文"
|
||||
language-word = "语言"
|
||||
more-info-om = "要获取更多信息，请访问我们的网站"
|
||||
name = "名称"
|
||||
token = "令牌"
|
||||
|
||||
|
|
@ -557,12 +577,14 @@ contact = "Contacte-nos"
|
|||
edit-on-github = "Edita no GitHub"
|
||||
engines = "Supported TTS Engines"
|
||||
faq-menu-title = "F.A.Q."
|
||||
go-to-top = "Ir para o início"
|
||||
install-appgallery = "Instalar o Organic Maps a partir da Huawei AppGallery"
|
||||
install-appstore = "Instalar o Organic Maps a partir da AppStore"
|
||||
install-googleplay = "Instalar o Organic Maps a partir do Google Play"
|
||||
install-fdroid = "Instalar o Organic Maps a partir do F-Droid"
|
||||
language = "Português"
|
||||
language-word = "Idioma"
|
||||
more-info-om = "Para mais informações, visite o nosso sítio na web"
|
||||
name = "Nome"
|
||||
token = "Token"
|
||||
|
||||
|
|
|
|||
7
content/faq/embedded-faq.md
Normal file
7
content/faq/embedded-faq.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Multilang single page FAQ
|
||||
description: Multilang single page FAQ
|
||||
template: "faq/embedded-faq.html"
|
||||
---
|
||||
|
||||
Static FAQ page to me embedded into Android and iOS apps
|
||||
213
templates/faq/embedded-faq.html
Normal file
213
templates/faq/embedded-faq.html
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Organic Maps: Frequently Asked Questions</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
<style>
|
||||
/* All langs are invisible by default. */
|
||||
[lang] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dark mode support. */
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--primary-color: black;
|
||||
--secondary-color: #555555;
|
||||
--link-color: #1e96f0;
|
||||
--background-color: white;
|
||||
--separator-color: #0e0e0e;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #b5b5b5;
|
||||
--secondary-color: #858585;
|
||||
--link-color: #2ea6ff;
|
||||
--background-color: black;
|
||||
--separator-color: #0a0a0a;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-top: 0.5em;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
color: var(--secondary-color);
|
||||
line-height: 1.4;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
.faq {
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
body {
|
||||
margin-right: 16px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
function getLanguage() {
|
||||
var lang = navigator.language || navigator.userLanguage;
|
||||
var found = location.href.indexOf("?");
|
||||
if (found != -1) {
|
||||
var urlParams = new URLSearchParams(location.href.substr(found));
|
||||
var queryLang = urlParams.get("lang");
|
||||
if (queryLang) lang = queryLang;
|
||||
}
|
||||
return lang;
|
||||
}
|
||||
|
||||
// TODO: Update this list with new translations.
|
||||
var translations = ['en', 'ru', 'de', 'es', 'fr', 'pt', 'pl', 'tr', 'uk', 'zh'];
|
||||
// Show Russian for browsers with these language codes.
|
||||
var canReadRussian = ['ab', 'be', 'kk', 'ky', 'tg', 'uz'];
|
||||
|
||||
// TODO: Properly handle be-EN, he-RU or similar cases.
|
||||
function showLanguage() {
|
||||
var lang = getLanguage();
|
||||
var iso6391 = lang.substring(0, 2);
|
||||
if (canReadRussian.indexOf(iso6391) >= 0) // Array.includes is not supported in Android 5 and 6.
|
||||
lang = 'ru';
|
||||
else if (translations.indexOf(iso6391) >= 0) {
|
||||
if (lang != 'pt-BR')
|
||||
lang = iso6391;
|
||||
} else
|
||||
lang = 'en';
|
||||
|
||||
var elems = document.querySelectorAll('[lang="' + lang + '"]');
|
||||
// Make them visible.
|
||||
for (var i = 0; i < elems.length; ++i) elems[i].style.display = "block";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="showLanguage()">
|
||||
{# List of questions #}
|
||||
{% set faq_questions_en = [
|
||||
"map/how-to-create-a-route",
|
||||
"editing/map-errors",
|
||||
"map/can-not-find-position",
|
||||
"map/cant-download-maps",
|
||||
"map/search-cannot-find-a-place",
|
||||
"app/crash",
|
||||
"voice/cant-hear-instructions",
|
||||
"bookmarks/how-to-export",
|
||||
"bookmarks/how-to-import"
|
||||
] %}
|
||||
|
||||
{% set faq_languages = ["ru", "de", "es", "fr", "pl", "pt", "pt-BR", "tr", "uk", "zh-Hans"] %} {# Predefined list of
|
||||
translation languages #}
|
||||
|
||||
<div class="faq">
|
||||
<h2 lang="en">FAQ</h2>
|
||||
<h2 lang="ru">Часто задаваемые вопросы (FAQ)</h2>
|
||||
<h2 lang="de">FAQ</h2>
|
||||
<h2 lang="es">FAQ</h2>
|
||||
<h2 lang="fr">FAQ</h2>
|
||||
<h2 lang="pt">Perguntas frequentes</h2>
|
||||
<h2 lang="pt-BR">Perguntas frequentes</h2>
|
||||
<h2 lang="pl">FAQ</h2>
|
||||
<h2 lang="tr">SSS</h2>
|
||||
<h2 lang="uk">Часті питання</h2>
|
||||
<h2 lang="zh">常见问题</h2>
|
||||
|
||||
<ul>
|
||||
{% for faq_slug in faq_questions_en -%}
|
||||
{% set faq_page_en = get_page(path = "faq/" ~ faq_slug ~ "/index.md") -%}
|
||||
{% set faq_slug = faq_slug | replace(from="/", to="-") -%}
|
||||
<li class="link">
|
||||
<a lang="en" href="#{{ faq_slug }}">{{ faq_page_en.title }}</a>
|
||||
{#- Add translated pages -#}
|
||||
{% for lang in faq_languages -%}
|
||||
{% set translated_faq_page = faq_page_en.translations | filter(attribute="lang", value=lang) | first -%}
|
||||
{% if not translated_faq_page -%}
|
||||
{{ throw(message="Page 'faq/" ~ faq_slug ~ "/index.md' is not translated into '" ~ lang ~ "'") -}}
|
||||
{%- endif %}
|
||||
<a lang="{{ lang | replace(from="-Hans", to="" ) }}" href="#{{ faq_slug }}">{{ translated_faq_page.title }}</a>
|
||||
{%- endfor %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
|
||||
<h4 lang="en">
|
||||
{{ trans(key="more-info-om", lang="en") }} <a href="https://organicmaps.app/">organicmaps.app</a>
|
||||
</h4>
|
||||
{% for lang in faq_languages %}
|
||||
<h4 lang="{{ lang | replace(from="-Hans", to="" ) }}">
|
||||
{{ trans(key="more-info-om", lang=lang) }} <a href="https://organicmaps.app/{{ lang }}/">organicmaps.app</a>
|
||||
</h4>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
|
||||
{% for faq_slug in faq_questions_en -%}
|
||||
{% set faq_page_en = get_page(path = "faq/" ~ faq_slug ~ "/index.md") -%}
|
||||
<dl id="{{ faq_slug | replace(from="/", to="-" ) }}">
|
||||
<dt>
|
||||
<h3 lang="en">{{ faq_page_en.title }}</h3>
|
||||
{# Add translations -#}
|
||||
{% for lang in faq_languages -%}
|
||||
{%- set translated_faq_page = faq_page_en.translations | filter(attribute="lang", value=lang) | first %}
|
||||
<h3 lang="{{ lang | replace(from="-Hans", to="" ) }}">{{ translated_faq_page.title }}</h3>
|
||||
{%- endfor %}
|
||||
</dt>
|
||||
|
||||
<dd lang="en">
|
||||
{{ faq_page_en.content | safe -}}
|
||||
</dd>
|
||||
{# Add translations -#}
|
||||
{% for lang in faq_languages -%}
|
||||
{% set translated_faq_page = faq_page_en.translations | filter(attribute="lang", value=lang) | first -%}
|
||||
{% set translated_faq_page = get_page(path=translated_faq_page.path) -%}
|
||||
<dd lang="{{ lang | replace(from="-Hans", to="" ) }}">
|
||||
{{ translated_faq_page.content | safe }}
|
||||
</dd>
|
||||
{%- endfor %}
|
||||
</dl>
|
||||
{%- endfor %}
|
||||
|
||||
<a href="#" lang="en">{{ trans(key="go-to-top", lang="en") }}</a>
|
||||
{% for lang in faq_languages -%}
|
||||
<a href="#" lang="{{ lang | replace(from="-Hans", to="" ) }}">{{ trans(key="go-to-top", lang=lang) }}</a>
|
||||
{% endfor %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<body>
|
||||
|
||||
{% set all_categories = get_taxonomy(kind='faq', lang = 'en') %} {# Use English as list of all FAQ categories and questions #}
|
||||
{% set faq_languages = ["ru", "de", "fr", "it", "pl", "pt", "pt-BR", "tr", "uk", "zh-Hans"] %} {# Predefined list of translation languages #}
|
||||
{% set faq_languages = ["ru", "de", "es", "fr", "it", "pl", "pt", "pt-BR", "tr", "uk", "zh-Hans"] %} {# Predefined list of translation languages #}
|
||||
|
||||
<table class="status">
|
||||
<tr class="header">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue