feat(context-menu): add page context menu for copy/view Markdown (#908)

* feat(context-menu): implement page context menu for copy Markdown

- Added a context menu to Markdown pages allowing users to copy content as Markdown or view it in a new tab.
- Introduced new layout files for Markdown rendering and updated existing layouts to include the context menu.
- Enhanced configuration options to enable or disable the context menu globally or per page.
- Updated internationalization files to support new context menu actions.
- Improved documentation to guide users on the new features and their usage.

* feat(context-menu): enhance dropdown positioning and responsiveness

- Updated the context menu dropdown to use responsive positioning classes for better alignment on different screen sizes.
- Added new CSS classes to ensure the dropdown appears correctly on smaller devices, improving user experience.

* refactor(context-menu): adjust button styles for improved layout and usability

- Modified button classes in the page context menu to enhance spacing and alignment.
- Reduced padding and gap sizes for a more compact design, improving overall user experience.

* refactor(styles): update CSS classes for improved layout and consistency

- Removed outdated ring classes and adjusted padding and border styles in various components for a cleaner design.
- Enhanced hover effects and gap sizes for better user experience across language switcher, navbar, and theme toggle elements.
- Standardized rounded styles to maintain visual consistency throughout the interface.

* feat(context-menu): add custom links to page context menu

- Introduced new configuration options for custom links in the page context menu, allowing users to open documentation in ChatGPT and Claude.
- Updated the context menu layout to include a separator and display the new links with appropriate styling.
- Enhanced the CSS classes for better visual integration with existing context menu elements.

* feat(icons): add new AI icons and update context menu links

- Introduced new icons for AI tools including ChatGPT, Claude, Gemini, and others in the icons.yaml file.
- Enhanced the page context menu in multiple languages to include links for opening documentation in ChatGPT and Claude, improving user accessibility to AI resources.
- Updated internationalization files to reflect new context menu options and additional copy functionalities.

* refactor(layouts): simplify page structure in glossary and section layouts

- Removed the conditional rendering of page links in the glossary and section layouts to streamline the markup.
- Adjusted the blog and docs list layouts to ensure consistent closing of HTML tags and improved formatting.

* feat(context-menu): add outbound icons to external links

Add arrow-up-right icons to "View as Markdown" and custom links
in the page context menu to indicate they open in new tabs.

* Revert "feat(context-menu): add outbound icons to external links"

This reverts commit 670175e200f091ed89b15bd16f44a585355db57d.

* chore: rebuild css

* chore: update stats json

* chore: rename project and update context menu structure

- Changed project name from "wizardly-wing" to "hextra" in package-lock.json.
- Refactored context menu structure in hugo.yaml to improve organization and consistency across multiple languages.
- Updated context menu links to ensure proper functionality and accessibility.

* feat(context-menu): enhance clipboard functionality and pre-fetching

- Implemented pre-fetching of markdown content for copy buttons to improve performance and avoid clipboard access issues in Safari.
- Updated click event handlers to utilize cached content for clipboard operations, with a fallback to fetch content if not pre-fetched.
- Added checks to ensure elements exist before performing actions, enhancing robustness of the context menu interactions.

* fix(context-menu): improve hover effects and border styles

- Enhanced the context menu's border styles with transition effects for better visual feedback on hover.
- Updated CSS classes to ensure consistent styling across different themes, improving user experience.

* feat(context-menu): add page context menu functionality across multiple languages

- Introduced a page context menu that allows users to copy content as Markdown or view the raw Markdown source, enhancing usability for documentation sites.
- Added configuration options to enable the context menu globally and control it on a per-page basis.
- Implemented support for custom links in the context menu, allowing integration with external services.
- Updated documentation in Persian, Japanese, Chinese, and English to reflect these new features.

* fix(icons): update SVG definitions for Gemini and add fill attribute

- Updated the SVG definition for the Gemini icon to include the 'fill' attribute for better rendering.
- Ensured consistency in the SVG structure for the Gemini icon while maintaining the existing definitions for ChatGPT and Claude.

* chore: rebuild css

* chore: remove Claude links from context menu in multiple languages

- Removed the "Open in Claude" option from the context menu for Persian, Japanese, and Simplified Chinese languages to streamline the user experience.

* fix(context-menu): update cursor styles for buttons in context menu

- Changed cursor style from default to pointer for buttons in the page context menu to enhance user interaction feedback.

assets/js/core/page-context-menu.js

@@ -0,0 +1,155 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Pre-fetch markdown content for all copy buttons to avoid Safari NotAllowedError
+  // Safari requires clipboard writes to happen synchronously within user gesture
+  const copyButtons = document.querySelectorAll('.hextra-page-context-menu-copy');
+  const contentCache = new Map();
+
+  // Pre-fetch content for each button on page load
+  copyButtons.forEach(button => {
+    const url = button.dataset.url;
+    if (url) {
+      fetch(url)
+        .then(response => {
+          if (response.ok) return response.text();
+          throw new Error('Failed to fetch');
+        })
+        .then(markdown => contentCache.set(url, markdown))
+        .catch(error => console.error('Failed to pre-fetch markdown:', error));
+    }
+  });
+
+  // Initialize copy buttons with synchronous clipboard access
+  copyButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const url = button.dataset.url;
+      const markdown = contentCache.get(url);
+
+      if (markdown) {
+        // Synchronous clipboard write initiation - works in Safari
+        navigator.clipboard.writeText(markdown)
+          .then(() => {
+            button.classList.add('copied');
+            setTimeout(() => button.classList.remove('copied'), 1000);
+          })
+          .catch(error => console.error('Failed to copy markdown:', error));
+      } else {
+        // Fallback: fetch and copy (may fail in Safari if content not pre-fetched)
+        fetch(url)
+          .then(response => {
+            if (!response.ok) throw new Error('Failed to fetch');
+            return response.text();
+          })
+          .then(text => {
+            contentCache.set(url, text);
+            return navigator.clipboard.writeText(text);
+          })
+          .then(() => {
+            button.classList.add('copied');
+            setTimeout(() => button.classList.remove('copied'), 1000);
+          })
+          .catch(error => console.error('Failed to copy markdown:', error));
+      }
+    });
+  });
+
+  // Initialize dropdown toggles
+  const dropdownToggles = document.querySelectorAll('.hextra-page-context-menu-toggle');
+  dropdownToggles.forEach(toggle => {
+    const container = toggle.closest('.hextra-page-context-menu');
+    const menu = container.querySelector('.hextra-page-context-menu-dropdown');
+    const chevron = toggle.querySelector('[data-chevron]');
+
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const isOpen = toggle.dataset.state === 'open';
+
+      // Close all other dropdowns first
+      dropdownToggles.forEach(t => {
+        if (t !== toggle) {
+          t.dataset.state = 'closed';
+          const otherContainer = t.closest('.hextra-page-context-menu');
+          const otherMenu = otherContainer.querySelector('.hextra-page-context-menu-dropdown');
+          const otherChevron = t.querySelector('[data-chevron]');
+          otherMenu.classList.add('hx:hidden');
+          if (otherChevron) {
+            otherChevron.style.transform = '';
+          }
+        }
+      });
+
+      // Toggle current
+      toggle.dataset.state = isOpen ? 'closed' : 'open';
+      menu.classList.toggle('hx:hidden', isOpen);
+
+      // Rotate chevron icon
+      if (chevron) {
+        chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
+      }
+    });
+  });
+
+  // Close dropdown when clicking outside
+  document.addEventListener('click', (e) => {
+    // Check if click is outside any dropdown container
+    const isOutside = !e.target.closest('.hextra-page-context-menu');
+    if (isOutside) {
+      dropdownToggles.forEach(toggle => {
+        toggle.dataset.state = 'closed';
+        const container = toggle.closest('.hextra-page-context-menu');
+        const menu = container.querySelector('.hextra-page-context-menu-dropdown');
+        const chevron = toggle.querySelector('[data-chevron]');
+        menu.classList.add('hx:hidden');
+        if (chevron) {
+          chevron.style.transform = '';
+        }
+      });
+    }
+  });
+
+  // Helper to close dropdown
+  const closeDropdown = (container) => {
+    if (!container) return;
+    
+    const toggle = container.querySelector('.hextra-page-context-menu-toggle');
+    const menu = container.querySelector('.hextra-page-context-menu-dropdown');
+    
+    if (!toggle || !menu) return;
+    
+    const chevron = toggle.querySelector('[data-chevron]');
+    toggle.dataset.state = 'closed';
+    menu.classList.add('hx:hidden');
+    if (chevron) {
+      chevron.style.transform = '';
+    }
+  };
+
+  // Handle dropdown menu copy action
+  document.querySelectorAll('.hextra-page-context-menu-dropdown button[data-action="copy"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const container = btn.closest('.hextra-page-context-menu');
+      if (!container) return;
+      
+      const copyBtn = container.querySelector('.hextra-page-context-menu-copy');
+      if (!copyBtn) return;
+
+      closeDropdown(container);
+      copyBtn.click();
+    });
+  });
+
+  // Handle dropdown menu view action
+  document.querySelectorAll('.hextra-page-context-menu-dropdown button[data-action="view"]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const container = btn.closest('.hextra-page-context-menu');
+      if (!container) return;
+      
+      const url = btn.dataset.url;
+      if (!url) return;
+
+      closeDropdown(container);
+      window.open(url, '_blank', 'noopener,noreferrer');
+    });
+  });
+});

data/icons.yaml

@@ -305,3 +305,8 @@ linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill
 slack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52a2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521a2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521a2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.268a2.527 2.527 0 0 1-2.52-2.523a2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523z" /></svg>
 bluesky: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 530"><path fill="currentColor" d="M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z"/></svg>
 telegram: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg>
+
+# ai
+claude: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><path fill="currentColor" d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"/></svg>
+chatgpt: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 260"><path fill="currentColor" d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"/></svg>
+gemini: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><path fill="currentColor" d="M164.93 86.68c-13.56-5.84-25.42-13.84-35.6-24.01-10.17-10.17-18.18-22.04-24.01-35.6-2.23-5.19-4.04-10.54-5.42-16.02C99.45 9.26 97.85 8 96 8s-3.45 1.26-3.9 3.05c-1.38 5.48-3.18 10.81-5.42 16.02-5.84 13.56-13.84 25.43-24.01 35.6-10.17 10.16-22.04 18.17-35.6 24.01-5.19 2.23-10.54 4.04-16.02 5.42C9.26 92.55 8 94.15 8 96s1.26 3.45 3.05 3.9c5.48 1.38 10.81 3.18 16.02 5.42 13.56 5.84 25.42 13.84 35.6 24.01 10.17 10.17 18.18 22.04 24.01 35.6 2.24 5.2 4.04 10.54 5.42 16.02A4.03 4.03 0 0 0 96 184c1.85 0 3.45-1.26 3.9-3.05 1.38-5.48 3.18-10.81 5.42-16.02 5.84-13.56 13.84-25.42 24.01-35.6 10.17-10.17 22.04-18.18 35.6-24.01 5.2-2.24 10.54-4.04 16.02-5.42A4.03 4.03 0 0 0 184 96c0-1.85-1.26-3.45-3.05-3.9-5.48-1.38-10.81-3.18-16.02-5.42"/></svg>

docs/content/docs/guide/configuration.fa.md

@@ -338,6 +338,64 @@ params:
 
 به طور مشابه، عرض نوار ناوبری و پاورقی را می‌توان با پارامترهای `params.navbar.width` و `params.footer.width` سفارشی کرد.
 
+### منوی زمینه صفحه
+
+منوی زمینه صفحه یک دکمه کشویی ارائه می‌دهد که به کاربران امکان می‌دهد محتوای صفحه را به صورت Markdown کپی کنند یا منبع Markdown خام را مشاهده کنند. این ویژگی برای سایت‌های مستندات که خوانندگان ممکن است بخواهند محتوا را در قالب Markdown به اشتراک بگذارند یا به آن ارجاع دهند، مفید است.
+
+#### فعال‌سازی منوی زمینه
+
+برای فعال‌سازی سراسری منوی زمینه، موارد زیر را به فایل پیکربندی خود اضافه کنید:
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+```
+
+همچنین باید فرمت خروجی `markdown` را برای صفحات فعال کنید:
+
+```yaml {filename="hugo.yaml"}
+outputs:
+  page: [html, markdown]
+  section: [html, rss, markdown]
+```
+
+#### کنترل هر صفحه
+
+برای فعال یا غیرفعال کردن منوی زمینه برای یک صفحه خاص، از پارامتر `contextMenu` در front matter استفاده کنید:
+
+```yaml {filename="content/docs/example.md"}
+---
+title: صفحه نمونه
+contextMenu: false
+---
+```
+
+#### لینک‌های سفارشی
+
+می‌توانید لینک‌های سفارشی به منوی کشویی زمینه اضافه کنید. این برای یکپارچه‌سازی با سرویس‌های خارجی مفید است. لینک‌ها از جایگزین‌های زیر پشتیبانی می‌کنند:
+
+- `{url}` - آدرس صفحه (URL-encoded)
+- `{title}` - عنوان صفحه (URL-encoded)
+- `{markdown_url}` - آدرس محتوای Markdown خام (URL-encoded)
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+      links:
+        - name: باز کردن در ChatGPT
+          icon: chatgpt
+          url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
+```
+
+هر لینک می‌تواند شامل موارد زیر باشد:
+- `name` - متن نمایشی لینک
+- `icon` - نام آیکون اختیاری (به [آیکون‌ها]({{% relref "docs/guide/shortcodes/icon" %}}) مراجعه کنید)
+- `url` - آدرس با جایگزین‌های اختیاری
+
 ### نمایه FlexSearch
 
 جستجوی تمام متن با قدرت [FlexSearch](https://github.com/nextapps-de/flexsearch) به طور پیش‌فرض فعال است.

docs/content/docs/guide/configuration.ja.md

@@ -338,6 +338,64 @@ params:
 
 同様に、ナビゲーションバーとフッターの幅は `params.navbar.width` と `params.footer.width` パラメータでカスタマイズできます。
 
+### ページコンテキストメニュー
+
+ページコンテキストメニューは、ページの内容を Markdown としてコピーしたり、生の Markdown ソースを表示したりできるドロップダウンボタンを提供します。この機能は、読者が Markdown 形式でコンテンツを共有または参照したいドキュメントサイトに便利です。
+
+#### コンテキストメニューの有効化
+
+コンテキストメニューをグローバルに有効にするには、設定ファイルに以下を追加します：
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+```
+
+また、ページの `markdown` 出力形式を有効にする必要があります：
+
+```yaml {filename="hugo.yaml"}
+outputs:
+  page: [html, markdown]
+  section: [html, rss, markdown]
+```
+
+#### ページごとの制御
+
+特定のページでコンテキストメニューを有効または無効にするには、フロントマターで `contextMenu` パラメータを使用します：
+
+```yaml {filename="content/docs/example.md"}
+---
+title: サンプルページ
+contextMenu: false
+---
+```
+
+#### カスタムリンク
+
+コンテキストメニューのドロップダウンにカスタムリンクを追加できます。これは外部サービスとの統合に便利です。リンクは以下のプレースホルダーをサポートしています：
+
+- `{url}` - ページの URL（URL エンコード済み）
+- `{title}` - ページのタイトル（URL エンコード済み）
+- `{markdown_url}` - 生の Markdown コンテンツの URL（URL エンコード済み）
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+      links:
+        - name: ChatGPT で開く
+          icon: chatgpt
+          url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
+```
+
+各リンクには以下を設定できます：
+- `name` - リンクの表示テキスト
+- `icon` - オプションのアイコン名（[アイコン]({{% relref "docs/guide/shortcodes/icon" %}})を参照）
+- `url` - オプションのプレースホルダーを含む URL
+
 ### FlexSearch インデックス
 
 [FlexSearch](https://github.com/nextapps-de/flexsearch) を利用した全文検索はデフォルトで有効です。

docs/content/docs/guide/configuration.md

@@ -360,6 +360,64 @@ There are three available options: `full`, `wide`, and `normal`. By default, the
 
 Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.
 
+### Page Context Menu
+
+The page context menu provides a dropdown button that allows users to copy the page content as Markdown or view the raw Markdown source. This feature is useful for documentation sites where readers may want to share or reference the content in Markdown format.
+
+#### Enabling the Context Menu
+
+To enable the context menu globally, add the following to your config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+```
+
+You also need to enable the `markdown` output format for pages:
+
+```yaml {filename="hugo.yaml"}
+outputs:
+  page: [html, markdown]
+  section: [html, rss, markdown]
+```
+
+#### Per-Page Control
+
+To enable or disable the context menu for a specific page, use the `contextMenu` parameter in the front matter:
+
+```yaml {filename="content/docs/example.md"}
+---
+title: Example Page
+contextMenu: false
+---
+```
+
+#### Custom Links
+
+You can add custom links to the context menu dropdown. This is useful for integrating with external services. The links support the following placeholders:
+
+- `{url}` - The page URL (URL-encoded)
+- `{title}` - The page title (URL-encoded)
+- `{markdown_url}` - The URL to the raw Markdown content (URL-encoded)
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+      links:
+        - name: Open in ChatGPT
+          icon: chatgpt
+          url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
+```
+
+Each link can have:
+- `name` - The display text for the link
+- `icon` - An optional icon name (see [Icons]({{% relref "docs/guide/shortcodes/icon" %}}))
+- `url` - The URL with optional placeholders
+
 ### FlexSearch Index
 
 Full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch) is enabled by default.

docs/content/docs/guide/configuration.zh-cn.md

@@ -338,6 +338,64 @@ params:
 
 类似地，导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数自定义。
 
+### 页面上下文菜单
+
+页面上下文菜单提供一个下拉按钮，允许用户将页面内容复制为 Markdown 或查看原始 Markdown 源码。此功能对于读者可能希望以 Markdown 格式共享或引用内容的文档站点非常有用。
+
+#### 启用上下文菜单
+
+要全局启用上下文菜单，请在配置文件中添加以下内容：
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+```
+
+您还需要为页面启用 `markdown` 输出格式：
+
+```yaml {filename="hugo.yaml"}
+outputs:
+  page: [html, markdown]
+  section: [html, rss, markdown]
+```
+
+#### 单页控制
+
+要为特定页面启用或禁用上下文菜单，请在 front matter 中使用 `contextMenu` 参数：
+
+```yaml {filename="content/docs/example.md"}
+---
+title: 示例页面
+contextMenu: false
+---
+```
+
+#### 自定义链接
+
+您可以向上下文菜单下拉列表添加自定义链接。这对于与外部服务集成非常有用。链接支持以下占位符：
+
+- `{url}` - 页面 URL（URL 编码）
+- `{title}` - 页面标题（URL 编码）
+- `{markdown_url}` - 原始 Markdown 内容的 URL（URL 编码）
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    contextMenu:
+      enable: true
+      links:
+        - name: 在 ChatGPT 中打开
+          icon: chatgpt
+          url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
+```
+
+每个链接可以包含：
+- `name` - 链接的显示文本
+- `icon` - 可选的图标名称（参见[图标]({{% relref "docs/guide/shortcodes/icon" %}})）
+- `url` - 包含可选占位符的 URL
+
 ### FlexSearch 索引
 
 默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供的全文搜索。

docs/hugo.yaml

@@ -14,8 +14,8 @@ hasCJKLanguage: true
 
 outputs:
   home: [html, llms]
-  page: [html]
+  page: [html, markdown]
-  section: [html, rss]
+  section: [html, rss, markdown]
 
 defaultContentLanguage: en
 languages:
@@ -33,6 +33,12 @@ languages:
       banner:
         message: |
           هگزترا **v0.11** منتشر شد! 🎉 [تازه‌ها را ببینید]({{% ref "blog/v0.11" %}})
+      page:
+        contextMenu:
+          links:
+            - name: باز کردن در ChatGPT
+              icon: chatgpt
+              url: "https://chatgpt.com/?hints=search&q=%D8%AF%D8%A7%D8%B1%D9%85+%D8%A7%DB%8C%D9%86+%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%A7%D8%AA+%D8%B1%D8%A7+%D9%85%DB%8C%E2%80%8C%D8%AE%D9%88%D8%A7%D9%86%D9%85%3A+{url}%0A%DA%A9%D9%85%DA%A9%D9%85+%DA%A9%D9%86+%D8%A8%D9%81%D9%87%D9%85%D9%85+%DA%86%D8%B7%D9%88%D8%B1+%D8%A7%D8%B2+%D8%A2%D9%86+%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87+%DA%A9%D9%86%D9%85."
   ja:
     languageName: 日本語
     languageCode: ja-JP
@@ -42,6 +48,12 @@ languages:
       banner:
         message: |
           Hextra **v0.11** がリリースされました！🎉 [新着情報はこちら]({{% ref "blog/v0.11" %}})
+      page:
+        contextMenu:
+          links:
+            - name: ChatGPTで開く
+              icon: chatgpt
+              url: "https://chatgpt.com/?hints=search&q=%E3%81%93%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%82%93%E3%81%A7%E3%81%84%E3%81%BE%E3%81%99%3A+{url}%0A%E4%BD%BF%E3%81%84%E6%96%B9%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E3%81%AE%E3%82%92%E6%89%8B%E4%BC%9D%E3%81%A3%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82"
   zh-cn:
     languageName: 简体中文
     languageCode: zh-CN
@@ -51,6 +63,12 @@ languages:
       banner:
         message: |
           Hextra **v0.11** 发布啦！🎉 查看[更新内容]({{% ref "blog/v0.11" %}})
+      page:
+        contextMenu:
+          links:
+            - name: 在 ChatGPT 中打开
+              icon: chatgpt
+              url: "https://chatgpt.com/?hints=search&q=%E6%88%91%E6%AD%A3%E5%9C%A8%E9%98%85%E8%AF%BB%E8%BF%99%E4%B8%AA%E6%96%87%E6%A1%A3%3A+{url}%0A%E5%B8%AE%E6%88%91%E7%90%86%E8%A7%A3%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%AE%83%E3%80%82"
 
 module:
   hugoVersion:
@@ -219,6 +237,15 @@ params:
     width: normal
     # tabs:
     #   sync: true
+    contextMenu:
+      enable: true
+      links:
+        - name: Open in ChatGPT
+          icon: chatgpt
+          url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
+        - name: Open in Claude
+          icon: claude
+          url: "https://claude.ai/new?q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
 
   imageZoom:
     enable: true

docs/hugo_stats.json

@@ -2,6 +2,7 @@
   "htmlElements": {
     "tags": [
       "a",
+      "abbr",
       "annotation",
       "article",
       "aside",
@@ -11,9 +12,12 @@
       "button",
       "cite",
       "code",
+      "dd",
       "del",
       "details",
       "div",
+      "dl",
+      "dt",
       "em",
       "figcaption",
       "figure",
@@ -133,6 +137,10 @@
       "hextra-nav-menu-item",
       "hextra-nav-menu-items",
       "hextra-nav-menu-toggle",
+      "hextra-page-context-menu",
+      "hextra-page-context-menu-copy",
+      "hextra-page-context-menu-dropdown",
+      "hextra-page-context-menu-toggle",
       "hextra-pdf",
       "hextra-scrollbar",
       "hextra-search-input",
@@ -185,6 +193,7 @@
       "hx:bg-clip-text",
       "hx:bg-gradient-to-r",
       "hx:bg-gray-100",
+      "hx:bg-gray-200",
       "hx:bg-green-100",
       "hx:bg-indigo-100",
       "hx:bg-neutral-50",
@@ -258,6 +267,7 @@
       "hx:dark:bg-gray-50/10",
       "hx:dark:bg-green-900/30",
       "hx:dark:bg-indigo-900/30",
+      "hx:dark:bg-neutral-700",
       "hx:dark:bg-neutral-800",
       "hx:dark:bg-neutral-900",
       "hx:dark:bg-orange-400/20",
@@ -306,7 +316,6 @@
       "hx:dark:hover:text-white",
       "hx:dark:opacity-80",
       "hx:dark:placeholder:text-gray-400",
-      "hx:dark:ring-white/20",
       "hx:dark:shadow-[0_-12px_16px_#111]",
       "hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
       "hx:dark:shadow-none",
@@ -358,6 +367,7 @@
       "hx:font-semibold",
       "hx:from-gray-900",
       "hx:gap-1",
+      "hx:gap-1.5",
       "hx:gap-2",
       "hx:gap-4",
       "hx:gap-x-1.5",
@@ -388,24 +398,23 @@
       "hx:h-7",
       "hx:h-[18px]",
       "hx:h-full",
+      "hx:h-px",
       "hx:hidden",
       "hx:hover:bg-gray-100",
       "hx:hover:bg-gray-800/5",
-      "hx:hover:bg-primary-50",
       "hx:hover:bg-primary-700",
       "hx:hover:bg-slate-50",
       "hx:hover:border-gray-200",
       "hx:hover:border-gray-300",
       "hx:hover:border-gray-400",
       "hx:hover:border-gray-900",
-      "hx:hover:dark:bg-primary-500/10",
-      "hx:hover:dark:text-primary-600",
       "hx:hover:opacity-60",
       "hx:hover:opacity-75",
       "hx:hover:shadow-gray-100",
       "hx:hover:shadow-lg",
       "hx:hover:shadow-md",
       "hx:hover:text-black",
+      "hx:hover:text-gray-700",
       "hx:hover:text-gray-800",
       "hx:hover:text-gray-900",
       "hx:hover:text-primary-600",
@@ -427,6 +436,7 @@
       "hx:leading-7",
       "hx:leading-none",
       "hx:leading-tight",
+      "hx:left-0",
       "hx:left-[24px]",
       "hx:left-[36px]",
       "hx:lg:grid-cols-3",
@@ -472,6 +482,7 @@
       "hx:max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
       "hx:max-w-none",
       "hx:max-xl:hidden",
+      "hx:mb-0",
       "hx:mb-10",
       "hx:mb-12",
       "hx:mb-16",
@@ -516,9 +527,11 @@
       "hx:mt-5",
       "hx:mt-6",
       "hx:mt-8",
+      "hx:mt-auto",
       "hx:mx-1",
       "hx:mx-4",
       "hx:mx-auto",
+      "hx:my-1",
       "hx:my-1.5",
       "hx:my-2",
       "hx:no-underline",
@@ -527,6 +540,7 @@
       "hx:opacity-80",
       "hx:order-last",
       "hx:origin-center",
+      "hx:outline-none",
       "hx:overflow-auto",
       "hx:overflow-hidden",
       "hx:overflow-x-auto",
@@ -574,8 +588,6 @@
       "hx:py-4",
       "hx:relative",
       "hx:right-0",
-      "hx:ring-1",
-      "hx:ring-black/5",
       "hx:rounded-3xl",
       "hx:rounded-full",
       "hx:rounded-lg",
@@ -620,10 +632,16 @@
       "hx:shadow-xl",
       "hx:shadow-xs",
       "hx:shrink-0",
+      "hx:size-4",
       "hx:sm:block",
       "hx:sm:flex",
+      "hx:sm:flex-row",
+      "hx:sm:items-center",
       "hx:sm:items-start",
+      "hx:sm:justify-between",
+      "hx:sm:left-auto",
       "hx:sm:max-lg:grid-cols-2",
+      "hx:sm:right-0",
       "hx:sm:text-xl",
       "hx:sm:w-[110%]",
       "hx:sr-only",
@@ -687,6 +705,7 @@
       "hx:w-max",
       "hx:w-screen",
       "hx:whitespace-nowrap",
+      "hx:wrap-break-word",
       "hx:xl:block",
       "hx:xl:grid-cols-4",
       "hx:z-20",

hugo.toml

@@ -8,3 +8,9 @@
     baseName = 'llms'
     mediaType = 'text/plain'
     isPlainText = true
+  [outputFormats.markdown]
+    name = 'markdown'
+    baseName = 'index'
+    mediaType = 'text/markdown'
+    isPlainText = true
+    ugly = true

i18n/en.yaml

@@ -1,6 +1,10 @@
 backToTop: "Scroll to top"
 changeLanguage: "Change language"
 changeTheme: "Change theme"
+copy: "Copy"
+copied: "Copied!"
+copyAsMarkdown: "Copy as Markdown"
+copyPage: "Copy Page"
 copyCode: "Copy code"
 copyright: "© 2025 Hextra Project."
 dark: "Dark"
@@ -16,3 +20,4 @@ readMore: "Read more →"
 searchPlaceholder: "Search..."
 system: "System"
 tags: "Tags"
+viewAsMarkdown: "View as Markdown"

i18n/fa.yaml

@@ -1,7 +1,9 @@
 backToTop: "به بالا بروید"
 changeLanguage: "تغییر زبان"
 changeTheme: "تغییر تم"
+copyAsMarkdown: "کپی به عنوان Markdown"
 copyCode: "کپی کد"
+copyPage: "کپی صفحه"
 copyright: "© ۲۰۲۴ پروژه هگزترا."
 dark: "تیره"
 editThisPage: "ویرایش این صفحه در گیت‌هاب ←"
@@ -10,6 +12,7 @@ light: "روشن"
 noResultsFound: "هیچ نتیجه‌ای پیدا نشد."
 onThisPage: "در این صفحه"
 tags: "برچسب‌ها"
+viewAsMarkdown: "مشاهده به عنوان Markdown"
 poweredBy: "طراحی شده توسط هگزترا"
 readMore: "ادامه مطلب ←"
 searchPlaceholder: "جستجو..."

i18n/ja.yaml

@@ -1,6 +1,9 @@
 backToTop: "トップにスクロール"
 changeLanguage: "言語を変更"
 changeTheme: "テーマを変更"
+copyAsMarkdown: "Markdownとしてコピー"
+copyCode: "コードをコピー"
+copyPage: "ページをコピー"
 copyright: "© 2025 Hextra プロジェクト。"
 dark: "ダーク"
 editThisPage: "このページをGitHubで編集 →"
@@ -9,6 +12,7 @@ light: "ライト"
 noResultsFound: "結果が見つかりませんでした。"
 onThisPage: "このページの内容"
 tags: "タグ"
+viewAsMarkdown: "Markdownとして表示"
 poweredBy: "提供元 Hextra"
 readMore: "もっと読む →"
 searchPlaceholder: "検索..."

i18n/zh-cn.yaml

@@ -1,7 +1,9 @@
 backToTop: "返回顶部"
 changeLanguage: "切换语言"
 changeTheme: "切换主题"
+copyAsMarkdown: "复制为 Markdown"
 copyCode: "复制代码"
+copyPage: "复制页面"
 copyright: "© 2025 Hextra Project."
 dark: "深色"
 editThisPage: "在 GitHub 上编辑此页 →"
@@ -10,6 +12,7 @@ light: "浅色"
 noResultsFound: "无结果"
 onThisPage: "此页上"
 tags: "标签"
+viewAsMarkdown: "以 Markdown 查看"
 poweredBy: "由 Hextra 驱动"
 readMore: "更多 →"
 searchPlaceholder: "搜索文档..."

layouts/_partials/components/page-context-menu.html

@@ -0,0 +1,85 @@
+{{- $enableGlobal := site.Params.page.contextMenu.enable | default false -}}
+{{- $enablePage := .Params.contextMenu -}}
+{{- $enable := cond (ne $enablePage nil) $enablePage $enableGlobal -}}
+{{- $customLinks := site.Params.page.contextMenu.links | default slice -}}
+
+{{- if $enable -}}
+  {{- with .OutputFormats.Get "markdown" -}}
+    {{- $markdownURL := .Permalink -}}
+    {{- $pageURL := $.Permalink -}}
+    {{- $pageTitle := $.Title -}}
+    <div class="hextra-page-context-menu hx:relative hx:inline-flex hx:shrink-0">
+      <div class="hx:inline-flex hx:overflow-hidden hx:rounded-lg hx:border hx:border-gray-200 hx:transition-colors hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700">
+        <button
+          class="hextra-page-context-menu-copy hx:group/copybtn hx:inline-flex hx:cursor-pointer hx:items-center hx:gap-1.5 hx:bg-transparent hx:px-2.5 hx:py-1 hx:text-sm hx:font-medium hx:text-gray-700 hx:transition-colors hx:hover:bg-slate-50 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-900"
+          data-url="{{ $markdownURL }}"
+          title="{{ i18n "copyAsMarkdown" }}"
+          aria-label="{{ i18n "copyAsMarkdown" }}"
+        >
+          <div class="hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:size-4">
+            {{- partial "utils/icon.html" (dict "name" "copy" "attributes" "height=16 width=16") -}}
+          </div>
+          <div class="hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:size-4">
+            {{- partial "utils/icon.html" (dict "name" "check" "attributes" "height=16 width=16") -}}
+          </div>
+          <span>{{ i18n "copyPage" }}</span>
+        </button>
+        <button
+          class="hextra-page-context-menu-toggle hx:inline-flex hx:cursor-pointer hx:items-center hx:justify-center hx:bg-transparent hx:px-1.5 hx:py-1 hx:text-gray-500 hx:transition-colors hx:hover:bg-slate-50 hx:hover:text-gray-700 hx:dark:text-gray-400 hx:dark:hover:bg-neutral-900 hx:dark:hover:text-gray-300"
+          data-state="closed"
+          aria-label="Toggle page context menu"
+        >
+          <div class="hx:size-4 hx:transition-transform hx:duration-200" data-chevron>
+            {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=16 width=16") -}}
+          </div>
+        </button>
+      </div>
+      <ul class="hextra-page-context-menu-dropdown not-prose hx:hidden hx:absolute hx:top-full hx:left-0 hx:sm:left-auto hx:sm:right-0 hx:mt-1 hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900">
+        <li>
+          <button
+            data-action="copy"
+            class="hx:flex hx:w-full hx:cursor-pointer hx:select-none hx:items-center hx:gap-2 hx:whitespace-nowrap hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:text-gray-700 hx:outline-none hx:transition-colors hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100"
+          >
+            <div class="hx:size-4 hx:shrink-0 hx:text-gray-500 hx:dark:text-gray-400">
+              {{- partial "utils/icon.html" (dict "name" "copy" "attributes" "height=16 width=16") -}}
+            </div>
+            {{ i18n "copyAsMarkdown" }}
+          </button>
+        </li>
+        <li>
+          <button
+            data-action="view"
+            data-url="{{ $markdownURL }}"
+            class="hx:flex hx:w-full hx:cursor-pointer hx:select-none hx:items-center hx:gap-2 hx:whitespace-nowrap hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:text-gray-700 hx:outline-none hx:transition-colors hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100"
+          >
+            <div class="hx:size-4 hx:shrink-0 hx:text-gray-500 hx:dark:text-gray-400">
+              {{- partial "utils/icon.html" (dict "name" "markdown" "attributes" "height=16 width=16") -}}
+            </div>
+            {{ i18n "viewAsMarkdown" }}
+          </button>
+        </li>
+        {{- if $customLinks -}}
+        <li class="hx:my-1 hx:h-px hx:bg-gray-200 hx:dark:bg-neutral-700" role="separator"></li>
+        {{- range $customLinks -}}
+          {{- $linkURL := partial "utils/template-url.html" (dict "template" .url "values" (dict "url" $pageURL "title" $pageTitle "markdown_url" $markdownURL)) -}}
+          <li>
+            <a
+              href="{{ $linkURL }}"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="hx:flex hx:w-full hx:cursor-pointer hx:select-none hx:items-center hx:gap-2 hx:whitespace-nowrap hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:text-gray-700 hx:outline-none hx:transition-colors hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100"
+            >
+              {{- with .icon -}}
+              <div class="hx:size-4 hx:shrink-0 hx:text-gray-500 hx:dark:text-gray-400">
+                {{- partial "utils/icon.html" (dict "name" . "attributes" "height=16 width=16") -}}
+              </div>
+              {{- end -}}
+              {{ .name }}
+            </a>
+          </li>
+        {{- end -}}
+        {{- end -}}
+      </ul>
+    </div>
+  {{- end -}}
+{{- end -}}

layouts/_partials/language-switch.html

@@ -26,7 +26,7 @@
       </div>
     </button>
     <ul
-      class="hextra-language-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+      class="hextra-language-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
       style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
     >
       {{ range site.Languages }}
@@ -34,7 +34,7 @@
         <li class="hx:flex hx:flex-col">
           <a
             href="{{ $link }}"
-            class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+            class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
           >
             {{- .LanguageName -}}
             {{- if eq .LanguageName site.Language.LanguageName -}}

layouts/_partials/navbar-link.html

@@ -28,7 +28,7 @@
     {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=12 class=\"hx:transition-transform hx:duration-200 hx:ease-in-out\"") -}}
   </button>
   <ul
-    class="hextra-nav-menu-items hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+    class="hextra-nav-menu-items hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
     style="min-width: 100px;"
   >
     {{ range $item.Children }}
@@ -43,7 +43,7 @@
       <a
         href="{{ $link }}"
         {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
-        class="hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:flex hx:items-center hx:gap-1"
+        class="hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:flex hx:items-center hx:gap-1 hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800"
       >
         {{- if and (eq .Params.type "link") .Params.icon -}}
         <span class="hx:inline-flex hx:items-center">

layouts/_partials/theme-toggle.html

@@ -27,14 +27,14 @@
     </div>
   </button>
   <ul
-    class="hextra-theme-toggle-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+    class="hextra-theme-toggle-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
     style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
     data-theme="light"
   >
     <li class="hx:flex hx:flex-col">
       <p
         data-item="light"
-        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+        class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
       >
         {{ $light }}
          <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden">
@@ -45,7 +45,7 @@
     <li class="hx:flex hx:flex-col">
       <p
         data-item="dark"
-        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+        class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
       >
         {{ $dark }}
          <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden">
@@ -56,7 +56,7 @@
     <li class="hx:flex hx:flex-col">
       <p
         data-item="system"
-        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+        class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
       >
         {{ $system }}
          <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden">

layouts/_partials/utils/template-url.html

@@ -0,0 +1,18 @@
+{{/*
+  This utility replaces placeholders in a URL template string.
+
+  Usage:
+    {{ partial "utils/template-url.html" (dict "template" .url "values" (dict "url" $pageURL "title" $pageTitle "markdown_url" $markdownURL)) }}
+
+  Placeholders use the format {key} and values are URL-encoded automatically.
+*/}}
+{{- $template := .template -}}
+{{- $values := .values | default dict -}}
+
+{{- range $key, $value := $values -}}
+  {{- $placeholder := printf "{%s}" $key -}}
+  {{- $encoded := $value | urlquery -}}
+  {{- $template = replace $template $placeholder $encoded -}}
+{{- end -}}
+
+{{- return $template -}}

layouts/blog/single.html

@@ -5,7 +5,12 @@
     <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
         {{ partial "breadcrumb.html" (dict "page" . "enable" true) }}
-        {{ if .Title }}<h1 class="hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
+        {{ if .Title }}
+        <div class="hx:flex hx:flex-col hx:sm:flex-row hx:items-start hx:sm:items-center hx:sm:justify-between hx:gap-4 hx:mt-2">
+          <h1 class="hx:mb-0 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>
+          {{ partial "components/page-context-menu" . }}
+        </div>
+        {{ end }}
         <div class="hx:mt-4 hx:mb-16 hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:flex hx:items-center hx:flex-wrap hx:gap-y-2">
           {{- with $date := .Date }}<span class="hx:mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
           {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}

layouts/docs/list.html

@@ -6,7 +6,12 @@
       <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
         {{ partial "breadcrumb.html" (dict "page" . "enable" true) }}
         <div class="content">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          {{ if .Title }}
+          <div class="hx:flex hx:flex-col hx:sm:flex-row hx:items-start hx:sm:items-center hx:sm:justify-between hx:gap-4 hx:mb-4">
+            <h1 class="hx:mb-0">{{ .Title }}</h1>
+            {{ partial "components/page-context-menu" . }}
+          </div>
+          {{ end }}
           {{ .Content }}
         </div>
         {{ partial "components/last-updated.html" . }}

layouts/docs/single.html

@@ -6,7 +6,12 @@
       <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
         {{ partial "breadcrumb.html" (dict "page" . "enable" true) }}
         <div class="content">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          {{ if .Title }}
+          <div class="hx:flex hx:flex-col hx:sm:flex-row hx:items-start hx:sm:items-center hx:sm:justify-between hx:gap-4 hx:mb-4">
+            <h1 class="hx:mb-0">{{ .Title }}</h1>
+            {{ partial "components/page-context-menu" . }}
+          </div>
+          {{ end }}
           {{ .Content }}
         </div>
         {{ partial "components/last-updated.html" . }}

layouts/glossary.markdown.md

@@ -0,0 +1,3 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" -}}
+
+{{ .RawContent }}

layouts/page.markdown.md

@@ -0,0 +1,3 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" -}}
+
+{{ .RawContent }}

layouts/section.markdown.md

@@ -0,0 +1,3 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" -}}
+
+{{ .RawContent }}

layouts/wide.markdown.md

@@ -0,0 +1,3 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" -}}
+
+{{ .RawContent }}