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

assets/css/compiled/main.css

@@ -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;
 }

assets/css/components/steps.css

@@ -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);
+  }
+}

assets/css/typography.css

@@ -118,3 +118,7 @@ article details > summary {
     padding: 0 0.6em;
   }
 }
+
+:lang(fa) ol {
+  list-style-type: persian;
+}

exampleSite/content/blog/markdown.fa.md

@@ -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

exampleSite/content/docs/guide/markdown.fa.md

@@ -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> است |
 
 ### بلوک نقل‌قول
 

exampleSite/content/docs/guide/shortcodes/steps.fa.md

@@ -10,11 +10,11 @@ next: /docs/guide/deploy-site
 {{% steps %}}
 
 ### مرحله ۱
-. این اولین مرحله است
+این اولین مرحله است.
 
 ### مرحله ۲
 
-این دمین مرحله است.
+این دومین مرحله است.
 
 ### مرحله ۳
 
@@ -32,11 +32,11 @@ next: /docs/guide/deploy-site
 
 ### مرحله ۱
 
-. این اولین مرحله است
+این اولین مرحله است.
 
 ### مرحله ۲
 
-این دمین مرحله است.
+این دومین مرحله است.
 
 {{%/* /steps */%}}
 ```

exampleSite/hugo_stats.json

@@ -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",

layouts/_default/_markup/render-codeblock.html

@@ -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>

layouts/partials/footer.html

@@ -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>

layouts/partials/toc.html

@@ -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>

layouts/shortcodes/filetree/file.html

@@ -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>

layouts/shortcodes/filetree/folder.html

@@ -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>

layouts/shortcodes/steps.html

@@ -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>