mirror of
https://github.com/imfing/hextra.git
synced 2025-06-20 07:21:29 -04:00
feat: add hx- prefix to Hextra Tailwind CSS classes (#300)
* feat: add prefix to tailwind css classes * fix: remove unnecessary prefixes * fix: add missing prefix in other places * chore: regenerate hugo_stats.json * chore: run `npm run build:css` * chore: add `hx-` prefix to _index.fa.md * fix: lang switcher display issue * fix: add `hx-` prefix to showcase/index.fa.md * fix: lang switch param mistake
This commit is contained in:
Xin
@ -1,4 +1,4 @@
|
||||
<pre class="mermaid mt-6">
|
||||
<pre class="mermaid hx-mt-6">
|
||||
{{- .Inner | safeHTML -}}
|
||||
</pre>
|
||||
{{- .Page.Store.Set "hasMermaid" true -}}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
{{- $copyCode := (T "copyCode") | default "Copy code" -}}
|
||||
|
||||
|
||||
<div class="code-block relative mt-6 first:mt-0 group/code">
|
||||
<div class="code-block hx-relative hx-mt-6 first:hx-mt-0 group/code">
|
||||
{{- if $filename -}}
|
||||
<div class="filename">{{ $filename }}</div>
|
||||
{{- end -}}
|
||||
@ -13,13 +13,13 @@
|
||||
{{- else -}}
|
||||
<pre><code>{{ .Inner }}</code></pre>
|
||||
{{- end -}}
|
||||
<div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
|
||||
<div class="hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
|
||||
<button
|
||||
class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50"
|
||||
class="code-copy-btn group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
|
||||
title="{{ $copyCode }}"
|
||||
>
|
||||
<div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
|
||||
<div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>
|
||||
<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
|
||||
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<h{{ .Level }}>
|
||||
{{- .Text | safeHTML -}}
|
||||
{{- if gt .Level 1 -}}
|
||||
<span class="absolute -mt-20" id="{{ .Anchor | safeURL }}"></span>
|
||||
<span class="hx-absolute -hx-mt-20" id="{{ .Anchor | safeURL }}"></span>
|
||||
<a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="Permalink for this section"></a>
|
||||
{{- end -}}
|
||||
</h{{ .Level }}>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{{ define "main" }}
|
||||
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
|
||||
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
|
||||
{{ partial "sidebar.html" (dict "context" .) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-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 md:hx-px-12">
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<div class="mt-16"></div>
|
||||
<div class="hx-mt-16"></div>
|
||||
{{ partial "components/last-updated.html" . }}
|
||||
{{ partial "components/comments.html" . }}
|
||||
</main>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
{{ define "main" }}
|
||||
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
|
||||
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
<br class="mt-1.5 text-sm" />
|
||||
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
|
||||
<div class="mb-16"></div>
|
||||
<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 md:hx-px-12">
|
||||
<br class="hx-mt-1.5 hx-text-sm" />
|
||||
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
|
||||
<div class="hx-mb-16"></div>
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<div class="mt-16"></div>
|
||||
<div class="hx-mt-16"></div>
|
||||
{{ partial "components/comments.html" . }}
|
||||
</main>
|
||||
</article>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{ define "main" }}
|
||||
<div class="mx-auto flex max-w-[90rem]">
|
||||
<div class="hx-mx-auto hx-flex hx-max-w-[90rem]">
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
|
||||
<article class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pt-4 pb-8 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
|
||||
<br class="mt-1.5 text-sm" />
|
||||
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
|
||||
<article class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pt-4 hx-pb-8 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
|
||||
<br class="hx-mt-1.5 hx-text-sm" />
|
||||
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
{{ define "main" }}
|
||||
{{- $readMore := (T "readMore") | default "Read more →" -}}
|
||||
<div class="mx-auto flex {{ partial `utils/page-width` . }}">
|
||||
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
<br class="mt-1.5 text-sm" />
|
||||
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
|
||||
<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 md:hx-px-12">
|
||||
<br class="hx-mt-1.5 hx-text-sm" />
|
||||
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
|
||||
<div class="content">{{ .Content }}</div>
|
||||
{{ range .Pages.ByDate.Reverse }}
|
||||
<div class="mb-10">
|
||||
<h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<div class="hx-mb-10">
|
||||
<h3><a style="color: inherit; text-decoration: none;" class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
{{- if site.Params.blog.list.displayTags -}}
|
||||
{{ with .Params.tags }}
|
||||
<p class="opacity-50 text-sm leading-7">
|
||||
{{- range . }}<a class="inline-block mr-2">#{{ . }}</a>{{ end -}}
|
||||
<p class="hx-opacity-50 hx-text-sm hx-leading-7">
|
||||
{{- range . }}<a class="hx-inline-block hx-mr-2">#{{ . }}</a>{{ end -}}
|
||||
</p>
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
<p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
|
||||
<p class="opacity-80 mt-1 leading-7">
|
||||
<a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
|
||||
<p class="hx-opacity-80 hx-mt-4 hx-leading-7">{{- partial "utils/page-description" . -}}</p>
|
||||
<p class="hx-opacity-80 hx-mt-1 hx-leading-7">
|
||||
<a class="hx-text-[color:hsl(var(--primary-hue),100%,50%)] hx-underline hx-underline-offset-2 hx-decoration-from-font" href="{{ .RelPermalink }}">
|
||||
{{- $readMore -}}
|
||||
</a>
|
||||
</p>
|
||||
<p class="opacity-50 text-sm mt-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
|
||||
<p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</main>
|
||||
</article>
|
||||
<div class="max-xl:hidden h-0 w-64 shrink-0"></div>
|
||||
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
{{ define "main" }}
|
||||
<div class="mx-auto flex {{ partial `utils/page-width` . }}">
|
||||
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-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 md:hx-px-12">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
<h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
|
||||
<div class="mt-4 mb-16 text-gray-500 text-sm flex items-center flex-wrap gap-y-2">
|
||||
{{- with $date := .Date }}<span class="mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
|
||||
<h1 class="hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
|
||||
<div class="hx-mt-4 hx-mb-16 hx-text-gray-500 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 -}}
|
||||
{{ if and .Date .Params.authors }}<span class="mx-1">·</span>{{ end -}}
|
||||
{{ if and .Date .Params.authors }}<span class="hx-mx-1">·</span>{{ end -}}
|
||||
{{- with $.Params.authors -}}
|
||||
{{- range $i, $author := . -}}
|
||||
{{- if reflect.IsMap $author -}}
|
||||
{{- if and $i (not $author.image) }}<span class="mr-1">,</span>{{ end -}}
|
||||
{{- if and $i (not $author.image) }}<span class="hx-mr-1">,</span>{{ end -}}
|
||||
<a
|
||||
{{ with $author.link }}href="{{ . }}" target="_blank"{{ end }}
|
||||
class="group inline-flex items-center text-current gap-x-1.5 mx-1"
|
||||
class="hx-group hx-inline-flex hx-items-center hx-text-current hx-gap-x-1.5 hx-mx-1"
|
||||
{{ with $author.name }}title="{{ . }}"{{ end }}
|
||||
>
|
||||
{{- with $image := $author.image }}
|
||||
@ -25,12 +25,12 @@
|
||||
{{- if and $isLocal $startsWithSlash }}
|
||||
{{- $image = (relURL (strings.TrimPrefix "/" $image)) -}}
|
||||
{{ end -}}
|
||||
<img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="inline-block h-4 w-4 rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
|
||||
<img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="hx-inline-block hx-h-4 hx-w-4 hx-rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
|
||||
{{ end -}}
|
||||
<div class="group-hover:underline">{{ $author.name }}</div>
|
||||
<div class="group-hover:hx-underline">{{ $author.name }}</div>
|
||||
</a>
|
||||
{{- else -}}
|
||||
{{- if $i }}<span class="mr-1">,</span>{{ end -}}<span class="mx-1">{{ $author }}</span>
|
||||
{{- if $i }}<span class="hx-mr-1">,</span>{{ end -}}<span class="hx-mx-1">{{ $author }}</span>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{ define "main" }}
|
||||
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
|
||||
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
|
||||
{{ partial "sidebar.html" (dict "context" .) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-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 md:hx-px-12">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{ define "main" }}
|
||||
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
|
||||
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
|
||||
{{ partial "sidebar.html" (dict "context" .) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-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 md:hx-px-12">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{{ define "main" }}
|
||||
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
|
||||
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
|
||||
<div class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pb-8 pt-8 md:pt-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pb-8 hx-pt-8 md:hx-pt-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
|
||||
<div class="hx-flex hx-flex-col hx-items-start">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{{ define "main" }}
|
||||
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
|
||||
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
|
||||
<h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
|
||||
<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 md:hx-px-12">
|
||||
<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<div class="mt-1.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 dark:text-gray-400 contrast-more:text-current">
|
||||
<div class="hx-mt-1.5 hx-flex hx-items-center hx-gap-1 hx-overflow-hidden hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 contrast-more:hx-text-current">
|
||||
{{- range .Ancestors.Reverse }}
|
||||
{{- if not .IsHome }}
|
||||
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis hover:text-gray-900 dark:hover:text-gray-100">
|
||||
<div class="hx-whitespace-nowrap hx-transition-colors hx-min-w-[24px] hx-overflow-hidden hx-text-ellipsis hover:hx-text-gray-900 dark:hover:hx-text-gray-100">
|
||||
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
|
||||
</div>
|
||||
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0 rtl:-rotate-180\"") -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-w-3.5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
<div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
|
||||
<div class="hx-whitespace-nowrap hx-transition-colors hx-font-medium hx-text-gray-700 contrast-more:hx-font-bold contrast-more:hx-text-current dark:hx-text-gray-100 contrast-more:dark:hx-text-current">
|
||||
{{- .LinkTitle -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
{{- if site.Params.displayUpdatedDate -}}
|
||||
{{- with .Lastmod -}}
|
||||
{{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
|
||||
<div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
|
||||
<div class="hx-mt-12 hx-mb-8 hx-block hx-text-xs hx-text-gray-500 ltr:hx-text-right rtl:hx-text-left dark:hx-text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
|
||||
{{- else -}}
|
||||
<div class="mt-16"></div>
|
||||
<div class="hx-mt-16"></div>
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
<div class="mt-16"></div>
|
||||
<div class="hx-mt-16"></div>
|
||||
{{- end -}}
|
||||
|
||||
@ -26,14 +26,14 @@
|
||||
{{- end -}}
|
||||
|
||||
{{- if or $prev $next -}}
|
||||
<div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
|
||||
<div class="hx-mb-8 hx-flex hx-items-center hx-border-t hx-pt-8 dark:hx-border-neutral-800 contrast-more:hx-border-neutral-400 dark:contrast-more:hx-border-neutral-400 print:hx-hidden">
|
||||
{{- if $prev -}}
|
||||
<a
|
||||
href="{{ $prev.RelPermalink }}"
|
||||
title="{{ $prev.LinkTitle }}"
|
||||
class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4"
|
||||
class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-pr-4 rtl:hx-pl-4"
|
||||
>
|
||||
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 ltr:hx-rotate-180\"") -}}
|
||||
{{- $prev.LinkTitle -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
@ -41,10 +41,10 @@
|
||||
<a
|
||||
href="{{ $next.RelPermalink }}"
|
||||
title="{{ $next.LinkTitle }}"
|
||||
class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left"
|
||||
class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-ml-auto ltr:hx-pl-4 ltr:hx-text-right rtl:hx-mr-auto rtl:hx-pr-4 rtl:hx-text-left"
|
||||
>
|
||||
{{- $next.LinkTitle -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 rtl:-rotate-180\"") -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
@ -4,42 +4,42 @@
|
||||
{{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
|
||||
{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
|
||||
|
||||
{{- $footerWidth := "max-w-screen-xl" -}}
|
||||
{{- $footerWidth := "hx-max-w-screen-xl" -}}
|
||||
{{- with .Site.Params.footer.width -}}
|
||||
{{ if eq . "wide" -}}
|
||||
{{ $footerWidth = "max-w-[90rem]" -}}
|
||||
{{ $footerWidth = "hx-max-w-[90rem]" -}}
|
||||
{{ else if eq . "full" -}}
|
||||
{{ $footerWidth = "max-w-full" -}}
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
|
||||
<footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
|
||||
{{- if $enableFooterSwitches -}}
|
||||
<div class="mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}">
|
||||
<div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
|
||||
{{- partial "language-switch.html" (dict "context" .) -}}
|
||||
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
|
||||
</div>
|
||||
{{- if or site.IsMultiLingual $displayThemeToggle -}}
|
||||
<hr class="dark:border-neutral-800" />
|
||||
<hr class="dark:hx-border-neutral-800" />
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<div
|
||||
class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
|
||||
class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center sm:items-start">
|
||||
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
|
||||
{{- if .Site.Params.footer.displayCopyright }}<div class="mt-6 text-xs">{{ $copyright | markdownify }}</div>{{ end }}
|
||||
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
|
||||
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
|
||||
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{- define "theme-credit" -}}
|
||||
<a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
|
||||
<a class="hx-flex hx-text-sm hx-items-center hx-gap-1 hx-text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
|
||||
<span>
|
||||
{{- . | markdownify -}}
|
||||
{{- if strings.Contains . "Hextra" -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="inline-block ml-1 align-[-2.5px]"`) -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx-inline-block hx-ml-1 hx-align-[-2.5px]"`) -}}
|
||||
{{- end -}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
{{ end -}}
|
||||
</title>
|
||||
<meta name="description" content="{{ partial "utils/page-description.html" . }}" />
|
||||
|
||||
|
||||
{{ with .Params.canonical }}
|
||||
<link rel="canonical" href="{{ . }}" itemprop="url" />
|
||||
{{ else }}
|
||||
|
||||
@ -6,33 +6,33 @@
|
||||
{{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}
|
||||
|
||||
{{- if site.IsMultiLingual -}}
|
||||
<div class="flex justify-items-start {{ if $grow }}grow{{ end }}">
|
||||
<div class="hx-flex hx-justify-items-start {{ if $grow }}hx-grow{{ end }}">
|
||||
<button
|
||||
title="{{ $changeLanguage }}"
|
||||
data-state="closed"
|
||||
class="language-switcher h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 grow"
|
||||
class="language-switcher hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 hx-grow"
|
||||
type="button"
|
||||
aria-label="{{ $changeLanguage }}"
|
||||
>
|
||||
<div class="flex items-center gap-2 capitalize">
|
||||
<div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
|
||||
{{- partial "utils/icon" (dict "name" "globe-alt" "attributes" "height=12") -}}
|
||||
{{- if not $hideLabel }}<span>{{ site.Language.LanguageName }}</span>{{ end -}}
|
||||
</div>
|
||||
</button>
|
||||
<ul
|
||||
class="language-options hidden z-20 max-h-64 overflow-auto rounded-md ring-1 ring-black/5 bg-white py-1 text-sm shadow-lg dark:ring-white/20 dark:bg-neutral-800"
|
||||
class="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 dark:hx-ring-white/20 dark:hx-bg-neutral-800"
|
||||
style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
|
||||
>
|
||||
{{ range site.Languages }}
|
||||
{{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
|
||||
<li class="flex flex-col">
|
||||
<li class="hx-flex hx-flex-col">
|
||||
<a
|
||||
href="{{ $link }}"
|
||||
class="text-gray-800 dark:text-gray-100 hover:bg-primary-50 hover:text-primary-600 hover:dark:bg-primary-500/10 hover:dark:text-primary-600 relative cursor-pointer whitespace-nowrap py-1.5 transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9"
|
||||
class="hx-text-gray-800 dark:hx-text-gray-100 hover:hx-bg-primary-50 hover:hx-text-primary-600 hover:dark:hx-bg-primary-500/10 hover:dark:hx-text-primary-600 hx-relative hx-cursor-pointer hx-whitespace-nowrap hx-py-1.5 hx-transition-colors ltr:hx-pl-3 ltr:hx-pr-9 rtl:hx-pr-3 rtl:hx-pl-9"
|
||||
>
|
||||
{{- .LanguageName -}}
|
||||
{{- if eq .LanguageName site.Language.LanguageName -}}
|
||||
<span class="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">
|
||||
<span class="hx-absolute hx-inset-y-0 hx-flex hx-items-center ltr:hx-right-3 rtl:hx-left-3">
|
||||
{{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
|
||||
</span>
|
||||
{{- end -}}
|
||||
|
||||
@ -4,26 +4,26 @@
|
||||
{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
|
||||
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
|
||||
|
||||
{{- $navWidth := "max-w-[90rem]" -}}
|
||||
{{- $navWidth := "hx-max-w-[90rem]" -}}
|
||||
{{- with .Site.Params.navbar.width -}}
|
||||
{{ if eq . "normal" -}}
|
||||
{{ $navWidth = "max-w-screen-xl" -}}
|
||||
{{ $navWidth = "hx-max-w-screen-xl" -}}
|
||||
{{ else if eq . "full" -}}
|
||||
{{ $navWidth = "max-w-full" -}}
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
|
||||
<div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
|
||||
<div class="nav-container hx-sticky hx-top-0 hx-z-20 hx-w-full hx-bg-transparent print:hx-hidden">
|
||||
<div class="nav-container-blur hx-pointer-events-none hx-absolute hx-z-[-1] hx-h-full hx-w-full hx-bg-white dark:hx-bg-dark hx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:hx-shadow-[0_0_0_1px_#000] dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]"></div>
|
||||
|
||||
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 {{ $navWidth }}">
|
||||
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
|
||||
<nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}">
|
||||
<a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}">
|
||||
{{- if (.Site.Params.navbar.displayLogo | default true) }}
|
||||
<img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
<img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
<img class="hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
<img class="hx-hidden dark:hx-block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
{{- end }}
|
||||
{{- if (.Site.Params.navbar.displayTitle | default true) }}
|
||||
<span class="mx-2 font-extrabold inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
|
||||
<span class="hx-mx-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
|
||||
{{- end }}
|
||||
</a>
|
||||
|
||||
@ -43,27 +43,27 @@
|
||||
{{/* Display icon menu item */}}
|
||||
{{- if .Params.icon -}}
|
||||
{{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }}
|
||||
<a class="p-2 text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
|
||||
<a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
|
||||
{{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
|
||||
<span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
<span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
</a>
|
||||
{{- else -}}
|
||||
{{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
|
||||
{{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
|
||||
{{- $activeClass := cond $active "hx-font-medium" "hx-text-gray-600 hover:hx-text-gray-800 dark:hx-text-gray-400 dark:hover:hx-text-gray-200" -}}
|
||||
<a
|
||||
title="{{ or (T .Identifier) .Name | safeHTML }}"
|
||||
href="{{ $link }}"
|
||||
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
|
||||
class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
|
||||
class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
|
||||
>
|
||||
<span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
<span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
|
||||
<button type="button" aria-label="Menu" class="hamburger-menu -hx-mr-2 hx-rounded hx-p-2 active:hx-bg-gray-400/20 md:hx-hidden">
|
||||
{{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
|
||||
|
||||
|
||||
<div class="search-wrapper relative md:w-64">
|
||||
<div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
|
||||
<div class="search-wrapper hx-relative md:hx-w-64">
|
||||
<div class="hx-relative hx-flex hx-items-center hx-text-gray-900 contrast-more:hx-text-gray-800 dark:hx-text-gray-300 contrast-more:dark:hx-text-gray-300">
|
||||
<input
|
||||
placeholder="{{ $placeholder }}"
|
||||
class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current"
|
||||
class="search-input hx-block hx-w-full hx-appearance-none hx-rounded-lg hx-px-3 hx-py-2 hx-transition-colors hx-text-base hx-leading-tight md:hx-text-sm hx-bg-black/[.05] dark:hx-bg-gray-50/10 focus:hx-bg-white dark:focus:hx-bg-dark placeholder:hx-text-gray-500 dark:placeholder:hx-text-gray-400 contrast-more:hx-border contrast-more:hx-border-current"
|
||||
type="search"
|
||||
value=""
|
||||
spellcheck="false"
|
||||
/>
|
||||
<kbd
|
||||
class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"
|
||||
class="hx-absolute hx-my-1.5 hx-select-none ltr:hx-right-1.5 rtl:hx-left-1.5 hx-h-5 hx-rounded hx-bg-white hx-px-1.5 hx-font-mono hx-text-[10px] hx-font-medium hx-text-gray-500 hx-border dark:hx-border-gray-100/20 dark:hx-bg-dark/50 contrast-more:hx-border-current contrast-more:hx-text-current contrast-more:dark:hx-border-current hx-items-center hx-gap-1 hx-transition-opacity hx-pointer-events-none hx-hidden sm:hx-flex"
|
||||
>
|
||||
CTRL K
|
||||
</kbd>
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<div>
|
||||
<ul
|
||||
class="search-results hextra-scrollbar hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
||||
class="search-results hextra-scrollbar hx-hidden hx-border hx-border-gray-200 hx-bg-white hx-text-gray-100 dark:hx-border-neutral-800 dark:hx-bg-neutral-900 hx-absolute hx-top-full hx-z-20 hx-mt-2 hx-overflow-auto hx-overscroll-contain hx-rounded-xl hx-py-2.5 hx-shadow-xl hx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:hx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx-inset-x-0 ltr:md:hx-left-auto rtl:md:hx-right-auto contrast-more:hx-border contrast-more:hx-border-gray-900 contrast-more:dark:hx-border-gray-50 hx-w-screen hx-min-h-[100px] hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
||||
style="transition: max-height 0.2s ease 0s;"
|
||||
></ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{{- $disableSidebar := .disableSidebar | default false -}}
|
||||
{{- $displayPlaceholder := .displayPlaceholder | default false -}}
|
||||
|
||||
{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}
|
||||
{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}}
|
||||
|
||||
{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
|
||||
{{- $pageURL := $context.RelPermalink -}}
|
||||
@ -15,14 +15,14 @@
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60 hidden"></div>
|
||||
<aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
|
||||
<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div>
|
||||
<aside class="sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
|
||||
<!-- Search bar on small screen -->
|
||||
<div class="px-4 pt-4 md:hidden">
|
||||
<div class="hx-px-4 hx-pt-4 md:hx-hidden">
|
||||
{{ partial "search.html" }}
|
||||
</div>
|
||||
<div class="hextra-scrollbar overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
|
||||
<ul class="flex flex-col gap-1 md:hidden">
|
||||
<div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
|
||||
<ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
|
||||
<!-- Nav -->
|
||||
{{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}}
|
||||
{{ template "sidebar-footer" }}
|
||||
@ -30,27 +30,27 @@
|
||||
|
||||
<!-- Sidebar on large screen -->
|
||||
{{- if $disableSidebar -}}
|
||||
{{- if $displayPlaceholder }}<div class="max-xl:hidden h-0 w-64 shrink-0"></div>{{ end -}}
|
||||
{{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}}
|
||||
{{ .context.Scratch.Set "enableFooterSwitches" true }}
|
||||
{{- else -}}
|
||||
<ul class="flex flex-col gap-1 max-md:hidden">
|
||||
<ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
|
||||
{{ template "sidebar-main" (dict "context" $navRoot "page" $context "pageURL" $pageURL) }}
|
||||
{{ template "sidebar-footer" }}
|
||||
</ul>
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{/* Hide theme switch when sidebar is disabled */}}
|
||||
{{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
|
||||
{{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
|
||||
{{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
|
||||
|
||||
{{ if or site.IsMultiLingual $displayThemeToggle }}
|
||||
<div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
|
||||
<div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}hx-justify-end{{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t" data-toggle-animation="show">
|
||||
{{- with site.IsMultiLingual -}}
|
||||
{{- partial "language-switch" (dict "context" $context "grow" true) -}}
|
||||
{{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
|
||||
{{- else -}}
|
||||
{{- with $displayThemeToggle -}}
|
||||
<div class="flex grow flex-col">{{ partial "theme-toggle" }}</div>
|
||||
<div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
@ -77,8 +77,8 @@
|
||||
{{- if eq $level 0 -}}
|
||||
{{- range $items.ByWeight }}
|
||||
{{- if .Params.sidebar.separator -}}
|
||||
<li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
|
||||
<span class="cursor-default">{{ .LinkTitle }}</span>
|
||||
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
|
||||
<span class="hx-cursor-default">{{ .LinkTitle }}</span>
|
||||
</li>
|
||||
{{- else -}}
|
||||
{{- $active := eq $pageURL .RelPermalink -}}
|
||||
@ -93,13 +93,13 @@
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
<div class="ltr:pr-0 overflow-hidden">
|
||||
<ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
|
||||
<div class="ltr:hx-pr-0 hx-overflow-hidden">
|
||||
<ul class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'>
|
||||
{{- range $items.ByWeight }}
|
||||
{{- $active := eq $pageURL .RelPermalink -}}
|
||||
{{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
|
||||
{{- $title := .LinkTitle | default .File.BaseFileName -}}
|
||||
<li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
|
||||
<li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
|
||||
{{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
|
||||
{{- if and $toc $active -}}
|
||||
{{ template "sidebar-toc" dict "page" . }}
|
||||
@ -116,14 +116,14 @@
|
||||
{{- define "sidebar-toc" -}}
|
||||
{{ $page := .page }}
|
||||
{{ with $page.Fragments.Headings }}
|
||||
<ul class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'>
|
||||
<ul class='hx-flex hx-flex-col hx-gap-1 hx-relative before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] dark:before:hx-bg-neutral-800 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-pr-3 rtl:before:hx-right-0 ltr:hx-ml-3 rtl:hx-mr-3'>
|
||||
{{- range . }}
|
||||
{{- with .Headings }}
|
||||
{{- range . -}}
|
||||
<li>
|
||||
<a
|
||||
href="#{{ anchorize .ID }}"
|
||||
class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
|
||||
class="hx-flex hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [word-break:break-word] hx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:hx-border hx-gap-2 before:hx-opacity-25 before:hx-content-['#'] hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:hx-text-gray-900 contrast-more:dark:hx-text-gray-50 contrast-more:hx-border-transparent contrast-more:hover:hx-border-gray-900 contrast-more:dark:hover:hx-border-gray-50"
|
||||
>
|
||||
{{- .Title -}}
|
||||
</a>
|
||||
@ -139,8 +139,8 @@
|
||||
{{- range site.Menus.sidebar -}}
|
||||
{{- $name := or (T .Identifier) .Name -}}
|
||||
{{ if eq .Params.type "separator" }}
|
||||
<li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
|
||||
<span class="cursor-default">{{ $name }}</span>
|
||||
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
|
||||
<span class="hx-cursor-default">{{ $name }}</span>
|
||||
</li>
|
||||
{{ else }}
|
||||
<li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
|
||||
@ -152,11 +152,11 @@
|
||||
{{- $external := strings.HasPrefix .link "http" -}}
|
||||
{{- $open := .open | default true -}}
|
||||
<a
|
||||
class="flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
|
||||
class="hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
|
||||
{{- if .active }}
|
||||
sidebar-active-item bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
|
||||
sidebar-active-item hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500
|
||||
{{- else }}
|
||||
text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
|
||||
hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50
|
||||
{{- end -}}"
|
||||
href="{{ .link }}"
|
||||
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
|
||||
@ -173,5 +173,5 @@
|
||||
{{- end -}}
|
||||
|
||||
{{- define "sidebar-collapsible-button" -}}
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path></svg>
|
||||
{{- end -}}
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
<button
|
||||
title="{{ $changeTheme }}"
|
||||
data-theme="light"
|
||||
class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
|
||||
class="theme-toggle hx-group hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50"
|
||||
type="button"
|
||||
aria-label="{{ $changeTheme }}"
|
||||
>
|
||||
<div class="flex items-center gap-2 capitalize">
|
||||
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
|
||||
{{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
|
||||
{{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
|
||||
<div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
|
||||
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hx-hidden\"") -}}
|
||||
{{- if not $hideLabel }}<span class="group-data-[theme=light]:hx-hidden">{{ $light }}</span>{{ end -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hx-hidden\"") -}}
|
||||
{{- if not $hideLabel }}<span class="group-data-[theme=dark]:hx-hidden">{{ $dark }}</span>{{ end -}}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
{{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
|
||||
{{- $backToTop := (T "backToTop") | default "Scroll to top" -}}
|
||||
|
||||
<nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
|
||||
<nav class="hextra-toc hx-order-last hx-hidden hx-w-64 hx-shrink-0 xl:hx-block print:hx-hidden hx-px-4" aria-label="table of contents">
|
||||
{{- if $toc }}
|
||||
<div class="hextra-scrollbar sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
|
||||
<div class="hextra-scrollbar hx-sticky hx-top-16 hx-overflow-y-auto hx-pr-4 hx-pt-6 hx-text-sm [hyphens:auto] hx-max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:hx--mr-4 rtl:hx--ml-4">
|
||||
{{- with .Fragments.Headings -}}
|
||||
<p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
|
||||
<p class="hx-mb-4 hx-font-semibold hx-tracking-tight">{{ $onThisPage }}</p>
|
||||
{{- range . -}}
|
||||
<ul>
|
||||
{{- with .Headings -}}{{ template "toc-subheading" (dict "headings" . "level" 0) }}{{- end -}}
|
||||
@ -17,13 +17,13 @@
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" -}}
|
||||
{{- $borderClass := "hx-mt-8 hx-border-t hx-bg-white hx-pt-8 hx-shadow-[0_-12px_16px_white] dark:hx-bg-dark dark:hx-shadow-[0_-12px_16px_#111]" -}}
|
||||
{{- if not .Fragments.Headings -}}
|
||||
{{- $borderClass = "" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{/* TOC bottom part */}}
|
||||
<div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
|
||||
<div class="{{ $borderClass }} hx-sticky hx-bottom-0 hx-flex hx-flex-col hx-items-start hx-gap-2 hx-pb-8 dark:hx-border-neutral-800 contrast-more:hx-border-t contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-border-neutral-400">
|
||||
{{- if site.Params.editURL.enable -}}
|
||||
{{- $editURL := site.Params.editURL.base | default "" -}}
|
||||
{{- with .Params.editURL -}}
|
||||
@ -38,14 +38,14 @@
|
||||
{{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
|
||||
<a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
|
||||
{{- end -}}
|
||||
{{/* Scroll To Top */}}
|
||||
<button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="transition-all transition duration-75 opacity-0 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50">
|
||||
<button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50">
|
||||
<span>
|
||||
{{- $backToTop -}}
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline ml-1 h-3.5 w-3.5 border rounded-full border-gray-500 hover:border-gray-900 dark:border-gray-400 dark:hover:border-gray-100 contrast-more:border-gray-800 contrast-more:dark:border-gray-50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx-inline hx-ml-1 hx-h-3.5 hx-w-3.5 hx-border hx-rounded-full hx-border-gray-500 hover:hx-border-gray-900 dark:hx-border-gray-400 dark:hover:hx-border-gray-100 contrast-more:hx-border-gray-800 contrast-more:dark:hx-border-gray-50">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
@ -63,12 +63,12 @@
|
||||
{{- end -}}
|
||||
|
||||
{{- $padding := (mul $level 4) -}}
|
||||
{{- $class := cond (eq $level 0) "font-semibold" (printf "ltr:pl-%d rtl:pr-%d" $padding $padding) -}}
|
||||
{{- $class := cond (eq $level 0) "hx-font-semibold" (printf "ltr:hx-pl-%d rtl:hx-pr-%d" $padding $padding) -}}
|
||||
|
||||
{{- range $headings }}
|
||||
{{- if .Title }}
|
||||
<li class="my-2 scroll-my-6 scroll-py-6">
|
||||
<a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 contrast-more:text-gray-900 contrast-more:underline contrast-more:dark:text-gray-50 w-full break-words" href="#{{ anchorize .ID }}">
|
||||
<li class="hx-my-2 hx-scroll-my-6 hx-scroll-py-6">
|
||||
<a class="{{ $class }} hx-inline-block hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-300 contrast-more:hx-text-gray-900 contrast-more:hx-underline contrast-more:dark:hx-text-gray-50 hx-w-full hx-break-words" href="#{{ anchorize .ID }}">
|
||||
{{- .Title | safeHTML | plainify | htmlUnescape }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -14,14 +14,14 @@
|
||||
|
||||
{{- with $pageWidth -}}
|
||||
{{ if eq . "wide" -}}
|
||||
{{ $pageWidth = "max-w-[90rem]" -}}
|
||||
{{ $pageWidth = "hx-max-w-[90rem]" -}}
|
||||
{{ else if eq . "full" -}}
|
||||
{{ $pageWidth = "max-w-full" -}}
|
||||
{{ else -}}
|
||||
{{ $pageWidth = "max-w-screen-xl" -}}
|
||||
{{ $pageWidth = "hx-max-w-screen-xl" -}}
|
||||
{{ end -}}
|
||||
{{ else -}}
|
||||
{{ $pageWidth = "max-w-screen-xl" -}}
|
||||
{{ $pageWidth = "hx-max-w-screen-xl" -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ return $pageWidth }}
|
||||
|
||||
@ -8,29 +8,29 @@
|
||||
{{/* Also allow using "icon" */}}
|
||||
{{ $icon := .Get "icon" }}
|
||||
|
||||
{{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
|
||||
{{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
|
||||
{{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
|
||||
{{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
|
||||
{{ $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" }}
|
||||
{{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
|
||||
{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
|
||||
{{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
|
||||
|
||||
{{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
|
||||
|
||||
|
||||
<div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
|
||||
<div class="ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2">
|
||||
<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
|
||||
<div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
|
||||
{{- with $emoji -}}
|
||||
<div class="select-none text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
|
||||
<div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{- else -}}
|
||||
{{- with $icon }}
|
||||
{{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="inline-block align-middle"`) -}}
|
||||
{{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
<div class="w-full min-w-0 leading-7">
|
||||
<div class="mt-6 leading-7 first:mt-0">
|
||||
<div class="hx-w-full hx-min-w-0 hx-leading-7">
|
||||
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
|
||||
{{ .Inner | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,9 +38,9 @@
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
|
||||
{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
|
||||
{{- with $image -}}
|
||||
{{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
|
||||
{{ $linkClass = "hover:hx-border-gray-300 hx-bg-gray-100 hx-shadow dark:hx-border-neutral-700 dark:hx-bg-neutral-800 dark:hx-text-gray-50 hover:hx-shadow-lg dark:hover:hx-border-neutral-500 dark:hover:hx-bg-neutral-700" }}
|
||||
{{- end -}}
|
||||
|
||||
{{- $external := strings.HasPrefix $link "http" -}}
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
|
||||
<a
|
||||
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
|
||||
class="hextra-card hx-group hx-flex hx-flex-col hx-justify-start hx-overflow-hidden hx-rounded-lg hx-border hx-border-gray-200 hx-text-current hx-no-underline dark:hx-shadow-none hover:hx-shadow-gray-100 dark:hover:hx-shadow-none hx-shadow-gray-100 active:hx-shadow-sm active:hx-shadow-gray-200 hx-transition-all hx-duration-200 {{ $linkClass }}"
|
||||
{{- if $link -}}
|
||||
href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
|
||||
{{- end -}}
|
||||
@ -65,18 +65,18 @@
|
||||
/>
|
||||
{{- end -}}
|
||||
|
||||
{{- $padding := "p-4" -}}
|
||||
{{- $padding := "hx-p-4" -}}
|
||||
{{- with $subtitle -}}
|
||||
{{- $padding = "pt-4 px-4" -}}
|
||||
{{- $padding = "hx-pt-4 hx-px-4" -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
|
||||
<span class="hx-flex hx-font-semibold hx-items-start hx-gap-2 {{ $padding }} hx-text-gray-700 hover:hx-text-gray-900 dark:hx-text-neutral-200 dark:hover:hx-text-neutral-50">
|
||||
{{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
|
||||
{{- $title -}}
|
||||
</span>
|
||||
{{- with $subtitle -}}
|
||||
<div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- $subtitle | markdownify -}}</div>
|
||||
<div class="hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
|
||||
{{- end -}}
|
||||
</a>
|
||||
{{- /* Strip trailing newline. */ -}}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{ $rows := .Get "rows" | default "3" }}
|
||||
|
||||
<div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: {{ $rows }};">
|
||||
<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--rows: {{ $rows }};">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{{- $title := .Get "title" | default "" -}}
|
||||
{{- $closed := eq (.Get "closed") "true" | default false -}}
|
||||
|
||||
<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4 group" {{ if not $closed }}open{{ end }}>
|
||||
<summary class="flex items-center cursor-pointer select-none list-none p-1 rounded transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 group-open:before:rotate-90">
|
||||
<strong class="text-lg">{{ $title | markdownify }}</strong>
|
||||
<details class="last-of-type:hx-mb-0 hx-rounded-lg hx-bg-neutral-50 dark:hx-bg-neutral-800 hx-p-2 hx-mt-4 hx-group" {{ if not $closed }}open{{ end }}>
|
||||
<summary class="hx-flex hx-items-center hx-cursor-pointer hx-select-none hx-list-none hx-p-1 hx-rounded hx-transition-colors hover:hx-bg-gray-100 dark:hover:hx-bg-neutral-800 before:hx-mr-1 before:hx-inline-block before:hx-transition-transform before:hx-content-[''] dark:before:hx-invert rtl:before:hx-rotate-180 group-open:before:hx-rotate-90">
|
||||
<strong class="hx-text-lg">{{ $title | markdownify }}</strong>
|
||||
</summary>
|
||||
<div class="p-2 overflow-hidden">
|
||||
<div class="hx-p-2 hx-overflow-hidden">
|
||||
{{ .InnerDeindent | markdownify }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="hextra-filetree mt-6 select-none text-sm text-gray-800 dark:text-gray-300 not-prose">
|
||||
<div class="inline-block rounded-lg border px-4 py-2 dark:border-neutral-800">
|
||||
<div class="hextra-filetree hx-mt-6 hx-select-none hx-text-sm hx-text-gray-800 dark:hx-text-gray-300 not-prose">
|
||||
<div class="hx-inline-block hx-rounded-lg hx-border hx-px-4 hx-py-2 dark:hx-border-neutral-800">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{- $name := .Get "name" -}}
|
||||
|
||||
|
||||
<li class="flex list-none">
|
||||
<span class="inline-flex cursor-default items-center py-1">
|
||||
<li class="hx-flex hx-list-none">
|
||||
<span class="hx-inline-flex hx-cursor-default hx-items-center hx-py-1">
|
||||
{{- partial "utils/icon" (dict "name" "document-text" "attributes" "width=1em") -}}
|
||||
<span class="ml-1">{{ $name | markdownify }}</span>
|
||||
<span class="hx-ml-1">{{ $name | markdownify }}</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{{- $name := .Get "name" -}}
|
||||
{{- $state := .Get "state" | default "open" }}
|
||||
|
||||
<li class="group flex list-none flex-col">
|
||||
<button class="hextra-filetree-folder inline-flex cursor-pointer items-center py-1 hover:opacity-60">
|
||||
<span data-state="{{ $state }}" class="data-[state=open]:hidden">
|
||||
<li class="hx-group hx-flex hx-list-none hx-flex-col">
|
||||
<button class="hextra-filetree-folder hx-inline-flex hx-cursor-pointer hx-items-center hx-py-1 hover:hx-opacity-60">
|
||||
<span data-state="{{ $state }}" class="data-[state=open]:hx-hidden">
|
||||
{{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
|
||||
</span>
|
||||
<span data-state="{{ $state }}" class="data-[state=closed]:hidden">
|
||||
<span data-state="{{ $state }}" class="data-[state=closed]:hx-hidden">
|
||||
{{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
|
||||
</span>
|
||||
<span class="ml-1">{{ $name }}</span>
|
||||
<span class="hx-ml-1">{{ $name }}</span>
|
||||
</button>
|
||||
<ul data-state="{{ $state }}" class="pl-5 data-[state=closed]:hidden">
|
||||
<ul data-state="{{ $state }}" class="hx-pl-5 data-[state=closed]:hx-hidden">
|
||||
{{- .Inner -}}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -17,20 +17,20 @@
|
||||
<a
|
||||
{{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
class="{{ $class }} hextra-feature-card not-prose block relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
|
||||
class="{{ $class }} hextra-feature-card not-prose hx-block hx-relative hx-overflow-hidden hx-rounded-3xl hx-border hx-border-gray-200 hover:hx-border-gray-300 dark:hx-border-neutral-800 dark:hover:hx-border-neutral-700 before:hx-pointer-events-none before:hx-absolute before:hx-inset-0 before:hx-bg-glass-gradient"
|
||||
>
|
||||
<div class="relative w-full p-6">
|
||||
<h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">
|
||||
<div class="hx-relative hx-w-full hx-p-6">
|
||||
<h3 class="hx-text-2xl hx-font-medium hx-leading-6 hx-mb-2 hx-flex hx-items-center">
|
||||
{{ with $icon -}}
|
||||
<span class="pr-2">
|
||||
<span class="hx-pr-2">
|
||||
{{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}}
|
||||
</span>
|
||||
{{ end -}}
|
||||
<span>{{ $title }}</span>
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm leading-6">{{ $subtitle | markdownify }}</p>
|
||||
<p class="hx-text-gray-500 dark:hx-text-gray-400 hx-text-sm hx-leading-6">{{ $subtitle | markdownify }}</p>
|
||||
</div>
|
||||
{{- with $image -}}
|
||||
<img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
|
||||
<img src="{{ . }}" class="hx-absolute hx-max-w-none {{ $imageClass }}" alt="{{ $title }}" />
|
||||
{{- end -}}
|
||||
</a>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
|
||||
<div
|
||||
class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full not-prose"
|
||||
class="hx-grid sm:hx-grid-cols-2 lg:hx-grid-cols-3 hx-grid-cols-1 hx-gap-4 hx-w-full not-prose"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner }}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<a
|
||||
{{ if $link }}href="{{ $href }}"{{ end }}
|
||||
class="{{ $class }} not-prose inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
|
||||
class="{{ $class }} not-prose hx-inline-flex hx-items-center hx-rounded-full hx-gap-2 hx-px-3 hx-py-1 hx-text-xs hx-text-gray-600 dark:hx-text-gray-400 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-border-neutral-800 hx-border hover:hx-border-gray-400 dark:hover:hx-text-gray-50 dark:hover:hx-border-gray-600 hx-transition-all hx-ease-in hx-duration-200"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
{{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
|
||||
>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<a
|
||||
href="{{ $href }}"
|
||||
class="not-prose font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
|
||||
class="not-prose hx-font-medium hx-cursor-pointer hx-px-6 hx-py-3 hx-rounded-full hx-text-center hx-text-white hx-inline-block hx-bg-primary-600 hover:hx-bg-primary-700 focus:hx-outline-none focus:hx-ring-4 focus:hx-ring-primary-300 dark:hx-bg-primary-600 dark:hover:hx-bg-primary-700 dark:focus:hx-ring-primary-800 hx-transition-all hx-ease-in hx-duration-200"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
{{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
|
||||
>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
|
||||
<h1
|
||||
class="not-prose text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
|
||||
class="not-prose hx-text-4xl hx-font-bold hx-leading-none hx-tracking-tighter md:hx-text-5xl hx-py-2 hx-bg-clip-text hx-text-transparent hx-bg-gradient-to-r hx-from-gray-900 hx-to-gray-600 dark:hx-from-gray-100 dark:hx-to-gray-400"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner | markdownify }}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
|
||||
<p
|
||||
class="not-prose text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
|
||||
class="not-prose hx-text-xl hx-text-gray-600 dark:hx-text-gray-400 sm:hx-text-xl"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner | markdownify }}
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
|
||||
{{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
|
||||
|
||||
<span class="inline-block align-text-bottom icon">
|
||||
<span class="hx-inline-block hx-align-text-bottom icon">
|
||||
{{- $icon | safeHTML -}}
|
||||
</span>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="steps ml-4 mb-12 border-l border-gray-200 pl-6 dark:border-neutral-800 [counter-reset:step]">
|
||||
<div class="steps hx-ml-4 hx-mb-12 hx-border-l hx-border-gray-200 hx-pl-6 dark:hx-border-neutral-800 [counter-reset:step]">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
|
||||
|
||||
<div
|
||||
class="tabs-panel rounded pt-6 hidden data-[state=selected]:block"
|
||||
class="tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
|
||||
id="tabs-panel-{{ .Ordinal }}"
|
||||
role="tabpanel"
|
||||
{{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<div class="mt-4 flex w-max min-w-full border-b border-gray-200 pb-px dark:border-neutral-800">
|
||||
<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
|
||||
{{- range $i, $item := $items -}}
|
||||
<button
|
||||
class="tabs-toggle data-[state=selected]:border-primary-500 data-[state=selected]:text-primary-600 mr-2 rounded-t p-2 font-medium leading-5 transition-colors -mb-0.5 select-none border-b-2 border-transparent text-gray-600 hover:border-gray-200 hover:text-black dark:text-gray-200 dark:hover:border-neutral-800 dark:hover:text-white"
|
||||
class="tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
|
||||
role="tab"
|
||||
type="button"
|
||||
aria-controls="tabs-panel-{{ $i }}"
|
||||
|
||||
Reference in New Issue
Block a user