91 lines
5.6 KiB
HTML
91 lines
5.6 KiB
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 -}}
|