Auto-generated code removal and migration to SQLite

deurdu/client/.gitignore → client/.gitignore

@@ -10,6 +10,9 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+
+package-lock.json
+
 *.local
 
 # Editor directories and files

client/README.md

@@ -0,0 +1,89 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+# 🛠️ **Setup Instructions for New Contributors**
+
+Welcome to the project! 🎉 Follow these simple steps to set up your local development environment. This will ensure you avoid any errors related to missing configurations or dependencies.
+
+---
+
+### 1️⃣ **Clone the Repository**
+
+Start by cloning the repository to your local machine:
+
+```bash
+git clone https://github.com/yourusername/your-repository.git
+cd your-repository
+```
+
+---
+
+### 2️⃣ **Install Project Dependencies**
+
+Ensure that you have Node.js installed (version 14 or above is recommended). Then, install the required dependencies using npm or Yarn:
+
+- Using npm
+```bash
+npm install
+```
+- Or if you want to use Yarn
+```bash
+yarn install
+```
+
+### 3️⃣ **Generate Missing Configuration Files**
+
+As some configuration files were deleted, you'll need to regenerate or create them manually. Here are the necessary steps for each file:
+## **For TailwindCSS:**
+Regenerate the ```tailwind.config.js``` file:
+```bash
+npx tailwindcss init
+```
+This will generate the ```tailwind.config.js``` file.
+
+## **For Vite:**
+Regenerate the ```vite.config.js``` file by creating a new one in the root of your project and adding the following content:
+```JavaScript
+// vite.config.js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
+```
+
+## **For PostCSS**
+If the ```postcss.config.js``` is missing, you can either create it manually or reinstall PostCSS:
+```bash
+npm install postcss
+```
+Then, manually create the ```postcss.config.js``` file with the necessary PostCSS configuration.
+
+## **For ESLint:**
+Regenerate your **ESLint** configuration by running:
+```bash
+npm install eslint --save-dev
+npx eslint --init
+```
+Follow the prompts to generate the ```**eslint.config.js**``` file.
+
+### 4️⃣ **Run the development server**
+Once everything is set up, you can run the development server with one of the following commands:
+- Using npm:
+```bash
+npm run dev
+```
+- Or using Yarn:
+```bash
+yarn dev
+```
+
+**🎉 Your development environment should now be up and running! Happy coding! 🎉**

deurdu/client/package.json → client/package.json

@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@clerk/clerk-react": "^5.22.10",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.7",
+    "dotenv": "^16.4.7",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^1.4.5",

deurdu/client/postcss.config.js → client/postcss.config.js

@@ -4,3 +4,4 @@ export default {
     autoprefixer: {},
   },
 }
+

client/src/.env

@@ -0,0 +1,3 @@
+# VITE_AUTH0_DOMAIN_ID = dev-2mlojserqc0ytr8b.us.auth0.com
+# VITE_AUTH0_CLIENT_ID = NyjTsxGX6tAxOxKL6JkjzR6hY7MKhHn4
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_c2VjdXJlLXR1cnRsZS02Mi5jbGVyay5hY2NvdW50cy5kZXYk

client/src/App.jsx

@@ -0,0 +1,35 @@
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+import Home from "./Pages/Home";
+import PostBlog from "./Pages/PostBlog";
+import SearchBlog from "./Pages/SearchBlog";
+import BlogCategoryPage from "./Pages/blogCategoryPage";
+import i18 from 'i18next';  // Ensure i18next is imported correctly
+import Login from "./Pages/Login";
+import Register from "./Pages/Register";
+import ContactUs from "./Pages/ContactUs";
+import AboutUs from "./Pages/AboutUs";
+
+function App() {
+  // Fallback route to redirect to default language 'en' if i18.language is not set
+  const language = i18.language || 'en'; // Default to 'en' if i18.language is not available
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Fallback route to redirect to default language if it's not set */}
+        <Route path="/" element={<Navigate to={`/${language}`} />} />
+
+        <Route path="/:lng" element={<Home />} />
+        <Route path="/:lng/about-us" element={<AboutUs />} />
+        <Route path="/:lng/contact-us" element={<ContactUs />} />
+        <Route path="/:lng/login" element={<Login />} />
+        <Route path="/:lng/register" element={<Register />} />
+        <Route path="/:lng/post-blog" element={<PostBlog />} />
+        <Route path="/:lng/search-blog" element={<SearchBlog />} />
+        <Route path="/:lng/blog/:category" element={<BlogCategoryPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

deurdu/client/src/Components/Cards.jsx → client/src/Components/Cards.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 const Cards = ({img,title,description}) => {
+    // https://tailwindcss.com/docs/display
     return (
         <div className='flex flex-col w-[250px] m-6 border-2 border-black text-center p-2 rounded-lg'>
             <img src={img} alt="Placeholder Image" className='p-2 bg-slate-700 rounded-lg'/>

deurdu/client/src/Components/ImagesSlidebar.jsx → client/src/Components/ImagesSlidebar.jsx

@@ -21,6 +21,7 @@ const ImagesSlidebar = () => {
   return (
     <div className="slide-container">
       <Fade>
+      {/* https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know - usage of .map() */}
         {fadeImages.map((fadeImage, index) => (
           <div key={index}>
             <img style={{ width: '100%', height: '580px', objectFit: 'cover' }} src={fadeImage.url} alt={`Slide ${index + 1}`}/>

client/src/Components/Navbar.jsx

@@ -0,0 +1,167 @@
+import React, { useState,useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import i18n from 'i18next';
+import i18 from '../i18.js';
+import { useTranslation } from 'react-i18next';
+
+const Navbar = () => {
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const { ul1, ul2, ul3, ul4, ul5 } = t('ulTranslation');
+  const { login, register, logOut } = t('logRegTranslation');
+  const { Technology, Music, Literature, Politics, Culture } = t('blogTopics');
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem('i18nextLng') || 'en';
+    i18.changeLanguage(savedLang);
+  }, []);
+
+
+  const handleLanguageChange = (lang) => {
+    const currentPath = window.location.pathname;
+    const newPath = currentPath.replace(`/${i18n.language}`, `/${lang}`);
+
+    i18n.changeLanguage(lang); // Change the language
+    localStorage.setItem('i18nextLng', lang); // Store the language
+    navigate(newPath); // Navigate to the new path
+    setDropdownVisible(false); // Hide the dropdown after changing language
+  };
+
+  return (
+    <div className="gap-[1150px]">
+      {/* First Navbar */}
+      <div className="bg-green-700">
+        <div
+          className={`flex bg-green-700 gap-[1150px] ${i18n.language === 'ur' ? 'gap-[1130px]' : 'gap-[1150px]'}
+                                                          ${i18n.language === 'de' ? 'gap-[1090px]' : 'gap-[1140px]'}`}
+        >
+          <div className="flex">
+            <Link to={`/${i18n.language}`}>
+              <h3 className="text-white text-[20px] mr-3 ml-4">DeUrdu</h3>
+            </Link>
+            <Link to={`/${i18n.language}`}>
+              <h3 className={`${i18n.language === 'ur' ? 'urdu' : ''} text-[20px] text-white mx-2`}>ڈردو</h3>
+            </Link>
+          </div>
+          <div className="flex gap-10 items-center">
+            {/* Globe button to toggle language dropdown */}
+            <button
+              className="px-2 py-0.5 m-1 rounded-lg text-white relative"
+              onClick={() => setDropdownVisible(!dropdownVisible)}
+            >
+              <FontAwesomeIcon icon={faGlobe} className="mr-1" />
+              {i18n.language}
+            </button>
+
+            {/* Language Dropdown */}
+            {dropdownVisible && (
+                <div className="absolute mt-20 bg-gray-200 rounded-md shadow-lg">
+                  {i18n.language !== 'en' && (
+                    <button
+                      className="block px-4 py-2 text-black hover:bg-gray-300"
+                      onClick={() => handleLanguageChange('en')}
+                    >
+                      English (EN)
+                    </button>
+                  )}
+                  {i18n.language !== 'de' && (
+                    <button
+                      className="block px-4 py-2 text-black hover:bg-gray-300"
+                      onClick={() => handleLanguageChange('de')}
+                    >
+                      German (De)
+                    </button>
+                  )}
+                  {i18n.language !== 'ur' && (
+                    <button
+                      className="block px-[25px] py-2 text-black hover:bg-gray-300"
+                      onClick={() => handleLanguageChange('ur')}
+                    >
+                      Urdu (UR)
+                    </button>
+                  )}
+                </div>
+              )}
+              <div className="">
+                <Link to={`/${i18n.language}/login`}>
+                  <button className="text-white text-[15px]  bg-gray-500 px-2 my-2 rounded-lg hover:bg-gray-500 transition py-2 hover:text-white">
+                    {login}
+                  </button>
+                </Link>
+              </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Second Navbar */}
+      <div className={`flex bg-gray-700 ${i18n.language === 'ur' ? 'urdu gap-[770px]' : 'gap-[880px]'}
+                 ${i18n.language === 'de' ? 'gap-[700px]' : 'gap-[880px]'}`}>
+        <div className="flex gap-10 py-2">
+          <Link to={`/${i18n.language}`}>
+            <button className="text-white text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+              {ul1}
+            </button>
+          </Link>
+          <Link to={`/${i18n.language}/about-us`}>
+            <button className="text-white text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+              {ul2}
+            </button>
+          </Link>
+          <Link to={`/${i18n.language}/contact-us`}>
+            <button className="text-white text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+              {ul3}
+            </button>
+          </Link>
+        </div>
+        <div className="flex gap-6">
+          <Link to={`/${i18n.language}/post-blog`}>
+            <button className="text-white text-[15px]  bg-gray-500 px-2 my-2 rounded-lg hover:bg-gray-500 transition py-2 hover:text-white">
+              {ul4}
+            </button>
+          </Link>
+          <Link to={`/${i18n.language}/search-blog`}>
+            <button className="text-white text-[15px]  bg-gray-500 px-2 my-2 rounded-lg hover:bg-gray-500 transition py-2 hover:text-white">
+              {ul5}
+            </button>
+          </Link>
+        </div>
+      </div>
+
+      {/* Third Navbar */}
+      <div className={`flex justify-center gap-[100px] py-2 ${i18n.language === 'ur' ? 'urdu' : ''}`}>
+        <Link to={`/${i18n.language}/blog/literature`}>
+          <button className="text-black text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+            {Literature}
+          </button>
+        </Link>
+        <Link to={`/${i18n.language}/blog/music`}>
+          <button className="text-black text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+            {Music}
+          </button>
+        </Link>
+        <Link to={`/${i18n.language}/blog/politics`}>
+          <button className="text-black text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+            {Politics}
+          </button>
+        </Link>
+        <Link to={`/${i18n.language}/blog/culture`}>
+          <button className="text-black text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+            {Culture}
+          </button>
+        </Link>
+        <Link to={`/${i18n.language}/blog/technology`}>
+          <button className="text-black text-[15px] font-medium ml-4 hover:bg-gray-500 transition px-3 py-1 rounded-lg hover:text-white">
+            {Technology}
+          </button>
+        </Link>
+      </div>
+      <hr className="bg-gray-200 h-1" />
+    </div>
+  );
+};
+
+export default Navbar;

client/src/Pages/AboutUs.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Navbar from '../Components/Navbar'
+
+const AboutUs = () => {
+  return (
+    <div>
+        <Navbar/>
+        AboutUs
+    </div>
+  )
+}
+
+export default AboutUs

client/src/Pages/ContactUs.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Navbar from '../Components/Navbar'
+
+const ContactUs = () => {
+  return (
+    <div>
+        <Navbar/>
+        ContactUs
+    </div>
+  )
+}
+
+export default ContactUs