use hash routing

3 files changed, 51 insertions, 14 deletions

diff --git a/package.json b/package.json
index b721288..4ca6ac3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "history": "^5.3.0",
     "preact": "^10.17.0",
     "preact-router": "^4.1.2",
     "react-slick": "^0.29.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 590a83e..c3168a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,8 +2,10 @@ lockfileVersion: 5.4
 
 specifiers:
   '@preact/preset-vite': ^2.5.0
+  '@types/history': ^5.0.0
   '@types/react-slick': ^0.23.10
   gh-pages: ^6.0.0
+  history: ^5.3.0
   preact: ^10.17.0
   preact-router: ^4.1.2
   react-slick: ^0.29.0
@@ -12,6 +14,7 @@ specifiers:
   vite: ^4.4.9
 
 dependencies:
+  history: 5.3.0
   preact: 10.17.0
   preact-router: 4.1.2_preact@10.17.0
   react-slick: 0.29.0
@@ -19,6 +22,7 @@ dependencies:
 
 devDependencies:
   '@preact/preset-vite': 2.5.0_preact@10.17.0+vite@4.4.9
+  '@types/history': 5.0.0
   '@types/react-slick': 0.23.10
   gh-pages: 6.0.0
   typescript: 5.1.6
@@ -232,6 +236,12 @@ packages:
       '@babel/types': 7.22.10
     dev: true
 
+  /@babel/runtime/7.22.10:
+    resolution: {integrity: sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+
   /@babel/template/7.22.5:
     resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
     engines: {node: '>=6.9.0'}
@@ -557,6 +567,13 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@types/history/5.0.0:
+    resolution: {integrity: sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==}
+    deprecated: This is a stub types definition. history provides its own type definitions, so you do not need this installed.
+    dependencies:
+      history: 5.3.0
+    dev: true
+
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
@@ -864,6 +881,11 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /history/5.3.0:
+    resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
+    dependencies:
+      '@babel/runtime': 7.22.10
+
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -1069,6 +1091,9 @@ packages:
       resize-observer-polyfill: 1.5.1
     dev: false
 
+  /regenerator-runtime/0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+
   /resize-observer-polyfill/1.5.1:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
     dev: false
diff --git a/src/app.tsx b/src/app.tsx
index 771b84a..5ba8e6f 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -3,21 +3,32 @@ import { Navbar } from './components/navbar'
 import Contact from './pages/contact';
 import Games from './pages/games';
 import Home from './pages/home'
-import { Router, Route } from 'preact-router';
+import { Router, Route, CustomHistory } from 'preact-router';
 import Projects from './pages/projects';
+import { HashHistory, createHashHistory } from 'history';
 
+const hashHistoryAdapter = (hashHistory: HashHistory): CustomHistory => {
+    return {
+        listen: (callback) => hashHistory.listen(({ location }) => callback(location)),
+        location: hashHistory.location,
+        push: hashHistory.push,
+        replace: hashHistory.replace
+    };
+};
 export function App() {
-  return (
-    <>
-      <Navbar />
-      <div id="app-main">
-        <Router>
-          <Route path="/" component={Home} />
-          <Route path="/contact" component={Contact} />
-          <Route path="/games" component={Games} />
-          <Route path="/projects" component={Projects} />
-        </Router>
-      </div>
-    </>
-  )
+    const history = hashHistoryAdapter(createHashHistory());
+
+    return (
+        <>
+            <Navbar />
+            <div id="app-main">
+                <Router history={history}>
+                    <Route path="/" component={Home} />
+                    <Route path="/contact" component={Contact} />
+                    <Route path="/games" component={Games} />
+                    <Route path="/projects" component={Projects} />
+                </Router>
+            </div>
+        </>
+    )
 }