Skip to content

Commit bcd8c25

Browse files
trusktrtrusktr
committed
routerMode:history for the docsify site
1 parent ef6905b commit bcd8c25

File tree

3 files changed

+102
-1
lines changed

3 files changed

+102
-1
lines changed

‎404.html

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

‎index.html

+30
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,34 @@
2020
width: auto !important;
2121
}
2222
</style>
23+
24+
<!-- Start Single Page Apps for GitHub Pages -->
25+
<!-- Copied/adapted as instructed from https://github.com/rafgraph/spa-github-pages. -->
26+
<script type="text/javascript">
27+
// Single Page Apps for GitHub Pages
28+
// MIT License
29+
// https://github.com/rafgraph/spa-github-pages
30+
// This script checks to see if a redirect is present in the query string,
31+
// converts it back into the correct url and adds it to the
32+
// browser's history using window.history.replaceState(...),
33+
// which won't cause the browser to attempt to load the new url.
34+
// When the single page app is loaded further down in this file,
35+
// the correct url will be waiting in the browser's history for
36+
// the single page app to route accordingly.
37+
;(function (l) {
38+
if (l.search[1] === '/') {
39+
var decoded = l.search
40+
.slice(1)
41+
.split('&')
42+
.map(function (s) {
43+
return s.replace(/~and~/g, '&')
44+
})
45+
.join('?')
46+
window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash)
47+
}
48+
})(window.location)
49+
</script>
50+
<!-- End Single Page Apps for GitHub Pages -->
2351
</head>
2452

2553
<body>
@@ -35,6 +63,8 @@
3563

3664
// Docsify configuration
3765
window.$docsify = {
66+
routerMode: 'history',
67+
externalLinkTarget: '_self',
3868
alias: {
3969
'.*?/awesome':
4070
'https://raw.githubusercontent.com/docsifyjs/awesome-docsify/master/README.md',

‎server.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const fs = require('fs');
2+
const path = require('path');
13
const liveServer = require('live-server')
24
const isSSR = !!process.env.SSR
35
const middleware = []
@@ -46,10 +48,30 @@ if (isSSR) {
4648
})
4749
}
4850

51+
// emulate default behavior of GitHub Pages and other static servers that
52+
// serve a 404.html page when files are not found.
53+
middleware.push(
54+
/**
55+
* @param {import('http').IncomingMessage} req
56+
* @param {import('http').ServerResponse} res
57+
* @param {(error?: Error) => void} res
58+
*/
59+
function (req, res, next) {
60+
if (!fs.existsSync(path.resolve('.' + req.url))) {
61+
console.log(res.statusCode = 404)
62+
}
63+
next();
64+
}
65+
)
66+
4967
const params = {
5068
port: 3000,
5169
watch: ['lib', 'docs', 'themes'],
52-
middleware
70+
middleware,
71+
72+
// emulate default behavior of GitHub Pages and other static servers that
73+
// serve a 404.html page when files are not found.
74+
file: '404.html',
5375
}
5476

5577
liveServer.start(params)

0 commit comments

Comments
 (0)