Add version into title

_quarto.yml

@@ -62,6 +62,7 @@ format:
       - file: assets/logo-animation.html
       - file: assets/author-reveal.html
       - file: assets/sticky-title.html
+      - file: assets/version-dropdown.html
     css: assets/styles.css
     page-layout: article
     title-block-banner: true

assets/styles.css

@@ -159,11 +159,6 @@ li.nav-item.dropdown {
     margin-top: 0.3rem;  /* Add some spacing between icon and dropdown */
 }
 
-/* Padding around version icon */
-#nav-menu-iconify-qlementine-iconsversion-control-16- {
-  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
-}
-
 .navbar-brand {
   position: relative;
   display: inline-block;

assets/version-dropdown.html

@@ -0,0 +1,77 @@
+<!-- version-dropdown.html -->
+<style>
+  #title-version-control {
+    display: inline-flex;
+    align-items: baseline;
+    margin-left: 0.5rem;
+  }
+
+  .title-version-menu {
+    display: inline-block;
+  }
+
+  .title-version-menu .nav-link {
+    color: white;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .title-version-menu .nav-link:hover {
+    transform: scale(1.05);
+  }
+
+  .title-version-menu .dropdown-toggle::after {
+    color: white;
+    margin-left: 0.25rem;
+    vertical-align: baseline;
+  }
+
+  .title-version-menu iconify-icon {
+    font-size: 0.7em;
+  }
+
+  .title-version-menu .dropdown-menu {
+    min-width: 8rem;
+  }
+</style>
+
+<div id="title-version-control"></div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    // Find the original version control dropdown
+    const originalDropdown = document.querySelector('.navbar-nav .nav-item.dropdown:has(iconify-icon[icon="qlementine-icons:version-control-16"])');
+
+    if (originalDropdown && document.querySelector('.quarto-title')) {
+      // Clone the dropdown structure
+      const clonedDropdown = originalDropdown.cloneNode(true);
+
+      // Update classes
+      clonedDropdown.className = 'title-version-menu dropdown';
+
+      // Remove the menu-text class but keep the span and its contents
+      const menuTextSpan = clonedDropdown.querySelector('.menu-text');
+      if (menuTextSpan) {
+        menuTextSpan.classList.remove('menu-text');
+      }
+
+      // Find the title element
+      const titleElement = document.querySelector('.quarto-title .title');
+
+      if (titleElement) {
+        // Add the version control to the container
+        const versionContainer = document.getElementById('title-version-control');
+        versionContainer.appendChild(clonedDropdown);
+        titleElement.appendChild(versionContainer);
+
+        // Ensure Bootstrap dropdown functionality works on the clone
+        if (typeof bootstrap !== 'undefined') {
+          const dropdownElement = clonedDropdown.querySelector('.dropdown-toggle');
+          if (dropdownElement) {
+            new bootstrap.Dropdown(dropdownElement);
+          }
+        }
+      }
+    }
+  });
+</script>

index.ipynb

@@ -10,7 +10,7 @@
    },
    "source": [
     "---\n",
-    "title: \"{{< var pub.title >}}\"\n",
+    "title: \"{{< var pub.title >}} --\"\n",
     "date: 'January 1, 2025'\n",
     "abstract-title: \"Summary\"\n",
     "filters:\n",

index_v00.ipynb

@@ -10,8 +10,8 @@
    },
    "source": [
     "---\n",
-    "title: \"{{< var pub.title >}}\"\n",
-    "date: 'January 1, 2025'\n",
+    "title: \"{{< var pub.title >}} --\"\n",
+    "date: 'December 31, 2024'\n",
     "abstract-title: \"Summary\"\n",
     "filters:\n",
     "  - abstract-section\n",