Make components RTL compatible

src/components/Logo.astro

@@ -2,6 +2,6 @@
 import { SITE_CONFIG } from '~/utils/config';
 ---
 
-<span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
+<span class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
   🚀 {SITE_CONFIG?.name}
 </span>

src/components/blog/ListItem.astro

@@ -47,7 +47,7 @@ const link = APP_BLOG_CONFIG?.post?.isEnabled ? getPermalink(post.permalink, 'po
       <div class="mb-1">
         <span class="text-sm">
           <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
+          <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
           {
             post.category && (
               <>

src/components/blog/SinglePost.astro

@@ -25,13 +25,13 @@ const Content = post?.Content || null;
       <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
           <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
+          <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
           {
             post.category && (
               <>
                 {' '}
                 ·{' '}
-                <a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
+                <a class="capitalize hover:underline inline-block" href={getPermalink(post.category, 'category')}>
                   {post.category.replaceAll('-', ' ')}
                 </a>
               </>
@@ -86,7 +86,7 @@ const Content = post?.Content || null;
       }
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
-      <PostTags tags={post.tags} class="mr-5" />
+      <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
       <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
     </div>
   </article>

src/components/blog/Tags.astro

@@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
       </>
       <ul class={className}>
         {tags.map((tag) => (
-          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase font-medium">
+          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
             {!APP_BLOG_CONFIG?.tag?.isEnabled ? (
               tag
             ) : (

src/components/blog/ToBlogLink.astro

@@ -1,10 +1,17 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { getBlogPermalink } from '~/utils/permalinks';
+import { I18N_CONFIG } from '~/utils/config';
+
+const { textDirection } = I18N_CONFIG;
 ---
 
 <div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
   <a class="btn btn-ghost px-3 md:px-3" href={getBlogPermalink()}
-    ><Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5" /> Back to Blog</a
+    >
+    {textDirection === "rtl" ?
+      <Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
+    :
+    <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />} Back to Blog</a
   >
 </div>

src/components/common/SocialShare.astro

@@ -12,31 +12,31 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
 
 <div class={className}>
   <span class="align-super font-bold text-gray-400 dark:text-slate-400">Share:</span>
-  <button class="ml-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
+  <button class="ml-2 rtl:ml-0 rtl:mr-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
     ><Icon
       name="ri:twitter-fill"
       class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
     />
   </button>
-  <button class="ml-2" title="Facebook Share" data-aw-social-share="facebook" data-aw-url={url}
+  <button class="ml-2 rtl:ml-0 rtl:mr-2" title="Facebook Share" data-aw-social-share="facebook" data-aw-url={url}
     ><Icon
       name="ri:facebook-box-fill"
       class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
     />
   </button>
-  <button class="ml-2" title="Linkedin Share" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
+  <button class="ml-2 rtl:ml-0 rtl:mr-2" title="Linkedin Share" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
     ><Icon
       name="ri:linkedin-box-fill"
       class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
     />
   </button>
-  <button class="ml-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
+  <button class="ml-2 rtl:ml-0 rtl:mr-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
     ><Icon
       name="ri:whatsapp-fill"
       class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
     />
   </button>
-  <button class="ml-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
+  <button class="ml-2 rtl:ml-0 rtl:mr-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
     ><Icon
       name="ri:mail-fill"
       class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"

src/components/ui/CTA.astro

@@ -23,14 +23,14 @@ const {
       >
         {text}
         {icon && (
-          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:ml-1 rtl:-mr-1.5" />
+          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
         )}
       </a>
     ) : (
       <a class="inline-flex items-center justify-center" href={href}>
         {text}
         {icon && (
-          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:ml-1 rtl:-mr-1.5" />
+          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
         )}
       </a>
     )

src/components/ui/Timeline.astro

@@ -29,7 +29,7 @@ const {
           index = 0
         ) => (
           <div class={twMerge("flex", panelClass, itemClasses?.panel)}>
-            <div class="flex flex-col items-center mr-4">
+            <div class="flex flex-col items-center mr-4 rtl:mr-0 rtl:ml-4">
               <div>
                 <div class="flex items-center justify-center">
                   {(icon || defaultIcon) && (

src/components/widgets/Announcement.astro

@@ -4,14 +4,14 @@
 <div
   class="text-muted text-sm bg-[#dbeafe] dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-400 hidden md:block overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap"
 >
-  <span class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5">NEW</span>
+  <span class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block">NEW</span>
   <a href="https://astro.build/blog/astro-2100/" class="text-muted hover:underline dark:text-slate-400 font-medium"
     >Astro 2.10 is released. »</a
   >
   <a
     target="_blank"
     rel="noopener"
-    class="float-right"
+    class="float-right rtl:float-left"
     title="If you like AstroWind, give us a star."
     href="https://github.com/onwidget/astrowind"
   >

src/components/widgets/CallToAction.astro

@@ -47,7 +47,7 @@ const {
         callToAction.href && (
           <div class="mt-6 max-w-xs mx-auto">
             <a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
-              {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
+              {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />}
               {callToAction.text}
             </a>
           </div>

src/components/widgets/Content.astro

@@ -53,7 +53,7 @@ const {
                       <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
                     </div>
                   </div>
-                  <div class="ml-4">
+                  <div class="ml-4 rtl:ml-0 rtl:mr-4">
                     {title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
                     {description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
                   </div>

src/components/widgets/Footer.astro

@@ -38,7 +38,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
           {
             secondaryLinks.map(({ text, href }) => (
               <a
-                class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
+                class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2 rtl:mr-0 rtl:ml-2"
                 href={href}
                 set:html={text}
               />
@@ -72,7 +72,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
     <div class="md:flex md:items-center md:justify-between py-6 md:py-8">
       {
         socialLinks?.length ? (
-          <ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
+          <ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4">
             {socialLinks.map(({ ariaLabel, href, text, icon }) => (
               <li>
                 <a

src/components/widgets/Header.astro

@@ -125,7 +125,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
     <div
       class:list={[
         { "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" },
-        "hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 bottom-0 p-3 md:p-0",
+        "hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0",
       ]}
     >
       <div class="items-center flex justify-between w-full md:w-auto">
@@ -145,7 +145,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
         </div>
         {
           actions?.length ? (
-            <span class="ml-4 rtl:ml-0 rtl:mr-0">
+            <span class="ml-4 rtl:ml-0 rtl:mr-4">
               {actions.map(({ text, href, class: className }) => (
                 <a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
                   <Fragment set:html={text} />

src/components/widgets/Hero.astro

@@ -38,8 +38,7 @@ const {
                     <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
                       {callToAction?.icon && (
                         <>
-                          <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />
+                          <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
-                          &nbsp;
                         </>
                       )}
                       {callToAction?.text}

src/components/widgets/Hero2.astro

@@ -50,7 +50,7 @@ const {
                     <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
                       {callToAction?.icon && (
                         <>
-                          <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
+                          <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />{' '}
                         </>
                       )}
                       {callToAction?.text}

src/components/widgets/Pricing.astro

@@ -24,13 +24,13 @@ const {
     <div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
       {
         prices &&
-          prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
+          prices.map(({ title, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
             <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
               {price && period && (
                 <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
                   {hasRibbon && ribbonTitle && (
-                    <div class="absolute right-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
+                    <div class="absolute right-[-5px] rtl:right-auto rtl:left-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
-                      <span class="absolute top-[19px] right-[-21px] block w-full rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
+                      <span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
                         {ribbonTitle}
                       </span>
                     </div>

src/components/widgets/Steps.astro

@@ -27,7 +27,7 @@ const {
         title={title}
         subtitle={subtitle}
         tagline={tagline}
-        classes={{ container: "text-left", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
+        classes={{ container: "text-left rtl:text-right", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
       />
       <Timeline items={items} classes={classes?.items as {}} />
     </div>

src/components/widgets/Steps2.astro

@@ -27,14 +27,14 @@ const {
         subtitle={subtitle}
         tagline={tagline}
         classes={{
-          container: 'text-center md:text-left mb-4 md:mb-8',
+          container: 'text-center md:text-left rtl:md:text-right mb-4 md:mb-8',
           title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
           subtitle: 'mb-8 text-xl text-muted dark:text-slate-400',
           // ...((classes?.headline as {}) ?? {}),
         }}
       />
 
-      <div class="w-full text-center md:text-left">
+      <div class="w-full text-center md:text-left rtl:md:text-right">
         {
           typeof callToAction === 'string' ? (
             <Fragment set:html={callToAction} />
@@ -43,7 +43,7 @@ const {
             callToAction.text &&
             callToAction.href && (
               <a class="btn btn-primary mb-12" href={callToAction.href} target="_blank" rel="noopener">
-                {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
+                {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5  rtl:-mr-1.5 rtl:ml-1" />}
                 {callToAction.text}
               </a>
             )
@@ -57,12 +57,12 @@ const {
           items && items.length
             ? items.map(({ title: title2, description, icon }, index) => (
                 <li class="flex md:-mx-4">
-                  <div class="pr-4 sm:pl-4">
+                  <div class="pr-4 sm:pl-4 rtl:pr-0 rtl:pl-4 rtl:sm:pl-0 rtl:sm:pr-4">
                     <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
                       {icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
                     </span>
                   </div>
-                  <div class="pl-4">
+                  <div class="pl-4 rtl:pl-0 rtl:pr-4">
                     <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
                     <p class="text-muted dark:text-gray-400" set:html={description} />
                   </div>

src/components/widgets/Testimonials.astro

@@ -55,7 +55,7 @@ const {
                   </div>
                 )}
 
-                <div class="grow ml-3">
+                <div class="grow ml-3 rtl:ml-0 rtl:mr-3">
                   {name && <p class="text-base font-semibold">{name}</p>}
                   {job && <p class="text-xs text-muted">{job}</p>}
                 </div>

src/navigation.js

@@ -148,7 +148,7 @@ export const footerData = {
     { ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' },
   ],
   footNote: `
-    <span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"></span>
+    <span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 rtl:mr-0 rtl:ml-1.5 float-left rtl:float-right rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"></span>
     Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a> · All rights reserved.
   `,
 };