mirror of
https://github.com/imfing/hextra.git
synced 2025-05-13 09:26:40 -04:00
fix: RTL Steps FileTree, feat: Add Persian number for ol label counter and Steps (#314)
* fix: RTL Steps in steps.html file * feat: Add bidirectional support * fix: RTL problem * fix: RTL problem, feat: Add Persian CSS counter * feat: Add Persian for ol counter * fix: styling text * Add ol output example * fix: RTL problem * fix some issue * fix some issue * fix some issue
This commit is contained in:
Goudarz Jafari
GitHub
parent
fba95d5336
commit
22d4737b99
@ -628,9 +628,6 @@ video {
|
||||
.hx-mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.hx-ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.hx-ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@ -950,9 +947,6 @@ video {
|
||||
.hx-border-b-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.hx-border-l {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.hx-border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
@ -1135,12 +1129,6 @@ video {
|
||||
.hx-pb-px {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.hx-pl-5 {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.hx-pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
|
||||
padding-left: max(env(safe-area-inset-left),1.5rem);
|
||||
}
|
||||
@ -1800,6 +1788,9 @@ article details > summary::before {
|
||||
vertical-align: -4px;
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
:lang(fa) ol {
|
||||
list-style-type: persian;
|
||||
}
|
||||
/* Code syntax highlight */
|
||||
/* Light theme for syntax highlight */
|
||||
/* Generated using `hugo gen chromastyles --style=github` */
|
||||
@ -2288,9 +2279,19 @@ article details > summary::before {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity));
|
||||
margin-top: 3px;
|
||||
margin-left: -41px;
|
||||
content: counter(step);
|
||||
}
|
||||
:is([dir="ltr"] .steps h3):before {
|
||||
margin-left: -41px;
|
||||
}
|
||||
:is([dir="rtl"] .steps h3):before {
|
||||
margin-right: -44px;
|
||||
}
|
||||
.steps h3:before {
|
||||
content: counter(step);
|
||||
}
|
||||
:lang(fa) .steps h3:before {
|
||||
content: counter(step, persian);
|
||||
}
|
||||
.search-wrapper li {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
@ -2804,6 +2805,9 @@ body {
|
||||
:is([dir="ltr"] .ltr\:hx--mr-4) {
|
||||
margin-right: -1rem;
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-ml-1) {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-ml-3) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
@ -2817,6 +2821,9 @@ body {
|
||||
--tw-rotate: 180deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-border-l) {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-pl-12) {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
@ -2829,6 +2836,12 @@ body {
|
||||
:is([dir="ltr"] .ltr\:hx-pl-4) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-pl-5) {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-pl-6) {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
:is([dir="ltr"] .ltr\:hx-pl-8) {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
@ -2866,6 +2879,9 @@ body {
|
||||
:is([dir="rtl"] .rtl\:hx-ml-auto) {
|
||||
margin-left: auto;
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-mr-1) {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-mr-3) {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
@ -2876,6 +2892,9 @@ body {
|
||||
--tw-rotate: -180deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-border-r) {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-pl-2) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
@ -2897,6 +2916,12 @@ body {
|
||||
:is([dir="rtl"] .rtl\:hx-pr-4) {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-pr-5) {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-pr-6) {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
:is([dir="rtl"] .rtl\:hx-pr-8) {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
@ -5,7 +5,13 @@
|
||||
@apply hx-absolute hx-w-[33px] hx-h-[33px];
|
||||
@apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
|
||||
@apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
|
||||
@apply hx-mt-[3px] hx-ml-[-41px];
|
||||
@apply hx-mt-[3px] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px];
|
||||
content: counter(step);
|
||||
}
|
||||
}
|
||||
|
||||
:lang(fa) .steps h3 {
|
||||
&:before {
|
||||
content: counter(step, persian);
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,3 +118,7 @@ article details > summary {
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
:lang(fa) ol {
|
||||
list-style-type: persian;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: راهنمای استفاده سینتکس مارکداون
|
||||
date: 2020-01-01
|
||||
date: 2024-03-03
|
||||
authors:
|
||||
- name: imfing
|
||||
link: https://github.com/imfing
|
||||
@ -8,6 +8,9 @@ authors:
|
||||
- name: Octocat
|
||||
link: https://github.com/octocat
|
||||
image: https://github.com/octocat.png
|
||||
- name: Goudarz Jafari
|
||||
link: https://github.com/Goudarz
|
||||
image: https://github.com/Goudarz.png
|
||||
tags:
|
||||
- Markdown
|
||||
- مثال
|
||||
@ -78,13 +81,19 @@ _شما **میتوانید** آنها را ترکیب کنید_
|
||||
#### مرتب شده
|
||||
|
||||
```
|
||||
۱. مورد ۱
|
||||
۲. مورد ۲
|
||||
۳. مورد ۳
|
||||
۱. مورد ۳الف
|
||||
۲. مورد ۳ب
|
||||
1. مورد ۱
|
||||
2. مورد ۲
|
||||
3. مورد ۳
|
||||
1. مورد ۳الف
|
||||
2. مورد ۳ب
|
||||
```
|
||||
|
||||
1. مورد ۱
|
||||
2. مورد ۲
|
||||
3. مورد ۳
|
||||
1. مورد ۳الف
|
||||
2. مورد ۳ب
|
||||
|
||||
### عکسها
|
||||
|
||||
```markdown
|
||||
|
||||
@ -17,7 +17,7 @@ Hugo از سینتکس [مارکداون](https://en.wikipedia.org/wiki/Markd
|
||||
| کج | `*متن کج*` | `*متن کج*` | *متن کج* |
|
||||
| خط خورده | `~~متن خط خورده~~` | `~~متن خط خورده~~` | ~~متن خط خورده~~ |
|
||||
| پاییننویس | `<sub></sub>` | `این یک متن <sub>پاییننویس</sub> است` | این یک متن <sub>پاییننویس</sub> است |
|
||||
| بالانویس | `<sup></sup>` | `این یک متن <sub>بالانویس</sub> است` | این یک متن <sub>بالانویس</sub> است |
|
||||
| بالانویس | `<sup></sup>` | `این یک متن <sup>بالانویس</sup> است` | این یک متن <sup>بالانویس</sup> است |
|
||||
|
||||
### بلوک نقلقول
|
||||
|
||||
|
||||
@ -10,11 +10,11 @@ next: /docs/guide/deploy-site
|
||||
{{% steps %}}
|
||||
|
||||
### مرحله ۱
|
||||
. این اولین مرحله است
|
||||
این اولین مرحله است.
|
||||
|
||||
### مرحله ۲
|
||||
|
||||
این دمین مرحله است.
|
||||
این دومین مرحله است.
|
||||
|
||||
### مرحله ۳
|
||||
|
||||
@ -32,11 +32,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
### مرحله ۱
|
||||
|
||||
. این اولین مرحله است
|
||||
این اولین مرحله است.
|
||||
|
||||
### مرحله ۲
|
||||
|
||||
این دمین مرحله است.
|
||||
این دومین مرحله است.
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
|
||||
@ -270,7 +270,6 @@
|
||||
"hx-border-blue-200",
|
||||
"hx-border-gray-200",
|
||||
"hx-border-gray-500",
|
||||
"hx-border-l",
|
||||
"hx-border-orange-100",
|
||||
"hx-border-red-200",
|
||||
"hx-border-t",
|
||||
@ -360,7 +359,6 @@
|
||||
"hx-min-w-[18px]",
|
||||
"hx-min-w-[24px]",
|
||||
"hx-min-w-full",
|
||||
"hx-ml-1",
|
||||
"hx-ml-4",
|
||||
"hx-mr-1",
|
||||
"hx-mr-2",
|
||||
@ -400,8 +398,6 @@
|
||||
"hx-pb-8",
|
||||
"hx-pb-[env(safe-area-inset-bottom)]",
|
||||
"hx-pb-px",
|
||||
"hx-pl-5",
|
||||
"hx-pl-6",
|
||||
"hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
|
||||
"hx-pointer-events-none",
|
||||
"hx-pr-2",
|
||||
@ -514,6 +510,8 @@
|
||||
"lntd",
|
||||
"ltr:before:hx-left-0",
|
||||
"ltr:hx--mr-4",
|
||||
"ltr:hx-border-l",
|
||||
"ltr:hx-ml-1",
|
||||
"ltr:hx-ml-3",
|
||||
"ltr:hx-ml-auto",
|
||||
"ltr:hx-mr-auto",
|
||||
@ -521,6 +519,8 @@
|
||||
"ltr:hx-pl-16",
|
||||
"ltr:hx-pl-3",
|
||||
"ltr:hx-pl-4",
|
||||
"ltr:hx-pl-5",
|
||||
"ltr:hx-pl-6",
|
||||
"ltr:hx-pl-8",
|
||||
"ltr:hx-pr-0",
|
||||
"ltr:hx-pr-2",
|
||||
@ -566,9 +566,11 @@
|
||||
"rtl:before:hx-right-0",
|
||||
"rtl:before:hx-rotate-180",
|
||||
"rtl:hx--ml-4",
|
||||
"rtl:hx-border-r",
|
||||
"rtl:hx-left-1.5",
|
||||
"rtl:hx-left-3",
|
||||
"rtl:hx-ml-auto",
|
||||
"rtl:hx-mr-1",
|
||||
"rtl:hx-mr-3",
|
||||
"rtl:hx-mr-auto",
|
||||
"rtl:hx-pl-2",
|
||||
@ -578,6 +580,8 @@
|
||||
"rtl:hx-pr-16",
|
||||
"rtl:hx-pr-3",
|
||||
"rtl:hx-pr-4",
|
||||
"rtl:hx-pr-5",
|
||||
"rtl:hx-pr-6",
|
||||
"rtl:hx-pr-8",
|
||||
"rtl:hx-text-left",
|
||||
"rtl:md:hx-right-auto",
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<div class="code-block hx-relative hx-mt-6 first:hx-mt-0 group/code">
|
||||
{{- if $filename -}}
|
||||
<div class="filename">{{ $filename }}</div>
|
||||
<div class="filename" dir="auto">{{ $filename }}</div>
|
||||
{{- end -}}
|
||||
{{- if transform.CanHighlight $lang -}}
|
||||
<div>{{- highlight .Inner $lang .Options -}}</div>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<span>
|
||||
{{- . | markdownify -}}
|
||||
{{- if strings.Contains . "Hextra" -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx-inline-block hx-ml-1 hx-align-[-2.5px]"`) -}}
|
||||
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx-inline-block ltr:hx-ml-1 rtl:hx-mr-1 hx-align-[-2.5px]"`) -}}
|
||||
{{- end -}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
<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="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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx-inline ltr:hx-ml-1 rtl:hx-mr-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>
|
||||
|
||||
@ -4,6 +4,6 @@
|
||||
<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="hx-ml-1">{{ $name | markdownify }}</span>
|
||||
<span class="ltr:hx-ml-1 rtl:hx-mr-1">{{ $name | markdownify }}</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
<span data-state="{{ $state }}" class="data-[state=closed]:hx-hidden">
|
||||
{{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
|
||||
</span>
|
||||
<span class="hx-ml-1">{{ $name }}</span>
|
||||
<span class="ltr:hx-ml-1 rtl:hx-mr-1">{{ $name }}</span>
|
||||
</button>
|
||||
<ul data-state="{{ $state }}" class="hx-pl-5 data-[state=closed]:hx-hidden">
|
||||
<ul data-state="{{ $state }}" class="ltr:hx-pl-5 rtl:hx-pr-5 data-[state=closed]:hx-hidden">
|
||||
{{- .Inner -}}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<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]">
|
||||
<div class="steps hx-ml-4 hx-mb-12 ltr:hx-border-l rtl:hx-border-r hx-border-gray-200 ltr:hx-pl-6 rtl:hx-pr-6 dark:hx-border-neutral-800 [counter-reset:step]">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user