From 7c4b31e01cc40b2b8022342ca3c9d19915b18685 Mon Sep 17 00:00:00 2001
From: Pierre Kancir <pierre.kancir.emn@gmail.com>
Date: Thu, 21 Nov 2024 16:21:09 +0100
Subject: [PATCH 1/2] fronend: inline topbar for speedup

---
 frontend/includes/_topbar.html |  88 --------------------------
 frontend/index.html            | 112 +++++++++++++++++++++++++++------
 2 files changed, 92 insertions(+), 108 deletions(-)
 delete mode 100644 frontend/includes/_topbar.html

diff --git a/frontend/includes/_topbar.html b/frontend/includes/_topbar.html
deleted file mode 100644
index 47f603774f..0000000000
--- a/frontend/includes/_topbar.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
-
-	<div class="container">
-
-		<a class="navbar-brand ml-auto mr-auto" href="#">
-			<img src="images/ArduPilot-Motto.png" alt="ArduPilot" title="ArduPilot" class="img-fluid"
-				media="(max-width: 767.98px)">
-		</a>
-
-		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-
-
-		<div class="collapse navbar-collapse" id="navbarSupportedContent">
-
-			<ul class="navbar-nav mr-auto  ">
-
-				<li class="nav-item active">
-					<a class="nav-link" href="https://www.ardupilot.org">HOME</a>
-				</li>
-
-				<li class="nav-item dropdown">
-					<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
-						aria-haspopup="true" aria-expanded="false">ABOUT</a>
-					<div class="dropdown-menu" aria-labelledby="dropdown01">
-						<a class="dropdown-item" href="https://ardupilot.org/dev/docs/events.html">Events</a>
-						<a class="dropdown-item"
-							href="https://ardupilot.org/dev/docs/common-history-of-ardupilot.html">History</a>
-						<a class="dropdown-item" href="https://ardupilot.org/dev/docs/license-gplv3.html">License</a>
-						<a class="dropdown-item"
-							href="https://ardupilot.org/ardupilot/docs/common-partners.html">Partners</a>
-						<!-- There is a partners.html waiting for be enhanced -->
-						<a class="dropdown-item"
-							href="https://ardupilot.org/dev/docs/common-training-centers.html">Schools</a>
-						<a class="dropdown-item" href="https://ardupilot.org/ardupilot/docs/common-team.html">Team</a>
-						<!-- There is a team.html waiting for be enhanced -->
-						<a class="dropdown-item" href="https://ardupilot.org/dev/docs/common-team.html">Top
-							Contributors</a>
-						<a class="dropdown-item" href="https://ardupilot.org/dev/docs/job-openings.html">Volunteer</a>
-					</div>
-				</li>
-
-				<li class="nav-item active">
-					<a class="nav-link" href="https://discuss.ardupilot.org/c/blog">BLOGS </a>
-				</li>
-
-				<li class="nav-item active">
-					<a class="nav-link text-nowrap"
-						href="https://ardupilot.org/copter/docs/common-use-cases-and-applications.html">USE CASES</a>
-				</li>
-
-				<li class="nav-item active">
-					<a class="nav-link" href="https://ardupilot.org/ardupilot">DOCUMENTATION</a>
-				</li>
-
-				<li class="nav-item active">
-					<a class="nav-link" href="https://ardupilot.org/ardupilot/docs/common-stores.html">STORES</a>
-				</li>
-
-				<li class="nav-item dropdown">
-					<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown"
-						aria-haspopup="true" aria-expanded="false">COMMUNITY</a>
-					<div class="dropdown-menu" aria-labelledby="dropdown02">
-						<a class="dropdown-item"
-							href="https://ardupilot.org/ardupilot/docs/common-commercial-support.html">Commercial
-							Support</a>
-						<a class="dropdown-item"
-							href="https://ardupilot.org/ardupilot/docs/common-contact-us.html">Contact Us</a>
-						<a class="dropdown-item"
-							href="https://ardupilot.org/dev/docs/ardupilot-discord-server.html">Developer Chat</a>
-						<a class="dropdown-item" href="https://discuss.ardupilot.org">Discuss Forums</a>
-						<a class="dropdown-item" href="https://www.facebook.com/groups/ArduPilot.org">Facebook</a>
-						<a class="dropdown-item" href="https://ardupilot.org/dev/docs/gsoc.html">GSOC</a>
-						<a class="dropdown-item" href="https://twitter.com/hashtag/Ardupilot?src=hash">Twitter</a>
-						<a class="dropdown-item"
-							href="https://www.youtube.com/channel/UCtqkaA8BWDpISGNAfivUSHw">YouTube</a>
-						<a class="dropdown-item"
-							href="https://www.instagram.com/explore/tags/ardupilot/?hl=en">Instagram</a>
-					</div>
-				</li>
-
-			</ul>
-		</div>
-
-	</div>
-</nav>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index e98eb47213..c3f7689e4a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -39,23 +39,6 @@
 
     <link rel="stylesheet" href="css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-    <script>
-        function loadContent(elementId, file) {
-            fetch(file)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    return response.text();
-                })
-                .then(text => document.getElementById(elementId).innerHTML = text)
-                .catch(e => console.error('Error:', e));
-        }
-
-        document.addEventListener("DOMContentLoaded", function () {
-            loadContent("headerID", "includes/_topbar.html");
-        });
-    </script>
     <script defer data-domain="ardupilot.org"
             src="https://plausible.ardupilot.org/js/script.outbound-links.js"></script>
 
@@ -64,9 +47,98 @@
 <body>
 
 <header>
-    <div id="headerID">
-        <!-- NAVBAR -->
-    </div>
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
+
+        <div class="container">
+
+            <a class="navbar-brand" href="#">
+                <picture>
+                    <source media="(max-height: 480px)" type="image/webp"
+                            srcset="images/ArduPilot-Motto.webp">
+                    <source media="(max-height: 480px)" type="image/png" srcset="images/ArduPilot-Motto.png">
+                    <img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid">
+                </picture>
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
+                <ul class="navbar-nav mr-auto  ">
+
+                    <li class="nav-item active">
+                        <a class="nav-link" href="https://www.ardupilot.org">HOME</a>
+                    </li>
+
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
+                           aria-haspopup="true" aria-expanded="false">ABOUT</a>
+                        <div class="dropdown-menu" aria-labelledby="dropdown01">
+                            <a class="dropdown-item" href="https://ardupilot.org/dev/docs/events.html">Events</a>
+                            <a class="dropdown-item"
+                               href="https://ardupilot.org/dev/docs/common-history-of-ardupilot.html">History</a>
+                            <a class="dropdown-item" href="https://ardupilot.org/dev/docs/license-gplv3.html">License</a>
+                            <a class="dropdown-item"
+                               href="https://ardupilot.org/ardupilot/docs/common-partners.html">Partners</a>
+                            <!-- There is a partners.html waiting for be enhanced -->
+                            <a class="dropdown-item"
+                               href="https://ardupilot.org/dev/docs/common-training-centers.html">Schools</a>
+                            <a class="dropdown-item" href="https://ardupilot.org/ardupilot/docs/common-team.html">Team</a>
+                            <!-- There is a team.html waiting for be enhanced -->
+                            <a class="dropdown-item" href="https://ardupilot.org/dev/docs/common-team.html">Top
+                                Contributors</a>
+                            <a class="dropdown-item" href="https://ardupilot.org/dev/docs/job-openings.html">Volunteer</a>
+                        </div>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://discuss.ardupilot.org/c/blog">BLOGS </a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link text-nowrap"
+                           href="https://ardupilot.org/copter/docs/common-use-cases-and-applications.html">USE CASES</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://ardupilot.org/ardupilot">DOCUMENTATION</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://ardupilot.org/ardupilot/docs/common-stores.html">STORES</a>
+                    </li>
+
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown"
+                           aria-haspopup="true" aria-expanded="false">COMMUNITY</a>
+                        <div class="dropdown-menu" aria-labelledby="dropdown02">
+                            <a class="dropdown-item"
+                               href="https://ardupilot.org/ardupilot/docs/common-commercial-support.html">Commercial
+                                Support</a>
+                            <a class="dropdown-item"
+                               href="https://ardupilot.org/ardupilot/docs/common-contact-us.html">Contact Us</a>
+                            <a class="dropdown-item"
+                               href="https://ardupilot.org/dev/docs/ardupilot-discord-server.html">Developer Chat</a>
+                            <a class="dropdown-item" href="https://discuss.ardupilot.org">Discuss Forums</a>
+                            <a class="dropdown-item" href="https://www.facebook.com/groups/ArduPilot.org">Facebook</a>
+                            <a class="dropdown-item" href="https://ardupilot.org/dev/docs/gsoc.html">GSOC</a>
+                            <a class="dropdown-item" href="https://twitter.com/hashtag/Ardupilot?src=hash">Twitter</a>
+                            <a class="dropdown-item"
+                               href="https://www.youtube.com/channel/UCtqkaA8BWDpISGNAfivUSHw">YouTube</a>
+                            <a class="dropdown-item"
+                               href="https://www.instagram.com/explore/tags/ardupilot/?hl=en">Instagram</a>
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
+
+        </div>
+    </nav>
 </header>
 
 <main role="main" class="container">

From f56742428edc8af4b90ebf9aacdd3198dcbfbaa2 Mon Sep 17 00:00:00 2001
From: Pierre Kancir <pierre.kancir.emn@gmail.com>
Date: Thu, 21 Nov 2024 16:21:20 +0100
Subject: [PATCH 2/2] frontend: fix missing attributes

---
 frontend/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index c3f7689e4a..3ac8d0811f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -725,7 +725,7 @@ <h1>User Cases</h1>
                         img.loading = "lazy";
                         img.style.maxWidth = "640px";
                         img.style.width = "100%";
-                        //img.alt = val.title;
+                        img.alt = val.title;
 
                         anchor.innerHTML = '';
                         anchor.appendChild(img);
@@ -753,7 +753,7 @@ <h1>User Cases</h1>
                             }
                             </style>
                             <a href='${val.youtube_link}?autoplay=1' class='yt_img'>
-                            <img src='${video_thumbnail}' class='yt_img' />
+                            <img src='${video_thumbnail}' class='yt_img'  alt='${val.title}'/>
                             <svg version='1.1' viewBox='0 0 68 48' width='68px' style='position: relative;' >
                                 <path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
                                 <path d='M 45,24 27,14 27,34' fill='#fff'></path>