Show progress on route change

This commit is contained in:
taskylizard 2023-11-17 13:26:59 +05:30
parent ea66ff6c03
commit 3c525af917
No known key found for this signature in database
GPG Key ID: 5CABA3D642DDC497
5 changed files with 130 additions and 5 deletions

View File

@ -0,0 +1,23 @@
import nprogress, { type NProgress } from "nprogress";
import type { EnhanceAppContext } from "vitepress";
export function loadProgress(router: EnhanceAppContext["router"]): NProgress {
if (typeof window === "undefined") return;
setTimeout(() => {
nprogress.configure({ showSpinner: false });
const cacheBeforeRouteChange = router.onBeforeRouteChange;
const cacheAfterRouteChange = router.onAfterRouteChanged;
router.onBeforeRouteChange = (to) => {
nprogress.start();
cacheBeforeRouteChange?.(to);
};
router.onAfterRouteChanged = (to) => {
nprogress.done();
cacheAfterRouteChange?.(to);
};
});
return nprogress;
}

View File

@ -1,11 +1,14 @@
import { type Theme } from "vitepress";
import DefaultTheme from "vitepress/theme";
import Layout from "./Layout.vue";
import { loadProgress } from "./composables/nprogress";
import "./style.css";
import "uno.css";
export default {
extends: DefaultTheme,
Layout,
enhanceApp({ app, router, siteData }) {},
enhanceApp({ router }) {
loadProgress(router);
},
} satisfies Theme;

View File

@ -143,3 +143,85 @@
width: 0px;
white-space: pre-wrap;
}
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: var(--vp-c-brand-1);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow:
0 0 10px var(--vp-c-brand-1),
0 0 5px var(--vp-c-brand-1);
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: var(--vp-c-brand);
border-left-color: var(--vp-c-brand);
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@ -21,6 +21,7 @@
"itty-fetcher": "^0.9.4",
"nitro-cors": "^0.7.0",
"nitropack": "latest",
"nprogress": "^0.2.0",
"pathe": "^1.1.1",
"unocss": "^0.57.1",
"vitepress": "1.0.0-rc.25",
@ -33,6 +34,7 @@
"@iconify-json/twemoji": "^1.1.12",
"@taskylizard/eslint-config": "^1.0.3",
"@types/node": "^20.8.9",
"@types/nprogress": "^0.2.3",
"eslint": "^8.53.0",
"prettier": "^3.0.3"
},

View File

@ -25,6 +25,9 @@ dependencies:
nitropack:
specifier: latest
version: 2.7.2
nprogress:
specifier: ^0.2.0
version: 0.2.0
pathe:
specifier: ^1.1.1
version: 1.1.1
@ -33,7 +36,7 @@ dependencies:
version: 0.57.1(postcss@8.4.31)(vite@4.5.0)
vitepress:
specifier: 1.0.0-rc.25
version: 1.0.0-rc.25(patch_hash=3rmcuf2hcpfiqvpp6fmjf4ydmq)(@algolia/client-search@4.20.0)(@types/node@20.8.9)(postcss@8.4.31)(search-insights@2.9.0)(typescript@5.2.2)
version: 1.0.0-rc.25(patch_hash=3rmcuf2hcpfiqvpp6fmjf4ydmq)(@algolia/client-search@4.20.0)(@types/node@20.8.9)(nprogress@0.2.0)(postcss@8.4.31)(search-insights@2.9.0)(typescript@5.2.2)
vue:
specifier: ^3.3.7
version: 3.3.7(typescript@5.2.2)
@ -57,6 +60,9 @@ devDependencies:
'@types/node':
specifier: ^20.8.9
version: 20.8.9
'@types/nprogress':
specifier: ^0.2.3
version: 0.2.3
eslint:
specifier: ^8.53.0
version: 8.53.0
@ -1650,6 +1656,10 @@ packages:
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
dev: true
/@types/nprogress@0.2.3:
resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
dev: true
/@types/resolve@1.20.2:
resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
dev: false
@ -2202,7 +2212,7 @@ packages:
- vue
dev: false
/@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.7):
/@vueuse/integrations@10.5.0(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.3.7):
resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==}
peerDependencies:
async-validator: '*'
@ -2246,6 +2256,7 @@ packages:
'@vueuse/core': 10.5.0(vue@3.3.7)
'@vueuse/shared': 10.5.0(vue@3.3.7)
focus-trap: 7.5.4
nprogress: 0.2.0
vue-demi: 0.14.6(vue@3.3.7)
transitivePeerDependencies:
- '@vue/composition-api'
@ -5438,6 +5449,10 @@ packages:
set-blocking: 2.0.0
dev: false
/nprogress@0.2.0:
resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
dev: false
/nth-check@2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
dependencies:
@ -6940,7 +6955,7 @@ packages:
fsevents: 2.3.3
dev: false
/vitepress@1.0.0-rc.25(patch_hash=3rmcuf2hcpfiqvpp6fmjf4ydmq)(@algolia/client-search@4.20.0)(@types/node@20.8.9)(postcss@8.4.31)(search-insights@2.9.0)(typescript@5.2.2):
/vitepress@1.0.0-rc.25(patch_hash=3rmcuf2hcpfiqvpp6fmjf4ydmq)(@algolia/client-search@4.20.0)(@types/node@20.8.9)(nprogress@0.2.0)(postcss@8.4.31)(search-insights@2.9.0)(typescript@5.2.2):
resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
hasBin: true
peerDependencies:
@ -6958,7 +6973,7 @@ packages:
'@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.7)
'@vue/devtools-api': 6.5.1
'@vueuse/core': 10.5.0(vue@3.3.7)
'@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.7)
'@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.3.7)
focus-trap: 7.5.4
mark.js: 8.11.1
minisearch: 6.2.0