add swiperjs and test in Bouygues guide

docs/javascripts/swiper.js

@@ -0,0 +1,29 @@
+const swiper = new Swiper('.swiper', {
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+    renderBullet: function (index, className) {
+      const step = this.slides[index].hasAttribute('step') ? this.slides[index].getAttribute('step') : index + 1;
+      return '<span class="' + className + '">' + step + "</span>";
+    },
+  },
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+  on: {
+    afterInit: function(swiper) {
+      let stepsElement = this.el.nextElementSibling;
+      while (!(stepsElement instanceof HTMLOListElement)) {
+        stepsElement = stepsElement.nextElementSibling || stepsElement.nextSibling;
+      }
+      this.slides.map((el, i) => el.hasAttribute('step') ? el.getAttribute('step') - 1 : i).forEach(function (index) {
+        if (index < stepsElement.children.length && stepsElement.children[index] instanceof HTMLLIElement) {
+          ['click', 'mouseover'].forEach(function (e) {
+            stepsElement.children[index].addEventListener(e, () => swiper.slideTo(index));
+          });
+        }
+      });
+    },
+  },
+});

docs/posts/masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110.md

@@ -26,19 +26,43 @@ slug: masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-1
 
     [Debit+]: https://www.assistance.bouyguestelecom.fr/s/article/option-debit-plus
 
+<div class="swiper" markdown>
+
+<div class="swiper-wrapper" markdown>
+
+<div class="swiper-slide" markdown>
+
 ![Bbox Login](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_login.webp)
 
-1. Within a web browser, navigate to <https://mabbox.bytel.fr/> or <https://192.168.1.254> and, if asked, input your
-   Administrator password and click the __Connect__ button.
+</div>
+
+<div class="swiper-slide" markdown>
 
 ![Bbox Main](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_main.webp)
 
-2. From the __Main__ page, click on the __:material-cog: Administration interface__ to revert to the old interface.
+</div>
 
-3. From the __Administration__ page, click on the __Fiber__ section inside the __Internet__ panel on the left-hand side.
+<div class="swiper-slide" step="4" markdown>
 
 ![Bbox Fiber](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_fiber.webp)
 
+</div>
+
+</div>
+
+<div class="swiper-pagination"></div>
+<div class="swiper-button-prev"></div>
+<div class="swiper-button-next"></div>
+
+</div>
+
+1. Within a web browser, navigate to <https://mabbox.bytel.fr/> or <https://192.168.1.254> and, if asked, input your
+   Administrator password and click the __Connect__ button. {: step="1" }
+
+2. From the __Main__ page, click on the __:material-cog: Administration interface__ to revert to the old interface.
+
+3. From the __Administration__ page, click on the __Fiber__ section inside the __Internet__ panel on the left-hand side.
+
 4. From the __Fiber__ page, verify that the __PON Mode__ is XGS-PON.
 
     !!! tip "Take note of the Serial Number beginning with *SMBS* and Software Versions for the WAS-110 configuration"
@@ -47,19 +71,43 @@ slug: masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-1
 
 ### PON serial number
 
+<div class="swiper" markdown>
+
+<div class="swiper-wrapper" markdown>
+
+<div class="swiper-slide" markdown>
+
 ![Bbox Login](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_login.webp)
 
-1. Within a web browser, navigate to <https://mabbox.bytel.fr/> or <https://192.168.1.254> and, if asked, input your
-   Administrator password and click the __Connect__ button.
+</div>
+
+<div class="swiper-slide" markdown>
 
 ![Bbox Main](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_main.webp)
 
-2. From the __Main__ page, click on the __:material-cog: Administration interface__ to revert to the old interface.
+</div>
 
-3. From the __Administration__ page, click on the __Fiber__ section inside the __Internet__ panel on the left-hand side.
+<div class="swiper-slide" step="4" markdown>
 
 ![Bbox Fiber](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_fiber.webp)
 
+</div>
+
+</div>
+
+<div class="swiper-pagination"></div>
+<div class="swiper-button-prev"></div>
+<div class="swiper-button-next"></div>
+
+</div>
+
+1. Within a web browser, navigate to <https://mabbox.bytel.fr/> or <https://192.168.1.254> and, if asked, input your
+   Administrator password and click the __Connect__ button.
+
+2. From the __Main__ page, click on the __:material-cog: Administration interface__ to revert to the old interface.
+
+3. From the __Administration__ page, click on the __Fiber__ section inside the __Internet__ panel on the left-hand side.
+
 4. From the __Fiber__ page, copy the __Serial Number__ beginning with `SMBS`.
 
 ### PLOAM registration ID
@@ -80,19 +128,44 @@ The registration ID is composed of a seventy-two (72) octets from the fifteen (1
 
 The IMEI can be obtained from the back label of the Bbox or from the web UI.
 
+
+<div class="swiper" markdown>
+
+<div class="swiper-wrapper" markdown>
+
+<div class="swiper-slide" markdown>
+
 ![Bbox Login](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_login.webp)
 
-1. Within a web browser, navigate to <https://mabbox.bytel.fr/> or <https://192.168.1.254> and, if asked, input your
-   Administrator password and click the __Connect__ button.
+</div>
+
+<div class="swiper-slide" markdown>
 
 ![Bbox Main](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_main.webp)
 
-2. From the __Main__ page, click on the __:material-cog: Administration interface__ to revert to the old interface.
+</div>
 
-3. From the __Administration__ page, click on the __Model__ section inside the __Bbox__ panel on the right-hand side.
+<div class="swiper-slide" step="4" markdown>
 
 ![Bbox](masquerade-as-the-bouygues-sa-bbox-on-xgs-pon-with-the-bfw-solutions-was-110/bbox_bbox.webp)
 
+</div>
+
+</div>
+
+<div class="swiper-pagination"></div>
+<div class="swiper-button-prev"></div>
+<div class="swiper-button-next"></div>
+
+</div>
+
+1. Within a web browser, navigate to <https://mabbox.bytel.fr/> or <https://192.168.1.254> and, if asked, input your
+   Administrator password and click the __Connect__ button.
+
+2. From the __Main__ page, click on the __:material-cog: Administration interface__ to revert to the old interface.
+
+3. From the __Administration__ page, click on the __Model__ section inside the __Bbox__ panel on the right-hand side.
+
 4. From the __Bbox__ page, copy the __IMEI__ number.
 
 ## Purchase a WAS-110

docs/stylesheets/extra.css

@@ -93,3 +93,26 @@ input[type=submit] {
           mask-image: var(--md-admonition-icon--warning);
 }
 
+.swiper {
+  height: auto;
+  max-width: 100%;
+}
+
+.swiper-horizontal {
+  padding: 1rem;
+}
+
+.swiper-pagination-bullet {
+  width: 1rem;
+  height: 1rem;
+  text-align: center;
+  line-height: 1rem;
+  color: #000;
+  /*opacity: 1;*/
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.swiper-pagination-bullet-active {
+  color: var(--md-primary-bg-color);
+  background: var(--md-primary-fg-color);
+}

mkdocs.yml

@@ -57,6 +57,7 @@ extra_css:
   - stylesheets/extra.css
 extra_javascript:
   - javascripts/isp.js
+  - javascripts/swiper.js
 hooks:
   - hooks/external_links_md_extension.py
 plugins:

overrides/main.html

@@ -1,4 +1,18 @@
 {% extends "base.html" %}
+
+{% block styles %}
+  {{ super() }}
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+  />
+{% endblock %}
+
+{% block scripts %}
+  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+  {{ super() }}
+{% endblock %}
+
 {% block announce %}
   Join the 8311 community on 
   <a href="https://discord.com/servers/8311-886329492438671420" target="_blank" rel="noopener">