degmods/degmods.com
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 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>
# 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_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

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

@ -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

17
src/components/GameCard.tsx
View File

@ -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>
)

14
src/components/ModCard.tsx
View File

@ -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>

82
src/styles/SimpleSlider.css
View File

@ -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);
}

9
src/styles/cardGames.css
View File

@ -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;
}

4
src/styles/cardMod.css
View File

@ -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 {

12
src/utils/utils.ts
View File

@ -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
}

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

@ -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...
}