docs(ar): changing layout from ltr to rtl

RlxChap2 · RlxChap2 · commit 2b1905a9e880 · 2026-05-21T17:58:03.000+03:00
diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
@@ -67,7 +67,8 @@
     }
 
     a[aria-hidden="true"] {
-      @apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;
+      @apply text-[0.8em] h-[1em] opacity-0 invisible;
+      margin-inline-start: 0.5rem;
       transition: all 250ms;
     }
 
@@ -105,7 +106,7 @@
 
   ul,
   ol {
-    @apply pl-[30px];
+    padding-inline-start: 30px;
     list-style: revert;
 
     &:first-child {
@@ -141,7 +142,8 @@
   }
 
   aside {
-    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;
+    @apply border-solid py-[0.75em] px-[1em] text-gray-500;
+    border-inline-start: 4px solid var(--color-aside-border);
     > :first-child {
       margin-top: 0;
     }
@@ -152,7 +154,7 @@
     &.warning,
     &.preview,
     &.todo {
-      @apply border-l-[3px];
+      border-inline-start-width: 3px;
 
       .tip-content {
         @apply italic;
@@ -171,19 +173,23 @@
     }
 
     &.tip {
-      @apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;
+      @apply bg-aside-tip-bg text-aside-tip-text;
+      border-inline-start-color: var(--color-aside-tip-border);
     }
 
     &.warning {
-      @apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;
+      @apply bg-aside-warning-bg text-aside-warning-text;
+      border-inline-start-color: var(--color-aside-warning-border);
     }
 
     &.preview {
-      @apply bg-gray-100 text-aside-warning-text border-l-brand-blue;
+      @apply bg-gray-100 text-aside-warning-text;
+      border-inline-start-color: var(--color-brand-blue);
     }
 
     &.todo {
-      @apply bg-aside-todo-bg text-aside-todo-text border-l-aside-todo-border;
+      @apply bg-aside-todo-bg text-aside-todo-text;
+      border-inline-start-color: var(--color-aside-todo-border);
 
       .tip-content::before {
         content: "[TODO]: ";
@@ -193,7 +199,8 @@
   }
 
   blockquote {
-    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500 italic;
+    @apply border-solid py-[0.75em] px-[1em] text-gray-500 italic;
+    border-inline-start: 4px solid var(--color-aside-border);
 
     > :first-child {
       margin-top: 0;
@@ -227,10 +234,12 @@
   }
 
   th {
-    @apply font-bold text-left py-1.5 px-3 bg-table-header-bg border-r border-solid border-r-table-border;
+    @apply font-bold py-1.5 px-3 bg-table-header-bg border-solid;
+    border-inline-end: 1px solid var(--color-table-border);
+    text-align: start;
 
     &:last-child {
-      @apply border-r-0;
+      border-inline-end: 0;
     }
   }
 
@@ -252,7 +261,9 @@
   }
 
   td {
-    @apply py-1 px-3 border-r-0 grid grid-cols-2 text-left border-b border-solid border-b-gray-100;
+    @apply py-1 px-3 grid grid-cols-2 border-b border-solid border-b-gray-100;
+    border-inline-end: 0;
+    text-align: start;
     &::before {
       content: attr(data-th);
       @apply font-bold;
@@ -267,9 +278,10 @@
       &::before {
         content: none;
       }
-      @apply border-r border-r-table-border border-b-0;
+      @apply border-b-0;
+      border-inline-end: 1px solid var(--color-table-border);
       &:last-child {
-        @apply border-r-0;
+        border-inline-end: 0;
       }
     }
   }
@@ -391,7 +403,8 @@
 }
 
 .dark .markdown blockquote {
-  @apply border-l-dark-section-border text-dark-muted;
+  @apply text-dark-muted;
+  border-inline-start-color: var(--color-dark-section-border);
 }
 
 .dark .markdown blockquote.tip {
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
@@ -141,7 +141,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
               className="fill-current text-white"
             />
           </button>
-          <Link to="/" className="md:mr-auto">
+          <Link to="/" className="navigation__brand md:mr-auto">
             <Logo />
           </Link>
           <nav
@@ -205,7 +205,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
               ]}
             />
           </nav>
-          <div className="inline-flex items-center gap-x-[18px] ml-[18px]">
+          <div className="navigation__controls inline-flex items-center gap-x-[18px] ml-[18px]">
             <HelloDarkness />
             {mounted && (
               <DocSearch
diff --git a/src/components/SidebarMobile/SidebarMobile.jsx b/src/components/SidebarMobile/SidebarMobile.jsx
@@ -5,6 +5,10 @@ import CloseIcon from "../../styles/icons/cross.svg";
 import Link from "../Link/Link.jsx";
 
 // TODO: Check to make sure all pages are shown and properly sorted
+function isRTL() {
+  return document.documentElement.dir === "rtl";
+}
+
 export default function SidebarMobile({ isOpen, toggle, sections }) {
   const containerRef = useRef(null);
   const openerRef = useRef(null);
@@ -52,22 +56,19 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
 
   const handleTouchEnd = useCallback((event) => {
     const threshold = 20;
+    const deltaX = lastTouchPosition.current.x - initialTouchPosition.current.x;
+    const shouldClose = isRTL() ? deltaX > threshold : deltaX < -threshold;
+    const shouldOpen = isRTL() ? deltaX < -threshold : deltaX > threshold;
 
     // Free up all the inline styling
     containerRef.current.classList.remove("!duration-0");
     containerRef.current.style.transform = "";
 
     // are we open?
-    if (
-      isOpenRef.current &&
-      initialTouchPosition.current.x - lastTouchPosition.current.x > threshold
-    ) {
+    if (isOpenRef.current && shouldClose) {
       // this is in top level nav callback
       toggleRef.current(false);
-    } else if (
-      !isOpenRef.current &&
-      lastTouchPosition.current.x - initialTouchPosition.current.x > threshold
-    ) {
+    } else if (!isOpenRef.current && shouldOpen) {
       toggleRef.current(true);
       event.preventDefault();
       event.stopPropagation();
@@ -80,28 +81,34 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
     const opener = openerRef.current;
 
     const handleTouchMove = (event) => {
-      const xDiff = initialTouchPosition.current.x - event.touches[0].pageX;
+      const deltaX = event.touches[0].pageX - initialTouchPosition.current.x;
       const yDiff = initialTouchPosition.current.y - event.touches[0].pageY;
-      const factor = Math.abs(yDiff / xDiff);
+      const xDistance = Math.abs(deltaX);
+      const closeDistance = isRTL() ? deltaX : -deltaX;
+      const factor = xDistance === 0 ? Infinity : Math.abs(yDiff / xDistance);
 
       // Factor makes sure horizontal and vertical scroll dont take place together
-      if (xDiff > 0 && factor < 0.8) {
+      if (closeDistance > 0 && factor < 0.8) {
         event.preventDefault();
-        container.style.transform = `translateX(-${xDiff}px)`;
+        container.style.transform = `translateX(${isRTL() ? closeDistance : -closeDistance}px)`;
         lastTouchPosition.current.x = event.touches[0].pageX;
         lastTouchPosition.current.y = event.touches[0].pageY;
       }
     };
 
     const handleOpenerTouchMove = (event) => {
-      const xDiff = event.touches[0].pageX - initialTouchPosition.current.x;
+      const deltaX = event.touches[0].pageX - initialTouchPosition.current.x;
       const yDiff = initialTouchPosition.current.y - event.touches[0].pageY;
-      const factor = Math.abs(yDiff / xDiff);
+      const xDistance = Math.abs(deltaX);
+      const openDistance = isRTL() ? -deltaX : deltaX;
+      const factor = xDistance === 0 ? Infinity : Math.abs(yDiff / xDistance);
 
       // Factor makes sure horizontal and vertical scroll dont take place together
-      if (xDiff > 0 && xDiff < 295 && factor < 0.8) {
+      if (openDistance > 0 && openDistance < 295 && factor < 0.8) {
         event.preventDefault();
-        container.style.transform = `translateX(calc(-100% + ${xDiff}px))`;
+        container.style.transform = isRTL()
+          ? `translateX(calc(100% - ${openDistance}px))`
+          : `translateX(calc(-100% + ${openDistance}px))`;
         lastTouchPosition.current.x = event.touches[0].pageX;
         lastTouchPosition.current.y = event.touches[0].pageY;
       }
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
@@ -15,6 +15,7 @@ import {
 import Content from "../../_content.json";
 import OgImage from "../../assets/icon-pwa-512x512.png";
 import Logo from "../../assets/logo-on-white-bg.svg";
+import { SITE_DIRECTION, SITE_LANGUAGE } from "../../config/site.js";
 import Favicon from "../../favicon.ico";
 import {
   extractPages,
@@ -216,9 +217,12 @@ function Site(props) {
   }, [location, navigate]);
 
   return (
-    <div className="flex flex-col min-h-screen bg-white dark:bg-gray-900">
+    <div
+      dir={SITE_DIRECTION}
+      className="flex flex-col min-h-screen bg-white dark:bg-gray-900"
+    >
       <Helmet>
-        <html lang="en" />
+        <html lang={SITE_LANGUAGE} dir={SITE_DIRECTION} />
         <meta charset="utf-8" />
         <meta name="theme-color" content="#2B3A42" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
@@ -5,7 +5,10 @@ import HomeSVG from "./SplashVizSVG.mjs";
 
 export default function SplashViz() {
   return (
-    <section className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!">
+    <section
+      dir="ltr"
+      className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!"
+    >
       <h1 className="flex flex-wrap items-center justify-center text-white text-[33.178px] md:text-[39.813px] text-center font-[200] mt-[80px] md:mt-[90px] row-start-1 row-end-2">
         <span> bundle your</span>
         <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
@@ -16,7 +19,7 @@ export default function SplashViz() {
         </TextRotator>
       </h1>
       <div
-        className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] mx-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3 [&_img]:pt-4 [&_img]:w-full [&_img]:h-full"
+        className="splash-viz__art absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] mx-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3 [&_img]:pt-4 [&_img]:w-full [&_img]:h-full"
         dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
       />
       <Cube
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
@@ -8,7 +8,7 @@ import Link from "../Link/Link.jsx";
 // Tailwind CSS is used for styling
 
 const Sponsors = () => (
-  <div className="absolute h-full w-[250px] ml-[-250px] mr-2.5">
+  <div className="sponsors-panel absolute h-full w-[250px] ml-[-250px] mr-2.5">
     <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 my-6 px-6 pb-12 overflow-hidden bg-transparent transition-colors duration-200 top-24">
       {/* AG Grid */}
       <div className="bg-white dark:bg-black shadow-lg rounded-lg m-2 transition-transform duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-105 dark:shadow-[0_0_40px_rgba(255,255,255,0.18)]">
diff --git a/src/config/site.js b/src/config/site.js
@@ -0,0 +1,2 @@
+export const SITE_LANGUAGE = "ar";
+export const SITE_DIRECTION = "rtl";
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ar" dir="rtl">
   <head> </head>
   <body>
     <div id="root"></div>
diff --git a/src/server.jsx b/src/server.jsx
@@ -7,6 +7,7 @@ import { StaticRouter } from "react-router";
 import assets from "../dist/prod-assets-manifest.json";
 import PrintScript from "./components/Print/PrintScript.jsx";
 import Site from "./components/Site/Site.jsx";
+import { SITE_DIRECTION, SITE_LANGUAGE } from "./config/site.js";
 
 function isPrintPage(url) {
   return url.includes("/printable");
@@ -42,5 +43,5 @@ export default (locals) => {
   const hoistedTags = headTagsMatch ? headTagsMatch[1] : "";
   const bodyHtml = renderedHtml.slice(hoistedTags.length);
 
-  return `<!DOCTYPE html><html><head>${css}${hoistedTags}</head><body><div id="root">${bodyHtml}</div>${scripts}</body></html>`;
+  return `<!DOCTYPE html><html lang="${SITE_LANGUAGE}" dir="${SITE_DIRECTION}"><head>${css}${hoistedTags}</head><body><div id="root">${bodyHtml}</div>${scripts}</body></html>`;
 };
diff --git a/src/styles/index.css b/src/styles/index.css
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,8 @@`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`a[aria-hidden="true"] {`
`70`		`- @apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;`
	`70`	`+ @apply text-[0.8em] h-[1em] opacity-0 invisible;`
	`71`	`+ margin-inline-start: 0.5rem;`
`71`	`72`	`transition: all 250ms;`
`72`	`73`	`}`
`73`	`74`
`@@ -105,7 +106,7 @@`
`105`	`106`
`106`	`107`	`ul,`
`107`	`108`	`ol {`
`108`		`- @apply pl-[30px];`
	`109`	`+ padding-inline-start: 30px;`
`109`	`110`	`list-style: revert;`
`110`	`111`
`111`	`112`	`&:first-child {`
`@@ -141,7 +142,8 @@`
`141`	`142`	`}`
`142`	`143`
`143`	`144`	`aside {`
`144`		`- @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;`
	`145`	`+ @apply border-solid py-[0.75em] px-[1em] text-gray-500;`
	`146`	`+ border-inline-start: 4px solid var(--color-aside-border);`
`145`	`147`	`> :first-child {`
`146`	`148`	`margin-top: 0;`
`147`	`149`	`}`
`@@ -152,7 +154,7 @@`
`152`	`154`	`&.warning,`
`153`	`155`	`&.preview,`
`154`	`156`	`&.todo {`
`155`		`- @apply border-l-[3px];`
	`157`	`+ border-inline-start-width: 3px;`
`156`	`158`
`157`	`159`	`.tip-content {`
`158`	`160`	`@apply italic;`
`@@ -171,19 +173,23 @@`
`171`	`173`	`}`
`172`	`174`
`173`	`175`	`&.tip {`
`174`		`- @apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;`
	`176`	`+ @apply bg-aside-tip-bg text-aside-tip-text;`
	`177`	`+ border-inline-start-color: var(--color-aside-tip-border);`
`175`	`178`	`}`
`176`	`179`
`177`	`180`	`&.warning {`
`178`		`- @apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;`
	`181`	`+ @apply bg-aside-warning-bg text-aside-warning-text;`
	`182`	`+ border-inline-start-color: var(--color-aside-warning-border);`
`179`	`183`	`}`
`180`	`184`
`181`	`185`	`&.preview {`
`182`		`- @apply bg-gray-100 text-aside-warning-text border-l-brand-blue;`
	`186`	`+ @apply bg-gray-100 text-aside-warning-text;`
	`187`	`+ border-inline-start-color: var(--color-brand-blue);`
`183`	`188`	`}`
`184`	`189`
`185`	`190`	`&.todo {`
`186`		`- @apply bg-aside-todo-bg text-aside-todo-text border-l-aside-todo-border;`
	`191`	`+ @apply bg-aside-todo-bg text-aside-todo-text;`
	`192`	`+ border-inline-start-color: var(--color-aside-todo-border);`
`187`	`193`
`188`	`194`	`.tip-content::before {`
`189`	`195`	`content: "[TODO]: ";`
`@@ -193,7 +199,8 @@`
`193`	`199`	`}`
`194`	`200`
`195`	`201`	`blockquote {`
`196`		`- @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500 italic;`
	`202`	`+ @apply border-solid py-[0.75em] px-[1em] text-gray-500 italic;`
	`203`	`+ border-inline-start: 4px solid var(--color-aside-border);`
`197`	`204`
`198`	`205`	`> :first-child {`
`199`	`206`	`margin-top: 0;`
`@@ -227,10 +234,12 @@`
`227`	`234`	`}`
`228`	`235`
`229`	`236`	`th {`
`230`		`- @apply font-bold text-left py-1.5 px-3 bg-table-header-bg border-r border-solid border-r-table-border;`
	`237`	`+ @apply font-bold py-1.5 px-3 bg-table-header-bg border-solid;`
	`238`	`+ border-inline-end: 1px solid var(--color-table-border);`
	`239`	`+ text-align: start;`
`231`	`240`
`232`	`241`	`&:last-child {`
`233`		`- @apply border-r-0;`
	`242`	`+ border-inline-end: 0;`
`234`	`243`	`}`
`235`	`244`	`}`
`236`	`245`
`@@ -252,7 +261,9 @@`
`252`	`261`	`}`
`253`	`262`
`254`	`263`	`td {`
`255`		`- @apply py-1 px-3 border-r-0 grid grid-cols-2 text-left border-b border-solid border-b-gray-100;`
	`264`	`+ @apply py-1 px-3 grid grid-cols-2 border-b border-solid border-b-gray-100;`
	`265`	`+ border-inline-end: 0;`
	`266`	`+ text-align: start;`
`256`	`267`	`&::before {`
`257`	`268`	`content: attr(data-th);`
`258`	`269`	`@apply font-bold;`
`@@ -267,9 +278,10 @@`
`267`	`278`	`&::before {`
`268`	`279`	`content: none;`
`269`	`280`	`}`
`270`		`- @apply border-r border-r-table-border border-b-0;`
	`281`	`+ @apply border-b-0;`
	`282`	`+ border-inline-end: 1px solid var(--color-table-border);`
`271`	`283`	`&:last-child {`
`272`		`- @apply border-r-0;`
	`284`	`+ border-inline-end: 0;`
`273`	`285`	`}`
`274`	`286`	`}`
`275`	`287`	`}`
`@@ -391,7 +403,8 @@`
`391`	`403`	`}`
`392`	`404`
`393`	`405`	`.dark .markdown blockquote {`
`394`		`- @apply border-l-dark-section-border text-dark-muted;`
	`406`	`+ @apply text-dark-muted;`
	`407`	`+ border-inline-start-color: var(--color-dark-section-border);`
`395`	`408`	`}`
`396`	`409`
`397`	`410`	`.dark .markdown blockquote.tip {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const SITE_LANGUAGE = "ar";`
	`2`	`+export const SITE_DIRECTION = "rtl";`