jekyll-vitepress-theme 1.3.1 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 034171e4440b305a377deaf2868354d57cebd14911a45acbfd6dd5760e9b0b17
-  data.tar.gz: 05ed4e81c516a7064beed5d7f4a0e7efc43777c105d4e29d2c274843d64fdbfb
+  metadata.gz: fce5780a829b36447736605a77a6597ae45840f199316745147581831999028b
+  data.tar.gz: b978b7657d6cc550eee63fac3597f4902378e6758581b167f0e8b321a6f23709
 SHA512:
-  metadata.gz: 605c0576d92ec62cae957b8244e5267669be9fe29a0465fbe2428bd0262708d61726db8d72445385fcbabba4d48a9424ffd05e89b5bb866b5fb9407f2f3cba08
-  data.tar.gz: 61f075fa48110c9a51e639c79ac309603ce65f301a564de42497d131bbc50bd680acbbe6ba860656dd38cd70b29aad6597cb9d1ed8ecb5c0c27e4b58160fba16
+  metadata.gz: 05a4d648a549d787d714753a244e0ca34454492b9a910976e3f4806ea1675e479e5eb84d6d0814c754b2099bd47ce2ebcfeb49532511f689afde5d9251c2793c
+  data.tar.gz: 0dc9df51ea6b3a896d1ba48f86b2db5c19e682aac304f713233c966af76d21760f8b63d2a2543707ca680270d6712bfa847a5a1294d82ba8da912efa86dfa514

data/README.md

@@ -23,7 +23,7 @@ The unusual part is navigation. Internal docs links use Turbo Frames, so page ch
 
 ## Why Use It
 
-- **VitePress-like UX:** top nav, persistent sidebar, right outline, doc footer pager, search modal, and theme toggle.
+- **VitePress-like UX:** top nav, persistent sidebar, right outline, doc footer pager, search modal, theme toggle, and optional GitHub Star/Sponsor buttons.
 - **Turbo page navigation:** only the docs content frame swaps, so the shell stays in place and page changes feel fast.
 - **Jekyll-native setup:** configure everything with `_config.yml`, `_data/*.yml`, collections, includes, and frontmatter.
 - **Ruby syntax pipeline:** Rouge powers light and dark syntax themes without a separate JavaScript build.

data/_includes/nav.html

@@ -29,6 +29,29 @@
 {% if github_star_enabled %}
   {% assign github_star_url = 'https://github.com/' | append: github_star_repository %}
 {% endif %}
+{% assign github_sponsor_config = theme.github_sponsor %}
+{% assign github_sponsor_enabled = false %}
+{% assign github_sponsor_url = nil %}
+{% assign github_sponsor_text = 'Sponsor' %}
+{% assign github_sponsor_label = 'Sponsor on GitHub' %}
+{% if github_sponsor_config and github_sponsor_config != false %}
+  {% assign github_sponsor_user = github_sponsor_config.user | default: github_sponsor_config.username | default: github_sponsor_config.account %}
+  {% assign github_sponsor_url = github_sponsor_config.url %}
+  {% if github_sponsor_url == nil or github_sponsor_url == '' %}
+    {% if github_sponsor_user %}
+      {% assign github_sponsor_url = 'https://github.com/sponsors/' | append: github_sponsor_user %}
+    {% endif %}
+  {% endif %}
+  {% if github_sponsor_config.text %}
+    {% assign github_sponsor_text = github_sponsor_config.text %}
+  {% endif %}
+  {% if github_sponsor_config.label %}
+    {% assign github_sponsor_label = github_sponsor_config.label %}
+  {% endif %}
+  {% if github_sponsor_config.enabled != false and github_sponsor_url %}
+    {% assign github_sponsor_enabled = true %}
+  {% endif %}
+{% endif %}
 
 <header class="VPNav">
   <div class="VPNavBar{% if include.has_sidebar %} has-sidebar{% endif %}{% if include.is_home %} home{% endif %} top" id="vp-nav-bar">
@@ -151,6 +174,18 @@
                             </a>
                           </div>
                         {% endif %}
+                        {% if github_sponsor_enabled %}
+                          <div class="VPNavBarStar VPNavBarSponsor">
+                            <a class="VPLink link no-icon VPNavBarStarLink VPNavBarSponsorLink" href="{{ github_sponsor_url }}" aria-label="{{ github_sponsor_label | escape }}" target="_blank" rel="noreferrer noopener">
+                              <span class="VPNavBarSponsorIcon" aria-hidden="true">
+                                <svg viewBox="0 0 16 16" focusable="false">
+                                  <path d="M8 13.25l-.7-.64C3.1 8.79 1 6.88 1 4.5 1 2.56 2.56 1 4.5 1c1.1 0 2.15.51 2.83 1.31A3.76 3.76 0 0 1 10.5 1C12.44 1 14 2.56 14 4.5c0 2.38-2.1 4.29-6.3 8.11l-.7.64z"></path>
+                                </svg>
+                              </span>
+                              <span class="VPNavBarStarText">{{ github_sponsor_text }}</span>
+                            </a>
+                          </div>
+                        {% endif %}
 
                         {% for social in social_links %}
                           {% assign social_icon_name = social.icon %}
@@ -196,6 +231,18 @@
                   </a>
                 </div>
               {% endif %}
+              {% if github_sponsor_enabled %}
+                <div class="VPNavBarStar VPNavBarSponsor" id="vp-nav-sponsor">
+                  <a class="VPLink link no-icon VPNavBarStarLink VPNavBarSponsorLink" href="{{ github_sponsor_url }}" aria-label="{{ github_sponsor_label | escape }}" target="_blank" rel="noreferrer noopener">
+                    <span class="VPNavBarSponsorIcon" aria-hidden="true">
+                      <svg viewBox="0 0 16 16" focusable="false">
+                        <path d="M8 13.25l-.7-.64C3.1 8.79 1 6.88 1 4.5 1 2.56 2.56 1 4.5 1c1.1 0 2.15.51 2.83 1.31A3.76 3.76 0 0 1 10.5 1C12.44 1 14 2.56 14 4.5c0 2.38-2.1 4.29-6.3 8.11l-.7.64z"></path>
+                      </svg>
+                    </span>
+                    <span class="VPNavBarStarText">{{ github_sponsor_text }}</span>
+                  </a>
+                </div>
+              {% endif %}
               {% for social in social_links %}
                 {% assign social_icon_name = social.icon %}
                 {% assign social_icon_svg = social.icon_svg %}
@@ -304,6 +351,18 @@
             </a>
           </div>
         {% endif %}
+        {% if github_sponsor_enabled %}
+          <div class="VPNavBarStar VPNavScreenStar VPNavBarSponsor">
+            <a class="VPLink link no-icon VPNavBarStarLink VPNavScreenStarLink VPNavBarSponsorLink" href="{{ github_sponsor_url }}" aria-label="{{ github_sponsor_label | escape }}" target="_blank" rel="noreferrer noopener">
+              <span class="VPNavBarSponsorIcon" aria-hidden="true">
+                <svg viewBox="0 0 16 16" focusable="false">
+                  <path d="M8 13.25l-.7-.64C3.1 8.79 1 6.88 1 4.5 1 2.56 2.56 1 4.5 1c1.1 0 2.15.51 2.83 1.31A3.76 3.76 0 0 1 10.5 1C12.44 1 14 2.56 14 4.5c0 2.38-2.1 4.29-6.3 8.11l-.7.64z"></path>
+                </svg>
+              </span>
+              <span class="VPNavBarStarText">{{ github_sponsor_text }}</span>
+            </a>
+          </div>
+        {% endif %}
         {% for social in social_links %}
           {% assign social_icon_name = social.icon %}
           {% assign social_icon_svg = social.icon_svg %}

data/_layouts/default.html

@@ -4,7 +4,8 @@
   {% assign theme = site.jekyll_vitepress %}
   {% assign behavior = theme.behavior %}
   {% assign page_theme = page.jekyll_vitepress %}
-  <body data-vp-scroll-offset="{{ behavior.scroll_offset | default: 134 }}">
+  {% assign scroll_offset = behavior.scroll_offset | default: 134 %}
+  <body data-vp-scroll-offset="{{ scroll_offset }}" style="--vp-scroll-offset: {{ scroll_offset }}px;">
     {% assign is_home = false %}
     {% if page.layout == 'home' or page.url == '/' %}
       {% assign is_home = true %}

data/assets/css/vitepress-core.css

@@ -1306,6 +1306,15 @@ html:not(.dark) .shiki span {
   outline: none;
 }
 
+.vp-doc h1[id],
+.vp-doc h2[id],
+.vp-doc h3[id],
+.vp-doc h4[id],
+.vp-doc h5[id],
+.vp-doc h6[id] {
+  scroll-margin-top: calc(var(--vp-scroll-offset, 134px) - var(--vp-heading-anchor-offset, 0px));
+}
+
 .vp-doc h1 {
   letter-spacing: -0.02em;
   line-height: 40px;
@@ -1313,6 +1322,8 @@ html:not(.dark) .shiki span {
 }
 
 .vp-doc h2 {
+  --vp-heading-anchor-offset: 24px;
+
   margin: 48px 0 16px;
   border-top: 1px solid var(--vp-c-divider);
   padding-top: 24px;

data/assets/css/vitepress-overrides.css

@@ -302,6 +302,20 @@ body.vp-nav-screen-open .VPNav {
   color: currentcolor;
 }
 
+.VPNavBarSponsorIcon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  color: currentcolor;
+}
+
+.VPNavBarSponsorIcon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+
 .VPNavBarStarText,
 .VPNavBarStarCount {
   display: none;
@@ -338,6 +352,11 @@ body.vp-nav-screen-open .VPNav {
     height: 14px;
   }
 
+  .VPNavBarSponsorIcon {
+    width: 14px;
+    height: 14px;
+  }
+
   .VPNavBarStarText {
     display: inline;
   }
@@ -498,6 +517,11 @@ body.vp-nav-screen-open .VPNav {
   height: 14px;
 }
 
+.VPNavScreenSocialLinks .VPNavBarSponsorIcon {
+  width: 14px;
+  height: 14px;
+}
+
 .VPNavScreenSocialLinks .VPNavBarStarText,
 .VPNavScreenSocialLinks .VPNavBarStarCount {
   display: inline;

data/assets/js/vitepress-theme.js

@@ -1320,12 +1320,20 @@
     return;
   }
 
+  function getHeadingLabel(heading) {
+    var clone = heading.cloneNode(true);
+    clone.querySelectorAll('.header-anchor').forEach(function (anchor) {
+      anchor.remove();
+    });
+    return clone.textContent ? clone.textContent.trim() : heading.id;
+  }
+
   content.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]').forEach(function (heading) {
     if (heading.querySelector('.header-anchor')) {
       return;
     }
 
-    var title = heading.textContent ? heading.textContent.trim() : heading.id;
+    var title = getHeadingLabel(heading);
     var anchor = document.createElement('a');
     anchor.className = 'header-anchor';
     anchor.href = '#' + heading.id;
@@ -1409,7 +1417,7 @@
 
       var li = document.createElement('li');
       var link = document.createElement('a');
-      var label = entry.heading.textContent ? entry.heading.textContent.trim() : entry.heading.id;
+      var label = getHeadingLabel(entry.heading);
 
       link.className = 'outline-link';
       link.href = '#' + entry.heading.id;
@@ -1536,38 +1544,38 @@
     return 134;
   }
 
-  function scrollToHashWithOffset(hash, smooth) {
+  function getHashTarget(hash) {
     if (!hash) {
-      return;
+      return null;
     }
 
-    var target = null;
+    var id = hash.slice(1);
     try {
-      target = document.getElementById(decodeURIComponent(hash).slice(1));
+      id = decodeURIComponent(id);
     } catch (error) {
-      target = null;
+      id = hash.slice(1);
     }
 
+    return document.getElementById(id);
+  }
+
+  function scrollToHash(hash, smooth) {
+    var target = getHashTarget(hash);
     if (!target) {
-      return;
+      return false;
     }
 
-    var targetTop = window.scrollY +
-      target.getBoundingClientRect().top -
-      getConfiguredScrollOffset() +
-      (parseInt(window.getComputedStyle(target).paddingTop, 10) || 0);
-
     var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     var behavior = 'auto';
-    if (!reduceMotion && smooth && Math.abs(targetTop - window.scrollY) <= window.innerHeight) {
+    if (!reduceMotion && smooth && Math.abs(target.getBoundingClientRect().top) <= window.innerHeight) {
       behavior = 'smooth';
     }
 
-    window.scrollTo({ left: 0, top: targetTop, behavior: behavior });
+    target.scrollIntoView({ block: 'start', inline: 'nearest', behavior: behavior });
 
     target.focus({ preventScroll: true });
     if (document.activeElement === target || target.hasAttribute('tabindex')) {
-      return;
+      return true;
     }
 
     var restoreTabindex = function () {
@@ -1581,51 +1589,98 @@
     if (document.activeElement !== target) {
       restoreTabindex();
     }
+
+    return true;
   }
 
-  function handleOutlineLinkClick(event) {
+  function getSamePageHash(link) {
+    if (!link) {
+      return null;
+    }
+
+    var href = link.getAttribute('href');
+    if (!href || href === '#') {
+      return null;
+    }
+
+    if (href.charAt(0) === '#') {
+      return href;
+    }
+
+    var url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch (error) {
+      return null;
+    }
+
+    if (url.origin !== window.location.origin ||
+      normalizePathname(url.pathname) !== normalizePathname(window.location.pathname) ||
+      url.search !== window.location.search ||
+      !url.hash) {
+      return null;
+    }
+
+    return url.hash;
+  }
+
+  function handleHashLinkClick(event) {
+    if (event.defaultPrevented || (typeof event.button === 'number' && event.button !== 0) ||
+      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+
     var link = event.currentTarget;
     if (!link) {
       return;
     }
 
-    var hash = link.getAttribute('href');
-    if (!hash || hash.charAt(0) !== '#') {
+    var target = link.getAttribute('target');
+    if (target && target !== '_self') {
+      return;
+    }
+
+    var hash = getSamePageHash(link);
+    if (!hash || !getHashTarget(hash)) {
       return;
     }
 
     event.preventDefault();
 
     if (window.history && typeof window.history.pushState === 'function') {
+      if (window.location.hash === hash) {
+        scrollToHash(hash, true);
+        return;
+      }
       window.history.pushState(null, '', hash);
     } else {
       window.location.hash = hash;
     }
 
-    scrollToHashWithOffset(hash, true);
+    scrollToHash(hash, true);
   }
 
-  function bindOutlineLinkHandlers() {
-    document.querySelectorAll('.outline-link').forEach(function (link) {
-      if (link.hasAttribute('data-vp-bound')) {
+  function bindHashLinkHandlers() {
+    document.querySelectorAll('.outline-link, .vp-doc a[href]').forEach(function (link) {
+      if (link.hasAttribute('data-vp-hash-bound') || !getSamePageHash(link)) {
         return;
       }
-      link.setAttribute('data-vp-bound', 'true');
-      link.addEventListener('click', handleOutlineLinkClick);
+      link.setAttribute('data-vp-hash-bound', 'true');
+      link.addEventListener('click', handleHashLinkClick);
     });
   }
 
-  bindOutlineLinkHandlers();
+  bindHashLinkHandlers();
 
   if (window.location.hash) {
     window.requestAnimationFrame(function () {
-      scrollToHashWithOffset(window.location.hash, false);
+      scrollToHash(window.location.hash, false);
     });
   }
 
   window.addEventListener('hashchange', function () {
     if (window.location.hash) {
-      scrollToHashWithOffset(window.location.hash, false);
+      scrollToHash(window.location.hash, false);
     }
   });
 
@@ -1646,10 +1701,7 @@
   }
 
   function getOutlineScrollOffset() {
-    var styles = window.getComputedStyle(root);
-    var navHeight = parseFloat(styles.getPropertyValue('--vp-nav-height')) || 0;
-    var layoutTopHeight = parseFloat(styles.getPropertyValue('--vp-layout-top-height')) || 0;
-    return navHeight + layoutTopHeight;
+    return getConfiguredScrollOffset();
   }
 
   function activateOutlineHash(activeHash) {
@@ -1854,7 +1906,7 @@
         return;
       }
 
-      var title = heading.textContent ? heading.textContent.trim() : heading.id;
+      var title = getHeadingLabel(heading);
       var anchor = document.createElement('a');
       anchor.className = 'header-anchor';
       anchor.href = '#' + heading.id;
@@ -1936,7 +1988,7 @@
       localOutlineItems.hidden = true;
     }
 
-    bindOutlineLinkHandlers();
+    bindHashLinkHandlers();
     syncLocalOutlineViewportHeight();
     syncActiveHeading();
   }
@@ -1971,7 +2023,7 @@
       refreshDocPageState();
 
       if (window.location.hash) {
-        scrollToHashWithOffset(window.location.hash, false);
+        scrollToHash(window.location.hash, false);
       } else {
         window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
         activateOutlineHash(null);

data/lib/jekyll/vitepress_theme/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module VitePressTheme
-    VERSION = "1.3.1".freeze
+    VERSION = "1.4.1".freeze
   end
 end

metadata

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