From 99ce338502149f135c3cfc7f483a0a8b44d5e845 Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 23 Oct 2024 18:00:53 +0200 Subject: [PATCH] feat: browser router and SPA 404.html --- index.html | 31 ++++++++ public/404.html | 51 ++++++++++++ src/App.tsx | 19 +---- src/layout/socialNav.tsx | 4 +- src/main.tsx | 11 +-- src/routes/index.tsx | 164 +++++++++++++++++++++++---------------- 6 files changed, 186 insertions(+), 94 deletions(-) create mode 100644 public/404.html diff --git a/index.html b/index.html index 9b3186d..2f1f87c 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,37 @@ DEG Mods - Liberating Game Mods + + + +
diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..8912b25 --- /dev/null +++ b/public/404.html @@ -0,0 +1,51 @@ + + + + + + Single Page Apps for GitHub Pages + + + + diff --git a/src/App.tsx b/src/App.tsx index 60b4df3..fe0ccd1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ -import { Route, Routes } from 'react-router-dom' -import { Layout } from './layout' -import { routes } from './routes' +import { RouterProvider } from 'react-router-dom' import { useEffect } from 'react' +import { router } from 'routes' import './styles/styles.css' function App() { @@ -22,19 +21,7 @@ function App() { } }, []) - return ( - - }> - {routes.map((route, index) => ( - - ))} - - - ) + return } export default App diff --git a/src/layout/socialNav.tsx b/src/layout/socialNav.tsx index e38bd88..914e8c0 100644 --- a/src/layout/socialNav.tsx +++ b/src/layout/socialNav.tsx @@ -29,11 +29,11 @@ export const SocialNav = () => { svgPath='M511.8 287.6L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L416 100.7V64C416 46.33 430.3 32 448 32H480C497.7 32 512 46.33 512 64V185L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6L511.8 287.6z' /> - - - - - - + + + + ) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 991105e..18e4d63 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,3 +1,5 @@ +import { createBrowserRouter } from 'react-router-dom' +import { Layout } from 'layout' import { SearchPage } from 'pages/search' import { AboutPage } from '../pages/about' import { BlogsPage } from '../pages/blogs' @@ -10,6 +12,10 @@ import { SettingsPage } from '../pages/settings' import { SubmitModPage } from '../pages/submitMod' import { WritePage } from '../pages/write' import { GamePage } from 'pages/game' +import { NotFoundPage } from 'pages/404' +import { FeedLayout } from 'layout/feed' +import { FeedPage } from 'pages/feed' +import { NotificationsPage } from 'pages/notifications' export const appRoutes = { index: '/', @@ -28,7 +34,9 @@ export const appRoutes = { settingsRelays: '/settings-relays', settingsPreferences: '/settings-preferences', settingsAdmin: '/settings-admin', - profile: '/profile/:nprofile?' + profile: '/profile/:nprofile?', + feed: '/feed', + notifications: '/notifications' } export const getGamePageRoute = (name: string) => @@ -43,73 +51,91 @@ export const getModsEditPageRoute = (eventId: string) => export const getProfilePageRoute = (nprofile: string) => appRoutes.profile.replace(':nprofile', nprofile) -export const routes = [ +export const router = createBrowserRouter([ { - path: appRoutes.index, - element: - }, - { - path: appRoutes.home, - element: - }, - { - path: appRoutes.games, - element: - }, - { - path: appRoutes.game, - element: - }, - { - path: appRoutes.mods, - element: - }, - { - path: appRoutes.mod, - element: - }, - { - path: appRoutes.about, - element: - }, - { - path: appRoutes.blog, - element: - }, - { - path: appRoutes.submitMod, - element: - }, - { - path: appRoutes.editMod, - element: - }, - { - path: appRoutes.write, - element: - }, - { - path: appRoutes.search, - element: - }, - { - path: appRoutes.settingsProfile, - element: - }, - { - path: appRoutes.settingsRelays, - element: - }, - { - path: appRoutes.settingsPreferences, - element: - }, - { - path: appRoutes.settingsAdmin, - element: - }, - { - path: appRoutes.profile, - element: + element: , + children: [ + { + path: appRoutes.index, + element: + }, + { + path: appRoutes.games, + element: + }, + { + path: appRoutes.game, + element: + }, + { + path: appRoutes.mods, + element: + }, + { + path: appRoutes.mod, + element: + }, + { + path: appRoutes.about, + element: + }, + { + path: appRoutes.blog, + element: + }, + { + path: appRoutes.submitMod, + element: + }, + { + path: appRoutes.editMod, + element: + }, + { + path: appRoutes.write, + element: + }, + { + path: appRoutes.search, + element: + }, + { + path: appRoutes.settingsProfile, + element: + }, + { + path: appRoutes.settingsRelays, + element: + }, + { + path: appRoutes.settingsPreferences, + element: + }, + { + path: appRoutes.settingsAdmin, + element: + }, + { + path: appRoutes.profile, + element: + }, + { + element: , + children: [ + { + path: appRoutes.feed, + element: + }, + { + path: appRoutes.notifications, + element: + } + ] + }, + { + path: '*', + element: + } + ] } -] +])