Skip to content

Commit 89c6f63

Browse files
author
digin
committed
fixed routing
1 parent a803b19 commit 89c6f63

File tree

5 files changed

+111
-32
lines changed

5 files changed

+111
-32
lines changed

‎CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
digindominic.me

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
},
2828
"scripts": {
2929
"start": "react-scripts start",
30-
"build": "react-scripts build",
30+
"build": "react-scripts build && cp CNAME build/ && cp build/index.html build/404.html",
3131
"test": "react-scripts test",
3232
"eject": "react-scripts eject",
3333
"predeploy": "npm run build",

‎public/404.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Digin Dominic</title>
7+
<script type="text/javascript">
8+
// Single Page Apps for GitHub Pages
9+
// MIT License
10+
// https://github.com/rafgraph/spa-github-pages
11+
// This script takes the current URL and converts the path and query
12+
// string into just a query string, and then redirects the browser
13+
// to the new URL with only a query string and hash fragment,
14+
// e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
15+
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
16+
// Note: this 404.html file must be at least 512 bytes for it to work
17+
// with Internet Explorer (it is currently > 512 bytes)
18+
19+
// If you're creating a Project Pages site and NOT using a custom domain,
20+
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
21+
// This way the code will only replace the route part of the path, and not
22+
// the real directory in which the app resides, for example:
23+
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
24+
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
25+
// Otherwise, leave pathSegmentsToKeep as 0.
26+
var pathSegmentsToKeep = 0;
27+
28+
var l = window.location;
29+
l.replace(
30+
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
31+
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
32+
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
33+
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
34+
l.hash
35+
);
36+
</script>
37+
</head>
38+
<body>
39+
</body>
40+
</html>

‎public/index.html

+49-24
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,59 @@
1010
content="Digin Dominic's Portfolio website"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/android-chrome-192x192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
1713
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
2714
<title>Digin Dominic</title>
15+
<!-- Start Single Page Apps for GitHub Pages -->
16+
<script type="text/javascript">
17+
// Single Page Apps for GitHub Pages
18+
// MIT License
19+
// https://github.com/rafgraph/spa-github-pages
20+
// This script checks to see if a redirect is present in the query string,
21+
// converts it back into the correct url and adds it to the
22+
// browser's history using window.history.replaceState(...),
23+
// which won't cause the browser to attempt to load the new url.
24+
// When the single page app is loaded further down in this file,
25+
// the correct url will be waiting in the browser's history for
26+
// the single page app to route accordingly.
27+
(function(l) {
28+
if (l.search[1] === '/' ) {
29+
var decoded = l.search.slice(1).split('&').map(function(s) {
30+
return s.replace(/~and~/g, '&')
31+
}).join('?');
32+
window.history.replaceState(null, null,
33+
l.pathname.slice(0, -1) + decoded + l.hash
34+
);
35+
}
36+
}(window.location))
37+
</script>
38+
<!-- End Single Page Apps for GitHub Pages -->
39+
<!-- Start Single Page Apps for GitHub Pages -->
40+
<script type="text/javascript">
41+
// Single Page Apps for GitHub Pages
42+
// MIT License
43+
// https://github.com/rafgraph/spa-github-pages
44+
// This script checks to see if a redirect is present in the query string,
45+
// converts it back into the correct url and adds it to the
46+
// browser's history using window.history.replaceState(...),
47+
// which won't cause the browser to attempt to load the new url.
48+
// When the single page app is loaded further down in this file,
49+
// the correct url will be waiting in the browser's history for
50+
// the single page app to route accordingly.
51+
(function(l) {
52+
if (l.search[1] === '/' ) {
53+
var decoded = l.search.slice(1).split('&').map(function(s) {
54+
return s.replace(/~and~/g, '&')
55+
}).join('?');
56+
window.history.replaceState(null, null,
57+
l.pathname.slice(0, -1) + decoded + l.hash
58+
);
59+
}
60+
}(window.location))
61+
</script>
62+
<!-- End Single Page Apps for GitHub Pages -->
2863
</head>
2964
<body>
3065
<noscript>You need to enable JavaScript to run this app.</noscript>
3166
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4267
</body>
43-
</html>
68+
</html>

‎src/App.js

+20-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// src/App.jsx
22
import React from 'react';
33
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
4-
import { HelmetProvider } from 'react-helmet-async'; // Import HelmetProvider
4+
import { HelmetProvider } from 'react-helmet-async';
55
import Layout from './components/layout/Layout';
66
import HomePage from './pages/HomePage';
77
import ProjectsPage from './pages/ProjectsPage';
@@ -12,16 +12,29 @@ import BlogPostPage from './pages/BlogPostPage';
1212
import NotFoundPage from './pages/NotFoundPage';
1313

1414
const App = () => {
15+
// Determine if we're running on GitHub Pages
16+
const isGitHubPages = window.location.hostname.includes('github.io');
17+
1518
// Get the basename for GitHub Pages
16-
// When deployed to GitHub Pages, the app will be served from /{repo-name}/
17-
const repoName = process.env.REACT_APP_GITHUB_REPO;
18-
const basename = repoName && repoName !== 'digin1.github.io'
19-
? `/${repoName}`
20-
: '';
19+
let basename = '';
2120

21+
if (isGitHubPages) {
22+
// Extract repository name from the pathname if we're on GitHub Pages
23+
// For a URL like https://username.github.io/repo-name/, we want '/repo-name'
24+
// For a URL like https://username.github.io/, we want '' (empty string)
25+
const pathSegments = window.location.pathname.split('/');
26+
27+
// If the username.github.io is used as the main domain (username.github.io),
28+
// then no basename is needed
29+
if (window.location.hostname !== `${process.env.REACT_APP_GITHUB_USERNAME}.github.io`) {
30+
basename = `/${pathSegments[1]}`;
31+
}
32+
}
33+
34+
console.log('Using basename:', basename);
2235

2336
return (
24-
<HelmetProvider> {/* Wrap the app with HelmetProvider */}
37+
<HelmetProvider>
2538
<Router basename={basename}>
2639
<Layout>
2740
<Routes>

0 commit comments

Comments
 (0)