Merge pull request #1423 from Avinash905/avinash905-lighthouse

fix: improved lighthouse score

extenstion/index.html

@@ -11,7 +11,7 @@
     <header>
         <a href="https://free-hit.vercel.app/">
         <span class="name">
-            <img src="logo.png" id="logo" alt="">        
+            <img src="logo.webp" id="logo" alt="">        
         </span>
         </a>
 
@@ -31,7 +31,7 @@
     <main>
         <section class="wrapper" id="main-section-wrapper">
             <div class="form">
-                <input type="text" class="input" placeholder="Search by type or name">
+                <input type="text" class="input" placeholder="Search by type or name" name="search" id="search">
             </div>
             <div class="middle-section">
                 <div class="results scrollable">

extenstion/script.js

@@ -11,7 +11,6 @@ function result(productName,category,image,link,description){
     let ele = document.createElement('article')
     ele.classList.add('result')
     ele.addEventListener('click',(e)=>{
-        console.log(e)
         if(ele.classList.contains('expand')){
             ele.classList.remove('expand')
         }else{  
@@ -72,8 +71,9 @@ function filterByCategory(e){
 async function fetchWebsites(results, categoryList) {
     try{
         var websites;
-        const response = await fetch('DB/product.json')
+        const response = await fetch('DB/product.json', {credentials: 'omit'})
         const data = await response.json()
+
         const categories = new Set()
             data.forEach(element => {
               categories.add(element.category);
@@ -85,8 +85,7 @@ async function fetchWebsites(results, categoryList) {
             websites = data
           return websites    
     }catch(err){
-        // if(err.)
-        console.log(err)
+        console.error(err)
     }
 }
 
@@ -109,7 +108,6 @@ function handleChange(e,websites){
 }
 
 function showCategories(e,categoryList){
-    console.log(e)
     if(categoryList.classList.contains('active')){
         document.querySelector('body').classList.remove('expand')
         categoryList.classList.remove('active')

public/sitemap.xml

@@ -4,4 +4,12 @@
 <loc>https://free-hit.vercel.app/</loc>
 <lastmod>2023-06-19T17:32:49+00:00</lastmod>
 </url>
+<url>
+<loc>https://free-hit.vercel.app/bookmarks</loc>
+<lastmod>2023-06-19T17:32:49+00:00</lastmod>
+</url>
+<url>
+<loc>https://free-hit.vercel.app/about</loc>
+<lastmod>2023-06-19T17:32:49+00:00</lastmod>
+</url>
 </urlset>

src/components/BackToTop.jsx

@@ -21,7 +21,7 @@ const BackToTopButton = () => {
   }, [])
 
   return (
-    <Link onClick={handleScroll} to="Top" smooth duration={500} className={`top ${darkMode ? 'dark-mode' : ''}`}>
+    <Link onClick={handleScroll} to="Top" smooth duration={500} className={`top ${darkMode ? 'dark-mode' : ''}`}href='#' aria-label='Go to top of website'>
         <div
           className={` ${
             !btnVisiblity ? 'transition-before' : 'transition-after'

src/components/Button.jsx

@@ -1,21 +1,16 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
-import { ToolContext } from '../App'
 
 const Button = ({ button: { category, name, icon }, filterProduct }) => {
-  const { setIsMenuActive } = useContext(ToolContext)
   return (
     <li>
       <Link
         onClick={() => {
           filterProduct(category)
-          // setIsMenuActive(false)
         }}
       >
-        {/* <a onClick={() => filterProduct(category)}> */}
         <i className={icon}></i>
         {name}
-        {/* </a> */}
       </Link>
     </li>
   )

src/components/Card/GridView.jsx

@@ -40,22 +40,24 @@ const GridView = ({ currentProducts }) => {
         <article key={index}>
           <div className="text_top">
             {product.image ? (
-              <img
-                className={`card-image ${darkMode ? 'dark-mode' : ''}`}
+              <div className='card-image'>
+                <img
+                className={`${darkMode ? 'dark-mode' : ''}`}
                 src={product.image}
                 alt="product-img"
                 onError={(e) => {
                   e.target.src = 'https://i.ibb.co/9H0s34n/default-img.jpg';
                 }}
               />
+              </div>
             ) : (
               <img
                 className={`card-image ${darkMode ? 'dark-mode' : ''}`}
                 src="https://i.ibb.co/9H0s34n/default-img.jpg"
                 alt="Default"
               />
             )}
-            <h3 className={`card-title ${darkMode ? 'dark-mode' : ''}`}>{product.productName.charAt(0).toUpperCase() + product.productName.slice(1,)}</h3>
+            <h2 className={`card-title ${darkMode ? 'dark-mode' : ''}`}>{product.productName.charAt(0).toUpperCase() + product.productName.slice(1,)}</h2>
 
             {/* Share icon and implement the click event */}
             <button
@@ -85,12 +87,9 @@ const GridView = ({ currentProducts }) => {
                 deleteres(product);
               }}
               >
-                <a>
                   Delete<i className={`ri-bookmark-fill ${darkMode ? 'dark-mode' : ''}`}></i>
-                </a>
               </button>
             ) : (
-              <a>
                 <button
                   className={`bookmark ${darkMode ? 'dark-mode' : ''}`}
                   onClick={() => handelBookmarkAdd(product)}
@@ -99,7 +98,6 @@ const GridView = ({ currentProducts }) => {
                     Bookmark
                   </font>
                 </button>
-              </a>
             )}
           </div>
         </article>

src/components/Card/ListView.jsx

@@ -47,14 +47,16 @@ const ListView = ({ currentProducts }) => {
           <AccordionButton>
             <Box padding={1} py="3px" flex="1" className="image">
               {product.image ? (
-                <img
-                  className={`card-img ${darkMode ? 'dark-mode' : ''}`}
+                <div className='card-img'>
+                  <img
+                  className={`${darkMode ? 'dark-mode' : ''}`}
                   src={product.image}
                   alt="product-img"
                   onError={(e) => {
                     e.target.src = 'https://i.ibb.co/9H0s34n/default-img.jpg';
                   }}
                 />
+                </div>
               ) : (
                 <img
                   className={`card-img ${darkMode ? 'dark-mode' : ''}`}
@@ -63,7 +65,7 @@ const ListView = ({ currentProducts }) => {
                 />
               )}
               <div className="accordion_btn">
-                <h3 className={`card-title ${darkMode ? 'dark-mode' : ''}`}>
+                <h2 className={`card-title ${darkMode ? 'dark-mode' : ''}`}>
                   {product.productName.charAt(0).toUpperCase() + product.productName.slice(1,)}
                   <button
                   className={`share-icon`}
@@ -74,7 +76,7 @@ const ListView = ({ currentProducts }) => {
                     style={{ color: darkMode ? 'white' : '' , marginLeft:'10px', fontSize:'18px'}}
                   ></i>
                 </button>
-                </h3>
+                </h2>
 
                 <div className="btn-cont">
                   <a target="_blank" href={product.link}>

src/components/Footer.jsx

@@ -1,4 +1,4 @@
-import freehitlogo from '../assets/footer-logo.png'
+import freehitlogo from '../assets/footer-logo.webp'
 import "../styles/Footer.css"
 const Footer = () => {
   // gettin year dynamically
@@ -8,7 +8,7 @@ const Footer = () => {
     <footer>
       <div className="footer-content">
         <h3>
-          <a class="" href="/about">
+          <a className="" href="/about">
           <img className="free-logo-footer" src={freehitlogo} alt="logo" />
             </a>
         </h3>

src/components/Navbar.jsx

@@ -1,14 +1,14 @@
 import React, {useEffect, useRef } from 'react'
 import { FaSearch } from 'react-icons/fa'
-import freehitlogo from '../assets/logo.png'
-import freehitlogodark from '../assets/darkmode-logo.png'
+import freehitlogo from '../assets/logo.webp'
+import freehitlogodark from '../assets/darkmode-logo.webp'
 import { useLocation } from 'react-router-dom'
 import { NavLink, useSearchParams } from "react-router-dom"
 import "../styles/header.css"
 import Sidebar from './Sidebar'
 import { ToolContext } from '../App';
 import { useContext } from 'react';
-import mobilelogo from '../assets/mobileview.png'
+import mobilelogo from '../assets/mobileview.webp'
 import { useState } from 'react'
 
 
@@ -62,14 +62,14 @@ const Header = ({ filteredSuggestions }) => {
       <div className={`nav-container ${darkMode ? 'dark-mode' : ''}`} ref={sideNavRef}>
         <Sidebar />
         <h1 className={`Free-Hit ${darkMode ? 'dark-mode' : ''}`}>
-          <NavLink to="/about" className='nav-link'>
+          <NavLink to="/about" className='nav-link' aria-label='Go to about page'>
           <img
             className={`free-logo ${darkMode ? 'dark-mode' : ''}`}
             src={darkMode ? freehitlogodark : freehitlogo}
             alt="logo"
           />
           </NavLink>
-          <NavLink to="/about" className='nav-link'>
+          <NavLink to="/about" className='nav-link' aria-label='Go to about page'>
           <img
             className={`mobile-logo ${darkMode ? 'dark-mode' : ''}`}
             src={darkMode ? mobilelogo : mobilelogo}
@@ -87,6 +87,7 @@ const Header = ({ filteredSuggestions }) => {
               placeholder="Search..."
               value={search}
               onChange={(e) => handleChangeInInput(e)}
+              id="search"
             />
             <div className="btn btn_common">
               <i className="fas fa-search">

src/pages/Bookmarks.jsx

@@ -15,7 +15,7 @@ import { useState } from 'react'
 
 const BookMarks = () => {
   const [gridView, setGridView] = useState(true)
-  const { bookmarks, deleteres } =
+  const { bookmarks } =
     useContext(ToolContext);
 
   const [searchParams] = useSearchParams()

src/pages/Home.jsx

@@ -5,7 +5,6 @@ import noresultimg from '../assets/sad-face-2.webp'
 import GridView from '../components/Card/GridView'
 import ListView from '../components/Card/ListView'
 import { BsFillGridFill, BsListUl } from 'react-icons/bs'
-import { RiMoonClearFill, RiSunFill } from 'react-icons/ri' // Import the icons for dark mode toggle
 import '../styles/Home.css'
 import { useSearchParams, Navigate } from 'react-router-dom'
 import checkFilter from "..//utils/check_filters"

src/styles/Home.css

@@ -76,9 +76,16 @@ body {
   transform: scale(1.02);
 }
 
-img {
+.card-image {
   width: 40px;
   height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-image img{
+  width: 100%;
   border-radius: 10px;
 }
 
@@ -136,6 +143,8 @@ img {
   margin: 2px;
   transition: all 0.3s ease;
   color: var(--primary-white);
+  display: flex;
+  justify-content: center;
 }
 
 .btn-cont button a {

src/styles/ListView.css

@@ -39,6 +39,14 @@
   width: 80px;
   height: 80px;
   object-fit: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.list .image .card-img img{
+  width: 100%;
+  border-radius: 10px;
 }
 
 .list .accordion_btn {

src/styles/header.css

@@ -375,7 +375,7 @@ nav {
 .Free-Hit {
   font-weight: lighters;
   height: 100%;
-  margin-top: 4px;
+  margin-top: 10px;
 }
 
 .nav-link{
@@ -385,8 +385,8 @@ nav {
 }
 
 .free-logo {
-  width: 220px;
-  height: 55px;
+  width: 210px;
+  height: 58px;
   margin-right: 10px;
   margin-top: 4px;
 }
@@ -400,17 +400,23 @@ nav {
       display: none;
     }
     .mobile-logo{
-      margin-top: 8px;
+      margin-top: 3px;
       display: flex;
       width: 46px;
       height: 46px;
+      border-radius: 10px;
     }
     .mobile-logo.dark-mode{
       border: 2px solid white;
     }
     .Free-hit{
-      size: 100px
-    }   
+      size: 100px;
+    }
+
+}
+
+.free-logo.dark-mode{
+  /* :white; */
 }
 
 /* ================================  Free-Hit logo end*/
@@ -460,7 +466,7 @@ nav {
     left: -27px;
     width: 40px;
     height: 40px;
-    top: 5px;
+    top: 2px;
   }
 }
 

src/styles/index.css

@@ -504,7 +504,7 @@ body {
   }
 
   .mobile-logo{
-    margin-top: 13px;
+    margin-top: 8px;
     display: flex;
     width: 42px;
     height: 42px;

src/utils/check_filters.js

@@ -1,4 +1,3 @@
-import { redirect } from 'react-router-dom'
 import { allFilters } from './data/filters'
 export default function checkFilter(filters) {
   for (let i = 0; i < filters.length; i++) {