Skip to content

Commit 4d113b1

Browse files
committed
Add SPA-GitHub-Pages technique
1 parent 7089937 commit 4d113b1

3 files changed

Lines changed: 69 additions & 0 deletions

File tree

scripts/build-browser.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ async function build() {
3333
resolve(process.cwd(), "dist", "browser", "logo.svg")
3434
);
3535

36+
await cp(
37+
resolve(process.cwd(), "src", "browser", "404.html"),
38+
resolve(process.cwd(), "dist", "browser", "404.html")
39+
);
40+
3641
// Build worker separately with document shim for Prism/refractor
3742
const workerResult = await Bun.build({
3843
entrypoints: ["./src/browser/lib/diff-worker.ts"],

src/browser/404.html

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

src/browser/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,30 @@
2929

3030
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
3131

32+
<!-- Start Single Page Apps for GitHub Pages -->
33+
<script type="text/javascript">
34+
// Single Page Apps for GitHub Pages
35+
// MIT License
36+
// https://github.com/rafgraph/spa-github-pages
37+
// This script checks to see if a redirect is present in the query string,
38+
// converts it back into the correct url and adds it to the
39+
// browser's history using window.history.replaceState(...),
40+
// which won't cause the browser to attempt to load the new url.
41+
// When the single page app is loaded further down in this file,
42+
// the correct url will be waiting in the browser's history for
43+
// the single page app to route accordingly.
44+
(function(l) {
45+
if (l.search[1] === '/' ) {
46+
var decoded = l.search.slice(1).split('&').map(function(s) {
47+
return s.replace(/~and~/g, '&')
48+
}).join('?');
49+
window.history.replaceState(null, null,
50+
l.pathname.slice(0, -1) + decoded + l.hash
51+
);
52+
}
53+
}(window.location))
54+
</script>
55+
3256
<script type="module" src="./index.tsx"></script>
3357
<link rel="stylesheet" href="./index.css" />
3458
</head>

0 commit comments

Comments
 (0)