jenkins-infra / plugin-site

This is the frontend application driven by data from the Jenkins Plugin Site API.
https://plugins.jenkins.io/
MIT License
20 stars 64 forks source link

[plugins.jenkins.io] Top sub-menus do not work #1204

Closed Wadeck closed 2 years ago

Wadeck commented 2 years ago

Service(s)

plugins.jenkins.io

Summary

When browsing https://plugins.jenkins.io/, the top menu contains sub-menus (the ones with arrow). They do not work as in jenkins.io. Only the direct links work, like "Blog" or "Download".

I suspect some JavaScript was not included or broken between the two websites.

Tested with Chrome, Edge.

⚠️ With Firefox, the behavior is weirder. You have to click once, and the second click will open the menu. While it's still a one click on the main website.

Reproduction steps

No response

zbynek commented 2 years ago

For the record works on https://deploy-preview-1151--jenkins-plugin-site-pr.netlify.app/ but not on https://deploy-preview-1152--jenkins-plugin-site-pr.netlify.app/ I assume related to https://github.com/jenkins-infra/plugin-site/pull/1152/files#diff-5e0736e0946da27114cb5a878b8f41f863b90de9be5f849e3f381a2dc56b6009R172 @halkeye ideas?

halkeye commented 2 years ago

diff -u <(curl -qsL https://deploy-preview-1151--jenkins-plugin-site-pr.netlify.app/ | tidy --custom-tags blocklevel 2>&1) <(curl -qsL https://deploy-preview-1152--jenkins-plugin-site-pr.netlify.app/ | tidy --custom-tags blocklevel 2>&1) | less

so yes.. i do think its related, but not entirely sure why.

My guess is that it was loading <script at the end of the page (bottom of body), and now its loading it at the start of the page (bottom of head)?

Its not a clean diff, so just pasteing a few relatvent lines.

 <html>
@@ -162,6 +162,19 @@
 "Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software">
 <meta data-react-helmet="true" name="twitter:image" content=
 "https://jenkins.io/images/logo-title-opengraph.png">
+<script data-react-helmet="true" src=
+"https://www.jenkins.io/assets/bower/jquery/jquery.min.js"></script>
+<script data-react-helmet="true" src=
+"https://www.jenkins.io/assets/bower/anchor-js/anchor.min.js"></script>
+<script data-react-helmet="true" src=
+"https://www.jenkins.io/assets/bower/tether/js/tether.min.js"></script>
+<script data-react-helmet="true" src=
+"https://www.jenkins.io/assets/bower/bootstrap/js/bootstrap.min.js"></script>
+<script data-react-helmet="true" data="ionicons" src=
+"https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/ionicons/ionicons.esm.js"
+type="module"></script>
+<script data-react-helmet="true" data="ionicons" src=
+"https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/ionicons/ionicons.js"></script>
 <style data-react-helmet="true">
 #grid-box { position: relative } 
 </style>
 <div id="___gatsby">
 <div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper">
 <div>
-<script src=
-"https://www.jenkins.io/assets/bower/jquery/jquery.min.js"></script>
 <nav class=
 "navbar navbar-expand-lg navbar-dark top bg-dark fixed-top" id=
 "ji-toolbar"><a class="navbar-brand" href=
@@ -528,25 +538,15 @@
 </div>
 </div>
 </div>
-<script src=
-"https://www.jenkins.io/assets/bower/anchor-js/anchor.min.js"></script>
-<script src=
-"https://www.jenkins.io/assets/bower/tether/js/tether.min.js"></script>
-<script src=
-"https://www.jenkins.io/assets/bower/bootstrap/js/bootstrap.min.js"></script>
-<script data="ionicons" src=
-"https://www.jenkins.io/assets/bower/ionicons/ionicons/ionicons.esm.js"
-type="module"></script>
-<script data="ionicons" nomodule="" src=
-"https://www.jenkins.io/assets/bower/ionicons/ionicons/ionicons.js"></script>
 <footer id="footer">
 <div class="container">
 <div class="row">
 <div class="col-md-4">
 <p class="box"><a href=
 "https://github.com/jenkins-infra/plugin-site/
@@ -635,17 +635,7 @@
 </div>
 </div>
 </footer>
-<script>
-  $(function(){
-    var $body = $(document.body);
-    $(".nav-link.dropdown-toggle").on("mousedown", function(){
-      $body.addClass("no-outline");
-    })
-    $body.on("keydown", function(){
-      $body.removeClass("no-outline");
-    })
-  })
-</script></div>
+</div>