feat: added compressr information, dependency upgrades

Author: CodeDead

package.json

@@ -17,10 +17,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.17",
-    "axios": "^1.6.8",
-    "gatsby": "^5.13.4",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
+    "axios": "^1.7.2",
+    "gatsby": "^5.13.5",
     "gatsby-plugin-catch-links": "^5.13.1",
     "gatsby-plugin-google-gtag": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
@@ -38,7 +38,7 @@
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "eslint": "^9.2.0",
+    "eslint": "^9.3.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",

src/components/Application/index.jsx

@@ -9,12 +9,16 @@ import CardHeader from '@mui/material/CardHeader';
 import { GatsbyImage } from 'gatsby-plugin-image';
 
 const Application = ({
-  name, description, url, image,
+  name, description, url, image, newTab,
 }) => {
   /**
    * Go to the designated URL
    */
   const goToUrl = () => {
+    if (newTab) {
+      window.open(url, '_blank');
+      return;
+    }
     navigate(url);
   };
 

src/images/Compressr/compressr.png

@@ -71,7 +71,12 @@ const Software = () => {
       childImageSharp {
         gatsbyImageData(layout: CONSTRAINED, height: 160)
       }
-    }
+    },
+    compressr: file(relativePath: { eq: "Compressr/compressr.png" }) {
+      childImageSharp {
+        gatsbyImageData(layout: CONSTRAINED, height: 160)
+      }
+    } 
   }`);
 
   const applications = [{
@@ -134,7 +139,14 @@ const Software = () => {
     description: 'Opal is a free and open source music player that will help you relax. It runs on Windows and Linux.',
     tags: ['Opal', 'music', 'relax', 'sound', 'relaxation', 'relaxing', 'linux'],
     image: imageData.opal.childImageSharp.gatsbyImageData,
-  }];
+  },
+    {
+      name: 'Compressr',
+      url: 'https://compressr.codedead.com/',
+      description: 'Compressr is a free and open source bulk image compressor / compression tool that you can use in the browser ',
+      tags: ['image', 'compression', 'compress', 'bulk', 'art', 'pixel', 'lossless', 'lossy'],
+      image: imageData.compressr.childImageSharp.gatsbyImageData,
+    }];
 
   useEffect(() => {
     dispatch(setPageIndex(1));
@@ -144,7 +156,8 @@ const Software = () => {
   if (searchValue && searchValue.length > 0) {
     searchResult = applications.filter((application) => {
       for (let i = 0; i < application.tags.length; i += 1) {
-        if (application.tags[i].toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) {
+        if (application.tags[i].toLowerCase()
+          .indexOf(searchValue.toLowerCase()) !== -1) {
           return true;
         }
       }
@@ -164,7 +177,7 @@ const Software = () => {
 
   return (
     <Layout>
-      <PageHeader title="Software" subTitle="Our work" />
+      <PageHeader title="Software" subTitle="Our work"/>
       <Container maxWidth="xl" style={{ marginTop: 10 }}>
         <Grid container spacing={2}>
           <Grid item xs={12} md={12} lg={12}>
@@ -188,12 +201,12 @@ const Software = () => {
               <>
                 <Grid item xs={12} md={12} lg={12}>
                   <Typography variant="h5" color="textPrimary">
-                    <SecurityIcon color="inherit" />
+                    <SecurityIcon color="inherit"/>
                     {' Security'}
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={12} lg={12}>
-                  <Divider />
+                  <Divider/>
                 </Grid>
               </>
             )}
@@ -256,12 +269,12 @@ const Software = () => {
             <Grid container spacing={2} style={{ marginTop: 20 }}>
               <Grid item xs={12} md={12} lg={12}>
                 <Typography variant="h5" color="textPrimary">
-                  <ComputerIcon color="inherit" />
+                  <ComputerIcon color="inherit"/>
                   {' System'}
                 </Typography>
               </Grid>
               <Grid item xs={12} md={12} lg={12}>
-                <Divider />
+                <Divider/>
               </Grid>
             </Grid>
           )}
@@ -306,12 +319,12 @@ const Software = () => {
               <Grid container spacing={2} style={{ marginTop: 20 }}>
                 <Grid item xs={12} md={12} lg={12}>
                   <Typography variant="h5" color="textPrimary">
-                    <AppsIcon color="inherit" />
+                    <AppsIcon color="inherit"/>
                     {' Utilities'}
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={12} lg={12}>
-                  <Divider />
+                  <Divider/>
                 </Grid>
               </Grid>
 
@@ -348,6 +361,15 @@ const Software = () => {
                     image={applications.filter((item) => item.name === 'EGLD Price Calculator')[0].image}
                   />
                 </Grid>
+                <Grid item xs={12} md={3} lg={4}>
+                  <Application
+                    name={applications.filter((item) => item.name === 'Compressr')[0].name}
+                    description={applications.filter((item) => item.name === 'Compressr')[0].description}
+                    url={applications.filter((item) => item.name === 'Compressr')[0].url}
+                    image={applications.filter((item) => item.name === 'Compressr')[0].image}
+                    newTab={true}
+                  />
+                </Grid>
               </Grid>
             </>
           )}