fix: failing links in footer, backup and supporters pages prep

Partially #142

src/layout/footer.tsx

@@ -1,4 +1,6 @@
+import { Link } from 'react-router-dom'
 import styles from '../styles/footer.module.scss'
+import { appRoutes, getProfilePageRoute } from 'routes'
 
 export const Footer = () => {
   return (
@@ -7,6 +9,7 @@ export const Footer = () => {
         <p className={styles.secMainFooterPara}>
           Built with&nbsp;
           <a
+            rel='noopener'
             className={styles.secMainFooterParaLink}
             href='https://github.com/nostr-protocol/nostr'
             target='_blank'
@@ -14,21 +17,26 @@ export const Footer = () => {
             Nostr
           </a>{' '}
           by&nbsp;
-          <a
+          <Link
             className={styles.secMainFooterParaLink}
-            href='https://degmods.com/profile/nprofile1qqsre6jgq6c7r2vzn5cdtju20qq36sn3cer5avc4x8kfru5pzrlr7sqnancjp'
+            to={getProfilePageRoute(
+              'nprofile1qqsre6jgq6c7r2vzn5cdtju20qq36sn3cer5avc4x8kfru5pzrlr7sqnancjp'
+            )}
             target='_blank'
           >
             Freakoverse
-          </a>
+          </Link>
           , with the support of{' '}
-          <a className={styles.secMainFooterParaLink} href='backers.html'>
+          <Link
+            className={styles.secMainFooterParaLink}
+            to={appRoutes.supporters}
+          >
             Supporters
-          </a>
+          </Link>
           . Check our&nbsp;
-          <a className={styles.secMainFooterParaLink} href='backup.html'>
+          <Link className={styles.secMainFooterParaLink} to={appRoutes.backup}>
             Backup Plan
-          </a>
+          </Link>
           .
         </p>
       </div>

src/pages/backup.tsx

@@ -0,0 +1,126 @@
+import { capitalizeEachWord } from 'utils'
+import '../styles/backup.css'
+import backupPlanImg from '../assets/img/DEG Mods Backup Plan.png'
+// import placeholder from '../assets/img/DEGMods Placeholder Img.png'
+interface BackupItemProps {
+  name: string
+  image: string
+  link: string
+  type: 'repo' | 'alt' | 'exe'
+}
+const BACKUP_LIST: BackupItemProps[] = [
+  //   {
+  //     name: 'Github',
+  //     type: 'repo',
+  //     image:
+  //       'https://www.c-sharpcorner.com/article/create-github-repository-and-add-newexisting-project-using-github-desktop/Images/github.png',
+  //     link: '#'
+  //   },
+  //   {
+  //     name: 'Github, but nostr',
+  //     type: 'repo',
+  //     image: 'https://vitorpamplona.com/images/nostr.gif',
+  //     link: '#'
+  //   },
+  //   {
+  //     name: 'name',
+  //     type: 'alt',
+  //     image: placeholder,
+  //     link: '#'
+  //   },
+  //   {
+  //     name: '',
+  //     type: 'exe',
+  //     image: placeholder,
+  //     link: '#'
+  //   }
+]
+
+const BackupItem = ({ name, image, link, type }: BackupItemProps) => {
+  return (
+    <a
+      className='backupListLink'
+      href={link}
+      style={{
+        background: `linear-gradient(15deg, rgba(0,0,0,0.75), rgba(0,0,0,0.25)), 
+        url("${image}") center / cover no-repeat, 
+        linear-gradient(45deg, rgba(0,0,0,0.1), rgba(255,255,255,0.01) 50%, rgba(0,0,0,0.1))`
+      }}
+      target='_blank'
+    >
+      <div className='backupListLinkInside'>
+        <h3>
+          {type === 'exe' ? type.toUpperCase() : capitalizeEachWord(type)}:{' '}
+          {name}
+        </h3>
+      </div>
+    </a>
+  )
+}
+
+export const BackupPage = () => {
+  return (
+    <div className='InnerBodyMain'>
+      <div className='ContainerMain'>
+        <div className='IBMSecMainGroup'>
+          <div className='IBMSecMain'>
+            <div className='AboutSec'>
+              <div className='LearnText'>
+                <div className='LearnTextInside'>
+                  <h1
+                    className='LearnTextHeading'
+                    style={{ textAlign: 'center' }}
+                  >
+                    Backup Plan: Repos, Alts, EXE
+                  </h1>
+                  <img alt='' src={backupPlanImg} />
+                  <p className='LearnTextPara'>
+                    It's pretty clear that authoritarianism and censorship is on
+                    the rise, on all fronts, and from what can be seen, any idea
+                    that push for the opposite gets attacked. That's why DEG
+                    Mods is running on Nostr, and that's why we're also writing
+                    this backup plan.
+                    <br />
+                  </p>
+                  <h3 className='LearnTextHeading'>Repositories</h3>
+                  <p className='LearnTextPara'>
+                    Wherever we can, we'll put DEG Mods' code on multiple
+                    repositories such as Github, and (github but on nostr).
+                    Below you can find the links where we've uploaded the site's
+                    code to.
+                    <br />
+                  </p>
+                  <h3 className='LearnTextHeading'>Alternatives</h3>
+                  <p className='LearnTextPara'>
+                    With the repositories for DEG Mods is up on multiple places,
+                    we encourage people to take the code and duplicate it
+                    elsewhere. Fork it, change the design, remove or add systems
+                    and features, and make your own version. Below you can find
+                    links of alts that we've found.
+                    <br />
+                  </p>
+                  <h3 className='LearnTextHeading'>EXE</h3>
+                  <p className='LearnTextPara'>
+                    One last push we'd like to do is to create a .exe that'll
+                    open up DEG Mods on your PC, as if you've opened the website
+                    normally, with almost all of the functionalities you'd
+                    expect (if not all). We want to do this so that in case
+                    there are no alternatives, or that they're getting shut
+                    down, then you can just rely on this instead. The link to it
+                    will be added here the moment it becomes available.
+                    <br />
+                  </p>
+                  <div className='backupList'>
+                    {BACKUP_LIST.map((b) => (
+                      <BackupItem {...b} />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/supporters.tsx

@@ -0,0 +1,3 @@
+export const SupportersPage = () => {
+  return <h2>WIP</h2>
+}

src/routes/index.tsx

@@ -28,6 +28,8 @@ import { BlogPage } from '../pages/blog'
 import { blogRouteLoader } from '../pages/blog/loader'
 import { blogRouteAction } from '../pages/blog/action'
 import { reportRouteAction } from '../actions/report'
+import { BackupPage } from 'pages/backup'
+import { SupportersPage } from 'pages/supporters'
 
 export const appRoutes = {
   home: '/',
@@ -51,7 +53,9 @@ export const appRoutes = {
   settingsAdmin: '/settings-admin',
   profile: '/profile/:nprofile?',
   feed: '/feed',
-  notifications: '/notifications'
+  notifications: '/notifications',
+  backup: '/backup',
+  supporters: '/supporters'
 }
 
 export const getGamePageRoute = (name: string) =>
@@ -185,6 +189,14 @@ export const routerWithNdkContext = (context: NDKContextType) =>
             }
           ]
         },
+        {
+          path: appRoutes.backup,
+          element: <BackupPage />
+        },
+        {
+          path: appRoutes.supporters,
+          element: <SupportersPage />
+        },
         {
           path: '*',
           element: <NotFoundPage />

src/styles/backup.css

@@ -0,0 +1,36 @@
+.backupList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.backupListLink {
+  transition: ease 0.4s;
+  overflow: hidden;
+  padding: 15px;
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  border-radius: 10px;
+  /*border: solid 1px rgba(255,255,255,0.1);*/
+  position: relative;
+  color: rgba(255,255,255,0.75);
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+}
+
+.backupListLink:hover {
+  transition: ease 0.4s;
+  text-decoration: unset;
+  color: rgb(255,255,255);
+  transform: scale(1.02);
+}
+
+.backupListLinkInside {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+  flex-grow: 1;
+  justify-content: end;
+}
+