update doc

*compress img
*enhance style
*remove node package
*youtube embed now load after page load

docs/assets/extra.css

@@ -1,3 +1,8 @@
+/* avoid font to pop on family change */
+* {
+  font-display: swap;
+}
+
 :root {
   --md-primary-fg-color: #125678;
   --md-text-font: "Roboto";
@@ -7,6 +12,37 @@
   background-color: #125678;
 }
 
+/* better link contrast */
+article a {
+  color: #2388bb;
+}
+
+/* highlight content links */
+article a,
+article p > a {
+  text-decoration: underline;
+}
+
+/* header list links and config tabs stay default  */
+article li > a,
+article label > a {
+  text-decoration: none;
+}
+
+/* lighter base tab color */
+nav.md-tabs ul li a {
+  opacity: 0.9;
+}
+
+/* active desktop tabs nav */
+nav.md-tabs ul li.md-tabs__item--active a {
+  color: #36ce7a;
+  font-weight: bold;
+}
+
+nav.md-tabs ul li.md-tabs__item--active a:hover {
+  filter: brightness(0.9);
+}
 /*
 @font-face {
 	font-family: Consolas, monaco, monospace;

docs/index.md

@@ -54,7 +54,7 @@ To delve deeper into the core security features, we invite you to explore the [s
 ## Demo
 
 <p align="center">
-    <iframe style="display: block;" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZhYV-QELzA4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <iframe style="display: block;" width="560" height="315" data-src="https://www.youtube-nocookie.com/embed/ZhYV-QELzA4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </p>
 
 A demo website protected with BunkerWeb is available at [demo.bunkerweb.io](https://demo.bunkerweb.io/?utm_campaign=self&utm_source=doc). Feel free to visit it and perform some security tests.
@@ -83,4 +83,4 @@ Community and social networks :
 - [**Discord**](https://discord.com/invite/fTf46FmtyD)
 - [**LinkedIn**](https://www.linkedin.com/company/bunkerity/)
 - [**Twitter**](https://twitter.com/bunkerity)
-- [**Reddit**](https://www.reddit.com/r/BunkerWeb/)
+- [**Reddit**](https://www.reddit.com/r/BunkerWeb/)

docs/overrides/main.html

@@ -1,22 +1,34 @@
-{% extends "base.html" %}
-
-{% block outdated %}
-  You're not viewing the documentation of the latest version.
-  <a href="{{ '../' ~ base_url }}">
-    <strong>Click here to view latest.</strong>
-  </a>
-{% endblock %}
-
-{% block announce %}
-  📢 Looking for technical support, tailored consulting or custom development for BunkerWeb ?
-  Visit the <a href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=doc" style="color: #3f6ec6; text-decoration: underline">BunkerWeb Panel</a> for more information on our enterprise offers.
-{% endblock %}
-
-{% block libs %}
+{% extends "base.html" %} {% block outdated %} You're not viewing the
+documentation of the latest version.
+<a href="{{ '../' ~ base_url }}">
+  <strong>Click here to view latest.</strong>
+</a>
+{% endblock %} {% block announce %} 📢 Looking for technical support, tailored
+consulting or custom development for BunkerWeb ? Visit the
+<a
+  href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=doc"
+  style="color: #3f6ec6; text-decoration: underline"
+  >BunkerWeb Panel</a
+>
+for more information on our enterprise offers. {% endblock %} {% block libs %}
 <script
   async
   defer
   data-domain="docs.bunkerweb.io"
   src="https://data.bunkerity.com/js/script.js"
 ></script>
+<script defer>
+  // Lazy load images and embed youtube videos
+  window.addEventListener("load", () => {
+    document.querySelectorAll("[data-src]").forEach((el) => {
+      el.setAttribute("src", el.getAttribute("data-src"));
+    });
+  });
+  // Add missing label
+  try {
+    document
+      .querySelector('div.md-search[data-md-component="search"][role="dialog"]')
+      .setAttribute("aria-label", "Search in documentation");
+  } catch (err) {}
+</script>
 {% endblock %}