fix: build issues were occurring due to misconfiguration in i18n and …

…and vite.config
alifeinbinary · Sep 25, 2024 · a8f5936 · a8f5936
1 parent 0cbbf90
commit a8f5936
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 43 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,25 +15,26 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { lazy } from "react";
+import { lazy, Suspense } from "react";
 // import { faTerminal } from "@fortawesome/free-solid-svg-icons";
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Hook, Unhook } from "console-feed";
-import { Message } from "console-feed/lib/definitions/Component";
+// import { Hook, Unhook } from "console-feed";
+// import { Message } from "console-feed/lib/definitions/Component";
 import { useEffect } from "react";
-import { Flowbite } from "flowbite-react";
+import { Flowbite, Spinner } from "flowbite-react";
 import "./App.css";
 // import LogsContainer from "./components/DebugConsole";
 // import Feed from "./components/Feed";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
-import Translate from "./components/Translate";
+// import Translate from "./components/Translate";
 import { useAppState, useImageState } from "./utils/stores";
 
 const Feed = lazy(() => import("./components/Feed"));
+const Translate = lazy(() => import("./components/Translate"));
 function App() {
   // const { debugMode, setDebugMode, logs, setLogs } = useAppState();
-  const { debugMode, setLogs } = useAppState();
+  const { debugMode } = useAppState();
 
   const {
     input,
@@ -55,30 +56,30 @@ function App() {
   // };
 
   // Loading the console
-  useEffect(() => {
-    function handleCallback(logItems: Message[]) {
-      setLogs(logItems);
-    }
-    function transpose(matrix: Message[][]) {
-      if (!matrix || matrix.length === 0) return [];
-      const table = matrix[0];
-      return table;
-    }
-    const hookedConsole = Hook(
-      window.console,
-      (logItems) =>
-        handleCallback([
-          { ...logItems, data: [transpose(logItems.data as Message[][])] },
-        ] as Message[]),
-      false,
-    );
+  // useEffect(() => {
+  //   function handleCallback(logItems: Message[]) {
+  //     setLogs(logItems);
+  //   }
+  //   function transpose(matrix: Message[][]) {
+  //     if (!matrix || matrix.length === 0) return [];
+  //     const table = matrix[0];
+  //     return table;
+  //   }
+  //   const hookedConsole = Hook(
+  //     window.console,
+  //     (logItems) =>
+  //       handleCallback([
+  //         { ...logItems, data: [transpose(logItems.data as Message[][])] },
+  //       ] as Message[]),
+  //     false,
+  //   );
 
-    return () => {
-      if (hookedConsole) {
-        Unhook(hookedConsole);
-      }
-    };
-  }, [setLogs]);
+  //   return () => {
+  //     if (hookedConsole) {
+  //       Unhook(hookedConsole);
+  //     }
+  //   };
+  // }, [setLogs]);
 
   // Keeping it fresh in the console
   useEffect(() => {
@@ -135,8 +136,12 @@ function App() {
         <div id="app" className="bg-forestgreen/[0.5] dark:bg-slate-600 transition-colors duration-500 ease-in-out">
           <div className="container px-4 mx-auto max-w-6xl">
             <Header />
-            <Translate />
-            <Feed />
+            <Suspense fallback={<span className="w-full min-h-52 flex items-center justify-center"><Spinner /></span>}>
+              <Translate />
+            </Suspense>
+            <Suspense fallback={<span className="w-full min-h-52 flex items-center justify-center"><Spinner /></span>}>
+              <Feed />
+            </Suspense>
             {/* {debugMode && <LogsContainer logs={logs} />}
             <button
               className="text-sm font-light text-gray-100 hover:text-gray-300 hover:underline"

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -73,7 +73,7 @@ const Header: React.FC = () => {
                     <div className="relative max-w-screen-lg text-gray-800 sm:text-lg dark:text-gray-400">
                         <Navbar fluid rounded theme={customNavbarTheme}>
                             <Navbar.Brand href="/">
-                                <img width={"100%"} height={"100%"} src="./public/binary-translate.png" className="mr-3 h-12 sm:h-9 xs:h-7 xs:mr-2" alt="Binary Translate" />
+                                <img width={"100%"} height={"100%"} src="./binary-translate.png" className="mr-3 h-12 sm:h-9 xs:h-7 xs:mr-2" alt="Binary Translate" />
                                 <span className="self-center whitespace-nowrap text-2xl xs:text-sm tracking-tight font-bold text-gray-900 dark:text-white">{t('title')}</span>
                             </Navbar.Brand>
                             <menu className='flex items-end list-none'>
@@ -156,7 +156,7 @@ const Header: React.FC = () => {
                                         <p className="text-xl font-semibold text-gray-900 dark:text-white">{t('review')}</p>
                                     </blockquote>
                                     <figcaption className="flex items-center mt-6 space-x-3 rtl:space-x-reverse">
-                                        <img className="w-6 h-6 rounded-full" src="diane.webp" alt="profile picture" />
+                                        <img className="w-6 h-6 rounded-full" src="./diane.webp" alt="profile picture" />
                                         <div className="flex items-center divide-x-2 rtl:divide-x-reverse divide-gray-300 dark:divide-gray-700">
                                             <cite className="pe-3 font-medium text-gray-900 dark:text-white">Diane</cite>
                                             <cite className="ps-3 text-sm text-gray-500 dark:text-gray-300">{t('byline')}</cite>

diff --git a/src/hooks/useListBinaryImagePosts.ts b/src/hooks/useListBinaryImagePosts.ts
@@ -43,7 +43,6 @@ export const useListBinaryImagePosts = (cursor: string) => {
         loading: boolean;
         error: any;
     }> => {
-        console.debug("cursor", cursor);
         const {
             data: refetchedData,
             loading: refetchedLoading,

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -38,7 +38,7 @@ i18n
         fallbackLng: "en",
         debug: import.meta.env.MODE === "development",
         backend: {
-            loadPath: "./public/locales/{{lng}}/{{ns}}.json",
+            loadPath: "./locales/{{lng}}/{{ns}}.json",
         },
         ns: ["translations"],
     });

diff --git a/src/utils/save.ts b/src/utils/save.ts
@@ -35,11 +35,6 @@ function returnBlob(blobWithMetadata: Blob, fileName: string) {
     link.href = url;
     link.download = fileName;
 
-    // document.body.appendChild(link);
-    // link.click();
-
-    // document.body.removeChild(link);
-
     return { fileName, url };
 }
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,11 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  base: "/binary-translate/",
+    plugins: [react()],
+    base: "/binary-translate/",
+    build: {
+        assetsDir: "public",
+    },
 });