forked from drowl87/hextra_mirror
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
@ -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