feat: add RTL language support (#531)

* feat: add RTL language support

- Add `SITE.dir` config option.
- Replace physical Tailwind classes with logical
property classes.

Resolves #439

* docs: add `dir` section in doc

src/components/BackButton.astro

@@ -12,7 +12,7 @@ import { SITE } from "@/config";
         href="/"
         class="focus-outline mt-8 mb-2 flex hover:text-foreground/75"
       >
-        <IconChevronLeft class="inline-block size-6" />
+        <IconChevronLeft class="inline-block size-6 rtl:rotate-180" />
         <span>Go back</span>
       </LinkButton>
     </div>

src/components/BackToTopButton.astro

@@ -6,8 +6,8 @@ import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
 <div
   id="btt-btn-container"
   class:list={[
-    "fixed right-4 bottom-8 z-50",
-    "md:sticky md:right-auto md:float-end md:mr-1",
+    "fixed end-4 bottom-8 z-50",
+    "md:sticky md:end-auto md:float-end md:me-1",
     "translate-y-14 opacity-0 transition duration-500",
   ]}
 >

src/components/Header.astro

@@ -27,7 +27,7 @@ const isActive = (path: string) => {
   <a
     id="skip-to-content"
     href="#main-content"
-    class="absolute -top-full left-16 z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
+    class="absolute start-16 -top-full z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
   >
     Skip to content
   </a>
@@ -47,7 +47,7 @@ const isActive = (path: string) => {
       </a>
       <nav
         id="nav-menu"
-        class="flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
+        class="flex w-full flex-col items-center sm:ms-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
       >
         <button
           id="menu-btn"
@@ -65,7 +65,7 @@ const isActive = (path: string) => {
             "mt-4 grid w-44 grid-cols-2 place-content-center gap-2",
             "[&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium [&>li>a]:hover:text-accent sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
             "hidden",
-            "sm:mt-0 sm:ml-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
+            "sm:mt-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
           ]}
         >
           <li class="col-span-2">

src/components/Pagination.astro

@@ -18,21 +18,21 @@ const { page } = Astro.props;
       <LinkButton
         disabled={!page.url.prev}
         href={page.url.prev as string}
-        class:list={["mr-4 select-none", { "opacity-50": !page.url.prev }]}
+        class:list={["me-4 select-none", { "opacity-50": !page.url.prev }]}
         ariaLabel="Previous"
       >
-        <IconArrowLeft class="inline-block" />
+        <IconArrowLeft class="inline-block rtl:rotate-180" />
         Prev
       </LinkButton>
       {page.currentPage} / {page.lastPage}
       <LinkButton
         disabled={!page.url.next}
         href={page.url.next as string}
-        class:list={["ml-4 select-none", { "opacity-50": !page.url.next }]}
+        class:list={["ms-4 select-none", { "opacity-50": !page.url.next }]}
         ariaLabel="Next"
       >
         Next
-        <IconArrowRight class="inline-block" />
+        <IconArrowRight class="inline-block rtl:rotate-180" />
       </LinkButton>
     </nav>
   )

src/components/Tag.astro

@@ -20,15 +20,15 @@ const { tag, tagName, size = "sm" } = Astro.props;
     href={`/tags/${tag}/`}
     transition:name={tag}
     class:list={[
-      "relative pr-2 text-lg underline decoration-dashed group-hover:-top-0.5 group-hover:text-accent focus-visible:p-1",
+      "relative pe-2 text-lg underline decoration-dashed group-hover:-top-0.5 group-hover:text-accent focus-visible:p-1",
       { "text-sm": size === "sm" },
     ]}
   >
     <IconHash
       class:list={[
         "inline-block opacity-80",
-        { "-mr-3.5 size-4": size === "sm" },
-        { "-mr-5 size-6": size === "lg" },
+        { "-me-3.5 size-4": size === "sm" },
+        { "-me-5 size-6": size === "lg" },
       ]}
     />
     &nbsp;<span>{tagName}</span>