OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improved passing i18n values to JavaScript

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/javascripts/application-683e1b679e.js
View File

File diff suppressed because one or more lines are too long

19
material/base.html
View File

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

4
material/partials/footer.html
View File

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

28
material/partials/language.html
View File

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

8
material/partials/search.html
View File

@ -3,15 +3,15 @@
<label class="md-search__overlay" for="search"></label> <label class="md-search__overlay" for="search"></label>
<div class="md-search__inner"> <div class="md-search__inner">
<form class="md-search__form" name="search"> <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> <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> <button type="reset" class="md-icon md-search__icon" data-md-component="reset">&#xE5CD;</button>
</form> </form>
<div class="md-search__output"> <div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix> <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" data-md-component="result">
<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') }}"> <div class="md-search-result__meta">
{{ lang.t("search.result.placeholder") }} {{ lang.t("search-result-placeholder") }}
</div> </div>
<ol class="md-search-result__list"></ol> <ol class="md-search-result__list"></ol>
</div> </div>

2
material/partials/source.html
View File

@ -10,7 +10,7 @@
{% set repo_type = "" %} {% set repo_type = "" %}
{% endif %} {% endif %}
{% block repo %} {% 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 %} {% if repo_type %}
<div class="md-source__icon"> <div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24"> <svg viewBox="0 0 24 24" width="24" height="24">

10
material/partials/toc.html
View File

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

23
src/assets/javascripts/components/Material/Search/Result.jsx
View File

@ -47,6 +47,16 @@ const truncate = (string, n) => {
return string 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 * Class
* ------------------------------------------------------------------------- */ * ------------------------------------------------------------------------- */
@ -91,17 +101,18 @@ export default class Result {
/* Load messages for metadata display */ /* Load messages for metadata display */
this.message_ = { this.message_ = {
placeholder: this.meta_.textContent, placeholder: this.meta_.textContent,
none: this.meta_.dataset.mdLangResultNone, none: i18n("search-result-none"),
one: this.meta_.dataset.mdLangResultOne, one: i18n("search-result-one"),
other: this.meta_.dataset.mdLangResultOther other: i18n("search-result-other")
} }
/* Override tokenizer separator, if given */ /* Override tokenizer separator, if given */
if (this.el_.dataset.mdLangTokenizer.length) const tokenizer = i18n("search-tokenizer")
lunr.tokenizer.separator = this.el_.dataset.mdLangTokenizer if (tokenizer.length)
lunr.tokenizer.separator = tokenizer
/* Load search languages */ /* Load search languages */
this.lang_ = this.el_.dataset.mdLangSearch.split(",") this.lang_ = i18n("search-languages").split(",")
.filter(Boolean) .filter(Boolean)
.map(lang => lang.trim()) .map(lang => lang.trim())
} }

19
src/base.html
View File

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

4
src/partials/footer.html
View File

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

28
src/partials/language.html
View File

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

13
src/partials/search.html
View File

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

2
src/partials/source.html
View File

@ -39,7 +39,7 @@
<!-- Repository containing source --> <!-- Repository containing source -->
{% block repo %} {% 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 }}"> class="md-source" data-md-source="{{ repo_type }}">
{% if repo_type %} {% if repo_type %}
<div class="md-source__icon"> <div class="md-source__icon">

10
src/partials/toc.html
View File

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