diff --git a/README.md b/README.md index 9a54b5ff..d77ffd9f 100644 --- a/README.md +++ b/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! diff --git a/scripts/html-lang-fixer.js b/scripts/html-lang-fixer.js index 89c17af0..ff2aa90b 100644 --- a/scripts/html-lang-fixer.js +++ b/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]); diff --git a/src/components/CheatsheetDemo.tsx b/src/components/CheatsheetDemo.tsx index 3e08e4ce..fd648996 100644 --- a/src/components/CheatsheetDemo.tsx +++ b/src/components/CheatsheetDemo.tsx @@ -40,7 +40,7 @@ const CheatsheetDemo = ({ data }: Props) => { const readableContent = (content || initialContent).replace(/\\n/gm, '
'); return ( -
+
{ - + {flagList.map(({ name, code, command, regex }) => (
{
{isPlaygroundPage && ( - + v{packageInfo.version} )} diff --git a/src/components/InteractiveArea.tsx b/src/components/InteractiveArea.tsx index 67dd1df2..b609e2cf 100644 --- a/src/components/InteractiveArea.tsx +++ b/src/components/InteractiveArea.tsx @@ -197,7 +197,7 @@ const InteractiveArea = ({ isShow, setIsOpenModal }: Props) => { }).toLowerCase(); return ( -
({ 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 = () => { {currentLang} - + {availableLangList.map(({ label, value }) => ( { 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 (
{step > 0 && (
- +
@@ -34,10 +40,10 @@ const LearnFooter = () => {
-
+
{step < lessonData.length - 1 && (
{
- +
)} diff --git a/src/components/LessonBox.tsx b/src/components/LessonBox.tsx index bf1b55a2..af9da29c 100644 --- a/src/components/LessonBox.tsx +++ b/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 (
{

{!lock && (
-
+
{data.videoCount && ( - - + + {data.videoCount} )} - + {data.stepCount}
- - {startText} - + + {startText} + + +
)}
diff --git a/src/components/PlaygroundEditor.tsx b/src/components/PlaygroundEditor.tsx index 72b841b1..02032949 100644 --- a/src/components/PlaygroundEditor.tsx +++ b/src/components/PlaygroundEditor.tsx @@ -204,7 +204,7 @@ const Playground = () => { return ( <> -
Math.round((current / total) * 100); interface Props { @@ -6,20 +8,27 @@ interface Props { showProgressText?: boolean; } -const Progress = ({ current, total, showProgressText = true }: Props) => ( -
-
-
-
- {showProgressText && ( -
- {`${current} / ${total}`} +const Progress = ({ current, total, showProgressText = true }: Props) => { + + const direction = useLanguageDirection(); + const progressText = direction === "rtl" ? `${total} / ${current}` : `${current} / ${total}`; + + + return ( +
+
+
- )} -
-); + {showProgressText && ( +
+ {progressText} +
+ )} +
+ ); +}; export default Progress; diff --git a/src/components/ReportPlayground.tsx b/src/components/ReportPlayground.tsx index bb369fa4..ffc91860 100644 --- a/src/components/ReportPlayground.tsx +++ b/src/components/ReportPlayground.tsx @@ -39,7 +39,7 @@ const ReportPlayground = () => { target="_blank" rel="noreferrer" > - + ); diff --git a/src/components/Step.tsx b/src/components/Step.tsx index c9be5590..29a39f30 100644 --- a/src/components/Step.tsx +++ b/src/components/Step.tsx @@ -79,7 +79,7 @@ const Step = () => { rel="noreferrer" > {lesson.sponsor || lesson.creator ? ( - + {lesson.sponsor ? 'Sponsored' : 'Created'} by{' '} { attrs={{ className: 'text-regreen-400' }} />
-
+
{lessons.map(lesson => (
{ rel="noreferrer" > {lesson.sponsor || lesson.creator ? ( - + {lesson.sponsor ? 'Sponsored' : 'Created'} by{' '} { + useEffect(() => { const preventBrowserShortcut = e => { if (e.ctrlKey && 'gmi'.includes(e.key.toLowerCase())) { @@ -28,6 +30,9 @@ const MyApp = ({ Component, pageProps }: AppProps) => { const { asPath } = useRouter(); const href = asPath.replace('/en', '/').replace('//', '/'); + + const direction = useLanguageDirection() + return ( { key={locale} rel="alternate" hrefLang={locale} - href={`${process.env.NEXT_PUBLIC_BASE_URL}${locale === 'en' ? '' : locale + '/'}${ - metadata.hrefLang - }`} + href={`${process.env.NEXT_PUBLIC_BASE_URL}${locale === 'en' ? '' : locale + '/'}${metadata.hrefLang + }`} /> ))} {/* */} @@ -65,7 +69,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => { )} -
+
diff --git a/src/utils/useLanguageDirection.tsx b/src/utils/useLanguageDirection.tsx new file mode 100644 index 00000000..ae95b6ab --- /dev/null +++ b/src/utils/useLanguageDirection.tsx @@ -0,0 +1,10 @@ +import { useRouter } from "next/router"; +import { rtlSupported } from "src/localization"; + +// This hook is used to determine the direction of the language +export function useLanguageDirection() { + const { query } = useRouter() + const isRtl = rtlSupported.includes(query.lang as string) + + return isRtl ? 'rtl' : 'ltr' +}