merge from source 2024/05/31

README.md

@@ -40,14 +40,14 @@ the way:
 - 🇰🇷 Korean
 - 🇧🇷 Brazilian Portuguese
 - 🇨🇿 Czech
+- 🇬🇪 Georgian
+- 🇮🇷 Persian
 
 ### Requested Translations
 
 - 🇦🇪 Arabic [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/163)
-- 🇬🇪 Georgian [(Issue)](https://github.com/aykutkardas/regexlearn.com/issues/274)
 - 🇧🇩 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)
 

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|fa)\/?/);
 
       if (result) {
         replaceLangTag(currentPath, result[1]);

src/components/CheatsheetCollapse.tsx

@@ -36,7 +36,7 @@ const CheatsheetCollapse = ({ title, data }: CheatsheetCollapseProps) => {
         aria-controls={`Collapse-${data.title}`}
       >
         <div className="w-14 inline-block">
-          <span className="p-1 text-xs font-mono text-neutral-100 bg-[#333] rounded-md">
+          <span className="p-1 text-xs font-mono text-neutral-100 bg-[#333] rounded-md" dir='ltr'>
             {data.code}
           </span>
         </div>

src/components/LearnProgress.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import Icon from './Icon';
 import { InteractiveAreaContext } from 'src/context/InteractiveAreaContext';
 import HighlightedText from './HighlightedText';
+import { useLanguageDirection } from "src/utils/useLanguageDirection";
 
 const LearnProgress = () => {
   const [open, setOpen] = useState(false);
@@ -27,11 +28,20 @@ const LearnProgress = () => {
 
   const toggleProgress = () => setOpen(!open);
 
+  const direction = useLanguageDirection();
+
+  // list lesson (ToggleProgress For RTL/LTR)
+  const listOpen = direction === 'rtl' ? 'left-0' : 'right-0';
+  const listClose = direction === 'rtl' ? '-left-[244px]' : '-right-[244px]';
+  const listOpenInner = direction === 'rtl' ? '-left-10' : '-right-10';
+  const listCloseInner = direction === 'rtl' ? 'left-[204px]' : 'right-[204px]';
+  const listIconName = direction === 'rtl' ? 'arrow-right' : 'arrow-left';
+
   return (
     <div
       className={clsx(
         'hidden lg:block text-xs top-[50%] -translate-y-[50%] absolute z-10 transition-all select-none',
-        open ? 'right-0 ' : '-right-[244px]',
+        open ? listOpen : listClose,
       )}
     >
       <div
@@ -41,15 +51,17 @@ const LearnProgress = () => {
         <div
           onClick={toggleProgress}
           className={clsx(
-            'w-10 h-10 cursor-pointer rounded-full  flex fixed top-[50%] -translate-x-[50%] -translate-y-[50%] transition-all duration-50',
-            open ? '-right-10 bg-neutral-600/40' : 'right-[204px] bg-emerald-600',
+            direction === 'rtl' ? 'translate-x-[50%]' : '-translate-x-[50%]',
+            `w-10 h-10 cursor-pointer rounded-full  flex fixed top-[50%] transition-all duration-50`,
+            open ? `${listOpenInner} bg-neutral-600/40` : `${listCloseInner} bg-emerald-600`,
           )}
         >
           <Icon
-            icon="arrow-left"
+            icon={listIconName}
             size={15}
             className={clsx(
-              'mr-auto my-auto ml-1 text-neutral-100',
+              direction === 'rtl' ? 'ml-auto mr-1' : 'mr-auto ml-1',
+              `my-auto text-neutral-100`,
               open ? 'rotate-180' : 'rotate-0',
             )}
           />
@@ -66,17 +78,26 @@ const LearnProgress = () => {
               },
               'step-item relative truncate max-w-[80%] flex flex-row-reverse items-center',
               index !== lessonData.length - 1 &&
-                "pb-6 after:content-[''] after:block after:w-[2px] after:h-8 after:bg-neutral-700 after:rounded-md after:right-[7px] after:top-8 after:absolute",
+              `pb-6 after:content-[''] after:block after:w-[2px] after:h-8 after:bg-neutral-700 after:rounded-md after:mx-[7px] after:top-8 after:absolute`,
             )}
           >
             {step === index && (
-              <Icon icon="play" size={16} className="text-green-400 ml-2 flex-shrink-0" />
+              <Icon icon="play" size={16} className={clsx(
+                direction === 'ltr' ? 'ml-2' : 'mr-2',
+                "text-green-400 flex-shrink-0"
+              )} />
             )}
             {lastStep >= index && step !== index && (
-              <Icon icon="check" size={16} className="text-green-400 ml-2 flex-shrink-0" />
+              <Icon icon="check" size={16} className={clsx(
+                direction === 'ltr' ? 'ml-2' : 'mr-2',
+                "text-green-400 flex-shrink-0"
+              )} />
             )}
             {lastStep < index && (
-              <Icon icon="lock-closed" size={16} className="text-neutral-500 ml-2 flex-shrink-0" />
+              <Icon icon="lock-closed" size={16} className={clsx(
+                direction === 'ltr' ? 'ml-2' : 'mr-2',
+                "text-neutral-500 flex-shrink-0"
+              )} />
             )}
 
             <HighlightedText
@@ -87,7 +108,7 @@ const LearnProgress = () => {
                   ? '!pr-2 text-neutral-50'
                   : 'text-neutral-300 hover:text-neutral-100 pl-0',
               )}
-              text={formatMessage({ id: lesson.title })}
+              text={formatMessage({ id: lesson.title }).replace('\\n', '')}
               onClick={() => handleChangeStep(index)}
               attrs={{
                 className: clsx(

src/components/Step.tsx

@@ -43,6 +43,7 @@ const Step = () => {
           text={formatMessage({ id: data.title })}
           attrs={{
             className: 'px-2 my-1 bg-neutral-700 rounded-md mx-1 whitespace-nowrap',
+            dir: 'ltr'
           }}
         />
         <HighlightedText
@@ -51,6 +52,7 @@ const Step = () => {
           text={formatMessage({ id: data.description })}
           attrs={{
             className: 'p-1 text-xs whitespace-nowrap rounded-md bg-neutral-700 tracking-widest',
+            dir: 'ltr'
           }}
         />
       </div>

src/localization/en/general.json

@@ -35,5 +35,5 @@
   "page.cheatsheet.description": "Sometimes you just need to remember Regex. Try the cheatsheet that will make it easier for you to understand and remember better.",
   "page.playground.description": "You can easily build and test your regex pattern online via Playground.",
 
-  "learn.safari.unsupportWarning": "Regex in this step are not supported by the some browsers. If you have trouble getting past this step, you can click here."
+  "learn.safari.unsupportWarning": "Regex in this step is not supported by some browsers. If you have trouble getting past this step, click here."
 }

src/localization/en/learn.json

@@ -60,13 +60,13 @@
   "steps.questionMark.description": "To indicate that a character is optional, we put a `?` question mark after a character. For example, indicate that the following letter `u` is optional.",
 
   "steps.quantifier.title": "Curly Braces - 1",
-  "steps.quantifier.description": "To express a certain number of occurrences of a character,  at the end we write curly braces `{n}` along with how many times we want it to occur. For example, indicate that the following letter `e` can occur only `2` times.",
+  "steps.quantifier.description": "To express a certain number of occurrences of a character,  at the end we write curly braces `{n}` along with how many times we want it to occur. For example, indicate that the following letter `e` can occur only `2` times in a row.",
 
   "steps.quantifierMin.title": "Curly Braces - 2",
-  "steps.quantifierMin.description": "To express at least a certain number of occurrences of a character, immediately after the character we write at least how many times we want it to occur followed by a comma `,` and wrapped inside curly braces `{n, }`. For example, indicate that the following letter `e` can occur at least `3` times.",
+  "steps.quantifierMin.description": "To express at least a certain number of occurrences of a character, immediately after the character we write at least how many times we want it to occur in a row followed by a comma `,` and wrapped inside curly braces `{n, }`. For example, indicate that the following letter `e` can occur at least `3` times in a row.",
 
   "steps.quantifierRange.title": "Curly Braces - 3",
-  "steps.quantifierRange.description": "To express the occurrence of a character in a certain number range, we write curly braces `{x,y}` with the interval we want to go to the end. For example, indicate that the following letter `e` can only occur between `1` and `3`.",
+  "steps.quantifierRange.description": "To express the occurrence of a character in a certain number range, we write curly braces `{x,y}` for the inclusive interval. For example, indicate that the following letter `e` can only occur between `1` and `3` times in a row.",
 
   "examples.asterisk.title": "Practice: Asterisk `*`",
   "examples.asterisk.description": "Use the asterisk `*` to write the expression that will select each word, suitable for the absence of the letter `e` in the text and the presence of one or more.",

src/localization/fa/cheatsheet.json

@@ -0,0 +1,70 @@
+{
+  "cheatsheet.section.title": "برگه تقلب ریجکس",
+  "cheatsheet.section.description": "تمام الگوها و نمادهای ریجکس را با کدتقلب ریجکس کاوش کنید.",
+
+  "cheatsheet.anchors": "مهارها (لنگرها)",
+  "cheatsheet.caret.title": "شروع رشته یا خط",
+  "cheatsheet.caret.description": "با ابتدای ریشته یا خط تطابق دارد.",
+  "cheatsheet.dollar.title": "انتهای رشته یا خط",
+  "cheatsheet.dollar.description": "با انتهای رشته یا خط تطابق دارد.",
+  "cheatsheet.wordBoundary.title": "مرز کلمه",
+  "cheatsheet.wordBoundary.description": "اشاره به آخرین کاراکتر کلمات می کند که مرزی بین کلمه ی فعلی و کلمه ی بعدی می باشد.",
+  "cheatsheet.notWordBoundary.title": "مرکز کلمه نباشه",
+  "cheatsheet.notWordBoundary.description": "با کارکتر یا کلمه ایی مطابقت دارد که در انتهای یک کلمه نیست.",
+
+  "cheatsheet.characterClasses": "عملگرهای کارکتر",
+  "cheatsheet.characterSet.title": "لیست کارکتر",
+  "cheatsheet.characterSet.description": "با هر کارکتری در لیست مطابقت دارد.",
+  "cheatsheet.negatedCharacterSet.title": "لیست کارکتر منفی",
+  "cheatsheet.negatedCharacterSet.description": "با هر کارکتری که در لیست نیست، مطابقت دارد.",
+  "cheatsheet.range.title": "محدوده",
+  "cheatsheet.range.description": "همه کارکترهای بین دوکارکتر (از جمله خودشان) را پوشش میدهد.",
+  "cheatsheet.dot.title": "نقطه",
+  "cheatsheet.dot.description": "با هر کارکتری جز خط جدید تطابق دارد.",
+  "cheatsheet.word.title": "کلمه",
+  "cheatsheet.word.description": "با تمامی کارکترهای انگلیسی ، اعداد و زیرخط مطابقت دارد.",
+  "cheatsheet.notWord.title": "غیر کلمه",
+  "cheatsheet.notWord.description": "با کارکترهای غیر از حروف انگلیسی ، اعداد و آندلاین تطابق دارد.",
+  "cheatsheet.digit.title": "اعداد",
+  "cheatsheet.digit.description": "با اعداد 0 تا 9 مطابقت دارد.",
+  "cheatsheet.notDigit.title": "غیر اعداد",
+  "cheatsheet.notDigit.description": "با هرکارکتری جز اعداد مطابقت دارد.",
+  "cheatsheet.space.title": "فضای سفید",
+  "cheatsheet.space.description": "با هر کارکتر فضای خالی مطابقت دارد.",
+  "cheatsheet.notSpace.title": "غیر فضای سفید",
+  "cheatsheet.notSpace.description": "با هرکارکتر غیر از فضای سفید مطابقت دارد.",
+
+  "cheatsheet.flags": "پرچم ها",
+  "cheatsheet.caseInsensitiveFlag.title": "حساسیت به حروف",
+  "cheatsheet.caseInsensitiveFlag.description": "الگو را غیر حساس به حروف بزرگ و کوچک میکند.",
+  "cheatsheet.globalFlag.title": "جهانی",
+  "cheatsheet.globalFlag.description": "الگو را در اولین پیدا کردن متوقف نمیکند.",
+  "cheatsheet.multilineFlag.title": "چند خطی",
+  "cheatsheet.multilineFlag.description": "اگر فعال نباشد، شروع و پایان خط، برابر با ابتدا و انتهای جمله است و برای هر خط به صورت جداگانه کار نمیکند.",
+
+  "cheatsheet.groupAndReferences": "گروه و مرجع",
+  "cheatsheet.group.title": "گروه بندی",
+  "cheatsheet.group.description": "یک الگو را گروه بندی میکند.",
+  "cheatsheet.reference.title": "مرجع",
+  "cheatsheet.reference.description": "شما را به گروه قبلی ارجاع میدهد.",
+  "cheatsheet.nonCapturingGroup.title": "گروه بندی بدون ارجاع",
+  "cheatsheet.nonCapturingGroup.description": "گروه بندی ایجاد میکند که قابل ارجاع نیست.",
+
+  "cheatsheet.lookarounds": "جستجو کردن",
+  "cheatsheet.positiveLookahead.title": "بررسی رو به جلو مثبت",
+  "cheatsheet.negativeLookahead.title": "بررسی رو به جلو منفی",
+  "cheatsheet.positiveLookbehind.title": "بررسی رو به عقب مثبت",
+  "cheatsheet.negativeLookbehind.title": "بررسی رو به عقب منفی",
+
+  "cheatsheet.quantifiersAndAlternation": "تعداد و جایزگینی",
+  "cheatsheet.plus.title": "بعلاوه",
+  "cheatsheet.plus.description": "مشخص کردن تعداد 1 یا بیشتر.",
+  "cheatsheet.asterisk.title": "ستاره",
+  "cheatsheet.asterisk.description": "مشخص کردن تعداد 0 یا بیشتر.",
+  "cheatsheet.quantifier.title": "کمیت",
+  "cheatsheet.quantifier.description": "مشخص کردن محدوده ایی برای تعداد.",
+  "cheatsheet.optional.title": "اختیاری",
+  "cheatsheet.optional.description": "وجود داشتن یا نداشتن عبارت را اختیاری میکند.",
+  "cheatsheet.alternation.title": "جایگزینی",
+  "cheatsheet.alternation.description": "انتظار میرود با حداقل یکی از عبارات مطابقت داشته باشد."
+}

src/localization/fa/general.json

@@ -0,0 +1,39 @@
+{
+  "general.prev": "قبلی",
+  "general.next": "بعدی",
+  "general.result": "نتیجه",
+  "general.regex": "regex",
+  "general.text": "متن",
+  "general.watch": "تماشا",
+  "general.start": "شروع",
+  "general.continue": "ادامه",
+  "general.completedStep": "مرحله تکمیل شد!",
+  "general.hintQuestion": "نمایش پاسخ",
+  "general.reportStep": "گزارش مشکل",
+  "general.startLearning": "شروع یادگیری",
+  "general.comingSoon": "به زودی",
+  "general.becomeSponsor": "اسپانسر شوید",
+  "general.learn": "آموزش",
+  "general.playground": "زمین تمرین",
+  "general.cheatsheet": "برگه تقلب",
+  "general.ourSponsors": "حامیان ما",
+  "general.share": "اشتراک گذاری",
+  "general.shareLinkCopied": "لینک اشتراک کپی شد!",
+  "general.somethingWentWrong": "مشکلی به وجود اومد!",
+
+  "notFound.intro": "صفحه ایی که دنبال آن هستید وجود ندارد.",
+  "notFound.button": "بازگشت به خانه",
+
+  "page.landing.title": "آموزش ریجکس - قدم به قدم ، از صفر تا صد",
+  "page.learn.title": "آموزش ریجکس - دوره تعاملی ریجکس",
+  "page.cheatsheet.title": "آموزش ریجکس - برگه تقلب",
+  "page.playground.title": "آموزش ریجکس - زمین تمرین",
+  "page.404.title": "آموزش ریجکس - پیدا نشد",
+
+  "page.landing.description": "ریجکس را به صورت تعاملی یاد بگیرید، به صورت مداوم تمرین کنید و به اشتراک بگذارید.",
+  "page.learn.description": "ریجکس را گام به گام یاد بگیرید. آموزش ما را تکمیل کنید تا یادگیری شما به انتها برسد.",
+  "page.cheatsheet.description": "بعضی وقت ها نیاز به یادآوری ریجکس در ذهن خود دارد. از برگه تقلب برای یادآوری استفاده کنید.",
+  "page.playground.description": "شما به راحتی میتوانید الگوی ریجکس خود را به صورت آنلاین در زمین تمرین بسازید و آزمایش کنید.",
+
+  "learn.safari.unsupportWarning": "ریجکس در این مرحله توسط برخی از مرورگرها پشتیبانی نمی شود. اگر برای عبور از این مرحله مشکل دارید، اینجا را کلیک کنید"
+}

src/localization/fa/index.js

@@ -0,0 +1,17 @@
+import cheatsheet from './cheatsheet.json';
+import general from './general.json';
+import landing from './landing.json';
+import learn from './learn.json';
+import lessons from './lessons.json';
+import regexForSeo from './lessons/regexForSeo.json';
+
+const messages = {
+  ...cheatsheet,
+  ...general,
+  ...landing,
+  ...learn,
+  ...lessons,
+  ...regexForSeo,
+};
+
+export default messages;