Added documentation for cookie consent

docs/insiders/index.md

@@ -117,9 +117,10 @@ The following features are currently exclusively available to sponsors:
 
 <div class="mdx-columns" markdown="1">
 
+- [x] [Cookie consent :material-new-box:][33]
 - [x] [Linking content tabs :material-new-box:][32]
 - [x] [Boosting pages in search :material-new-box:][30]
-- [x] [Tags (with search integration) :material-new-box:][29]
+- [x] [Tags (with search integration)][29]
 - [x] [Stay on page when switching versions][28]
 - [x] [Version warning][26]
 - [x] [Custom admonition icons][31]
@@ -192,33 +193,35 @@ the public for general availability.
 #### $ 6,000 – Trinidad Scorpion
 
 - [x] [Boosting pages in search][30]
-- [ ] Improved search result summaries
-- [ ] Stay on page when switching languages
-
-  [30]: ../setup/setting-up-site-search.md#boosting-a-page
-
-#### $ 7,000 – Royal Gold
-
-- [ ] Table of contents auto-collapse
-- [ ] Table of contents follows active anchor
-- [ ] Native lightbox integration
-
-#### $ 8,000 – Scotch Bonnet
-
 - [x] [Custom admonition icons][31]
 - [x] [Linking content tabs][32]
-- [ ] List of last searches
 
+  [30]: ../setup/setting-up-site-search.md#boosting-a-page
   [31]: ../reference/admonitions.md#changing-the-icons
   [32]: ../reference/content-tabs.md#linking-content-tabs
 
+#### $ 7,000 – Royal Gold
+
+- [x] [Cookie consent][33]
+- [ ] Table of contents auto-collapse
+- [ ] Table of contents follows active anchor
+
+  [33]: ../setup/setting-up-site-analytics.md#cookie-consent
+
+#### $ 8,000 – Scotch Bonnet
+
+- [ ] Improved search result summaries
+- [ ] Stay on page when switching languages
+- [ ] List of last searches
+
 #### Future
 
-- [ ] [Material for MkDocs Live Edit][33]
+- [ ] [Material for MkDocs Live Edit][34]
 - [ ] New layouts and styles
 - [ ] Code block palette toggle
+- [ ] Native lightbox integration
 
-  [33]: https://twitter.com/squidfunk/status/1338252230265360391
+  [34]: https://twitter.com/squidfunk/status/1338252230265360391
 
 ### Goals completed
 
@@ -273,23 +276,23 @@ implemented behind feature flags; all configuration changes are
 backward-compatible. This means that your users will be able to build the
 documentation locally with Material for MkDocs and when they push their changes,
 it can be built with Insiders (e.g. as part of GitHub Actions). Thus, it's
-recommended to [install Insiders][34] only in CI, as you don't want to expose
+recommended to [install Insiders][35] only in CI, as you don't want to expose
 your `GH_TOKEN` to users.
 
-  [34]: ../publishing-your-site.md#github-pages
+  [35]: ../publishing-your-site.md#github-pages
 
 ### Payment
 
 _We don't want to pay for sponsorship every month. Are there any other options?_
 
 Yes. You can sponsor on a yearly basis by [switching your GitHub account to a
-yearly billing cycle][35]. If for some reason you cannot do that, you could
+yearly billing cycle][36]. If for some reason you cannot do that, you could
 also create a dedicated GitHub account with a yearly billing cycle, which you
 only use for sponsoring (some sponsors already do that).
 
 One-time payments are not eligible for Insiders.
 
-  [35]: https://docs.github.com/en/github/setting-up-and-managing-billing-and-payments-on-github/changing-the-duration-of-your-billing-cycle
+  [36]: https://docs.github.com/en/github/setting-up-and-managing-billing-and-payments-on-github/changing-the-duration-of-your-billing-cycle
 
 ### Terms
 
@@ -298,7 +301,7 @@ commercial project. Can we use Insiders under the same terms and conditions?_
 
 Yes. Whether you're an individual or a company, you may use _Material for MkDocs
 Insiders_ precisely under the same terms as Material for MkDocs, which are given
-by the [MIT license][36]. However, we kindly ask you to respect the following
+by the [MIT license][37]. However, we kindly ask you to respect the following
 guidelines:
 
 - Please __don't distribute the source code__ of Insiders. You may freely use
@@ -309,7 +312,7 @@ guidelines:
 - If you cancel your subscription, you're removed as a collaborator and will
   miss out on future updates of Insiders. However, you may __use the latest
   version__ that's available to you __as long as you like__. Just remember that
-  [GitHub deletes private forks][37].
+  [GitHub deletes private forks][38].
 
-  [36]: ../license.md
-  [37]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
+  [37]: ../license.md
+  [38]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository

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

@@ -60,6 +60,33 @@ yourself, [this tutorial][4] might be a good start._
 
   [4]: https://www.analyticsmania.com/post/track-site-search-with-google-tag-manager-and-google-analytics/
 
+### Cookie consent
+
+[:octicons-file-code-24: Source][5] ·
+:octicons-beaker-24: Experimental ·
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][5]{ .mdx-insiders }
+
+Material for MkDocs ships a native and extensible cookie consent form, which
+when enabled will ask the user for his consent prior to sending analytics.
+Add the following to `mkdocs.yml`:
+
+``` yaml
+extra:
+  consent: true
+```
+
+When a user first visits your site, a cookie consent form is rendered:
+
+[![With tabs][6]][6]
+
+  [5]: ../insiders/index.md
+  [6]: ../assets/screenshots/consent.png
+
+_Let's get this feature out of the experimental status! You are encouraged to
+share your feedback in #1914, so we can provide the necessary configuration
+options for easy customizations. If you wish to customize it today, you can
+override_ `partials/consent.html`.
+
 ## Customization
 
 ### Other analytics providers
@@ -68,8 +95,8 @@ yourself, [this tutorial][4] might be a good start._
 :octicons-mortar-board-24: Difficulty: _easy_
 
 In order to integrate another analytics service provider offering an
-asynchronous JavaScript-based tracking solution, you can [extend the theme][5]
-and [override the `analytics` block][6]:
+asynchronous JavaScript-based tracking solution, you can [extend the theme][7]
+and [override the `analytics` block][8]:
 
 ``` html
 {% block analytics %}
@@ -77,10 +104,10 @@ and [override the `analytics` block][6]:
 {% endblock %}
 ```
 
-  [5]: ../customization.md#extending-the-theme
-  [6]: ../customization.md#overriding-blocks-recommended
+  [7]: ../customization.md#extending-the-theme
+  [8]: ../customization.md#overriding-blocks-recommended
 
-If you're using [instant loading][7], you may use the `location$` observable,
+If you're using [instant loading][9], you may use the `location$` observable,
 which will emit the current `URL` to listen for navigation events and register
 a page view event with:
 
@@ -90,9 +117,9 @@ location$.subscribe(function(url) {
 })
 ```
 
-Note that this must be integrated with [additional JavaScript][8], and cannot be
+Note that this must be integrated with [additional JavaScript][10], and cannot be
 included as part of the `analytics` block, as it is included in the `head` of
 the document.
 
-  [7]: setting-up-navigation.md#instant-loading
-  [8]: ../customization.md#additional-javascript
+  [9]: setting-up-navigation.md#instant-loading
+  [10]: ../customization.md#additional-javascript

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e1d16808.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.1fe995fd.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f1a3b89f.min.css' | url }}">

src/assets/stylesheets/main/layout/_form.scss

@@ -35,6 +35,7 @@
     font-weight: 700;
     border: px2rem(2px) solid currentColor;
     border-radius: px2rem(2px);
+    cursor: pointer;
     transition:
       color            125ms,
       background-color 125ms,