From 0733849b25b78d92ddb771bb529ee604f4c1c931 Mon Sep 17 00:00:00 2001 From: daniyal Date: Mon, 2 Sep 2024 13:43:39 +0500 Subject: [PATCH] chore: use fallback images for mod and games if provided image gives error --- .env.example | 8 ++- .gitea/workflows/release-production.yaml | 2 + .gitea/workflows/release-staging.yaml | 2 + src/components/GameCard.tsx | 17 ++--- src/components/ModCard.tsx | 14 ++-- src/styles/SimpleSlider.css | 82 ++++++++++++++++-------- src/styles/cardGames.css | 9 ++- src/styles/cardMod.css | 4 +- src/utils/utils.ts | 12 ++++ src/vite-env.d.ts | 2 + 10 files changed, 102 insertions(+), 50 deletions(-) diff --git a/.env.example b/.env.example index 6404610..e6b55e6 100644 --- a/.env.example +++ b/.env.example @@ -5,4 +5,10 @@ VITE_APP_RELAY=wss://relay.degmods.com VITE_ADMIN_NPUBS= # A dedicated npub used for reporting mods, blogs, profile and etc. -VITE_REPORTING_NPUB= \ No newline at end of file +VITE_REPORTING_NPUB= + +# 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 \ No newline at end of file diff --git a/.gitea/workflows/release-production.yaml b/.gitea/workflows/release-production.yaml index 1415a50..88cffa7 100644 --- a/.gitea/workflows/release-production.yaml +++ b/.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 diff --git a/.gitea/workflows/release-staging.yaml b/.gitea/workflows/release-staging.yaml index c08b4e8..10e4bc4 100644 --- a/.gitea/workflows/release-staging.yaml +++ b/.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 diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx index 9cd2c03..425d3b9 100644 --- a/src/components/GameCard.tsx +++ b/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 ( -
+ />
-

This is a game title, the best game title

+

{title}

 ) diff --git a/src/components/ModCard.tsx b/src/components/ModCard.tsx index a47c927..398f04c 100644 --- a/src/components/ModCard.tsx +++ b/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 = ({ }} >
-
+ />

{title}

{summary}

diff --git a/src/styles/SimpleSlider.css b/src/styles/SimpleSlider.css index 9ea9e1a..1188b20 100644 --- a/src/styles/SimpleSlider.css +++ b/src/styles/SimpleSlider.css @@ -1,6 +1,6 @@ .swiper-pagination-bullet-active { - background: rgba(255,255,255,0.5); - box-shadow: 0 0 4px 0 rgba(0,0,0,0.5); + background: rgba(255, 255, 255, 0.5); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); } .simple-slider .swiper-slide { @@ -22,16 +22,22 @@ } } -.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); + 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); padding: 10px; height: 75px; border-radius: 10px; - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; @@ -39,16 +45,24 @@ margin-top: -35px; } -.simple-slider .swiper-button-next:hover, .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); +.simple-slider .swiper-button-next:hover, +.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 { +@media (max-width: 992px) { + .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; } @@ -161,23 +183,24 @@ .SliderWrapper { width: 100%; padding: 50px 0; - background: rgba(0,0,0,0.1); + background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -25px 0 0 0; - border-bottom: solid 1px rgba(255,255,255,0.05); + border-bottom: solid 1px rgba(255, 255, 255, 0.05); } .IBMSMSCWSPic { border-radius: 10px; overflow: hidden; - border: solid 1px rgba(255,255,255,0.05); - padding-top: 50%; + border: solid 1px rgba(255, 255, 255, 0.05); z-index: 1; - box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); + 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,9 +210,15 @@ 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)); - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); - border: solid 1px rgba(255,255,255,0.05); + 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); } @media (max-width: 768px) { @@ -212,7 +241,7 @@ -webkit-line-clamp: 2; font-size: 20px; line-height: 1.25; - color: rgba(255,255,255,0.75); + color: rgba(255, 255, 255, 0.75); font-weight: bold; } @@ -221,7 +250,7 @@ -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8; - color: rgba(255,255,255,0.5); + color: rgba(255, 255, 255, 0.5); font-size: 15px; line-height: 1.5; flex-grow: 1; @@ -244,7 +273,7 @@ } .swiper-pagination-bullet { - background: rgba(0,0,0,0.5); + background: rgba(0, 0, 0, 0.5); opacity: 1; width: 12px; height: 12px; @@ -252,6 +281,5 @@ } .swiper-pagination-bullet.swiper-pagination-bullet-active { - background: rgba(128,0,255,0.5); + background: rgba(128, 0, 255, 0.5); } - diff --git a/src/styles/cardGames.css b/src/styles/cardGames.css index 4aee260..b4028e4 100644 --- a/src/styles/cardGames.css +++ b/src/styles/cardGames.css @@ -18,15 +18,15 @@ } .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); + 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 { transition: ease 0.4s; - color: rgba(255,255,255,0.5); + color: rgba(255, 255, 255, 0.5); padding: 0 15px; font-weight: bold; display: -webkit-box; @@ -36,4 +36,3 @@ font-size: 18px; line-height: 1.5; } - diff --git a/src/styles/cardMod.css b/src/styles/cardMod.css index ec7b3ae..7499467 100644 --- a/src/styles/cardMod.css +++ b/src/styles/cardMod.css @@ -12,8 +12,8 @@ .cMMPicture { position: relative; width: 100%; - padding-top: 56.25%; - background: rgba(0, 0, 0, 0.1); + width: 100%; + object-fit: cover; /* Ensures the image covers the container like a background image */ } .cMMBody { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 85dabeb..b321c91 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -123,3 +123,15 @@ export const abbreviateNumber = (value: number): string => { return value.toString() } } + +export const handleGameImageError = ( + e: React.SyntheticEvent +) => { + e.currentTarget.src = import.meta.env.VITE_FALLBACK_GAME_IMAGE +} + +export const handleModImageError = ( + e: React.SyntheticEvent +) => { + e.currentTarget.src = import.meta.env.VITE_FALLBACK_MOD_IMAGE +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 141f56d..1f3c47c 100644 --- a/src/vite-env.d.ts +++ b/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... }