degmods/degmods.com
6
0
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

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

Browse Source
This commit is contained in:
daniyal 2024-09-02 13:43:39 +05:00
parent faf30a89b0
commit 0733849b25
10 changed files with 102 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.example
View File

@ -5,4 +5,10 @@ VITE_APP_RELAY=wss://relay.degmods.com
VITE_ADMIN_NPUBS= <A comma separated list of npubs> VITE_ADMIN_NPUBS= <A comma separated list of npubs>
# A dedicated npub used for reporting mods, blogs, profile and etc. # A dedicated npub used for reporting mods, blogs, profile and etc.
VITE_REPORTING_NPUB= <npub1...> 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

2
.gitea/workflows/release-production.yaml
View File

@ -25,6 +25,8 @@ jobs:
echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .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 cat .env
- name: Create Build - name: Create Build

2
.gitea/workflows/release-staging.yaml
View File

@ -25,6 +25,8 @@ jobs:
echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .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 cat .env
- name: Create Build - name: Create Build

17
src/components/GameCard.tsx
View File

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

14
src/components/ModCard.tsx
View File

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

82
src/styles/SimpleSlider.css
View File

@ -1,6 +1,6 @@
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background: rgba(255,255,255,0.5); background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 4px 0 rgba(0,0,0,0.5); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
} }
.simple-slider .swiper-slide { .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; width: 50px;
margin-left: 00px; margin-left: 00px;
margin-right: 00px; margin-right: 00px;
color: rgba(255,255,255,0.5); 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; padding: 10px;
height: 75px; height: 75px;
border-radius: 10px; 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; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -39,16 +45,24 @@
margin-top: -35px; 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; font-size: 18px;
} }
@media (max-width:992px) { @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; bottom: 0;
top: unset; top: unset;
width: 48%; width: 48%;
@ -115,7 +129,12 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 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; z-index: -1;
border-radius: 10px; border-radius: 10px;
} }
@ -129,12 +148,15 @@
opacity: 1; 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%; width: 100%;
bottom: 0; bottom: 0;
} }
.swiper-button-next, .swiper-button-prev { .swiper-button-next,
.swiper-button-prev {
position: absolute; position: absolute;
} }
@ -161,23 +183,24 @@
.SliderWrapper { .SliderWrapper {
width: 100%; width: 100%;
padding: 50px 0; padding: 50px 0;
background: rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: -25px 0 0 0; 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 { .IBMSMSCWSPic {
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
border: solid 1px rgba(255,255,255,0.05); border: solid 1px rgba(255, 255, 255, 0.05);
padding-top: 50%;
z-index: 1; 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 { .IBMSMSCWSInfo {
@ -187,9 +210,15 @@
justify-content: center; justify-content: center;
padding: 25px; padding: 25px;
border-radius: 10px; 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)),
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); linear-gradient(
border: solid 1px rgba(255,255,255,0.05); 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) { @media (max-width: 768px) {
@ -212,7 +241,7 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
font-size: 20px; font-size: 20px;
line-height: 1.25; line-height: 1.25;
color: rgba(255,255,255,0.75); color: rgba(255, 255, 255, 0.75);
font-weight: bold; font-weight: bold;
} }
@ -221,7 +250,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 8; -webkit-line-clamp: 8;
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
flex-grow: 1; flex-grow: 1;
@ -244,7 +273,7 @@
} }
.swiper-pagination-bullet { .swiper-pagination-bullet {
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
opacity: 1; opacity: 1;
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -252,6 +281,5 @@
} }
.swiper-pagination-bullet.swiper-pagination-bullet-active { .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: rgba(128,0,255,0.5); background: rgba(128, 0, 255, 0.5);
} }

9
src/styles/cardGames.css
View File

@ -18,15 +18,15 @@
} }
.cardGameMain { .cardGameMain {
padding-top: 150%;
border-radius: 15px; 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 { .cardGameMainTitle {
transition: ease 0.4s; transition: ease 0.4s;
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
padding: 0 15px; padding: 0 15px;
font-weight: bold; font-weight: bold;
display: -webkit-box; display: -webkit-box;
@ -36,4 +36,3 @@
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
} }

4
src/styles/cardMod.css
View File

@ -12,8 +12,8 @@
.cMMPicture { .cMMPicture {
position: relative; position: relative;
width: 100%; 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 { .cMMBody {

12
src/utils/utils.ts
View File

@ -123,3 +123,15 @@ export const abbreviateNumber = (value: number): string => {
return value.toString() 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
}

2
src/vite-env.d.ts vendored
View File

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