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

{{- $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: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 hx:ltr:rounded-l-lg hx:rtl:rounded-r-lg hx:hextra-focus-visible-inset"
          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 hx:ltr:rounded-r-lg hx:rtl:rounded-l-lg hx:hextra-focus-visible-inset"
          data-state="closed"
          aria-label="{{ (T "togglePageContextMenu") | default "Toggle page context menu" }}"
          aria-expanded="false"
          aria-haspopup="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" role="menu">
        <li role="none">
          <button
            data-action="copy"
            role="menuitem"
            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 role="none">
          <button
            data-action="view"
            data-url="{{ $markdownURL }}"
            role="menuitem"
            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 role="none">
            <a
              href="{{ $linkURL }}"
              target="_blank"
              rel="noopener noreferrer"
              role="menuitem"
              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 -}}