Formatting + moved search index fetching to top level

docs/creating-your-site.md

@@ -91,7 +91,7 @@ Material for MkDocs comes with many configuration options. The _setup_ section
 explains in great detail how to configure and customize colors, fonts, icons
 and much more:
 
-<div class="tx-columns" markdown="1">
+<div class="mdx-columns" markdown="1">
 
 - [Changing the colors][5]
 - [Changing the fonts][6]

docs/insiders.md

@@ -2,15 +2,15 @@
 template: overrides/main.html
 ---
 
-# <span hidden>Insiders</span> :logo: :material-plus: :octicons-heart-fill-24:{: .tx-heart }
+# <span hidden>Insiders</span> :logo: :material-plus: :octicons-heart-fill-24:{: .mdx-heart }
 
 Material for MkDocs uses the _sponsorware_ release strategy, which means
 that _new features are first exclusively released to sponsors_ as part of
 __Insiders__. Read on to learn [how sponsorship works][1], and how easy it is
 to [get access to Insiders][2].
 
-<figure class="tx-video" markdown="1">
-  <div class="tx-video__inner">
+<figure class="mdx-video" markdown="1">
+  <div class="mdx-video__inner">
     <iframe src="https://streamable.com/e/zmtb00" allowfullscreen></iframe>
   </div>
   <figcaption markdown="1">
@@ -89,10 +89,10 @@ You can cancel your sponsorship anytime.[^3]
     through Stripe. As we don't receive any information regarding your payment,
     and GitHub doesn't offer refunds, sponsorships are non-refundable.
 
-[:octicons-heart-fill-24:{: .tx-heart } &nbsp; Join our <span class="tx-insiders-count"></span> awesome sponsors][5]{: .md-button .md-button--primary .tx-insiders-button }
+[:octicons-heart-fill-24:{: .mdx-heart } &nbsp; Join our <span class="mdx-insiders-count"></span> awesome sponsors][5]{: .md-button .md-button--primary .mdx-insiders-button }
 
-<div class="tx-insiders-container" markdown="1" hidden>
-  <div class="tx-insiders-list"></div>
+<div class="mdx-insiders-container" markdown="1" hidden>
+  <div class="mdx-insiders-list"></div>
   _If you sponsor publicly, you're automatically added here with a link to
   your profile and avatar to show your support for Material for MkDocs.
   Alternatively, if you wish to keep your sponsorship private, you'll be a 
@@ -101,7 +101,7 @@ You can cancel your sponsorship anytime.[^3]
 </div>
 
 <script>
-  fetch("https://gpiqp43wvb.execute-api.us-east-1.amazonaws.com/_/").then(function(e){return e.json()}).then(function(e){var t=document.querySelector(".tx-insiders-list"),n=0;for(var o of e.sponsors)if("PUBLIC"===o.type){var s;(s=document.createElement("a")).href=o.url,s.title="@"+o.name,s.className="tx-insiders-list__item",t.appendChild(s);var r=document.createElement("img");r.src=o.image,s.appendChild(r)}else n++;(s=document.createElement("a")).href="https://github.com/sponsors/squidfunk",s.title="[private]",s.innerText="+"+n,s.className="tx-insiders-list__item tx-insiders-list__item--private",t.appendChild(s),document.querySelector(".tx-insiders-count").innerText=e.sponsors.length,document.querySelector(".tx-insiders-container").removeAttribute("hidden"),document.querySelector('.tx-insiders-total').innerText=" $ "+e.total.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}).catch(console.log);
+  fetch("https://gpiqp43wvb.execute-api.us-east-1.amazonaws.com/_/").then(function(e){return e.json()}).then(function(e){var t=document.querySelector(".mdx-insiders-list"),n=0;for(var o of e.sponsors)if("PUBLIC"===o.type){var s;(s=document.createElement("a")).href=o.url,s.title="@"+o.name,s.className="mdx-insiders-list__item",t.appendChild(s);var r=document.createElement("img");r.src=o.image,s.appendChild(r)}else n++;(s=document.createElement("a")).href="https://github.com/sponsors/squidfunk",s.title="[private]",s.innerText="+"+n,s.className="mdx-insiders-list__item mdx-insiders-list__item--private",t.appendChild(s),document.querySelector(".mdx-insiders-count").innerText=e.sponsors.length,document.querySelector(".mdx-insiders-container").removeAttribute("hidden"),document.querySelector('.mdx-insiders-total').innerText=" $ "+e.total.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}).catch(console.log);
 </script>
 
   [5]: https://github.com/sponsors/squidfunk
@@ -110,7 +110,7 @@ You can cancel your sponsorship anytime.[^3]
 
 The following features are currently exclusively available to sponsors:
 
-<div class="tx-columns" markdown="1">
+<div class="mdx-columns" markdown="1">
 
 - [x] [Section index pages :material-new-box:][21]
 - [x] [Latest release tag][15]
@@ -130,7 +130,7 @@ from time to time to learn about what's new, or follow [@squidfunk on
 
   [6]: https://twitter.com/squidfunk
 
-## Funding<span class="tx-insiders-total tx-insiders-count"></span>
+## Funding<span class="mdx-insiders-total mdx-insiders-count"></span>
 
 ### Goals
 

docs/reference/diagrams.md

@@ -17,7 +17,7 @@ popular and flexible solution for drawing diagrams.
 
 [:octicons-file-code-24: Source][2] ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][2]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][2]{: .mdx-insiders }
 
 The [SuperFences][3] extension, which is part of [Python Markdown
 Extensions][4], allows for adding __custom fences__, which can be used to

docs/reference/icons-emojis.md

@@ -11,15 +11,15 @@ and used in `mkdocs.yml`, documents and templates.
 
 ## Search
 
-<div class="mdx-icon-search" data-mdx-component="icon-search">
+<div class="mdx-iconsearch" data-mdx-component="iconsearch">
   <input
-    class="md-input md-input--stretch mdx-icon-search__input"
+    class="md-input md-input--stretch mdx-iconsearch__input"
     placeholder="Search the icon and emoji database"
-    data-mdx-component="icon-search-query"
+    data-mdx-component="iconsearch-query"
   />
-  <div class="mdx-icon-search-result" data-mdx-component="icon-search-result">
-    <div class="mdx-icon-search-result__meta"></div>
-    <ol class="mdx-icon-search-result__list"></ol>
+  <div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result">
+    <div class="mdx-iconsearch-result__meta"></div>
+    <ol class="mdx-iconsearch-result__list"></ol>
   </div>
 </div>
 <small>
@@ -205,7 +205,7 @@ _Example_:
 
 _Result_:
 
-:octicons-heart-fill-24:{: .tx-heart }
+:octicons-heart-fill-24:{: .mdx-heart }
 
   [20]: #with-colors
   [21]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

docs/setup/adding-a-git-repository.md

@@ -75,7 +75,7 @@ Some popular choices:
 ### Latest release
 
 [:octicons-file-code-24: Source][5] ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][5]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][5]{: .mdx-insiders }
 
 The visual appearance of the repository link has been improved as part of
 [Insiders][5], and will now automatically include the latest release tag which

docs/setup/changing-the-colors.md

@@ -32,7 +32,7 @@ theme:
 
 _Click on a tile to change the color scheme_:
 
-<div class="tx-switch">
+<div class="mdx-switch">
   <button data-md-color-scheme="default"><code>default</code></button>
   <button data-md-color-scheme="slate"><code>slate</code></button>
 </div>
@@ -77,7 +77,7 @@ theme:
 
 _Click on a tile to change the primary color_:
 
-<div class="tx-switch">
+<div class="mdx-switch">
   <button data-md-color-primary="red"><code>red</code></button>
   <button data-md-color-primary="pink"><code>pink</code></button>
   <button data-md-color-primary="purple"><code>purple</code></button>
@@ -138,7 +138,7 @@ _Click on a tile to change the accent color_:
   }
 </style>
 
-<div class="tx-switch">
+<div class="mdx-switch">
   <button data-md-color-accent="red"><code>red</code></button>
   <button data-md-color-accent="pink"><code>pink</code></button>
   <button data-md-color-accent="purple"><code>purple</code></button>
@@ -185,7 +185,7 @@ _Click on a tile to change the accent color_:
 
 [:octicons-file-code-24: Source][6] ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][6]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][6]{: .mdx-insiders }
 
 [Insiders][6] can easily add multiple color palettes, including a [scheme][8],
 [primary][9] and [accent][10] color each, and let the user choose. A color

docs/setup/changing-the-language.md

@@ -24,7 +24,7 @@ theme:
 
 The following languages are supported:
 
-<div class="tx-columns" markdown="1">
+<div class="mdx-columns" markdown="1">
 
 - `af` – Afrikaans
 - `ar` – Arabic
@@ -150,7 +150,7 @@ theme:
 
 Click on a tile to change the directionality:
 
-<div class="tx-switch">
+<div class="mdx-switch">
   <button data-md-dir="ltr"><code>ltr</code></button>
   <button data-md-dir="rtl"><code>rtl</code></button>
 </div>

docs/setup/setting-up-navigation.md

@@ -81,7 +81,7 @@ theme:
 [:octicons-file-code-24: Source][9] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][9]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][9]{: .mdx-insiders }
 
 When _sticky tabs_ are enabled, navigation tabs will lock below the header and
 always remain visible when scrolling down. Just add the following two feature
@@ -166,7 +166,7 @@ theme:
 [:octicons-file-code-24: Source][9] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][9]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][9]{: .mdx-insiders }
 
 When _section index pages_ are enabled, documents can be directly attached to
 sections, which is particularly useful for providing overview pages. Add the

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

@@ -58,7 +58,7 @@ The following options are supported:
 
     The following languages are supported:
 
-    <div class="tx-columns" markdown="1">
+    <div class="mdx-columns" markdown="1">
 
     - `ar` – Arabic
     - `da` – Danish
@@ -137,7 +137,7 @@ them at your own risk._
 [:octicons-file-code-24: Source][8] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][8]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][8]{: .mdx-insiders }
 
 When _search suggestions_ are enabled, the search will display the likeliest
 completion for the last word, saving the user many key strokes by accepting the
@@ -174,7 +174,7 @@ A demo is worth a thousand words — check it out at
 [:octicons-file-code-24: Source][8] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][8]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][8]{: .mdx-insiders }
 
 When _search highlighting_ is enabled and a user clicks on a search result,
 Material for MkDocs will highlight all occurrences after following the link.
@@ -208,7 +208,7 @@ A demo is worth a thousand words — check it out at
 [:octicons-file-code-24: Source][8] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][8]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][8]{: .mdx-insiders }
 
 When _search sharing_ is activated, a :material-share-variant: share button is
 rendered next to the reset button, which allows to deep link to the current

docs/setup/setting-up-the-footer.md

@@ -106,7 +106,7 @@ copyright: Copyright © 2016 - 2020 Martin Donath
 ### Remove generator
 
 [:octicons-file-code-24: Source][4] ·
-[:octicons-heart-fill-24:{: .tx-heart } Insiders only][4]{: .tx-insiders }
+[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][4]{: .mdx-insiders }
 
 The footer displays a _Made with Material for MkDocs_ notice to denote how
 the site was generated. The notice can be removed with the following setting