Merge branch 'dev' of github.com:bunkerity/bunkerweb into dev

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

docs/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "puppeteer": "^21.3.6"
-  }
-}

docs/web-ui.md

@@ -3,7 +3,7 @@
 ## Overview
 
 <p align="center">
-	<iframe style="display: block;" width="560" height="315" src="https://www.youtube-nocookie.com/embed/Ao20SfvQyr4" 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/Ao20SfvQyr4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </p>
 
 The "Web UI" is a web application that helps you manage your BunkerWeb instance using a user-friendly interface instead of the command-line one.
@@ -40,14 +40,14 @@ Because the web UI is a web application, the recommended installation procedure
 The setup wizard is a feature that helps you to **configure** and **install the web UI** using a **user-friendly interface**. You will need to set the `UI_HOST` setting (`http://hostname-of-web-ui:7000`) and browse the `/setup` URI of your server to access the setup wizard.
 
 <figure markdown>
-  ![Overview](assets/img/ui-wizard-account.png){ align=center, width="350" }
+  ![Overview](assets/img/ui-wizard-account.webp){ align=center, width="350" }
   <figcaption>Account section of the setup wizard</figcaption>
 </figure>
 
 Choose your administator username and password. Please note that password must have at least 8 chars with 1 lower case letter, 1 upper case letter, 1 digit and 1 special char.
 
 <figure markdown>
-  ![Overview](assets/img/ui-wizard-settings.png){ align=center, width="350" }
+  ![Overview](assets/img/ui-wizard-settings.webp){ align=center, width="350" }
   <figcaption>Settings section of the setup wizard</figcaption>
 </figure>