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>
|
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
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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
2
src/vite-env.d.ts
vendored
@ -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...
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user