Reformatted HTML templates and moved L10N to inline JSON

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 %}
@@ -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>

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>

src/base.html

@@ -41,8 +41,7 @@
 
       <!-- Page description -->
       {% if page and page.meta and page.meta.description %}
-        <meta name="description"
+        <meta name="description" content="{{ page.meta.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"
+      <link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
-          href="{{ config.theme.favicon | url }}">
 
       <!-- Generator banner -->
-      <meta name="generator"
+      <meta
-          content="mkdocs-{{ mkdocs_version }}, $md-name$-$md-version$" />
+        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"
+      <link
-          href="{{ 'assets/stylesheets/app.css' | url }}" />
+        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"
+        <link
-            href="{{ 'assets/stylesheets/app-palette.css' | url }}" />
+          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"
+        <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" />
+          }}&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"
+    <link
-        href="{{ 'assets/fonts/material-icons.css' | url }}" />
+      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"
+      <link
-          href="{{ 'assets/fonts/font-awesome.css' | url }}" />
+        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') }}"
+    <body
+      dir="{{ lang.t('direction') }}"
       data-md-color-primary="{{ primary }}"
-        data-md-color-accent="{{ accent }}">
+      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"
+    <input
-        type="checkbox" id="__drawer" autocomplete="off" />
+      class="md-toggle"
-    <input class="md-toggle" data-md-toggle="search"
+      data-md-toggle="drawer"
-        type="checkbox" id="__search" autocomplete="off" />
+      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"
+      <a href="{{ (page.toc | first).url }}" tabindex="1" class="md-skip">
-          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"
+              <div
-                  data-md-component="navigation">
+                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"
+              <div
-                  data-md-component="toc">
+                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 }}"
+                  <a
+                    href="{{ page.edit_url }}"
                     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 %}
 
                 <!--
@@ -326,8 +347,11 @@
                     {% endif %}
                     {% set path = page.meta.path | default([""]) %}
                     {% set file = page.meta.source %}
-                    <a href="{{ [repo, path, file] | join('/') }}"
+                    <a
-                        title="{{ file }}" class="md-source-file">
+                      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 }}",

src/partials/footer.html

@@ -32,16 +32,20 @@
 
         <!-- Link to previous page -->
         {% if page.previous_page %}
-          <a href="{{ page.previous_page.url | url }}"
+          <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">
+            rel="prev"
+          >
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--arrow-back
+              <i
-                    md-footer-nav__button"></i>
+                class="md-icon md-icon--arrow-back md-footer-nav__button"
+              ></i>
             </div>
-            <div class="md-flex__cell md-flex__cell--stretch
+            <div
-                  md-footer-nav__title">
+              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 }}"
+          <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">
+            rel="next"
-            <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.next") }}
@@ -68,8 +75,9 @@
               </span>
             </div>
             <div class="md-flex__cell md-flex__cell--shrink">
-              <i class="md-icon md-icon--arrow-forward
+              <i
-                    md-footer-nav__button"></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 -->

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 }}"
+        <a
+          href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
           title="{{ config.site_name }}"
-            class="md-header-nav__button md-logo">
+          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"
+        <label
-            for="__drawer"></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"
+        <div
-            data-md-component="title">
+          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"
+          <label
-              for="__search"></label>
+            class="md-icon md-icon--search md-header-nav__button"
+            for="__search"
+          ></label>
 
           <!-- Search interface -->
           {% include "partials/search.html" %}

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 }}"
+      <input
-          type="checkbox" id="{{ path }}" checked />
+        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 }}"
+      <input
-          type="checkbox" id="{{ path }}" />
+        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"
+    <nav
-        data-md-level="{{ level }}">
+      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"
+    <input
-        type="checkbox" id="__toc" />
+      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 }}"
+    <a
-        class="md-nav__link md-nav__link--active">
+      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 }}"
+    <a
-        class="md-nav__link">
+      href="{{ nav_item.url | url }}"
+      title="{{ nav_item.title | striptags }}"
+      class="md-nav__link"
+    >
       {{ nav_item.title }}
     </a>
   </li>

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 }}"
+    <a
-        title="{{ config.site_name }}" class="md-nav__button md-logo">
+      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 %}

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"
+      <input
+        type="text"
+        class="md-search__input"
+        name="query"
         placeholder="{{ lang.t('search.placeholder') }}"
-          autocapitalize="off" autocorrect="off" autocomplete="off"
+        autocapitalize="off"
-          spellcheck="false" data-md-component="query"
+        autocorrect="off"
-          data-md-state="active" />
+        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"
+      <button
-          data-md-component="reset" tabindex="-1">
+        type="reset"
+        class="md-icon md-search__icon"
+        data-md-component="reset"
+        tabindex="-1"
+      >
         &#xE5CD;<!-- close -->
       </button>
     </form>

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
+      <a
-            fa fa-{{ social.type }}"></a>
+        href="{{ social.link }}"
+        class="md-footer-social__link fa fa-{{ social.type }}"
+      ></a>
     {% endfor %}
   </div>
 {% endif %}

src/partials/source.html

@@ -38,8 +38,12 @@
 {% endif %}
 
 <!-- Repository containing source -->
-<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}"
+<a
-    class="md-source" data-md-source="{{ repo_type }}">
+  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">

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 }}"
+        <a
-            class="md-tabs__link md-tabs__link--active">
+          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 }}"
+        <a
-            class="md-tabs__link">
+          href="{{ (nav_item.children | first).url | url }}"
+          class="md-tabs__link"
+        >
           {{ title }}
         </a>
       {% endif %}