From 9563b5ffde3cc0292e8aff965fdfb3cad56ebe96 Mon Sep 17 00:00:00 2001 From: Mohammed Rabay'a Date: Sun, 7 Apr 2024 10:45:27 +0200 Subject: [PATCH] fix: redirect ar/work/* and ar/posts/* to english --- components/organisms/Footer/index.tsx | 7 +- components/organisms/Navigation/index.tsx | 106 +++++++++++++--------- components/templates/Login.tsx | 7 +- pages/blog/index.tsx | 9 +- pages/posts/[slug].tsx | 25 +++-- pages/work/[slug].tsx | 29 ++++-- templates/ThemeProvider/index.tsx | 4 +- utils/languages/ar.json | 9 +- 8 files changed, 125 insertions(+), 71 deletions(-) diff --git a/components/organisms/Footer/index.tsx b/components/organisms/Footer/index.tsx index 68ac097..5d814ef 100644 --- a/components/organisms/Footer/index.tsx +++ b/components/organisms/Footer/index.tsx @@ -9,7 +9,8 @@ const Pages = navigation; const Footer = React.forwardRef((props, ref) => { const { locale, getLocalizedString, isArabic } = useGlobalization(); const [opacity, setOpacity] = useState(0); - const { pathname } = useRouter(); + const { asPath } = useRouter(); + React.useEffect(() => { const handleScroll = (event: Event) => { const footerHeight = (ref as React.RefObject)?.current @@ -76,7 +77,7 @@ const Footer = React.forwardRef((props, ref) => { @@ -86,7 +87,7 @@ const Footer = React.forwardRef((props, ref) => { . { +const Navigation = ({ hasReadPermission, previous, next, ...props }: any) => { const [isOpen, setIsOpen] = useState(false); - const { pathname, asPath } = useRouter(); + const { pathname } = useRouter(); + const { translate } = useGlobalization(); const { theme, setTheme } = useContext(ThemeContext); const { locale } = useGlobalization(); - const isProject = pathname.split("/")?.[1] === "work"; + const isProject = pathname.split("/")?.[1] === "work" && props.slug; const isDark = theme === "dark"; @@ -26,8 +27,8 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => { @@ -38,7 +39,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => { const Socials = [ { target="_blank" href="https://github.com/moerabaya/" key="github-url" - className="px-2 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 rounded-2xl dark:text-gray-50 hover:bg-stone-200 hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 dark:hover:border-stone-800" + className="px-2 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 rounded-2xl dark:text-gray-50 active:bg-stone-200 hover:border-stone-200 dark:bg-stone-900 dark:active:bg-stone-800 dark:hover:border-stone-800" > , @@ -92,7 +93,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => { target="_blank" href="https://www.linkedin.com/in/moerabaya/" key="linkedin-url" - className="px-2 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 rounded-2xl dark:text-gray-50 hover:bg-stone-200 hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 dark:hover:border-stone-800" + className="px-2 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 rounded-2xl dark:text-gray-50 active:bg-stone-200 hover:border-stone-200 dark:bg-stone-900 dark:active:bg-stone-800 dark:hover:border-stone-800" > , @@ -115,46 +116,63 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => { return ( @@ -188,7 +206,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
{renderInnerMenu()}
-
+
{Socials}
diff --git a/components/templates/Login.tsx b/components/templates/Login.tsx index a169f3d..1f96276 100644 --- a/components/templates/Login.tsx +++ b/components/templates/Login.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import Cookies from "universal-cookie"; import consts from "consts"; +import useGlobalization from "hooks/useGlobalization"; const Login = ({ redirectPath, @@ -10,12 +11,12 @@ const Login = ({ redirectPath?: string; }) => { const [password, setPassword] = useState(""); - + const { translate } = useGlobalization(); return (
setPassword(e.target.value)} className="flex-1 text-center text-[3rem] bg-[--background-color] text-neutral-950 dark:text-white placeholder-neutral-600 focus:bg-neutral-100 dark:focus:bg-neutral-900" @@ -40,7 +41,7 @@ const Login = ({ window.location.href = redirectPath ?? "/"; }} > - Login + {translate("login.submit", "Login")}
); diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index 947a3d8..c18bb19 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -35,8 +35,9 @@ const Blog = ({ posts }: any) => { items.push( All @@ -46,9 +47,9 @@ const Blog = ({ posts }: any) => { items.push( {key} diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx index dd6c75a..d097f03 100644 --- a/pages/posts/[slug].tsx +++ b/pages/posts/[slug].tsx @@ -140,18 +140,22 @@ export default Post; const getStaticPaths = async () => { const files = fs.readdirSync(path.join("posts")); - const paths = files.map((filename) => ({ - params: { - slug: filename.replace(".mdx", ""), - }, - })); + const paths = files.reduce((prev: object[], filename) => { + prev.push({ + params: { slug: filename.replace(".mdx", "") }, + locale: "en-US", + }); + prev.push({ params: { slug: filename.replace(".mdx", "") }, locale: "ar" }); + return prev; + }, []); + return { paths, fallback: false, }; }; -const getStaticProps = async ({ params: { slug } }: any) => { +const getStaticProps = async ({ params: { slug }, locale }: any) => { const markdownWithMeta = fs.readFileSync( path.join("posts", slug + ".mdx"), "utf-8" @@ -160,6 +164,15 @@ const getStaticProps = async ({ params: { slug } }: any) => { const { data: frontMatter, content } = matter(markdownWithMeta); const mdxSource = await serialize(content); + if (locale === "ar") { + return { + redirect: { + destination: `/posts/${slug}`, + permanent: false, + }, + }; + } + return { props: { meta: frontMatter, diff --git a/pages/work/[slug].tsx b/pages/work/[slug].tsx index e6e2fd2..31c72a8 100644 --- a/pages/work/[slug].tsx +++ b/pages/work/[slug].tsx @@ -118,19 +118,23 @@ export default Project; const getStaticPaths = async () => { const files = await fs.readdir(path.join("projects")); - const paths = files.map((filename) => ({ - params: { - slug: filename.replace(".mdx", ""), - }, - })); + const paths = files.reduce((prev: object[], filename) => { + prev.push({ + params: { slug: filename.replace(".mdx", "") }, + locale: "en-US", + }); + prev.push({ params: { slug: filename.replace(".mdx", "") }, locale: "ar" }); + return prev; + }, []); return { paths, - fallback: false, + fallback: true, }; }; -const getStaticProps = async ({ params: { slug } }: any) => { +const getStaticProps = async ({ params, locale, ...rest }: any) => { + const { slug } = params; const markdownWithMeta = await fs.readFile( path.join("projects", slug + ".mdx"), "utf-8" @@ -153,6 +157,17 @@ const getStaticProps = async ({ params: { slug } }: any) => { const next = filenames[current + 1]?.replace(".mdx", "") ?? null; const previous = filenames[current - 1]?.replace(".mdx", "") ?? null; + console.log(params, rest); + + if (locale === "ar") { + return { + redirect: { + destination: `/work/${slug}`, + permanent: false, + }, + }; + } + return { props: { meta: frontMatter as IProject, diff --git a/templates/ThemeProvider/index.tsx b/templates/ThemeProvider/index.tsx index b0a648b..9d8b5a8 100644 --- a/templates/ThemeProvider/index.tsx +++ b/templates/ThemeProvider/index.tsx @@ -43,12 +43,10 @@ const ThemeProvider: React.FC<{ children: any }> = ({ children, ...rest }) => { ); const changeTheme = (theme: Theme, storePref = true) => { - document.querySelector("html")?.setAttribute("data-theme", theme); - document.querySelector("html")?.setAttribute("class", theme); if (storePref && theme != mediaQueryPreference) { storeUserSetPreference(theme); } else { - localStorage.removeItem("theme"); + localStorage.setItem("theme", theme); } document.querySelector("html")?.setAttribute("data-theme", theme); document.querySelector("html")?.setAttribute("class", theme); diff --git a/utils/languages/ar.json b/utils/languages/ar.json index fe893dc..2194508 100644 --- a/utils/languages/ar.json +++ b/utils/languages/ar.json @@ -7,7 +7,10 @@ "about": "عني", "work": "المشاريع", "blog": "المدونة", - "contact": "تواصل معي" + "contact": "تواصل معي", + "next": "التالي", + "previous": "السابق", + "close": "إغلاق" }, "home": { "pretitle": "مرحبا - ", @@ -57,5 +60,9 @@ }, "404": { "title": "404 - لا يمكن العثور على الصفحة" + }, + "login": { + "password": "ادخل كلمة المرور", + "submit": "تسجيل دخول" } }