Improved passing i18n values to JavaScript

This commit is contained in:
squidfunk 2017-10-18 20:26:00 +02:00 committed by Martin Donath
parent ae0ef54212
commit 00911b7350
14 changed files with 98 additions and 73 deletions

File diff suppressed because one or more lines are too long

View File

@ -19,6 +19,15 @@
{% elif config.site_author %}
<meta name="author" content="{{ config.site_author }}">
{% endif %}
{% for key in [
"search-languages",
"search-result-none",
"search-result-one",
"search-result-other",
"search-tokenizer"
] %}
<meta name="i18n-{{ key }}" content="{{ lang.t(key) }}">
{% endfor %}
{% if config.site_favicon %}
<link rel="shortcut icon" href="{{ base_url }}/{{ config.site_favicon }}">
{% else %}
@ -120,7 +129,7 @@
<article class="md-content__inner md-typeset">
{% block content %}
{% if config.edit_uri %}
<a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-icon md-content__icon">&#xE3C9;</a>
<a href="{{ page.edit_url }}" title="{{ lang.t('edit-link-title') }}" class="md-icon md-content__icon">&#xE3C9;</a>
{% endif %}
{% if not "\x3ch1" in page.content %}
<h1>{{ page.title | default(config.site_name, true)}}</h1>
@ -128,7 +137,7 @@
{{ page.content }}
{% block source %}
{% if page.meta.source %}
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
<h2 id="__source">{{ lang.t("meta-source") }}</h2>
{% set path = (page.meta.path | default([""]) | first) %}
{% for file in page.meta.source %}
<a href="{{ [config.repo_url, path, file] | join('/') }}" title="{{ file }}" class="md-source-file">
@ -140,7 +149,7 @@
{% endblock %}
{% block disqus %}
{% if config.extra.disqus and not page.is_homepage %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
<h2 id="__comments">{{ lang.t("meta-comments") }}</h2>
{% include "partials/disqus.html" %}
{% endif %}
{% endblock %}
@ -153,8 +162,8 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-683e1b679e.js"></script>
{% set languages = lang.t("search.languages").split(",") %}
<script src="{{ base_url }}/assets/javascripts/application-8591b4244d.js"></script>
{% set languages = lang.t("search-languages").split(",") %}
{% if languages | length and languages[0] != "" %}
{% set path = base_url + "/assets/javascripts/lunr" %}
<script src="{{ path }}/lunr.stemmer.support.js"></script>

View File

@ -11,7 +11,7 @@
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.previous") }}
{{ lang.t("footer-previous") }}
</span>
{{ page.previous_page.title }}
</span>
@ -23,7 +23,7 @@
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.next") }}
{{ lang.t("footer-next") }}
</span>
{{ page.next_page.title }}
</span>

View File

@ -1,17 +1,17 @@
{% macro t(key) %}{{ {
"language": "en",
"edit.link.title": "Edit this page",
"footer.previous": "Previous",
"footer.next": "Next",
"meta.comments": "Comments",
"meta.source": "Source",
"search.languages": "",
"search.placeholder": "Search",
"search.result.placeholder": "Type to start searching",
"search.result.none": "No matching documents",
"search.result.one": "1 matching document",
"search.result.other": "# matching documents",
"search.tokenizer": "[\s\-]+",
"source.link.title": "Go to repository",
"toc.title": "Table of contents"
"edit-link-title": "Edit this page",
"footer-previous": "Previous",
"footer-next": "Next",
"meta-comments": "Comments",
"meta-source": "Source",
"search-languages": "",
"search-placeholder": "Search",
"search-result-placeholder": "Type to start searching",
"search-result-none": "No matching documents",
"search-result-one": "1 matching document",
"search-result-other": "# matching documents",
"search-tokenizer": "[\s\-]+",
"source-link-title": "Go to repository",
"toc-title": "Table of contents"
}[key] }}{% endmacro %}

View File

@ -3,15 +3,15 @@
<label class="md-search__overlay" for="search"></label>
<div class="md-search__inner">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
<input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search-placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
<label class="md-icon md-search__icon" for="search"></label>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset">&#xE5CD;</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result" data-md-lang-search="{{ lang.t('search.languages') }}" data-md-lang-tokenizer="{{ lang.t('search.tokenizer') }}">
<div class="md-search-result__meta" data-md-lang-result-none="{{ lang.t('search.result.none') }}" data-md-lang-result-one="{{ lang.t('search.result.one') }}" data-md-lang-result-other="{{ lang.t('search.result.other') }}">
{{ lang.t("search.result.placeholder") }}
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
{{ lang.t("search-result-placeholder") }}
</div>
<ol class="md-search-result__list"></ol>
</div>

View File

@ -10,7 +10,7 @@
{% set repo_type = "" %}
{% endif %}
{% block repo %}
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source" data-md-source="{{ repo_type }}">
<a href="{{ config.repo_url }}" title="{{ lang.t('source-link-title') }}" class="md-source" data-md-source="{{ repo_type }}">
{% if repo_type %}
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">

View File

@ -5,22 +5,22 @@
{% set toc_ = (toc_ | first).children %}
{% endif %}
{% if toc_ | first is defined %}
<label class="md-nav__title" for="toc">{{ lang.t("toc.title") }}</label>
<label class="md-nav__title" for="toc">{{ lang.t("toc-title") }}</label>
<ul class="md-nav__list" data-md-scrollfix>
{% for toc_item in toc_ %}
{% include "partials/toc-item.html" %}
{% endfor %}
{% if page.meta.source and page.meta.source | length > 0 %}
<li class="md-nav__item">
<a href="#__source" title="{{ lang.t('meta.source') }}" class="md-nav__link md-nav__link--active">
{{ lang.t("meta.source") }}
<a href="#__source" title="{{ lang.t('meta-source') }}" class="md-nav__link md-nav__link--active">
{{ lang.t("meta-source") }}
</a>
</li>
{% endif %}
{% if config.extra.disqus and not page.is_homepage %}
<li class="md-nav__item">
<a href="#__comments" title="{{ lang.t('meta.comments') }}" class="md-nav__link md-nav__link--active">
{{ lang.t("meta.comments") }}
<a href="#__comments" title="{{ lang.t('meta-comments') }}" class="md-nav__link md-nav__link--active">
{{ lang.t("meta-comments") }}
</a>
</li>
{% endif %}

View File

@ -47,6 +47,16 @@ const truncate = (string, n) => {
return string
}
/**
* Return the meta tag value for the given key
*
* @param {String} key - Meta name
* @return {String} Meta content value
*/
const i18n = key => {
return document.querySelector(`[name=i18n-${key}]`).content
}
/* ----------------------------------------------------------------------------
* Class
* ------------------------------------------------------------------------- */
@ -91,17 +101,18 @@ export default class Result {
/* Load messages for metadata display */
this.message_ = {
placeholder: this.meta_.textContent,
none: this.meta_.dataset.mdLangResultNone,
one: this.meta_.dataset.mdLangResultOne,
other: this.meta_.dataset.mdLangResultOther
none: i18n("search-result-none"),
one: i18n("search-result-one"),
other: i18n("search-result-other")
}
/* Override tokenizer separator, if given */
if (this.el_.dataset.mdLangTokenizer.length)
lunr.tokenizer.separator = this.el_.dataset.mdLangTokenizer
const tokenizer = i18n("search-tokenizer")
if (tokenizer.length)
lunr.tokenizer.separator = tokenizer
/* Load search languages */
this.lang_ = this.el_.dataset.mdLangSearch.split(",")
this.lang_ = i18n("search-languages").split(",")
.filter(Boolean)
.map(lang => lang.trim())
}

View File

@ -54,6 +54,17 @@
<meta name="author" content="{{ config.site_author }}" />
{% endif %}
<!-- Localization -->
{% for key in [
"search-languages",
"search-result-none",
"search-result-one",
"search-result-other",
"search-tokenizer"
] %}
<meta name="i18n-{{ key }}" content="{{ lang.t(key) }}" />
{% endfor %}
<!-- Favicon -->
{% if config.site_favicon %}
<link rel="shortcut icon"
@ -234,7 +245,7 @@
<!-- Edit button, if URL was defined -->
{% if config.edit_uri %}
<a href="{{ page.edit_url }}"
title="{{ lang.t('edit.link.title') }}"
title="{{ lang.t('edit-link-title') }}"
class="md-icon md-content__icon">&#xE3C9;<!-- edit --></a>
{% endif %}
@ -253,7 +264,7 @@
<!-- Source files -->
{% block source %}
{% if page.meta.source %}
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
<h2 id="__source">{{ lang.t("meta-source") }}</h2>
{% set path = (page.meta.path | default([""]) | first) %}
{% for file in page.meta.source %}
<a href="{{ [config.repo_url, path, file] | join('/') }}"
@ -268,7 +279,7 @@
<!-- Disqus integration -->
{% block disqus %}
{% if config.extra.disqus and not page.is_homepage %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
<h2 id="__comments">{{ lang.t("meta-comments") }}</h2>
{% include "partials/disqus.html" %}
{% endif %}
{% endblock %}
@ -288,7 +299,7 @@
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
<!-- Load additional languages for search -->
{% set languages = lang.t("search.languages").split(",") %}
{% set languages = lang.t("search-languages").split(",") %}
{% if languages | length and languages[0] != "" %}
{% set path = base_url + "/assets/javascripts/lunr" %}
<script src="{{ path }}/lunr.stemmer.support.js"></script>

View File

@ -44,7 +44,7 @@
md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.previous") }}
{{ lang.t("footer-previous") }}
</span>
{{ page.previous_page.title }}
</span>
@ -61,7 +61,7 @@
md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.next") }}
{{ lang.t("footer-next") }}
</span>
{{ page.next_page.title }}
</span>

View File

@ -23,18 +23,18 @@
<!-- Translations -->
{% macro t(key) %}{{ {
"language": "en",
"edit.link.title": "Edit this page",
"footer.previous": "Previous",
"footer.next": "Next",
"meta.comments": "Comments",
"meta.source": "Source",
"search.languages": "",
"search.placeholder": "Search",
"search.result.placeholder": "Type to start searching",
"search.result.none": "No matching documents",
"search.result.one": "1 matching document",
"search.result.other": "# matching documents",
"search.tokenizer": "[\s\-]+",
"source.link.title": "Go to repository",
"toc.title": "Table of contents"
"edit-link-title": "Edit this page",
"footer-previous": "Previous",
"footer-next": "Next",
"meta-comments": "Comments",
"meta-source": "Source",
"search-languages": "",
"search-placeholder": "Search",
"search-result-placeholder": "Type to start searching",
"search-result-none": "No matching documents",
"search-result-one": "1 matching document",
"search-result-other": "# matching documents",
"search-tokenizer": "[\s\-]+",
"source-link-title": "Go to repository",
"toc-title": "Table of contents"
}[key] }}{% endmacro %}

View File

@ -28,7 +28,7 @@
<div class="md-search__inner">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query"
required placeholder="{{ lang.t('search.placeholder') }}"
required placeholder="{{ lang.t('search-placeholder') }}"
autocapitalize="off" autocorrect="off" autocomplete="off"
spellcheck="false" data-md-component="query" />
<label class="md-icon md-search__icon" for="search"></label>
@ -37,14 +37,9 @@
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result"
data-md-lang-search="{{ lang.t('search.languages') }}"
data-md-lang-tokenizer="{{ lang.t('search.tokenizer') }}">
<div class="md-search-result__meta"
data-md-lang-result-none="{{ lang.t('search.result.none') }}"
data-md-lang-result-one="{{ lang.t('search.result.one') }}"
data-md-lang-result-other="{{ lang.t('search.result.other') }}">
{{ lang.t("search.result.placeholder") }}
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
{{ lang.t("search-result-placeholder") }}
</div>
<ol class="md-search-result__list"></ol>
</div>

View File

@ -39,7 +39,7 @@
<!-- Repository containing source -->
{% block repo %}
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}"
<a href="{{ config.repo_url }}" title="{{ lang.t('source-link-title') }}"
class="md-source" data-md-source="{{ repo_type }}">
{% if repo_type %}
<div class="md-source__icon">

View File

@ -38,7 +38,7 @@
<!-- Render item list -->
{% if toc_ | first is defined %}
<label class="md-nav__title" for="toc">{{ lang.t("toc.title") }}</label>
<label class="md-nav__title" for="toc">{{ lang.t("toc-title") }}</label>
<ul class="md-nav__list" data-md-scrollfix>
{% for toc_item in toc_ %}
{% include "partials/toc-item.html" %}
@ -47,9 +47,9 @@
<!-- Source files -->
{% if page.meta.source and page.meta.source | length > 0 %}
<li class="md-nav__item">
<a href="#__source" title="{{ lang.t('meta.source') }}"
<a href="#__source" title="{{ lang.t('meta-source') }}"
class="md-nav__link md-nav__link--active">
{{ lang.t("meta.source") }}
{{ lang.t("meta-source") }}
</a>
</li>
{% endif %}
@ -57,9 +57,9 @@
<!-- Disqus integration -->
{% if config.extra.disqus and not page.is_homepage %}
<li class="md-nav__item">
<a href="#__comments" title="{{ lang.t('meta.comments') }}"
<a href="#__comments" title="{{ lang.t('meta-comments') }}"
class="md-nav__link md-nav__link--active">
{{ lang.t("meta.comments") }}
{{ lang.t("meta-comments") }}
</a>
</li>
{% endif %}