Skip to content

Commit 1fe776f

Browse files
author
Sami Kolari
committed
html history mode routing
1 parent e2a792d commit 1fe776f

File tree

6 files changed

+128
-76
lines changed

6 files changed

+128
-76
lines changed

‎public/404.html

+40
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>

‎public/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,28 @@
1515
</script>
1616
<script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js"></script> -->
1717
<title><%= htmlWebpackPlugin.options.title %></title>
18+
<script type="text/javascript">
19+
// Single Page Apps for GitHub Pages
20+
// MIT License
21+
// https://github.com/rafgraph/spa-github-pages
22+
// This script checks to see if a redirect is present in the query string,
23+
// converts it back into the correct url and adds it to the
24+
// browser's history using window.history.replaceState(...),
25+
// which won't cause the browser to attempt to load the new url.
26+
// When the single page app is loaded further down in this file,
27+
// the correct url will be waiting in the browser's history for
28+
// the single page app to route accordingly.
29+
(function(l) {
30+
if (l.search[1] === '/' ) {
31+
var decoded = l.search.slice(1).split('&').map(function(s) {
32+
return s.replace(/~and~/g, '&')
33+
}).join('?');
34+
window.history.replaceState(null, null,
35+
l.pathname.slice(0, -1) + decoded + l.hash
36+
);
37+
}
38+
}(window.location))
39+
</script>
1840
</head>
1941
<body>
2042
<noscript>

‎src/App.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<template>
2-
<router-view v-slot="{ Component }">
3-
<transition name="opacity" mode="out-in">
4-
<component :is="Component" />
5-
</transition>
6-
</router-view>
2+
<router-view />
73
</template>
84

95
<script>

‎src/router/index.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createRouter, createWebHashHistory } from 'vue-router'
1+
import { createRouter, createWebHistory } from 'vue-router'
22
import Home from '../views/Home.vue'
33
import PrivacyPolicy from '../views/PrivacyPolicy.vue'
44
import CoC from '../views/CoC.vue'
@@ -28,15 +28,11 @@ const routes = [
2828
]
2929

3030
const router = createRouter({
31-
history: createWebHashHistory(),
31+
history: createWebHistory(),
3232
routes,
3333
scrollBehavior(to, from, savedPosition) {
34-
return new Promise((resolve) => {
35-
setTimeout(() => {
36-
if (savedPosition) resolve(savedPosition)
37-
else resolve({ top: 0 })
38-
}, 150)
39-
})
34+
if (savedPosition) return savedPosition
35+
return { top: 0 }
4036
}
4137
})
4238

‎src/views/Home.vue

+60-62
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,65 @@
11
<template>
2-
<div>
3-
<nav-mobile />
4-
<banner />
5-
<navbar class="nav-desktop" />
6-
<news-banner
7-
v-if="$te('newsBanner')"
8-
class="mb-small mt-small" />
9-
<div
10-
v-else
11-
class="mb-large" />
12-
<div class="container mb-xlarge">
13-
<!-- introduction -->
14-
<page-section-twitter
15-
id="introduction"
16-
:title="$t('introduction.title')"
17-
:body="$t('introduction.body')">
18-
<div class="mt-small mb-small">
19-
<company-carousel />
20-
</div>
21-
</page-section-twitter>
22-
<!-- getting started -->
23-
<page-section
24-
id="getting-started"
25-
:title="$t('gettingStarted.title')"
26-
:body="$t('gettingStarted.body')">
27-
<tab-box
28-
class="col-sm-12 col-md-9 col-md-offset-3"
29-
:tabs="$tm('gettingStarted.tabs')">
30-
<!-- list of learning resouces on 3rd tab -->
31-
<template v-slot:tab-3>
32-
<div v-for="item in $tm('resourcesList.learning')" :key="item.name" class="mt-small mb-small">
33-
<a :href="item.href">
34-
{{ item.name }}
35-
</a>
36-
<div class="type-small" v-html="item.description" />
37-
</div>
38-
</template>
39-
</tab-box>
40-
</page-section>
41-
<!-- community -->
42-
<page-section
43-
id="community"
44-
:title="$t('community.title')"
45-
:body="$t('community.body')">
46-
<div class="col-sm-12 col-md-9 col-md-offset-3 row">
47-
<community-items />
48-
<button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
49-
<router-link :to="{ name: 'CoC' }" class="type-no-underline">
50-
Code of Conduct
51-
</router-link>
52-
</button>
53-
</div>
54-
</page-section>
55-
<!-- resources -->
56-
<page-section
57-
id="resources"
58-
:title="$t('resources.title')"
59-
:body="$t('resources.body')">
60-
<resource-box class="col-sm-12 col-md-9 col-md-offset-3" />
61-
</page-section>
62-
</div>
63-
<page-footer />
2+
<nav-mobile />
3+
<banner />
4+
<navbar class="nav-desktop" />
5+
<news-banner
6+
v-if="$te('newsBanner')"
7+
class="mb-small mt-small" />
8+
<div
9+
v-else
10+
class="mb-large" />
11+
<div class="container mb-xlarge">
12+
<!-- introduction -->
13+
<page-section-twitter
14+
id="introduction"
15+
:title="$t('introduction.title')"
16+
:body="$t('introduction.body')">
17+
<div class="mt-small mb-small">
18+
<company-carousel />
19+
</div>
20+
</page-section-twitter>
21+
<!-- getting started -->
22+
<page-section
23+
id="getting-started"
24+
:title="$t('gettingStarted.title')"
25+
:body="$t('gettingStarted.body')">
26+
<tab-box
27+
class="col-sm-12 col-md-9 col-md-offset-3"
28+
:tabs="$tm('gettingStarted.tabs')">
29+
<!-- list of learning resouces on 3rd tab -->
30+
<template v-slot:tab-3>
31+
<div v-for="item in $tm('resourcesList.learning')" :key="item.name" class="mt-small mb-small">
32+
<a :href="item.href">
33+
{{ item.name }}
34+
</a>
35+
<div class="type-small" v-html="item.description" />
36+
</div>
37+
</template>
38+
</tab-box>
39+
</page-section>
40+
<!-- community -->
41+
<page-section
42+
id="community"
43+
:title="$t('community.title')"
44+
:body="$t('community.body')">
45+
<div class="col-sm-12 col-md-9 col-md-offset-3 row">
46+
<community-items />
47+
<button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
48+
<router-link :to="{ name: 'CoC' }" class="type-no-underline">
49+
Code of Conduct
50+
</router-link>
51+
</button>
52+
</div>
53+
</page-section>
54+
<!-- resources -->
55+
<page-section
56+
id="resources"
57+
:title="$t('resources.title')"
58+
:body="$t('resources.body')">
59+
<resource-box class="col-sm-12 col-md-9 col-md-offset-3" />
60+
</page-section>
6461
</div>
62+
<page-footer />
6563
</template>
6664

6765
<script>

‎src/views/Users.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<div
2929
class="card p-small mb-large"
3030
style="background-color: #fff;"
31-
:style="`transition-delay: ${(j / 10 + i / columns.length / 10) * columns.length}s;`">
31+
:style="`transition-delay: ${(j / 10 + i / columns.length / 10) * columns.length + 0.1}s;`">
3232
<div
3333
class="img-container"
3434
:style="`background-image: url(${publicPath}img/users/${user.imgName})`" />

0 commit comments

Comments
 (0)