Update main

README.md

@@ -38,10 +38,18 @@ the way:
 - 🇫🇷 French
 - 🇵🇱 Polish
 - 🇰🇷 Korean
-- 🇦🇪 Arabic [(Requested)](https://github.com/aykutkardas/regexlearn.com/issues/163)
 - 🇧🇷 Brazilian Portuguese
-- 🇬🇪 Georgian [(Requested)](https://github.com/aykutkardas/regexlearn.com/issues/274)
 - 🇨🇿 Czech
+- 🇬🇪 Georgian
+
+### Requested Translations
+
+- 🇦🇪 Arabic [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/163)
+- 🇧🇩 Bengali [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/304)
+- 🇮🇹 Italian [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/323)
+- 🇮🇷 Persian [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/325)
+- 🇻🇳 Vietnamese [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/329)
+- 🇮🇩 Indonesian [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/335)
 
 Interested in adding your language? Please
 **[create an issue](https://github.com/aykutkardas/regexlearn.com/issues/new)** and let us know!

scripts/html-lang-fixer.js

@@ -15,7 +15,7 @@ function htmlLangFixer(path) {
     const stats = fs.lstatSync(currentPath);
 
     if (stats.isFile() && el.endsWith('.html')) {
-      const result = currentPath.match(/^\.\/out\/(en|es|de|tr|uk|fr|ru|pl|ko|zh-cn|pt-br|cs-cz)\/?/);
+      const result = currentPath.match(/^\.\/out\/(en|es|de|tr|uk|fr|ru|pl|ko|zh-cn|pt-br|cs-cz|ka)\/?/);
 
       if (result) {
         replaceLangTag(currentPath, result[1]);

src/components/CheatsheetDemo.tsx

@@ -40,7 +40,7 @@ const CheatsheetDemo = ({ data }: Props) => {
   const readableContent = (content || initialContent).replace(/\\n/gm, '<br />');
 
   return (
-    <div className="font-mono">
+    <div dir='ltr' className="font-mono">
       <div
         className={cx(
           'inline-block bg-jet-400 rounded-md p-3 my-1 text-center w-full relative mb-3 text-xs text-neutral-400',

src/components/FlagSelect.tsx

@@ -61,7 +61,7 @@ const FlagSelect = ({ flags, setFlags }: FlagSelectProps) => {
         <Icon icon="flag" size={14} />
       </Popover.Button>
 
-      <Popover.Panel className="absolute right-0 z-10 mt-2 p-2 border w-48 border-neutral-700 bg-neutral-800 shadow-md rounded-md">
+      <Popover.Panel className="absolute rtl:left-0 z-10 mt-2 p-2 border w-48 border-neutral-700 bg-neutral-800 shadow-md rounded-md">
         {flagList.map(({ name, code, command, regex }) => (
           <div className="inline-flex w-full justify-between text-xs items-center" key={name}>
             <Checkbox

src/components/Header.tsx

@@ -26,7 +26,7 @@ const Header = ({ page }: Props) => {
         <div className="flex-1 inline-flex items-baseline">
           <Logo />
           {isPlaygroundPage && (
-            <span className="text-xs ml-1 relative bottom-1 text-neutral-500 sm:flex hidden">
+            <span className="text-xs ltr:ml-1 rtl:mr-1 relative bottom-1 text-neutral-500 sm:flex hidden">
               v{packageInfo.version}
             </span>
           )}

src/components/InteractiveArea.tsx

@@ -197,7 +197,7 @@ const InteractiveArea = ({ isShow, setIsOpenModal }: Props) => {
   }).toLowerCase();
 
   return (
-    <div
+    <div dir='ltr'
       className={cx({
         '[&_.highlight]:bg-red-400 ': error,
         '[&_.highlight]:bg-yellow-600': match,

src/components/LanguageSelect.tsx

@@ -11,6 +11,8 @@ const langList = Object.keys(langNames).map(langKey => ({
 
 const LanguageSelect = () => {
   const { pathname, query } = useRouter();
+
+
   let currentLang = langNames[query.lang as string];
 
   const availableLangList = langList.filter(({ value }) => query.lang !== value);
@@ -21,7 +23,7 @@ const LanguageSelect = () => {
         <span>{currentLang}</span>
       </Popover.Button>
 
-      <Popover.Panel className="absolute right-0 z-10 mt-2 p-2 border w-28 border-neutral-700 bg-neutral-800 shadow-md rounded-md">
+      <Popover.Panel className="absolute rtl:left-0 ltr:right-0 z-10 mt-2 p-2 border w-28 border-neutral-700 bg-neutral-800 shadow-md rounded-md">
         {availableLangList.map(({ label, value }) => (
           <a
             href={getIntlPath({ href: pathname, lang: value, query })}

src/components/LearnFooter.tsx

@@ -8,24 +8,30 @@ import Icon from 'src/components/Icon';
 import Social from 'src/components/Social';
 import shortcuts from 'src/shortcuts';
 import { InteractiveAreaContext } from 'src/context/InteractiveAreaContext';
+import { useLanguageDirection } from 'src/utils/useLanguageDirection';
 
 const LearnFooter = () => {
   const { lessonData, step, nextStep, prevStep, success, error } =
     useContext(InteractiveAreaContext);
 
+  const direction = useLanguageDirection();
+
+  const nextIconName = direction === 'rtl' ? 'arrow-left' : 'arrow-right';
+  const prevIconName = direction === 'rtl' ? 'arrow-right' : 'arrow-left';
+
   return (
     <div className="my-5 flex select-none">
       <div className="w-1/3 h-full flex items-end">
         {step > 0 && (
           <div
-            className="mr-auto items-end text-left flex flex-col hover:opacity-60"
+            className="rtl:left-0 ltr:right-0 items-end text-left flex flex-col hover:opacity-60"
             role="button"
             tabIndex={0}
             onClick={prevStep}
           >
             <Shortcut command={shortcuts.prevStep} />
             <div className="inline-flex items-center">
-              <Icon className="mr-1" icon="arrow-left" size={20} />
+              <Icon className="mr-1" icon={prevIconName} size={20} />
               <FormattedMessage id="general.prev" />
             </div>
           </div>
@@ -34,10 +40,10 @@ const LearnFooter = () => {
       <div className="w-1/3 h-full flex items-end justify-center">
         <Social />
       </div>
-      <div className="w-1/3 h-full flex items-end">
+      <div className="w-1/3 h-full flex items-end justify-end text-right">
         {step < lessonData.length - 1 && (
           <div
-            className="ml-auto flex flex-col items-end text-right hover:opacity-60"
+            className="rtl:right-0 ltr:left-0 items-start text-right flex flex-col hover:opacity-60"
             role="button"
             tabIndex={0}
             onClick={nextStep}
@@ -57,7 +63,7 @@ const LearnFooter = () => {
             </div>
             <div className="inline-flex items-center ml-auto">
               <FormattedMessage id="general.next" />
-              <Icon className="ml-1" icon="arrow-right" size={20} />
+              <Icon className="ml-1" icon={nextIconName} size={20} />
             </div>
           </div>
         )}

src/components/LessonBox.tsx

@@ -5,6 +5,7 @@ import cx from 'clsx';
 
 import IntlLink from 'src/components/IntlLink';
 import Icon from 'src/components/Icon';
+import { useLanguageDirection } from 'src/utils/useLanguageDirection';
 
 interface Props {
   data: {
@@ -46,6 +47,9 @@ const LessonBox = ({ data, lock, bgColor }: Props) => {
 
   const startText = formatMessage({ id: isVisit ? 'general.continue' : 'general.start' });
 
+  const direction = useLanguageDirection();
+  const arrowDirectionName = direction === 'rtl' ? 'arrow-left' : 'arrow-right';
+
   return (
     <DynamicWrapper className="hover:outline-8">
       <div
@@ -63,21 +67,23 @@ const LessonBox = ({ data, lock, bgColor }: Props) => {
         </p>
         {!lock && (
           <div className="flex items-end text-sm flex-1 justify-between">
-            <div className="inline-flex items-center text-sm text-neutral-300 absolute top-5 right-4 space-x-2">
+            <div className="inline-flex items-center text-sm text-neutral-300 absolute top-5 ltr:right-4 rtl:left-4 space-x-2">
               {data.videoCount && (
-                <span className="inline-flex items-center ">
-                  <Icon icon="video-camera" size={16} className="mr-1" />
+                <span className="inline-flex items-center rtl:right-0 ">
+                  <Icon icon="video-camera" size={16} className="mx-1" />
                   {data.videoCount}
                 </span>
               )}
               <span className="inline-flex items-center ">
-                <Icon icon="document-duplicate" size={16} className="mr-1" />
+                <Icon icon="document-duplicate" size={16}  className="mx-1"/>
                 {data.stepCount}
               </span>
             </div>
-            <span className="inline-flex items-center  ml-auto bg-neutral-800 px-2 py-1 rounded-md text-xs text-neutral-300 hover:text-neutral-50">
-              {startText} <Icon icon="arrow-right" size={14} className="ml-1" />
-            </span>
+            <span className="inline-flex items-center rtl:mr-auto ltr:ml-auto bg-neutral-800 px-2 py-1 rounded-md text-xs text-neutral-300 hover:text-neutral-50">
+  {startText} <Icon icon={arrowDirectionName} size={14} className="rtl:mr-1 ltr:ml-1" />
+</span>
+
+
           </div>
         )}
       </div>

src/components/PlaygroundEditor.tsx

@@ -204,7 +204,7 @@ const Playground = () => {
 
   return (
     <>
-      <div
+      <div dir='ltr'
         className={cx(
           'bg-jet-500 rounded-md relative tracking-wider text-neutral-300 mb-5 mt-4',
           'w-full flex items-center',

src/components/Progress.tsx

@@ -1,3 +1,5 @@
+import { useLanguageDirection } from "src/utils/useLanguageDirection";
+
 const toPercent = (current: number, total: number) => Math.round((current / total) * 100);
 
 interface Props {
@@ -6,20 +8,27 @@ interface Props {
   showProgressText?: boolean;
 }
 
-const Progress = ({ current, total, showProgressText = true }: Props) => (
-  <div className="w-36 flex items-center flex-col justify-start select-none relative">
-    <div className="w-full max-w-[200px] h-[2px] rounded-sm bg-neutral-600">
-      <div
-        className="h-[6px] min-w-[6px] rounded-full bg-regreen-400 relative bottom-[2px] transition-all duration-300 max-w-full"
-        style={{ width: `${toPercent(current, total)}%` }}
-      />
-    </div>
-    {showProgressText && (
-      <div className="text-sm font-bold w-full mt-2 absolute text-center text-neutral-400">
-        {`${current} / ${total}`}
+const Progress = ({ current, total, showProgressText = true }: Props) => {
+
+  const direction = useLanguageDirection();
+  const progressText = direction === "rtl" ? `${total} / ${current}` : `${current} / ${total}`;
+
+
+  return (
+    <div className="w-36 flex items-center flex-col justify-start select-none relative">
+      <div className="w-full max-w-[200px] h-[2px] rounded-sm bg-neutral-600">
+        <div
+          className="h-[6px] min-w-[6px] rounded-full bg-regreen-400 relative bottom-[2px] transition-all duration-300 max-w-full"
+          style={{ width: `${toPercent(current, total)}%` }}
+        />
       </div>
-    )}
-  </div>
-);
+      {showProgressText && (
+        <div className="text-sm font-bold w-full mt-2 absolute text-center text-neutral-400">
+          {progressText}
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default Progress;

src/components/ReportPlayground.tsx

@@ -39,7 +39,7 @@ const ReportPlayground = () => {
       target="_blank"
       rel="noreferrer"
     >
-      <Icon icon="chat-bubble" size={16} className="mr-1" />
+      <Icon icon="chat-bubble" size={16} className="ltr:mr-1 rtl:ml-1" />
       <FormattedMessage id="general.reportStep" />
     </a>
   );

src/components/Step.tsx

@@ -79,7 +79,7 @@ const Step = () => {
         rel="noreferrer"
       >
         {lesson.sponsor || lesson.creator ? (
-          <span className="flex items-center">
+          <span dir='ltr' className="flex items-center">
             {lesson.sponsor ? 'Sponsored' : 'Created'} by{' '}
             <img
               className="mx-1"

src/localization/index.ts

@@ -7,12 +7,15 @@ export const langNames = {
   ru: '🇷🇺',
   'zh-cn': '🇨🇳',
   uk: '🇺🇦',
+  ka: '🇬🇪',
   ko: '🇰🇷',
   pl: '🇵🇱',
   'pt-br': '🇧🇷',
   'cs-cz': '🇨🇿',
 };
 
+export const rtlSupported = [];
+
 export const defaultLocale = 'en';
 
 export const locales = Object.keys(langNames);