Reformatted HTML templates and moved L10N to inline JSON

2024-11-28 09:20:52 +01:00 · 2019-11-26 10:03:53 +01:00 · 2019-11-26 10:03:53 +01:00 · b5ad4ac339
commit b5ad4ac339
parent 0cfd796598
11 changed files with 239 additions and 127 deletions
--- a/material/base.html
+++ b/material/base.html
@ -30,19 +30,6 @@
      {% elif config.site_author %}
        <meta name="author" content="{{ config.site_author }}">
      {% endif %}
-      {% for key in [
-        "clipboard.copy",
-        "clipboard.copied",
-        "search.language",
-        "search.pipeline.stopwords",
-        "search.pipeline.trimmer",
-        "search.result.none",
-        "search.result.one",
-        "search.result.other",
-        "search.tokenizer"
-      ] %}
-        <meta name="lang:{{ key }}" content="{{ lang.t(key) }}">
-      {% endfor %}
      <link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-4.4.2">
    {% endblock %}
@ -73,9 +60,9 @@
      {% if font != false %}
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{
-              font.text | replace(' ', '+') + ':300,400,400i,700|' +
-              font.code | replace(' ', '+')
-            }}&display=fallback">
+            font.text | replace(' ', '+') + ':300,400,400i,700|' +
+            font.code | replace(' ', '+')
+          }}&display=fallback">
        <style>body,input{font-family:"{{ font.text }}","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"{{ font.code }}","Courier New",Courier,monospace}</style>
      {% endif %}
    {% endblock %}
@ -215,6 +202,23 @@
          {% endif %}
        {% endif %}
      {% endif %}
+      <script id="__lang" type="application/json">
+        {
+          {% for key in [
+            "clipboard.copy",
+            "clipboard.copied",
+            "search.language",
+            "search.pipeline.stopwords",
+            "search.pipeline.trimmer",
+            "search.result.none",
+            "search.result.one",
+            "search.result.other",
+            "search.tokenizer"
+          ] -%}
+            "{{ key }}": "{{ lang.t(key) }}"{{ "," if not loop.last }}
+          {% endfor %}
+        }
+      </script>
      <script>app({version:"{{ mkdocs_version }}",url:{base:"{{ base_url }}"}})</script>
      {% for path in config["extra_javascript"] %}
        <script src="{{ path | url }}"></script>
--- a/material/partials/footer.html
+++ b/material/partials/footer.html
@ -51,7 +51,8 @@
        <a href="https://www.mkdocs.org">MkDocs</a>
        and
        <a href="https://squidfunk.github.io/mkdocs-material/">
-          Material for MkDocs</a>
+          Material for MkDocs
+        </a>
      </div>
      {% include "partials/social.html" %}
    </div>
--- a/src/base.html
+++ b/src/base.html
@ -41,8 +41,7 @@

      <!-- Page description -->
      {% if page and page.meta and page.meta.description %}
-        <meta name="description"
-            content="{{ page.meta.description }}" />
+        <meta name="description" content="{{ page.meta.description }}" />
      {% elif config.site_description %}
        <meta name="description" content="{{ config.site_description }}" />
      {% endif %}
@ -72,28 +71,14 @@
        <meta name="author" content="{{ config.site_author }}" />
      {% endif %}

-      <!-- Localization -->
-      {% for key in [
-        "clipboard.copy",
-        "clipboard.copied",
-        "search.language",
-        "search.pipeline.stopwords",
-        "search.pipeline.trimmer",
-        "search.result.none",
-        "search.result.one",
-        "search.result.other",
-        "search.tokenizer"
-      ] %}
-        <meta name="lang:{{ key }}" content="{{ lang.t(key) }}" />
-      {% endfor %}
-
      <!-- Favicon -->
-      <link rel="shortcut icon"
-          href="{{ config.theme.favicon | url }}">
+      <link rel="shortcut icon" href="{{ config.theme.favicon | url }}">

      <!-- Generator banner -->
-      <meta name="generator"
-          content="mkdocs-{{ mkdocs_version }}, $md-name$-$md-version$" />
+      <meta
+        name="generator"
+        content="mkdocs-{{ mkdocs_version }}, $md-name$-$md-version$"
+      />
    {% endblock %}

    <!-- Site title -->
@ -111,13 +96,19 @@
    {% block styles %}

      <!-- Theme-related stylesheets -->
-      <link rel="stylesheet" type="text/css"
-          href="{{ 'assets/stylesheets/app.css' | url }}" />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="{{ 'assets/stylesheets/app.css' | url }}"
+      />

      <!-- Extra color palette -->
      {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" type="text/css"
-            href="{{ 'assets/stylesheets/app-palette.css' | url }}" />
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="{{ 'assets/stylesheets/app-palette.css' | url }}"
+        />
      {% endif %}

      <!-- Theme-color meta tag for Android -->
@ -139,11 +130,14 @@
      <!-- Load fonts from Google -->
      {% if font != false %}
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
-        <link rel="stylesheet" type="text/css"
-            href="https://fonts.googleapis.com/css?family={{
-              font.text | replace(' ', '+') + ':300,400,400i,700|' +
-              font.code | replace(' ', '+')
-            }}&display=fallback" />
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="https://fonts.googleapis.com/css?family={{
+            font.text | replace(' ', '+') + ':300,400,400i,700|' +
+            font.code | replace(' ', '+')
+          }}&display=fallback"
+        />
        <style>
          body, input {
            font-family: "{{ font.text }}", "Helvetica Neue",
@ -158,8 +152,11 @@
    {% endblock %}

    <!-- Material icons as iconset -->
-    <link rel="stylesheet" type="text/css"
-        href="{{ 'assets/fonts/material-icons.css' | url }}" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ 'assets/fonts/material-icons.css' | url }}"
+    />

    <!-- Progressive Web App Manifest -->
    {% if config.extra.manifest %}
@ -168,8 +165,11 @@

    <!-- FontAwesome for social links -->
    {% if config.extra.social %}
-      <link rel="stylesheet" type="text/css"
-          href="{{ 'assets/fonts/font-awesome.css' | url }}" />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="{{ 'assets/fonts/font-awesome.css' | url }}"
+      />
    {% endif %}

    <!-- Custom stylesheets -->
@ -192,9 +192,11 @@
  {% if palette.primary or palette.accent %}
    {% set primary = palette.primary | replace(" ", "-") | lower %}
    {% set accent  = palette.accent  | replace(" ", "-") | lower %}
-    <body dir="{{ lang.t('direction') }}"
-        data-md-color-primary="{{ primary }}"
-        data-md-color-accent="{{ accent }}">
+    <body
+      dir="{{ lang.t('direction') }}"
+      data-md-color-primary="{{ primary }}"
+      data-md-color-accent="{{ accent }}"
+    >
  {% else %}
    <body dir="{{ lang.t('direction') }}">
  {% endif %}
@ -222,18 +224,31 @@
      State toggles - we need to set autocomplete="off" in order to reset the
      drawer on back button invocation in some browsers
    -->
-    <input class="md-toggle" data-md-toggle="drawer"
-        type="checkbox" id="__drawer" autocomplete="off" />
-    <input class="md-toggle" data-md-toggle="search"
-        type="checkbox" id="__search" autocomplete="off" />
+    <input
+      class="md-toggle"
+      data-md-toggle="drawer"
+      type="checkbox"
+      id="__drawer"
+      autocomplete="off"
+    />
+    <input
+      class="md-toggle"
+      data-md-toggle="search"
+      type="checkbox"
+      id="__search"
+      autocomplete="off"
+    />

    <!-- Overlay for expanded drawer -->
-    <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
+    <label
+      class="md-overlay"
+      data-md-component="overlay"
+      for="__drawer"
+    ></label>

    <!-- Render "skip to content" link -->
    {% if page.toc | first is defined %}
-      <a href="{{ (page.toc | first).url }}" tabindex="1"
-          class="md-skip">
+      <a href="{{ (page.toc | first).url }}" tabindex="1" class="md-skip">
        {{ lang.t('skip.link.title') }}
      </a>
    {% endif %}
@ -267,8 +282,10 @@

            <!-- Main navigation -->
            {% if nav %}
-              <div class="md-sidebar md-sidebar--primary"
-                  data-md-component="navigation">
+              <div
+                class="md-sidebar md-sidebar--primary"
+                data-md-component="navigation"
+              >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    {% include "partials/nav.html" %}
@ -279,8 +296,10 @@

            <!-- Table of contents -->
            {% if page.toc %}
-              <div class="md-sidebar md-sidebar--secondary"
-                  data-md-component="toc">
+              <div
+                class="md-sidebar md-sidebar--secondary"
+                data-md-component="toc"
+              >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    {% include "partials/toc.html" %}
@ -299,9 +318,11 @@

                <!-- Edit button, if URL was defined -->
                {% if page.edit_url %}
-                  <a href="{{ page.edit_url }}"
-                      title="{{ lang.t('edit.link.title') }}"
-                      class="md-icon md-content__icon">&#xE3C9;<!-- edit --></a>
+                  <a
+                    href="{{ page.edit_url }}"
+                    title="{{ lang.t('edit.link.title') }}"
+                    class="md-icon md-content__icon"
+                  >&#xE3C9;<!-- edit --></a>
                {% endif %}

                <!--
@ -326,8 +347,11 @@
                    {% endif %}
                    {% set path = page.meta.path | default([""]) %}
                    {% set file = page.meta.source %}
-                    <a href="{{ [repo, path, file] | join('/') }}"
-                        title="{{ file }}" class="md-source-file">
+                    <a
+                      href="{{ [repo, path, file] | join('/') }}"
+                      title="{{ file }}"
+                      class="md-source-file"
+                    >
                      {{ file }}
                    </a>
                  {% endif %}
@ -376,7 +400,24 @@
        {% endif %}
      {% endif %}

-      <!-- Initialize application -->
+      <!-- Translations -->
+      <script id="__lang" type="application/json">
+        {
+          {% for key in [
+            "clipboard.copy",
+            "clipboard.copied",
+            "search.language",
+            "search.pipeline.stopwords",
+            "search.pipeline.trimmer",
+            "search.result.none",
+            "search.result.one",
+            "search.result.other",
+            "search.tokenizer"
+          ] -%}
+            "{{ key }}": "{{ lang.t(key) }}"{{ "," if not loop.last }}
+          {% endfor %}
+        }
+      </script>
      <script>
        app({
          version: "{{ mkdocs_version }}",
--- a/src/partials/footer.html
+++ b/src/partials/footer.html
@ -32,16 +32,20 @@

        <!-- Link to previous page -->
        {% if page.previous_page %}
-          <a href="{{ page.previous_page.url | url }}"
-              title="{{ page.previous_page.title | striptags }}"
-              class="md-flex md-footer-nav__link md-footer-nav__link--prev"
-              rel="prev">
+          <a
+            href="{{ page.previous_page.url | url }}"
+            title="{{ page.previous_page.title | striptags }}"
+            class="md-flex md-footer-nav__link md-footer-nav__link--prev"
+            rel="prev"
+          >
            <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--arrow-back
-                    md-footer-nav__button"></i>
+              <i
+                class="md-icon md-icon--arrow-back md-footer-nav__button"
+              ></i>
            </div>
-            <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-footer-nav__direction">
                  {{ lang.t("footer.previous") }}
@ -54,12 +58,15 @@

        <!-- Link to next page -->
        {% if page.next_page %}
-          <a href="{{ page.next_page.url | url }}"
-              title="{{ page.next_page.title | striptags }}"
-              class="md-flex md-footer-nav__link md-footer-nav__link--next"
-              rel="next">
-            <div class="md-flex__cell md-flex__cell--stretch
-                  md-footer-nav__title">
+          <a
+            href="{{ page.next_page.url | url }}"
+            title="{{ page.next_page.title | striptags }}"
+            class="md-flex md-footer-nav__link md-footer-nav__link--next"
+            rel="next"
+          >
+            <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") }}
@ -68,8 +75,9 @@
              </span>
            </div>
            <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--arrow-forward
-                    md-footer-nav__button"></i>
+              <i
+                class="md-icon md-icon--arrow-forward md-footer-nav__button"
+              ></i>
            </div>
          </a>
        {% endif %}
@ -92,7 +100,8 @@
        <a href="https://www.mkdocs.org">MkDocs</a>
        and
        <a href="https://squidfunk.github.io/mkdocs-material/">
-          Material for MkDocs</a>
+          Material for MkDocs
+        </a>
      </div>

      <!-- Social links -->
--- a/src/partials/header.html
+++ b/src/partials/header.html
@ -29,9 +29,11 @@

      <!-- Link to home -->
      <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
-            title="{{ config.site_name }}"
-            class="md-header-nav__button md-logo">
+        <a
+          href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
+          title="{{ config.site_name }}"
+          class="md-header-nav__button md-logo"
+        >
          {% if config.theme.logo.icon %}
            <i class="md-icon">{{ config.theme.logo.icon }}</i>
          {% else %}
@ -42,14 +44,18 @@

      <!-- Button to toggle drawer -->
      <div class="md-flex__cell md-flex__cell--shrink">
-        <label class="md-icon md-icon--menu md-header-nav__button"
-            for="__drawer"></label>
+        <label
+          class="md-icon md-icon--menu md-header-nav__button"
+          for="__drawer"
+        ></label>
      </div>

      <!-- Header title -->
      <div class="md-flex__cell md-flex__cell--stretch">
-        <div class="md-flex__ellipsis md-header-nav__title"
-            data-md-component="title">
+        <div
+          class="md-flex__ellipsis md-header-nav__title"
+          data-md-component="title"
+        >
          {% if config.site_name == page.title %}
            {{ config.site_name }}
          {% else %}
@ -70,8 +76,10 @@
      <!-- Button to open search dialogue -->
      <div class="md-flex__cell md-flex__cell--shrink">
        {% if "search" in config["plugins"] %}
-          <label class="md-icon md-icon--search md-header-nav__button"
-              for="__search"></label>
+          <label
+            class="md-icon md-icon--search md-header-nav__button"
+            for="__search"
+          ></label>

          <!-- Search interface -->
          {% include "partials/search.html" %}
--- a/src/partials/nav-item.html
+++ b/src/partials/nav-item.html
@ -32,19 +32,31 @@

    <!-- Active checkbox expands items contained within nested section -->
    {% if nav_item.active %}
-      <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}"
-          type="checkbox" id="{{ path }}" checked />
+      <input
+        class="md-toggle md-nav__toggle"
+        data-md-toggle="{{ path }}"
+        type="checkbox"
+        id="{{ path }}"
+        checked
+      />
    {% else %}
-      <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}"
-          type="checkbox" id="{{ path }}" />
+      <input
+        class="md-toggle md-nav__toggle"
+        data-md-toggle="{{ path }}"
+        type="checkbox"
+        id="{{ path }}"
+      />
    {% endif %}

    <!-- Expand active pages -->
    <label class="md-nav__link" for="{{ path }}">
      {{ nav_item.title }}
    </label>
-    <nav class="md-nav" data-md-component="collapsible"
-        data-md-level="{{ level }}">
+    <nav
+      class="md-nav"
+      data-md-component="collapsible"
+      data-md-level="{{ level }}"
+    >
      <label class="md-nav__title" for="{{ path }}">
        {{ nav_item.title }}
      </label>
@ -67,8 +79,12 @@
    {% set toc_ = page.toc %}

    <!-- Active checkbox expands items contained within nested section -->
-    <input class="md-toggle md-nav__toggle" data-md-toggle="toc"
-        type="checkbox" id="__toc" />
+    <input
+      class="md-toggle md-nav__toggle"
+      data-md-toggle="toc"
+      type="checkbox"
+      id="__toc"
+    />

    <!-- Hack: see partials/toc.html for more information -->
    {% if toc_ | first is defined and "\x3ch1 id=" in page.content %}
@ -81,8 +97,11 @@
        {{ nav_item.title }}
      </label>
    {% endif %}
-    <a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}"
-        class="md-nav__link md-nav__link--active">
+    <a
+      href="{{ nav_item.url | url }}"
+      title="{{ nav_item.title | striptags }}"
+      class="md-nav__link md-nav__link--active"
+    >
      {{ nav_item.title }}
    </a>

@ -95,8 +114,11 @@
 <!-- Main navigation item -->
 {% else %}
  <li class="{{ class }}">
-    <a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}"
-        class="md-nav__link">
+    <a
+      href="{{ nav_item.url | url }}"
+      title="{{ nav_item.title | striptags }}"
+      class="md-nav__link"
+    >
      {{ nav_item.title }}
    </a>
  </li>
--- a/src/partials/nav.html
+++ b/src/partials/nav.html
@ -25,8 +25,11 @@

  <!-- Site title -->
  <label class="md-nav__title md-nav__title--site" for="__drawer">
-    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
-        title="{{ config.site_name }}" class="md-nav__button md-logo">
+    <a
+      href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
+      title="{{ config.site_name }}"
+      class="md-nav__button md-logo"
+    >
      {% if config.theme.logo.icon %}
        <i class="md-icon">{{ config.theme.logo.icon }}</i>
      {% else %}
--- a/src/partials/search.html
+++ b/src/partials/search.html
@ -27,14 +27,25 @@
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query"
-          placeholder="{{ lang.t('search.placeholder') }}"
-          autocapitalize="off" autocorrect="off" autocomplete="off"
-          spellcheck="false" data-md-component="query"
-          data-md-state="active" />
+      <input
+        type="text"
+        class="md-search__input"
+        name="query"
+        placeholder="{{ lang.t('search.placeholder') }}"
+        autocapitalize="off"
+        autocorrect="off"
+        autocomplete="off"
+        spellcheck="false"
+        data-md-component="query"
+        data-md-state="active"
+      />
      <label class="md-icon md-search__icon" for="__search"></label>
-      <button type="reset" class="md-icon md-search__icon"
-          data-md-component="reset" tabindex="-1">
+      <button
+        type="reset"
+        class="md-icon md-search__icon"
+        data-md-component="reset"
+        tabindex="-1"
+      >
        &#xE5CD;<!-- close -->
      </button>
    </form>
--- a/src/partials/social.html
+++ b/src/partials/social.html
@ -24,8 +24,10 @@
 {% if config.extra.social %}
  <div class="md-footer-social">
    {% for social in config.extra.social %}
-      <a href="{{ social.link }}" class="md-footer-social__link
-            fa fa-{{ social.type }}"></a>
+      <a
+        href="{{ social.link }}"
+        class="md-footer-social__link fa fa-{{ social.type }}"
+      ></a>
    {% endfor %}
  </div>
 {% endif %}
--- a/src/partials/source.html
+++ b/src/partials/source.html
@ -38,8 +38,12 @@
 {% endif %}

 <!-- Repository containing source -->
-<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">
--- a/src/partials/tabs-item.html
+++ b/src/partials/tabs-item.html
@ -24,7 +24,10 @@
 {% if nav_item.is_homepage %}
  <li class="md-tabs__item">
    {% if not page.ancestors | length and nav | selectattr("url", page.url) %}
-      <a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active">
+      <a
+        href="{{ nav_item.url | url }}"
+        class="md-tabs__link md-tabs__link--active"
+      >
        {{ nav_item.title }}
      </a>
    {% else %}
@ -47,13 +50,17 @@
  {% else %}
    <li class="md-tabs__item">
      {% if nav_item.active %}
-        <a href="{{ (nav_item.children | first).url | url }}"
-            class="md-tabs__link md-tabs__link--active">
+        <a
+          href="{{ (nav_item.children | first).url | url }}"
+          class="md-tabs__link md-tabs__link--active"
+        >
          {{ title }}
        </a>
      {% else %}
-        <a href="{{ (nav_item.children | first).url | url }}"
-            class="md-tabs__link">
+        <a
+          href="{{ (nav_item.children | first).url | url }}"
+          class="md-tabs__link"
+        >
          {{ title }}
        </a>
      {% endif %}