fix: redirect ar/work/* and ar/posts/* to english

moerabaya · Apr 7, 2024 · 9563b5f · 9563b5f
1 parent ac02459
commit 9563b5f
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 71 deletions.
diff --git a/components/organisms/Footer/index.tsx b/components/organisms/Footer/index.tsx
@@ -9,7 +9,8 @@ const Pages = navigation;
 const Footer = React.forwardRef<HTMLDivElement>((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<HTMLElement>)?.current
@@ -76,7 +77,7 @@ const Footer = React.forwardRef<HTMLDivElement>((props, ref) => {
               <List.Item>
                 <Link
                   opacity={isArabic ? 0.5 : 1}
-                  href={pathname}
+                  href={asPath}
                   locale="en-US"
                   smallCaps
                 >
@@ -86,7 +87,7 @@ const Footer = React.forwardRef<HTMLDivElement>((props, ref) => {
                   .
                 </Text>
                 <Link
-                  href={pathname}
+                  href={asPath}
                   locale="ar"
                   smallCaps
                   opacity={isArabic ? 1 : 0.5}

diff --git a/components/organisms/Navigation/index.tsx b/components/organisms/Navigation/index.tsx
@@ -12,12 +12,13 @@ import Nav from "./Nav.styled";
 
 const Pages = navigation;
 
-const Navigation = ({ hasReadPermission, previous, next }: any) => {
+const Navigation = ({ hasReadPermission, previous, next, ...props }: any) => {
   const [isOpen, setIsOpen] = useState<boolean>(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) => {
       <Link
         className={`px-4 py-2 ${
           index == 0 &&
-          " bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid  dark:bg-stone-900 dark:hover:bg-stone-800 dark:hover:border-stone-800"
-        } font-regular mx-2 rounded-2xl text-stone-800 hover:bg-stone-300 dark:text-stone-50 dark:md:hover:bg-stone-800`}
+          " bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid  dark:bg-stone-900 dark:active:bg-stone-800 dark:hover:border-stone-800"
+        } font-regular mx-2 rounded-2xl text-stone-800 active:bg-stone-200 dark:text-stone-50 dark:md:active:bg-stone-900`}
         href={path}
         key={name}
       >
@@ -38,7 +39,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
   const Socials = [
     <span
       key={"theme-switch"}
-      className={`px-1 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 dark:text-gray-50 hover:bg-stone-100 hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-900 dark:hover:border-stone-800 w-20 flex rounded-full items-center relative`}
+      className={`px-1 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 dark:text-gray-50 hover:bg-stone-100 hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-900 dark:hover:border-stone-800 w-20 flex rounded-full items-center relative active:bg-stone-200 dark:active:bg-stone-800`}
     >
       <span
         className={`bg-[#EAEAEA] dark:bg-neutral-900 border-stone-200 border-[1px] border-solid dark:border-neutral-800 w-9 h-9 inline-block rounded-full transition-transform ${
@@ -84,15 +85,15 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
       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"
     >
       <BsGithub size="26px" />
     </a>,
     <a
       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"
     >
       <BsLinkedin size="26px" className="rounded-md" />
     </a>,
@@ -115,46 +116,63 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
     return (
       <Nav isOpen={isOpen} className="text-center">
         <AnimatedView vertical={"-75"} className="h-full">
-          <div className="container m-auto h-full flex items-center">
-            <Link
-              href={"/"}
-              className="dark:text-neutral-50 text-neutral-900 dark:hover:bg-neutral-900 hover:bg-neutral-100 align-middle inline-block text-xl px-3 rounded-[3px] leading-3 py-3 pb-4 me-auto"
-              style={{ fontVariant: "all-small-caps" }}
-            >
-              <svg
-                viewBox="0 0 10 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="dark:*:fill-neutral-50 *:fill-neutral-900 inline-block me-2 mt-[1px] max-sm:size-[16px] size-[10px] max-sm:m-0"
-              >
-                <path
-                  d="M5.00048 4.05732L8.30048 0.757324L9.24315 1.69999L5.94315 4.99999L9.24315 8.29999L8.30048 9.24266L5.00048 5.94266L1.70048 9.24266L0.757812 8.29999L4.05781 4.99999L0.757812 1.69999L1.70048 0.757324L5.00048 4.05732Z"
-                  fill="black"
-                />
-              </svg>
-              <span className="max-sm:hidden">Close</span>
-            </Link>
-
-            {previous && (
+          <div className="container m-auto h-full flex items-center justify-stretch">
+            <div className="flex-1 text-start">
               <Link
-                href={`/work/${previous}`}
-                className="dark:text-neutral-50 text-neutral-900 dark:hover:bg-neutral-900 hover:bg-neutral-100 align-middle inline-block text-xl px-3 rounded-[3px] leading-3 py-3 pb-4 me-"
-                style={{ fontVariant: "all-small-caps" }}
-              >
-                <span className="max-sm:hidden">Previous</span>
-                <span className="hidden max-sm:inline">Previous</span>
-              </Link>
-            )}
-            {next && (
-              <Link
-                href={`/work/${next}`}
+                href={"/"}
                 className="dark:text-neutral-50 text-neutral-900 dark:hover:bg-neutral-900 hover:bg-neutral-100 align-middle inline-block text-xl px-3 rounded-[3px] leading-3 py-3 pb-4"
                 style={{ fontVariant: "all-small-caps" }}
               >
-                <span className="max-sm:hidden">Next</span>
-                <span className="hidden max-sm:inline">Next</span>
+                <svg
+                  viewBox="0 0 10 10"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="dark:*:fill-neutral-50 *:fill-neutral-900 inline-block me-2 mt-[1px] max-sm:size-[16px] size-[10px] max-sm:m-0"
+                >
+                  <path
+                    d="M5.00048 4.05732L8.30048 0.757324L9.24315 1.69999L5.94315 4.99999L9.24315 8.29999L8.30048 9.24266L5.00048 5.94266L1.70048 9.24266L0.757812 8.29999L4.05781 4.99999L0.757812 1.69999L1.70048 0.757324L5.00048 4.05732Z"
+                    fill="black"
+                  />
+                </svg>
+                <span className="max-sm:hidden">
+                  {translate("navigation.close", "Close")}
+                </span>
               </Link>
-            )}
+            </div>
+            <span className="flex-1 dark:text-neutral-50 text-neutral-900 align-middle inline-block text-lg px-3 rounded-[3px] leading-3 py-3 pb-3 me-auto text-center">
+              {props.meta.title}
+            </span>
+
+            <div className="flex-1 text-end flex gap-3 justify-end">
+              {previous && (
+                <Link
+                  href={`/work/${previous}`}
+                  className="dark:text-neutral-50 text-neutral-900 dark:hover:bg-neutral-900 hover:bg-neutral-100 align-middle inline-block text-xl px-3 rounded-[3px] leading-3 py-3 pb-4 me-"
+                  style={{ fontVariant: "all-small-caps" }}
+                >
+                  <span className="max-sm:hidden">
+                    {translate("navigation.previous", "Previous")}
+                  </span>
+                  <span className="hidden max-sm:inline">
+                    {translate("navigation.previous", "Previous")}
+                  </span>
+                </Link>
+              )}
+              {next && (
+                <Link
+                  href={`/work/${next}`}
+                  className="dark:text-neutral-50 text-neutral-900 dark:hover:bg-neutral-900 hover:bg-neutral-100 align-middle inline-block text-xl px-3 rounded-[3px] leading-3 py-3 pb-4"
+                  style={{ fontVariant: "all-small-caps" }}
+                >
+                  <span className="max-sm:hidden">
+                    {translate("navigation.next", "Next")}
+                  </span>
+                  <span className="hidden max-sm:inline">
+                    {translate("navigation.next", "Next")}
+                  </span>
+                </Link>
+              )}
+            </div>
           </div>
         </AnimatedView>
       </Nav>
@@ -188,7 +206,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
             <div className="flex items-center flex-col justify-center flex-1  ">
               {renderInnerMenu()}
             </div>
-            <div className="mt-auto flex items-center pb-10 justify-center items-stretch">
+            <div className="mt-auto flex pb-10 justify-center items-stretch">
               {Socials}
             </div>
           </div>

diff --git 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 (
     <form className="pt-[75px] max-sm:pt-[60px] h-[100vh] flex  flex-col min-h-[320px]:">
       <input
         type="text"
-        placeholder="Enter password"
+        placeholder={translate("login.password", "Enter password")}
         value={password}
         onChange={(e) => 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")}
       </button>
     </form>
   );

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -35,8 +35,9 @@ const Blog = ({ posts }: any) => {
     items.push(
       <Link
         href={`/blog`}
-        className={`px-3 py-2 bg-stone-100 hover:bg-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 rounded-2xl !outline-none ${
-          !router.query?.slug && "bg-stone-200 dark:bg-stone-800 cursor-default"
+        className={`px-3 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid dark:text-gray-50  hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-900 dark:hover:border-stone-800 active:bg-stone-200 dark:active:bg-stone-800 rounded-2xl !outline-none ${
+          !router.query?.slug &&
+          "border-neutral-300 dark:border-neutral-700 cursor-default"
         }`}
       >
         All
@@ -46,9 +47,9 @@ const Blog = ({ posts }: any) => {
       items.push(
         <Link
           href={`/blog/${key.toString().toLowerCase()}`}
-          className={`px-3 py-2 bg-stone-100 hover:bg-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 rounded-3xl !outline-none ${
+          className={`px-3 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid dark:text-gray-50  hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-900 dark:hover:border-stone-800 active:bg-stone-200 dark:active:bg-stone-800 rounded-3xl !outline-none ${
             router.query?.slug === key.toString().toLowerCase() &&
-            "bg-stone-200 dark:bg-stone-800 cursor-default"
+            "border-neutral-300 dark:border-neutral-700 cursor-default"
           }`}
         >
           {key}

diff --git 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
@@ -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
@@ -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
@@ -7,7 +7,10 @@
     "about": "عني",
     "work": "المشاريع",
     "blog": "المدونة",
-    "contact": "تواصل معي"
+    "contact": "تواصل معي",
+    "next": "التالي",
+    "previous": "السابق",
+    "close": "إغلاق"
   },
   "home": {
     "pretitle": "مرحبا  - ",
@@ -57,5 +60,9 @@
   },
   "404": {
     "title": "404 - لا يمكن العثور على الصفحة"
+  },
+  "login": {
+    "password": "ادخل كلمة المرور",
+    "submit": "تسجيل دخول"
   }
 }