chore: use fallback images for mod and games if provided image gives error

.env.example

@@ -6,3 +6,9 @@ VITE_ADMIN_NPUBS= <A comma separated list of npubs>
 
 # A dedicated npub used for reporting mods, blogs, profile and etc.
 VITE_REPORTING_NPUB= <npub1...>
+
+# if there's no featured image, or if the image breaks somewhere down the line, then it should default to this image
+VITE_FALLBACK_MOD_IMAGE=https://image.nostr.build/1fa7afd3489302c2da8957993ac0fd6c4308eedd4b1b95b24ecfabe3651b2183.png
+
+# if there's no image, or if the image breaks somewhere down the line, then it should default to this image
+VITE_FALLBACK_GAME_IMAGE=https://image.nostr.build/1fa7afd3489302c2da8957993ac0fd6c4308eedd4b1b95b24ecfabe3651b2183.png

.gitea/workflows/release-production.yaml

@@ -25,6 +25,8 @@ jobs:
           echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
           echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
           echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env
+          echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
+          echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
           cat .env
 
       - name: Create Build

.gitea/workflows/release-staging.yaml

@@ -25,6 +25,8 @@ jobs:
           echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
           echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
           echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env
+          echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
+          echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
           cat .env
 
       - name: Create Build

src/components/GameCard.tsx

@@ -1,20 +1,21 @@
 import '../styles/cardGames.css'
+import { handleGameImageError } from '../utils'
 
 type GameCardProps = {
-  backgroundLink: string
+  title: string
+  imageUrl: string
 }
 
-export const GameCard = ({ backgroundLink }: GameCardProps) => {
+export const GameCard = ({ title, imageUrl }: GameCardProps) => {
   return (
     <a className='cardGameMainWrapperLink' href='search.html'>
-      <div
+      <img
+        src={imageUrl}
+        onError={handleGameImageError}
         className='cardGameMain'
-        style={{
+      />
-          background: `url("${backgroundLink}") center / cover no-repeat`
-        }}
-      ></div>
       <div className='cardGameMainTitle'>
-        <p>This is a game title, the best game title</p>
+        <p>{title}</p>
       </div>
     </a>
   )

src/components/ModCard.tsx

@@ -1,9 +1,10 @@
 import '../styles/cardMod.css'
+import { handleModImageError } from '../utils'
 
 type ModCardProps = {
   title: string
   summary: string
-  backgroundLink: string
+  imageUrl: string
   link: string
   handleClick: () => void
 }
@@ -11,7 +12,7 @@ type ModCardProps = {
 export const ModCard = ({
   title,
   summary,
-  backgroundLink,
+  imageUrl,
   link,
   handleClick
 }: ModCardProps) => {
@@ -25,12 +26,11 @@ export const ModCard = ({
       }}
     >
       <div className='cardModMain'>
-        <div
+        <img
+          src={imageUrl}
+          onError={handleModImageError}
           className='cMMPicture'
-          style={{
+        />
-            background: `url("${backgroundLink}") center / cover no-repeat`
-          }}
-        ></div>
         <div className='cMMBody'>
           <h3 className='cMMBodyTitle'>{title}</h3>
           <p className='cMMBodyText'>{summary}</p>

src/styles/SimpleSlider.css

@@ -22,12 +22,18 @@
   }
 }
 
-.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
+.simple-slider .swiper-button-next,
+.simple-slider .swiper-button-prev {
   width: 50px;
   margin-left: 00px;
   margin-right: 00px;
   color: rgba(255, 255, 255, 0.5);
-  background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
+  background: linear-gradient(
+      rgba(255, 255, 255, 0.05),
+      rgba(255, 255, 255, 0.05)
+    ),
+    linear-gradient(to top right, #262626, #292929, #262626),
+    linear-gradient(to top right, #262626, #292929, #262626);
   padding: 10px;
   height: 75px;
   border-radius: 10px;
@@ -39,16 +45,24 @@
   margin-top: -35px;
 }
 
-.simple-slider .swiper-button-next:hover, .simple-slider .swiper-button-prev:hover {
+.simple-slider .swiper-button-next:hover,
-  background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
+.simple-slider .swiper-button-prev:hover {
+  background: linear-gradient(
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.1)
+    ),
+    linear-gradient(to top right, #262626, #292929, #262626),
+    linear-gradient(to top right, #262626, #292929, #262626);
 }
 
-.swiper-button-next:after, .swiper-button-prev:after {
+.swiper-button-next:after,
+.swiper-button-prev:after {
   font-size: 18px;
 }
 
 @media (max-width: 992px) {
-  .simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
+  .simple-slider .swiper-button-next,
+  .simple-slider .swiper-button-prev {
     bottom: 0;
     top: unset;
     width: 48%;
@@ -115,7 +129,12 @@
   bottom: 0;
   right: 0;
   left: 0;
-  background: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
+  background: linear-gradient(
+      rgba(255, 255, 255, 0.15),
+      rgba(255, 255, 255, 0.15)
+    ),
+    linear-gradient(to top right, #262626, #292929, #262626),
+    linear-gradient(to top right, #262626, #292929, #262626);
   z-index: -1;
   border-radius: 10px;
 }
@@ -129,12 +148,15 @@
   opacity: 1;
 }
 
-.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
+.swiper-container-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-custom,
+.swiper-pagination-fraction {
   width: 100%;
   bottom: 0;
 }
 
-.swiper-button-next, .swiper-button-prev {
+.swiper-button-next,
+.swiper-button-prev {
   position: absolute;
 }
 
@@ -175,9 +197,10 @@
   border-radius: 10px;
   overflow: hidden;
   border: solid 1px rgba(255, 255, 255, 0.05);
-  padding-top: 50%;
   z-index: 1;
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
+  width: 100%;
+  object-fit: cover; /* Ensures the image covers the container like a background image */
 }
 
 .IBMSMSCWSInfo {
@@ -187,7 +210,13 @@
   justify-content: center;
   padding: 25px;
   border-radius: 10px;
-  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), linear-gradient(to top right, rgb(38,38,38), rgb(41,41,41), rgb(38,38,38));
+  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
+    linear-gradient(
+      to top right,
+      rgb(38, 38, 38),
+      rgb(41, 41, 41),
+      rgb(38, 38, 38)
+    );
   box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
   border: solid 1px rgba(255, 255, 255, 0.05);
 }
@@ -254,4 +283,3 @@
 .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background: rgba(128, 0, 255, 0.5);
 }
-

src/styles/cardGames.css

@@ -18,10 +18,10 @@
 }
 
 .cardGameMain {
-  padding-top: 150%;
   border-radius: 15px;
-  background: rgba(255,255,255,0.05);
   box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
+  width: 100%;
+  object-fit: cover; /* Ensures the image covers the container like a background image */
 }
 
 .cardGameMainTitle {
@@ -36,4 +36,3 @@
   font-size: 18px;
   line-height: 1.5;
 }
-

src/styles/cardMod.css

@@ -12,8 +12,8 @@
 .cMMPicture {
   position: relative;
   width: 100%;
-  padding-top: 56.25%;
+  width: 100%;
-  background: rgba(0, 0, 0, 0.1);
+  object-fit: cover; /* Ensures the image covers the container like a background image */
 }
 
 .cMMBody {

src/utils/utils.ts

@@ -123,3 +123,15 @@ export const abbreviateNumber = (value: number): string => {
     return value.toString()
   }
 }
+
+export const handleGameImageError = (
+  e: React.SyntheticEvent<HTMLImageElement, Event>
+) => {
+  e.currentTarget.src = import.meta.env.VITE_FALLBACK_GAME_IMAGE
+}
+
+export const handleModImageError = (
+  e: React.SyntheticEvent<HTMLImageElement, Event>
+) => {
+  e.currentTarget.src = import.meta.env.VITE_FALLBACK_MOD_IMAGE
+}

src/vite-env.d.ts

@@ -4,6 +4,8 @@ interface ImportMetaEnv {
   readonly VITE_APP_RELAY: string
   readonly VITE_ADMIN_NPUBS: string
   readonly VITE_REPORTING_NPUB: string
+  readonly VITE_FALLBACK_MOD_IMAGE: string
+  readonly VITE_FALLBACK_GAME_IMAGE: string
   // more env variables...
 }