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
This commit is contained in:
Sat Naing
2025-06-14 00:07:27 +07:00
committed by GitHub
parent 76e15b55e3
commit 38ebf6e1b6
10 changed files with 29 additions and 22 deletions
+5 -1
View File
@@ -48,7 +48,11 @@ const structuredData = {
---
<!doctype html>
<html lang=`${SITE.lang ?? "en"}` class={`${scrollSmooth && "scroll-smooth"}`}>
<html
dir={SITE.dir}
lang=`${SITE.lang ?? "en"}`
class={`${scrollSmooth && "scroll-smooth"}`}
>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
+5 -5
View File
@@ -132,7 +132,7 @@ const nextPost =
href={getPath(prevPost.id, prevPost.filePath)}
class="flex w-full gap-1 hover:opacity-75"
>
<IconChevronLeft class="inline-block flex-none" />
<IconChevronLeft class="inline-block flex-none rtl:rotate-180" />
<div>
<span>Previous Post</span>
<div class="text-sm text-accent/85">{prevPost.title}</div>
@@ -144,13 +144,13 @@ const nextPost =
nextPost && (
<a
href={getPath(nextPost.id, nextPost.filePath)}
class="flex w-full justify-end gap-1 text-right hover:opacity-75 sm:col-start-2"
class="flex w-full justify-end gap-1 text-end hover:opacity-75 sm:col-start-2"
>
<div>
<span>Next Post</span>
<div class="text-sm text-accent/85">{nextPost.title}</div>
</div>
<IconChevronRight class="inline-block flex-none" />
<IconChevronRight class="inline-block flex-none rtl:rotate-180" />
</a>
)
}
@@ -211,7 +211,7 @@ const nextPost =
heading.classList.add("group");
const link = document.createElement("a");
link.className =
"heading-link ml-2 opacity-0 group-hover:opacity-100 focus:opacity-100";
"heading-link ms-2 opacity-0 group-hover:opacity-100 focus:opacity-100";
link.href = "#" + heading.id;
const span = document.createElement("span");
@@ -235,7 +235,7 @@ const nextPost =
const copyButton = document.createElement("button");
copyButton.className =
"copy-code absolute right-3 -top-3 rounded bg-muted px-2 py-1 text-xs leading-4 text-foreground font-medium";
"copy-code absolute end-3 -top-3 rounded bg-muted px-2 py-1 text-xs leading-4 text-foreground font-medium";
copyButton.innerHTML = copyButtonLabel;
codeBlock.setAttribute("tabindex", "0");
codeBlock.appendChild(copyButton);