Can now modify landing page. Fallback images for games and mods. Cached events. #29
@ -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
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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
2
src/vite-env.d.ts
vendored
@ -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...
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user