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.
2026-01-23 23:40:29 +00:00
parent e81447e7ae
commit fa8f8554ea
27 changed files with 612 additions and 23 deletions
--- a/docs/content/docs/guide/configuration.fa.md
+++ b/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) به طور پیش‌فرض فعال است.
--- a/docs/content/docs/guide/configuration.ja.md
+++ b/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) を利用した全文検索はデフォルトで有効です。
--- a/docs/content/docs/guide/configuration.md
+++ b/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.
--- a/docs/content/docs/guide/configuration.zh-cn.md
+++ b/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) 提供的全文搜索。
--- a/docs/hugo.yaml
+++ b/docs/hugo.yaml
@@ -14,8 +14,8 @@ hasCJKLanguage: true

 outputs:
  home: [html, llms]
-  page: [html]
-  section: [html, rss]
+  page: [html, markdown]
+  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
--- a/docs/hugo_stats.json
+++ b/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",