changes done

PatilHarshh · Jun 15, 2024 · 203d62e · 203d62e
1 parent abea8e7
commit 203d62e
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 331 deletions.
diff --git a/client/dist/assets/index-1f76e8ca.js b/client/dist/assets/index-1f76e8ca.js
diff --git a/client/dist/assets/index-e457c287.js b/client/dist/assets/index-e457c287.js
diff --git a/client/dist/assets/vendor-9d70f441.js b/client/dist/assets/vendor-9d70f441.js
diff --git a/client/dist/assets/vendor-f3dfeca2.js b/client/dist/assets/vendor-f3dfeca2.js
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -6,8 +6,8 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Job Finder | Find Dream Job</title>
-  <script type="module" crossorigin src="/assets/index-e457c287.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-f3dfeca2.js">
+  <script type="module" crossorigin src="/assets/index-1f76e8ca.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-9d70f441.js">
   <link rel="stylesheet" href="/assets/index-4d8c9364.css">
 </head>
 

diff --git a/client/src/pages/blogs.jsx b/client/src/pages/blogs.jsx
@@ -1,78 +1,50 @@
 import React, { useState, useEffect } from 'react';
-import Slider from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
 
-const NextArrow = (props) => {
-  const { className, style, onClick } = props;
-  return (
-    <div
-      className={className}
-      style={{ ...style, display: 'block', background: '#0073e6', borderRadius: '50%', right: '10px', zIndex: 1 }}
-      onClick={onClick}
-    />
-  );
-};
-
-const PrevArrow = (props) => {
-  const { className, style, onClick } = props;
-  return (
-    <div
-      className={className}
-      style={{ ...style, display: 'block', background: '#0073e6', borderRadius: '50%', left: '10px', zIndex: 1 }}
-      onClick={onClick}
-    />
-  );
-};
-
-const Carousel = () => {
+const BlogGrid = () => {
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
     const apiKey = 'z3qu6zgemnbowzv8sp5fg3evuytv3daigetaomul'; // Replace with your actual API key
-  
+
     fetch(`https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/tag/jobs&api_key=${apiKey}`, {
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
         // Add other headers if required by the API
-      }
+      },
     })
-      .then(response => {
+      .then((response) => {
         if (!response.ok) {
           throw new Error('Network response was not ok');
         }
         return response.json();
       })
-      .then(data => {
+      .then((data) => {
         setPosts(data.items);
         setLoading(false);
       })
-      .catch(error => {
+      .catch((error) => {
         setError(error);
         setLoading(false);
       });
   }, []);
-
 
-  const settings = {
-    dots: true,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 3,
-    slidesToScroll: 1,
-    nextArrow: <NextArrow />,
-    prevArrow: <PrevArrow />,
+  const gridContainerStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+    gap: '20px',
+    padding: '20px',
   };
 
-  const slideStyle = {
+  const gridItemStyle = {
     padding: '10px',
     textAlign: 'center',
-    width: '250px', // Reduced width
-    height: '350px', // Reduced height
+    width: '100%', // Adjust to fit within the grid
     boxSizing: 'border-box',
-    margin: '0 auto', // Centering the slide content
+    border: '1px solid #ddd',
+    borderRadius: '5px',
+    backgroundColor: '#f9f9f9',
   };
 
   const imageStyle = {
@@ -82,12 +54,12 @@ const Carousel = () => {
   };
 
   const titleStyle = {
-    fontSize: '1.2em', // Reduced font size
+    fontSize: '1.2em',
     marginBottom: '10px',
   };
 
   const paragraphStyle = {
-    fontSize: '0.9em', // Reduced font size
+    fontSize: '0.9em',
     marginBottom: '10px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -99,7 +71,7 @@ const Carousel = () => {
   const linkStyle = {
     display: 'inline-block',
     marginTop: '10px',
-    padding: '8px 16px', // Reduced padding
+    padding: '8px 16px',
     backgroundColor: '#0073e6',
     color: 'white',
     textDecoration: 'none',
@@ -114,27 +86,27 @@ const Carousel = () => {
   if (error) return <div>Error fetching data: {error.message}</div>;
 
   return (
-    <Slider {...settings}>
-      {posts.map(post => (
-        <div key={post.guid} style={slideStyle}>
+    <div style={gridContainerStyle}>
+      {posts.map((post) => (
+        <div key={post.guid} style={gridItemStyle}>
           {post.thumbnail && <img src={post.thumbnail} alt={post.title} style={imageStyle} />}
           <h2 style={titleStyle}>{post.title}</h2>
           <p style={paragraphStyle}>{new Date(post.pubDate).toLocaleDateString()}</p>
           <p style={paragraphStyle} dangerouslySetInnerHTML={{ __html: post.description }}></p>
-          <a 
-            href={post.link} 
-            target="_blank" 
-            rel="noopener noreferrer" 
+          <a
+            href={post.link}
+            target="_blank"
+            rel="noopener noreferrer"
             style={linkStyle}
-            onMouseOver={e => e.currentTarget.style.backgroundColor = linkHoverStyle.backgroundColor}
-            onMouseOut={e => e.currentTarget.style.backgroundColor = linkStyle.backgroundColor}
+            onMouseOver={(e) => (e.currentTarget.style.backgroundColor = linkHoverStyle.backgroundColor)}
+            onMouseOut={(e) => (e.currentTarget.style.backgroundColor = linkStyle.backgroundColor)}
           >
             Read More
           </a>
         </div>
       ))}
-    </Slider>
+    </div>
   );
 };
 
-export default Carousel;
+export default BlogGrid;
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -4,30 +4,26 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [
     react(),
+    // Add other plugins as needed
   ],
   build: {
-    chunkSizeWarningLimit: 1000,
+    chunkSizeWarningLimit: 1000, // Increase chunk size warning limit to 1000 kB
     rollupOptions: {
-      external: [
-        'slick-carousel/slick/slick.css',
-        'slick-carousel/slick/slick-theme.css'
-      ],
       output: {
         manualChunks(id) {
           if (id.includes('node_modules')) {
+            // Group dependencies from node_modules into a vendor chunk
             return 'vendor';
           }
+          // Further split large dependencies into separate chunks if needed
+          if (id.includes('react')) {
+            return 'react';
+          }
+          if (id.includes('lodash')) {
+            return 'lodash';
+          }
         }
       }
     }
-  },
-  server: {
-    fs: {
-      allow: [
-        '..', // Allow serving files from the parent directory
-        './', // Allow serving files from the current directory
-        'node_modules/slick-carousel/slick' // Allow serving files from slick-carousel's directory
-      ]
-    }
   }
 });