🌐 Add RTL language support

layouts/_default/baseof.html

@@ -3,6 +3,11 @@
   lang="{{ with .Site.Language.Params.htmlCode | default (.Site.LanguageCode | default "en") }}
     {{- . -}}
   {{ end }}"
+  dir="{{ if .Site.Language.Params.rtl | default false -}}
+    rtl
+  {{- else -}}
+    ltr
+  {{- end }}"
   {{ if .Site.Params.darkMode | default false }}class="dark"{{ end }}
 >
   {{- partial "head.html" . -}}

layouts/_default/taxonomy.html

@@ -3,15 +3,15 @@
   <section class="flex flex-wrap -mx-2 overflow-hidden">
     {{ range .Data.Terms }}
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
-        <h2>
+        <h2 class="flex items-center">
           <a
             class="text-xl font-medium hover:underline hover:decoration-primary-500 hover:underline-offset-2"
             href="{{ .Page.RelPermalink }}"
             >{{ .Page.Title }}</a
           >
           {{ if $.Site.Params.taxonomy.showTermCount | default true }}
+            <span class="px-2 text-base text-primary-500">&middot;</span>
             <span class="text-base text-neutral-400">
-              <span class="px-1 text-primary-500">&middot;</span>
               {{ .Count }}
             </span>
           {{ end }}

layouts/partials/article-link.html

@@ -22,7 +22,7 @@
       >
     {{ end }}
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
-      <div class="ml-2">
+      <div class="ltr:ml-2 rtl:mr-2">
         {{ partial "badge.html" (i18n "article.draft" | emojify) }}
       </div>
     {{ end }}

layouts/partials/article-pagination.html

@@ -6,7 +6,8 @@
         <span>
           {{ if .NextInSection }}
             <a class="flex" href="{{ .NextInSection.RelPermalink }}">
-              <span class="mr-3 article-pagination-direction">&larr;</span>
+              <span class="mr-3 ltr:inline rtl:hidden article-pagination-direction">&larr;</span>
+              <span class="ml-3 ltr:hidden rtl:inline article-pagination-direction">&rarr;</span>
               <span class="flex flex-col">
                 <span class="article-pagination-title mt-[0.1rem] leading-6"
                   >{{ .NextInSection.Title | emojify }}</span
@@ -33,7 +34,8 @@
                   {{ end }}
                 </span>
               </span>
-              <span class="ml-3 article-pagination-direction">&rarr;</span>
+              <span class="ml-3 ltr:inline rtl:hidden article-pagination-direction">&rarr;</span>
+              <span class="mr-3 ltr:hidden rtl:inline article-pagination-direction">&larr;</span>
             </a>
           {{ end }}
         </span>

layouts/partials/author.html

@@ -5,7 +5,7 @@
       {{ if $authorImage }}
         {{ $authorImage := $authorImage.Fill "192x192" }}
         <img
-          class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full"
+          class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full"
           width="96"
           height="96"
           alt="Author"

layouts/partials/badge.html

@@ -1,6 +1,6 @@
 <span class="flex">
   <span
-    class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600"
+    class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600"
   >
     {{ . }}
   </span>

layouts/partials/header.html

@@ -31,7 +31,9 @@
     <nav>
       <ul class="flex flex-col list-none sm:flex-row">
         {{ range .Site.Menus.main }}
-          <li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
+          <li
+            class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+          >
             <a
               class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"

layouts/shortcodes/alert.html

@@ -1,5 +1,5 @@
 <div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="pr-3 text-primary-400">
+  <span class="ltr:pr-3 rtl:pl-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
   <span class="not-prose dark:text-neutral-300">