jekyll-vitepress-theme 1.5.1 → 1.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad8a4ce4f47e3398f3a5ae269c9b73f92a8fd3d839d155047b49077eb9e059fc
-  data.tar.gz: d2a15ef74ab0a239fa279e605217ed15aa51758d7dced81056042e92d336d888
+  metadata.gz: 79221302839a221725323b51efb743c397689ea249a98db44131318666d2a1ef
+  data.tar.gz: 8c68b1f40dc553be74b86104683dab0a114f7a6399018e7e2de41cf32316f67e
 SHA512:
-  metadata.gz: 974c285c0f2b78177f48b7bdf80101bf56c9c03b09f0559594313ce082cca9c62e9c0a77bfb30dc78cdd69e8f140645e97c483e11e1ff1d5caa83f97ece9a7d1
-  data.tar.gz: e640143aceba69d634ef67715c443b3508aa59a201132fa8f9c125c4215c80a7fdf88c8052c542d7a3ffe63e8b3d484b7e5d49d98dd875df0f5fe4600e3b36bf
+  metadata.gz: aa2cc4902e2bb21d7a692ed183942740007f45a6bd669dac3bce4565fcb963194ae4bb0fe41a72fdd4c6a3bfe61fa95ee1c0d61d9ff82b958f51d81826052bfc
+  data.tar.gz: 223b905e9c6212a2d60042b4baf988068c5d3df8d927ee9fb05b3783c161d133fcfce13beb23e050a96e6f96d123418ee264e621babe3e7f794dcb4b170cf492

data/_includes/copy_page_button.html

@@ -4,13 +4,13 @@
 {% endif %}
 <div class="copy-md-group">
   <button class="copy-md-btn" type="button" title="Copy page as Markdown">
-    <span class="vpi-copy"></span>
-    <span class="copy-md-label">Copy page</span>
+    <span class="vpi-copy copy-md-icon" aria-hidden="true"></span>
+    <span class="copy-md-label" aria-live="polite">Copy page</span>
   </button>
   <button class="copy-md-toggle" type="button" aria-label="More options" aria-expanded="false">
     <span class="vpi-chevron-down copy-md-chevron"></span>
   </button>
-  <div class="copy-md-dropdown" hidden>
+  <div class="copy-md-dropdown vp-menu-transition" aria-hidden="true">
     <button class="copy-md-dropdown-item" type="button" data-action="copy">
       <span class="vpi-copy copy-md-dropdown-icon"></span>
       <div class="copy-md-dropdown-text">

data/_includes/nav.html

@@ -144,7 +144,7 @@
               <button type="button" class="button" id="vp-nav-extra-button" aria-haspopup="true" aria-expanded="false" aria-controls="vp-nav-extra-menu" aria-label="extra navigation">
                 <span class="vpi-more-horizontal icon" aria-hidden="true"></span>
               </button>
-              <div class="menu" id="vp-nav-extra-menu" aria-hidden="true">
+              <div class="menu vp-menu-transition" id="vp-nav-extra-menu" aria-hidden="true">
                 <div class="VPMenu">
                   <div class="group">
                     <div class="item appearance">

data/assets/css/vitepress-overrides.css

@@ -46,6 +46,23 @@ body.vp-nav-screen-open .VPNav {
   pointer-events: auto;
 }
 
+.vp-menu-transition {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+}
+
+.vp-menu-transition[aria-hidden="false"],
+.VPNavBarExtra:hover > .vp-menu-transition,
+.VPNavBarExtra.open > .vp-menu-transition {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
 .VPNavBar > .wrapper > .container > .title,
 .VPNavBar > .wrapper > .container > .content > .content-body,
 .vp-doc div[class*='language-'],
@@ -394,16 +411,6 @@ body.vp-nav-screen-open .VPNav {
     top: calc(var(--vp-nav-height) / 2 + 20px);
     right: 0;
     z-index: calc(var(--vp-z-index-nav) + 1);
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(0);
-    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
-  }
-
-  .VPNavBarExtra:hover .menu,
-  .VPNavBarExtra.open .menu {
-    opacity: 1;
-    visibility: visible;
   }
 
   .VPNavBarExtra .VPMenu {
@@ -1117,6 +1124,10 @@ body.vp-search-open {
   font-variant-numeric: tabular-nums;
 }
 
+.VPButton.VPMetricButton .VPMetricButtonCount {
+  color: inherit;
+}
+
 .VPMetricButtonText[hidden],
 .VPMetricButtonCount[hidden] {
   display: none !important;
@@ -1927,8 +1938,7 @@ html.dark .only-light {
 }
 
 /* Copy as Markdown button group */
-.vp-doc-header,
-.vp-doc-title-row {
+.vp-doc-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1936,16 +1946,26 @@ html.dark .only-light {
   flex-wrap: wrap;
 }
 
-.vp-doc-header h1,
-.vp-doc-title-row h1 {
+.vp-doc-header:not(:has(> h1)) {
+  position: relative;
+  z-index: 1;
+  float: right;
+  justify-content: flex-end;
+  margin: 0 0 16px 24px;
+}
+
+.vp-doc-header h1 {
   margin-top: 0;
   margin-bottom: 0;
   flex: 1 1 320px;
   min-width: 0;
 }
 
-.vp-doc-header .copy-md-group,
-.vp-doc-title-row .copy-md-group {
+.vp-doc-header:not(:has(> h1)) .copy-md-group {
+  margin-left: 0;
+}
+
+.vp-doc-header .copy-md-group {
   margin-left: auto;
 }
 
@@ -1954,6 +1974,10 @@ html.dark .only-light {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/g%3E%3C/svg%3E");
 }
 
+.vpi-check {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m20 6l-11 11l-5-5'/%3E%3C/svg%3E");
+}
+
 .vpi-file-text {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/g%3E%3C/svg%3E");
 }
@@ -1967,11 +1991,12 @@ html.dark .only-light {
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  transition: border-color 0.25s, background-color 0.25s;
 }
 
 .copy-md-group:hover {
   border-color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg-elv);
 }
 
 .copy-md-btn {
@@ -1990,7 +2015,7 @@ html.dark .only-light {
   white-space: nowrap;
 }
 
-.copy-md-btn .vpi-copy {
+.copy-md-icon {
   width: 14px;
   height: 14px;
 }
@@ -2000,10 +2025,6 @@ html.dark .only-light {
   background: var(--vp-c-bg-elv);
 }
 
-.copy-md-btn.copied {
-  color: var(--vp-c-green-1, #42b883);
-}
-
 .copy-md-toggle {
   display: inline-flex;
   align-items: center;

data/assets/js/vitepress-theme.js

@@ -302,7 +302,8 @@
       return;
     }
 
-    var formatted = formatGitHubStarCount(value);
+    var metricButton = button.classList.contains('VPMetricButton');
+    var formatted = metricButton ? formatExactCount(value) : formatGitHubStarCount(value);
     if (!formatted) {
       return;
     }
@@ -310,12 +311,11 @@
     countElement.textContent = formatted;
     countElement.hidden = false;
 
-    if (button.classList.contains('VPMetricButton')) {
+    if (metricButton) {
       var repository = button.getAttribute('data-github-star-repo');
-      var exactCount = formatExactCount(value);
-      button.title = exactCount + ' GitHub stars';
+      button.title = formatted + ' GitHub stars';
       if (repository) {
-        button.setAttribute('aria-label', 'Star ' + repository + ' on GitHub: ' + exactCount + ' stars');
+        button.setAttribute('aria-label', 'Star ' + repository + ' on GitHub: ' + formatted + ' stars');
       }
     }
   }
@@ -1403,35 +1403,6 @@
     return null;
   }
 
-  function alignCopyPageButtonWithHeading() {
-    var header = document.querySelector('.vp-doc-header');
-    var group = header && header.querySelector('.copy-md-group');
-    if (!header || !group || header.querySelector('h1')) {
-      return;
-    }
-
-    var titleHeading = resolveCopyPageTitleHeading();
-    if (!titleHeading) {
-      return;
-    }
-
-    var titleRow = titleHeading.closest('.vp-doc-title-row');
-    if (!titleRow) {
-      titleRow = document.createElement('div');
-      titleRow.className = 'vp-doc-title-row';
-      titleHeading.parentNode.insertBefore(titleRow, titleHeading);
-      titleRow.appendChild(titleHeading);
-    }
-
-    titleRow.appendChild(group);
-
-    if (!header.querySelector('*')) {
-      header.hidden = true;
-    }
-  }
-
-  alignCopyPageButtonWithHeading();
-
   function copyPageMarkdown(btn) {
     if (!btn) return;
 
@@ -1449,15 +1420,23 @@
       }
     }
 
+    var icon = btn.querySelector('.copy-md-icon');
     var label = btn.querySelector('.copy-md-label');
+    function setCopied(copied) {
+      btn.classList.toggle('copied', copied);
+      if (icon) {
+        icon.classList.toggle('vpi-copy', !copied);
+        icon.classList.toggle('vpi-check', copied);
+      }
+      if (label) label.textContent = copied ? 'Copied' : 'Copy page';
+    }
+
     writeToClipboard(md)
       .then(function () {
-        btn.classList.add('copied');
-        if (label) label.textContent = 'Copied';
+        setCopied(true);
         if (btn._copyTimeout) window.clearTimeout(btn._copyTimeout);
         btn._copyTimeout = window.setTimeout(function () {
-          btn.classList.remove('copied');
-          if (label) label.textContent = 'Copy page';
+          setCopied(false);
         }, 2000);
       })
       .catch(function () {});
@@ -1468,7 +1447,33 @@
   var dropdown = document.querySelector('.copy-md-dropdown');
   var dropdownCopy = dropdown ? dropdown.querySelector('[data-action="copy"]') : null;
 
+  function setCopyPageDropdownOpen(open) {
+    if (!dropdown || !toggle) {
+      return;
+    }
+
+    if (dropdown.hidden) {
+      dropdown.hidden = false;
+    }
+
+    dropdown.setAttribute('aria-hidden', String(!open));
+    toggle.setAttribute('aria-expanded', String(open));
+  }
+
+  function isCopyPageDropdownOpen() {
+    return !!(dropdown && dropdown.getAttribute('aria-hidden') === 'false');
+  }
+
   function bindCopyPageControls() {
+    if (dropdown) {
+      if (dropdown.hidden) {
+        dropdown.hidden = false;
+      }
+      if (!dropdown.hasAttribute('aria-hidden')) {
+        dropdown.setAttribute('aria-hidden', 'true');
+      }
+    }
+
     if (copyMdBtn && !copyMdBtn.hasAttribute('data-vp-bound')) {
       copyMdBtn.setAttribute('data-vp-bound', 'true');
       copyMdBtn.addEventListener('click', function () {
@@ -1480,9 +1485,7 @@
       toggle.setAttribute('data-vp-bound', 'true');
       toggle.addEventListener('click', function (e) {
         e.stopPropagation();
-        var open = !dropdown.hidden;
-        dropdown.hidden = !dropdown.hidden;
-        toggle.setAttribute('aria-expanded', String(!open));
+        setCopyPageDropdownOpen(!isCopyPageDropdownOpen());
       });
     }
 
@@ -1490,10 +1493,7 @@
     if (dropdownCopy && !dropdownCopy.hasAttribute('data-vp-bound')) {
       dropdownCopy.setAttribute('data-vp-bound', 'true');
       dropdownCopy.addEventListener('click', function () {
-        dropdown.hidden = true;
-        if (toggle) {
-          toggle.setAttribute('aria-expanded', 'false');
-        }
+        setCopyPageDropdownOpen(false);
         copyPageMarkdown(copyMdBtn);
       });
     }
@@ -1502,19 +1502,17 @@
   bindCopyPageControls();
 
   document.addEventListener('click', function (e) {
-    if (!dropdown || !toggle || dropdown.hidden) {
+    if (!dropdown || !toggle || !isCopyPageDropdownOpen()) {
       return;
     }
     if (!dropdown.contains(e.target) && !toggle.contains(e.target)) {
-      dropdown.hidden = true;
-      toggle.setAttribute('aria-expanded', 'false');
+      setCopyPageDropdownOpen(false);
     }
   });
 
   document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape' && dropdown && toggle && !dropdown.hidden) {
-      dropdown.hidden = true;
-      toggle.setAttribute('aria-expanded', 'false');
+    if (e.key === 'Escape' && dropdown && toggle && isCopyPageDropdownOpen()) {
+      setCopyPageDropdownOpen(false);
       toggle.focus();
     }
   });
@@ -2256,7 +2254,6 @@
     bindCopyPageControls();
 
     addCopyButtons();
-    alignCopyPageButtonWithHeading();
     enhanceDocFrameLinks();
 
     content = document.querySelector('.vp-doc');

data/lib/jekyll/vitepress_theme/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module VitePressTheme
-    VERSION = "1.5.1".freeze
+    VERSION = "1.5.3".freeze
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-vitepress-theme
 version: !ruby/object:Gem::Version
-  version: 1.5.1
+  version: 1.5.3
 platform: ruby
 authors:
 - Carmine Paolino