Updated screenshots and refactored version selector template

Dockerfile

@@ -40,7 +40,7 @@ COPY setup.py setup.py
 
 # Perform build and cleanup artifacts and caches
 RUN \
-  apk upgrade -U -a \
+  apk upgrade --update-cache -a \
   apk add --no-cache \
     git \
     git-fast-import \

docs/setup/changing-the-colors.md

@@ -217,11 +217,18 @@ In order to set a default theme based on user preference, add a valid media
 query to the `media` attribute. This will render a color palette toggle in the
 header next to the search bar:
 
+
 <figure markdown="1">
 
-[![Color palette toggle][11]][11]
+=== "Light mode"
 
-  <figcaption markdown="1">
+    [![Light mode][11]][11]
+
+=== "Dark mode"
+
+    [![Dark mode][12]][12]
+
+  <figcaption markdown="1" style="margin-top: -2.0rem">
 
 A demo is worth a thousand words — check it out at
 [squidfunk.github.io/mkdocs-material-insiders][7]
@@ -237,7 +244,7 @@ color palettes:
 
 :   :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
     This field must point to a valid icon path referencing [any icon bundled
-    with the theme][12], or the build will not succeed. Some popular
+    with the theme][13], or the build will not succeed. Some popular
     combinations:
 
     * :material-toggle-switch-off-outline: + :material-toggle-switch: – `material/toggle-switch-off-outline` + `material/toggle-switch`
@@ -256,19 +263,20 @@ color palettes:
   [8]: #color-scheme
   [9]: #primary-color
   [10]: #accent-color
-  [11]: ../assets/screenshots/color-palette-toggle.png
+  [11]: ../assets/screenshots/palette-toggle-default.png
-  [12]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
+  [12]: ../assets/screenshots/palette-toggle-slate.png
+  [13]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
 
 ## Customization
 
 ### Custom colors
 
-[:octicons-file-code-24: Source][13] ·
+[:octicons-file-code-24: Source][14] ·
 :octicons-mortar-board-24: Difficulty: _easy_
 
-Material for MkDocs implements colors using [CSS variables][14] (custom
+Material for MkDocs implements colors using [CSS variables][15] (custom
 properties). If you want to customize the colors beyond the palette (e.g. to
-use your brand-specific colors), you can add an [additional stylesheet][15] and
+use your brand-specific colors), you can add an [additional stylesheet][16] and
 tweak the values of the CSS variables.
 
 Let's say you're :fontawesome-brands-youtube:{ style="color: #EE0F0F" }
@@ -283,22 +291,22 @@ add:
 }
 ```
 
-See the file containing the [color definitions][13] for a list of all CSS
+See the file containing the [color definitions][14] for a list of all CSS
 variables.
 
-  [13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
+  [14]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
-  [14]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+  [15]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
-  [15]: ../customization.md#additional-css
+  [16]: ../customization.md#additional-css
 
 
 ### Custom color schemes
 
-[:octicons-file-code-24: Source][13] ·
+[:octicons-file-code-24: Source][14] ·
 :octicons-mortar-board-24: Difficulty: _easy_
 
 Besides overriding specific colors, you can create your own, named color scheme
 by wrapping the definitions in the `#!css [data-md-color-scheme="..."]`
-[attribute selector][16], which you can then set via `mkdocs.yml` as described
+[attribute selector][17], which you can then set via `mkdocs.yml` as described
 in the [color schemes][8] section:
 
 ``` css
@@ -319,4 +327,4 @@ can tune the `slate` theme with:
 }
 ```
 
-  [16]: https://www.w3.org/TR/selectors-4/#attribute-selectors
+  [17]: https://www.w3.org/TR/selectors-4/#attribute-selectors

docs/setup/setting-up-navigation.md

@@ -368,7 +368,7 @@ theme:
 
 === "Separate table of contents"
 
-    [![Separate table of contents][8]][8]
+    [![Separate table of contents][7]][7]
 
   [25]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/layout/_nav.scss
   [26]: ../assets/screenshots/toc-integrate.png

docs/setup/setting-up-site-search.md

@@ -151,7 +151,7 @@ theme:
     - search.suggest
 ```
 
-Searching for ^^code high^^ yields ^^code highlighting^^ as a suggestion:
+Searching for ^^search su^^ yields ^^search suggestions^^ as a suggestion:
 
 <figure markdown="1">
 
@@ -186,7 +186,7 @@ theme:
     - search.highlight
 ```
 
-Searching for ^^code blocks^^ yields:
+Searching for ^^code highlighting^^ yields:
 
 <figure markdown="1">
 

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.77f3fd56.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.6e4c7934.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.7fa14f5b.min.css' | url }}">
@@ -217,7 +217,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.1a39fc1d.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.a1c7c35e.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/templates/version/index.tsx

@@ -36,6 +36,31 @@ export interface Version {
   aliases: string[]                    /* Version aliases */
 }
 
+/* ----------------------------------------------------------------------------
+ * Helper functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Render a version
+ *
+ * @param version - Version
+ *
+ * @returns Element
+ */
+function renderVersion(version: Version): HTMLElement {
+  const config = configuration()
+
+  /* Ensure trailing slash, see https://bit.ly/3rL5u3f */
+  const url = new URL(`${version.version}/`, config.base)
+  return (
+    <li class="md-version__item">
+      <a href={url.toString()} class="md-version__link">
+        {version.title}
+      </a>
+    </li>
+  )
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -64,16 +89,7 @@ export function renderVersionSelector(versions: Version[]): HTMLElement {
         {active.title}
       </span>
       <ul class="md-version__list">
-        {versions.map(version => (
+        {versions.map(renderVersion)}
-          <li class="md-version__item">
-            <a
-              class="md-version__link"
-              href={`${new URL(`${version.version}/`, config.base)}`}
-            >
-              {version.title}
-            </a>
-          </li>
-        ))}
       </ul>
     </div>
   )