fix(ui): switcher styling bugs, mobile navigation, and unknown version banner issue

.github/workflows/build-gh-pages.yml

@@ -1,5 +1,6 @@
 name: deploy-book
 
+# Run when pushing to main or translation branches
 on:
   push:
     branches:
@@ -12,6 +13,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  # Get language and version info
   get-info:
     runs-on: ubuntu-latest
     outputs:
@@ -21,12 +23,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      # Read languages from JSON file
       - name: Get languages directly with jq
         id: get-languages
         run: |
           languages=$(jq -c '[.[] | .code]' DISCOVER/_static/languages.json)
           echo "languages=${languages}" >> "$GITHUB_OUTPUT"
 
+      # Determine version based on ref type and name
       - name: Determine version from GitHub context
         id: version-info
         env:
@@ -40,12 +44,13 @@ jobs:
             version="${REF_NAME%-translations}"
           fi
           echo "version=$version" >> "$GITHUB_OUTPUT"
-
+
+  # Build docs for each language
   deploy-book:
     needs: get-info
     runs-on: ubuntu-latest
     strategy:
-      max-parallel: 1
+      max-parallel: 1 # Build one at a time
       matrix:
         language: ${{ fromJSON(needs.get-info.outputs.languages) }}
     steps:
@@ -59,13 +64,15 @@ jobs:
         with:
           python-version: '3.13'
 
+      # Build the documentation
       - name: Build documentation with script
         env:
           VERSION: ${{ needs.get-info.outputs.version }}
           LANGUAGE: ${{ matrix.language }}
         run: |
           bash ci/build_website.sh
 
+      # Deploy the built documentation
       - name: Deploy language to GitHub Pages
         uses: peaceiris/actions-gh-pages@v4
         with:
@@ -74,6 +81,7 @@ jobs:
           destination_dir: ${{ needs.get-info.outputs.version }}/${{ matrix.language }}
           keep_files: true
 
+  # Create redirect for version
   create-redirect:
     needs: [get-info, deploy-book] 
     runs-on: ubuntu-latest
@@ -105,6 +113,7 @@ jobs:
           destination_dir: ${{ needs.get-info.outputs.version }}
           keep_files: true
 
+  # Deploy files to root (main branch only)
   deploy-root-files:
     needs: [create-redirect]
     runs-on: ubuntu-latest
@@ -113,12 +122,13 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      # Copy important files to root
       - name: Create root files directory
         run: |
           mkdir -p root_files
-          cp DISCOVER/404.html root_files/
-          cp index.html root_files/
-          cp DISCOVER/_static/versions.json root_files/
+          cp DISCOVER/404.html root_files/  # Error page
+          cp index.html root_files/         # Landing page
+          cp DISCOVER/_static/versions.json root_files/  # Versions list
 
       - name: Deploy root files to GitHub Pages
         uses: peaceiris/actions-gh-pages@v4

DISCOVER/_static/css/Switchers.css

@@ -0,0 +1,131 @@
+/* Version switcher and language switcher */
+.version-switcher__button,
+#language-switcher-button {
+  font-size: 1rem !important;
+  color: #495057 !important;
+  border: 1px solid #dee2e6 !important;
+}
+
+.version-switcher__button:hover,
+#language-switcher-button:hover,
+.version-switcher__button:focus,
+#language-switcher-button:focus {
+  background-color: #f8f9fa !important;
+  border-color: transparent !important;
+  box-shadow: 0 0 0 0.1875rem #e89217 !important;
+}
+
+.version-switcher__button:hover,
+#language-switcher-button:hover {
+  color: #222832 !important;
+}
+
+.version-switcher__button:focus,
+#language-switcher-button:focus {
+  outline: none !important;
+}
+
+.version-switcher__button::after,
+#language-switcher-button::after {
+  content: "" !important;
+  display: inline-block !important;
+  margin-left: 0.5rem !important;
+  vertical-align: 0.125em !important;
+  border: 0.3em solid transparent !important;
+  border-top-color: #495057 !important;
+  border-bottom-width: 0 !important;
+}
+
+.version-switcher__button:hover::after,
+#language-switcher-button:hover::after {
+  border-top-color: #222832 !important;
+}
+
+.version-switcher__button .caret,
+.version-switcher__button::before {
+  display: none !important;
+}
+
+.version-switcher__menu .list-group-item:hover,
+.dropdown-item:hover {
+  background-color: #f8f9fa !important;
+  color:  #e89217 !important;
+  text-decoration: underline !important;
+  text-decoration-thickness: 0.15rem !important;
+}
+
+.dropdown-item.active {
+  color: #528fe4 !important;
+  background-color: #ffffff !important;
+  box-shadow: inset 3px 0 0 #528fe4 !important;
+}
+
+.dropdown-menu > li:not(:last-child) {
+  border-bottom: 1px solid #dee2e6 !important;
+}
+
+.dropdown-item.active:hover {
+  background-color: #f8f9fa !important;
+  color: #e89217 !important;
+}
+
+
+html[data-theme=dark] .version-switcher__button,
+html[data-theme=dark] #language-switcher-button {
+  color: #9ca4af !important;
+  background-color: #121212 !important;
+  border-color: #48566b !important;
+}
+
+html[data-theme=dark] .version-switcher__button:hover,
+html[data-theme=dark] #language-switcher-button:hover,
+html[data-theme=dark] .version-switcher__button:focus,
+html[data-theme=dark] #language-switcher-button:focus{
+  color: #ced6dd !important;
+  border-color: transparent !important;
+}
+
+html[data-theme=dark] .version-switcher__button:focus,
+html[data-theme=dark] #language-switcher-button:focus{
+  outline: none !important;
+}
+
+html[data-theme=dark] .version-switcher__button::after,
+html[data-theme=dark] #language-switcher-button::after {
+  border-top-color: #9ca4af !important;
+}
+
+html[data-theme=dark] .version-switcher__button:hover::after,
+html[data-theme=dark] #language-switcher-button:hover::after {
+  border-top-color: #ced6dd !important;
+}
+
+html[data-theme=dark] .version-switcher__menu,
+html[data-theme=dark] .version-switcher__menu .list-group-item {
+  background-color: #121212 !important;
+}
+
+html[data-theme=dark] .version-switcher__menu .list-group-item:hover,
+html[data-theme=dark] .dropdown-item:hover {
+  background-color: #0D0D0D !important;
+  color:  #e89217 !important;
+  text-decoration: underline !important;
+  text-decoration-thickness: 0.15rem !important;
+}
+
+html[data-theme=dark] .dropdown-item.active {
+  background-color: #121212 !important;
+}
+
+html[data-theme=dark] .dropdown-item.active:hover {
+  background-color: #0D0D0D !important;
+}
+
+.bd-header-article .version-switcher__button,
+.bd-header-article #language-switcher-button {
+  margin: 0 !important;
+}
+
+html[data-theme=dark] .dropdown-menu > li:not(:last-child) {
+  border-bottom: 1px solid #48566b !important;
+}

DISCOVER/_static/css/mainLogo.css

@@ -119,110 +119,3 @@ html[data-theme=dark] .social-links a:hover {
     margin: 1rem 0 0 0;
   }
 }
-
-/* Version switcher and language switcher */
-.version-switcher__button,
-#language-switcher-button {
-  font-size: 1rem !important;
-  color: #495057 !important;
-  border: 1px solid #dee2e6 !important;
-}
-
-.version-switcher__button:hover,
-#language-switcher-button:hover,
-.version-switcher__button:focus,
-#language-switcher-button:focus {
-  background-color: #f8f9fa !important;
-  border-color: transparent !important;
-  box-shadow: 0 0 0 0.1875rem #e89217 !important;
-}
-
-.version-switcher__button:hover,
-#language-switcher-button:hover {
-  color: #222832 !important;
-}
-
-.version-switcher__button:focus,
-#language-switcher-button:focus {
-  outline: none !important;
-}
-
-.version-switcher__button::after,
-#language-switcher-button::after {
-  content: "" !important;
-  display: inline-block !important;
-  margin-left: 0.5rem !important;
-  vertical-align: 0.125em !important;
-  border: 0.3em solid transparent !important;
-  border-top-color: #495057 !important;
-  border-bottom-width: 0 !important;
-}
-
-.version-switcher__button:hover::after,
-#language-switcher-button:hover::after {
-  border-top-color: #222832 !important;
-}
-
-.version-switcher__button .caret,
-.version-switcher__button::before {
-  display: none !important;
-}
-
-.version-switcher__menu .list-group-item:hover,
-.dropdown-item:hover {
-  background-color: #f8f9fa !important;
-}
-
-.dropdown-item.active {
-  color: #528fe4 !important;
-  background-color: #ffffff !important;
-  box-shadow: inset 3px 0 0 #528fe4 !important;
-  border-bottom: 1px solid #dee2e6 !important;
-}
-
-html[data-theme=dark] .version-switcher__button,
-html[data-theme=dark] #language-switcher-button {
-  color: #9ca4af !important;
-  background-color: #121212 !important;
-  border-color: #48566b !important;
-}
-
-html[data-theme=dark] .version-switcher__button:hover,
-html[data-theme=dark] #language-switcher-button:hover {
-  color: #ced6dd !important;
-}
-
-html[data-theme=dark] .version-switcher__button::after,
-html[data-theme=dark] #language-switcher-button::after {
-  border-top-color: #9ca4af !important;
-}
-
-html[data-theme=dark] .version-switcher__button:hover::after,
-html[data-theme=dark] #language-switcher-button:hover::after {
-  border-top-color: #ced6dd !important;
-}
-
-html[data-theme=dark] .version-switcher__menu,
-html[data-theme=dark] .version-switcher__menu .list-group-item {
-  background-color: #121212 !important;
-}
-
-html[data-theme=dark] .version-switcher__menu .list-group-item:hover,
-html[data-theme=dark] .dropdown-item:hover {
-  background-color: #000000 !important;
-}
-
-html[data-theme=dark] .dropdown-item.active {
-  background-color: #121212 !important;
-  border-bottom-color: #48566b !important;
-}
-
-html[data-theme=dark] .dropdown-item.active:hover {
-  color: #ced6dd !important;
-  background-color: #121212 !important;
-}
-
-.bd-header-article .version-switcher__button,
-.bd-header-article #language-switcher-button {
-  margin: 0 !important;
-}

DISCOVER/_templates/language-switcher.html

@@ -6,7 +6,7 @@
   <ul class="dropdown-menu" aria-labelledby="language-switcher-button">
     {% for item in languages %}
         <li>
-          <a class="dropdown-item{% if current_language == item.code %}active{% endif %}" 
+          <a class="dropdown-item{% if current_language == item.code %} active{% endif %}" 
             href="{{ baseurl }}/{{ current_version }}/{{ item.code }}/{{ pagename }}.html"
             {% if item.direction %}dir="{{ item.direction }}"{% endif %}>
             {{ item.name_local }}

DISCOVER/conf.py

@@ -1,7 +1,9 @@
 import json
 import os
 
+# Get version and language from environment variables
 version = os.environ.get("WEBSITE_VERSION", "dev")
+release = version
 language = os.environ.get("WEBSITE_LANGUAGE", "en")
 
 baseurl = 'https://discover-cookbook.numfocus.org'
@@ -50,7 +52,7 @@
 external_toc_exclude_missing = False
 external_toc_path = '_toc.yml'
 html_baseurl = ''
-html_css_files = ['css/mainLogo.css']
+html_css_files = ['css/mainLogo.css','css/Switchers.css']
 html_favicon = ''
 html_js_files = ['js/footer.js', 'js/logo-switcher.js']
 html_logo = '_static/images/logo-light.png'
@@ -72,10 +74,12 @@
     'use_edit_page_button': False, 
     'use_issues_button': True,
 
-
+    # Header layout
     "article_header_start": ["toggle-primary-sidebar","version-switcher","language-switcher"],
     "navigation_with_keys": False,
     "show_version_warning_banner": True,
+
+    # Version switcher config
     "switcher": {
         "json_url": "https://discover-cookbook.numfocus.org/versions.json", 
         "version_match": version,

ci/build_website.sh

@@ -13,6 +13,6 @@ pip install -r requirements.txt
 # Clean tags directory
 rm -rf DISCOVER/_tags/*
 
-
+# Build the documentation
 echo "Building $LANGUAGE version..."
 WEBSITE_VERSION="$VERSION" WEBSITE_LANGUAGE="$LANGUAGE" sphinx-build -b html DISCOVER/ DISCOVER/_build/html