fix: use src/assets for images and csv

.github/workflows/release-pages-staging.yaml

@@ -40,11 +40,10 @@ jobs:
           echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
           echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
           echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
-          echo "VITE_BASE_URL=${{ vars.VITE_BASE_URL }}" >> .env
           echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env
           cat .env
       - name: Build
-        run: npm run build
+        run: npm run build -- --base=${{ steps.deployment.outputs.page_url }}
       - name: Setup Pages
         uses: actions/configure-pages@v4
       - name: Upload artifact

index.html

@@ -4,40 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <!-- Open Graph Meta Tags -->
-    <meta property="og:title" content="DEG Mods - Liberating Game Mods" />
-    <meta
-      property="og:description"
-      content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
-    />
-    <meta property="og:image" content="/assets/img/DEGM%20Thumb.png" />
-    <meta property="og:url" content="https://degmods.com" />
-    <meta property="og:type" content="website" />
-
-    <!-- Twitter Card Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="DEG Mods - Liberating Game Mods" />
-    <meta
-      name="twitter:description"
-      content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
-    />
-    <meta name="twitter:image" content="/assets/img/DEGM%20Thumb.png" />
-
-    <!-- Other Meta Tags -->
-    <meta
-      name="description"
-      content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
-    />
-
     <!-- Links and Stylesheets -->
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css" />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="935x934"
-      href="/assets/img/Logo%20with%20circle.png"
-    />
 
     <title>DEG Mods - Liberating Game Mods</title>
   </head>

package-lock.json

@@ -16,6 +16,7 @@
         "@tiptap/extension-link": "2.6.6",
         "@tiptap/react": "2.6.6",
         "@tiptap/starter-kit": "2.6.6",
+        "@types/react-helmet": "^6.1.11",
         "axios": "1.7.3",
         "bech32": "2.0.0",
         "buffer": "6.0.3",
@@ -32,6 +33,7 @@
         "react": "^18.3.1",
         "react-countdown": "2.3.5",
         "react-dom": "^18.3.1",
+        "react-helmet": "^6.1.0",
         "react-redux": "9.1.2",
         "react-router-dom": "^6.24.1",
         "react-toastify": "10.0.5",
@@ -1986,14 +1988,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2008,6 +2008,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-window": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
@@ -2654,8 +2663,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/d": {
       "version": "1.0.2",
@@ -4623,6 +4631,27 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4689,6 +4718,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "10.0.5",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",

package.json

@@ -18,6 +18,7 @@
     "@tiptap/extension-link": "2.6.6",
     "@tiptap/react": "2.6.6",
     "@tiptap/starter-kit": "2.6.6",
+    "@types/react-helmet": "^6.1.11",
     "axios": "1.7.3",
     "bech32": "2.0.0",
     "buffer": "6.0.3",
@@ -34,6 +35,7 @@
     "react": "^18.3.1",
     "react-countdown": "2.3.5",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-redux": "9.1.2",
     "react-router-dom": "^6.24.1",
     "react-toastify": "10.0.5",

src/components/ProfileSection.tsx

@@ -21,6 +21,7 @@ import {
 } from '../utils'
 import { LoadingSpinner } from './LoadingSpinner'
 import { ZapPopUp } from './Zap'
+import placeholder from '../assets/img/DEGMods Placeholder Img.png'
 
 type Props = {
   pubkey: string
@@ -240,7 +241,7 @@ const posts: Post[] = [
     name: 'User name',
     link: `feed-note.html`,
     content: `user text, this is a long string of temporary text that would be replaced with the user post from their short posts`,
-    imageUrl: '/assets/img/DEGMods%20Placeholder%20Img.png'
+    imageUrl: placeholder
   }
 ]
 

src/hooks/useGames.ts

@@ -1,9 +1,9 @@
-import { GAME_FILES } from 'constants.ts'
 import Papa from 'papaparse'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { Game } from 'types'
 import { log, LogType } from 'utils'
+import gameFiles from '../utils/games'
 
 export const useGames = () => {
   const hasProcessedFiles = useRef(false)
@@ -36,18 +36,19 @@ export const useGames = () => {
 
       try {
         // Fetch and parse each file
-        const promises = GAME_FILES.map(async (filename) => {
-          const response = await fetch(`/assets/games/${filename}`)
-          const csvText = await response.text()
-          const parsedGames = await parseCSV(csvText)
+        const promises = Object.values(gameFiles).map(async (importFn) => {
+          const csvText = await importFn()
+          if (typeof csvText === 'string') {
+            const parsedGames = await parseCSV(csvText as string)
 
-          // Remove duplicate games based on 'Game Name'
-          parsedGames.forEach((game) => {
-            if (!gameNames.has(game['Game Name'])) {
-              gameNames.add(game['Game Name'])
-              uniqueGames.push(game)
-            }
-          })
+            // Remove duplicate games based on 'Game Name'
+            parsedGames.forEach((game) => {
+              if (!gameNames.has(game['Game Name'])) {
+                gameNames.add(game['Game Name'])
+                uniqueGames.push(game)
+              }
+            })
+          }
         })
 
         await Promise.all(promises)

src/layout/head.tsx

@@ -0,0 +1,36 @@
+import { Helmet } from 'react-helmet'
+import thumb from '../assets/img/DEGM Thumb.png'
+import logoWithCircle from '../assets/img/Logo with circle.png'
+
+export const Head = () => {
+  return (
+    <Helmet>
+      {/* Open Graph Meta Tags */}
+      <meta property='og:title' content='DEG Mods - Liberating Game Mods' />
+      <meta
+        property='og:description'
+        content='Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely.'
+      />
+      <meta property='og:image' content={thumb} />
+      <meta property='og:url' content='https://degmods.com' />
+      <meta property='og:type' content='website' />
+
+      {/* Twitter Card Meta Tags */}
+      <meta name='twitter:card' content='summary_large_image' />
+      <meta name='twitter:title' content='DEG Mods - Liberating Game Mods' />
+      <meta
+        name='twitter:description'
+        content='Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely.'
+      />
+      <meta name='twitter:image' content={thumb} />
+
+      {/* Other Meta Tags */}
+      <meta
+        name='description'
+        content='Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely.'
+      />
+
+      <link rel='icon' type='image/png' sizes='935x934' href={logoWithCircle} />
+    </Helmet>
+  )
+}

src/layout/header.tsx

@@ -19,6 +19,8 @@ import mainStyles from '../styles//main.module.scss'
 import navStyles from '../styles/nav.module.scss'
 import '../styles/popup.css'
 import { npubToHex } from '../utils'
+import logo from '../assets/img/DEG Mods Logo With Text.svg'
+import placeholder from '../assets/img/DEG Mods Default PP.png'
 
 export const Header = () => {
   const dispatch = useAppDispatch()
@@ -81,7 +83,7 @@ export const Header = () => {
                 <div className={navStyles.NMTI_Sec_HomeLink_Logo}>
                   <img
                     className={navStyles.NMTI_Sec_HomeLink_LogoImg}
-                    src='/assets/img/DEG%20Mods%20Logo%20With%20Text.svg'
+                    src={logo}
                   />
                 </div>
               </Link>
@@ -144,7 +146,7 @@ export const Header = () => {
                     >
                       <img
                         className={navStyles.NMTI_SecInside_LinkImg}
-                        src='/assets/img/DEG%20Mods%20Default%20PP.png'
+                        src={placeholder}
                       />
                       Login
                     </a>

src/layout/index.tsx

@@ -2,10 +2,12 @@ import { Outlet } from 'react-router-dom'
 import { Footer } from './footer'
 import { Header } from './header'
 import { SocialNav } from './socialNav'
+import { Head } from './head'
 
 export const Layout = () => {
   return (
     <>
+      <Head />
       <Header />
       <Outlet />
       <Footer />

src/main.tsx

@@ -13,8 +13,8 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Provider store={store}>
       <HashRouter
-        {...(import.meta.env.VITE_BASE_URL
-          ? { basename: import.meta.env.VITE_BASE_URL }
+        {...(import.meta.env.BASE_URL
+          ? { basename: import.meta.env.BASE_URL }
           : {})}
       >
         <NDKContextProvider>

src/pages/about.tsx

@@ -2,6 +2,8 @@ import { FAQAccordion } from '../components/FAQAccordion'
 import '../styles/about.css'
 import '../styles/FAQ.css'
 import '../styles/styles.css'
+import thumb from '../assets/img/DEGM Thumb.png'
+import vivian from '../assets/img/vivian james.png'
 
 export type FAQItem = {
   question: string
@@ -14,7 +16,8 @@ const FAQ_ITEMS: FAQItem[] = [
     answer: `We don't handle that directly, but you, as the creator, will.`
   },
   {
-    question: 'How do you assure security of game mod files that someone downloads?',
+    question:
+      'How do you assure security of game mod files that someone downloads?',
     answer: `We don't assure security directly. However, we will provide a reaction
       system to help users gauge the safety of download links, and mod creators
       are encouraged to include scan links.`
@@ -36,12 +39,14 @@ const FAQ_ITEMS: FAQItem[] = [
       Gist: If someone put a gun to your / the team's head, will you censor or ban anyone? No, because we can't.`
   },
   {
-    question: "You can't do anything about any mod or person? Nothing at all? What about the illegal stuff?",
+    question:
+      "You can't do anything about any mod or person? Nothing at all? What about the illegal stuff?",
     answer: `Direct removal or banning is not possible. We can only filter or
       hide content on the site, but it remains accessible on here and elsewhere.`
   },
   {
-    question: 'Why did you have to add Bitcoin? Why not traditional payment methods like Visa, PayPal, etc?',
+    question:
+      'Why did you have to add Bitcoin? Why not traditional payment methods like Visa, PayPal, etc?',
     answer: `For various reasons. With traditional payment methods, not everyone has access to them, they
       can pressure or threaten us, mod creators, or even gamers to censor or ban, or restrict usage of this site
       by holding our funds or stealing them. They can prevent you from tipping on this site or specific mod creators,
@@ -70,7 +75,7 @@ const FAQ_ITEMS: FAQItem[] = [
       as such her design is temporary and will be replaced with a design created by an artist (or artists)
       when that time comes.)`
   }
-];
+]
 
 export const AboutPage = () => {
   return (
@@ -92,7 +97,7 @@ export const AboutPage = () => {
                   >
                     Liberating Game Mods
                   </h1>
-                  <img src='/assets/img/DEGM%20Thumb.png' alt='Thumbnail' />
+                  <img src={thumb} alt='Thumbnail' />
                   <p className='LearnTextPara'>
                     Never get your game mods censored, get banned, lose your
                     history, nor lose the connection between creators and fans.
@@ -120,7 +125,11 @@ export const AboutPage = () => {
                     imposing their ideals. DEG Mods aims to change that
                     narrative by being developed on Nostr, a revolutionary new
                     communications protocol.{' '}
-                    <a className='linkMain' href='https://nostr.com/' target="_blank">
+                    <a
+                      className='linkMain'
+                      href='https://nostr.com/'
+                      target='_blank'
+                    >
                       Learn more about Nostr here.
                     </a>
                     <br />
@@ -173,9 +182,9 @@ export const AboutPage = () => {
                     we're running at a loss (unless direct donations/tips covers
                     it, and/or we managed to add reasonable monetization systems
                     to help cover further development and maintenance costs).
-                    This is just a passion project to help free (liberate)
-                    game mods and their creators, and this part potentially
-                    helps them financially, even those in other countries where
+                    This is just a passion project to help free (liberate) game
+                    mods and their creators, and this part potentially helps
+                    them financially, even those in other countries where
                     "normal" methods of money payment/transfer are not an
                     option. You can just find the mod you want and download it,
                     or upload the mod you've created, and never even touch
@@ -228,10 +237,7 @@ export const AboutPage = () => {
                     </a>
                   </div>
                 </div>
-                <img
-                  className='LearnTextCharacterImgRight'
-                  src='/assets/img/vivian%20james.png'
-                />
+                <img className='LearnTextCharacterImgRight' src={vivian} />
               </div>
 
               <div className='LearnFAQ'>

src/pages/blogs.tsx

@@ -3,6 +3,7 @@ import '../styles/filters.css'
 import '../styles/pagination.css'
 import '../styles/search.css'
 import '../styles/styles.css'
+import placeholder from '../assets/img/DEGMods Placeholder Img.png'
 
 export const BlogsPage = () => {
   return (
@@ -92,14 +93,14 @@ export const BlogsPage = () => {
 
           <div className='IBMSecMain IBMSMListWrapper'>
             <div className='IBMSMList'>
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
             </div>
           </div>
 

src/pages/home.tsx

@@ -27,6 +27,7 @@ import { NDKFilter } from '@nostr-dev-kit/ndk'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
+import placeholder from '../assets/img/DEGMods Placeholder Img.png'
 
 export const HomePage = () => {
   const navigate = useNavigate()
@@ -118,10 +119,10 @@ export const HomePage = () => {
               <h2 className='IBMSMTitleMainHeading'>Blog Posts (WIP)</h2>
             </div>
             <div className='IBMSMList'>
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-              <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
+              <BlogCard backgroundLink={placeholder} />
             </div>
 
             <div className='IBMSMAction'>

src/pages/mod/index.tsx

@@ -41,6 +41,7 @@ import {
 import { Comments } from './internal/comment'
 import { Reactions } from './internal/reactions'
 import { Zap } from './internal/zap'
+import placeholder from '../../assets/img/DEGMods Placeholder Img.png'
 
 export const ModPage = () => {
   const { naddr } = useParams()
@@ -182,9 +183,9 @@ export const ModPage = () => {
                     Creator's Blog Posts (WIP)
                   </h4>
                   <div className='IBMSMList IBMSMListAlt'>
-                    <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-                    <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
-                    <BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
+                    <BlogCard backgroundLink={placeholder} />
+                    <BlogCard backgroundLink={placeholder} />
+                    <BlogCard backgroundLink={placeholder} />
                   </div>
                 </div>
               </div>

src/pages/settings/profile.tsx

@@ -17,6 +17,8 @@ import {
 import { RelayController } from 'controllers'
 import { LoadingSpinner } from 'components/LoadingSpinner'
 import { setUser } from 'store/reducers/user'
+import placeholderMod from '../../assets/img/DEGMods Placeholder Img.png'
+import placeholderPP from '../../assets/img/DEG Mods Default PP.png'
 
 type FormState = {
   name: string
@@ -80,11 +82,9 @@ export const ProfileSettings = () => {
     }))
   }
 
-  const banner =
-    formState.banner || '/assets/img/DEGMods%20Placeholder%20Img.png'
+  const banner = formState.banner || placeholderMod
 
-  const picture =
-    formState.picture || '/assets/img/DEG%20Mods%20Default%20PP.png'
+  const picture = formState.picture || placeholderPP
 
   const name = formState.displayName || formState.name || 'User name'
 

src/utils/games.ts

@@ -0,0 +1,5 @@
+const gameFiles = import.meta.glob('../assets/games/*.csv', {
+  query: '?raw',
+  import: 'default'
+})
+export default gameFiles

src/vite-env.d.ts

@@ -3,7 +3,6 @@
 interface ImportMetaEnv {
   readonly VITE_APP_RELAY: string
   readonly VITE_ADMIN_NPUBS: string
-  readonly VITE_BASE_URL: string
   readonly VITE_REPORTING_NPUB: string
   readonly VITE_FALLBACK_MOD_IMAGE: string
   readonly VITE_FALLBACK_GAME_IMAGE: string