mirror of
https://iceshrimp.dev/Crimekillz/jointrashposs.git
synced 2024-11-22 00:43:50 +01:00
(add) nprogress
This commit is contained in:
kakkokari-gtyih
parent
01f8bc5aae
commit
b22233c4a4
12
app.vue
12
app.vue
@ -1,12 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import NProgress from 'nprogress';
|
||||
import type { Graph, Thing } from 'schema-dts';
|
||||
import ExtIco from 'bi/box-arrow-up-right.svg';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const colorMode = useColorMode();
|
||||
const baseUrl = useRuntimeConfig().public.baseUrl as string;
|
||||
|
||||
router.beforeEach(() => {
|
||||
NProgress.start();
|
||||
});
|
||||
router.afterEach(() => {
|
||||
setTimeout(() => {
|
||||
NProgress.done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
const getDescription = (): string => {
|
||||
if (route.meta.description != null && route.meta.description != "") {
|
||||
return route.meta.description;
|
||||
|
||||
84
assets/css/nprogress.css
Normal file
84
assets/css/nprogress.css
Normal file
@ -0,0 +1,84 @@
|
||||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #4ab300;
|
||||
|
||||
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 #4ab300, 0 0 5px #4ab300;
|
||||
opacity: 1.0;
|
||||
|
||||
-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: #4ab300;
|
||||
border-left-color: #4ab300;
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,8 @@
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { VNode, h } from 'vue';
|
||||
import { h } from 'vue';
|
||||
import type { VNode } from 'vue';
|
||||
import * as mfm from 'mfm-js';
|
||||
import MkGoogle from '@/components/mk/Google.vue';
|
||||
import MkSparkle from '@/components/mk/Sparkle.vue';
|
||||
@ -11,6 +12,7 @@ import MkCustomEmoji from '@/components/mk/CustomEmoji.vue';
|
||||
import MkMention from '@/components/mk/Mention.vue';
|
||||
import NuxtLink from '@/components/g/NuxtLink.vue';
|
||||
import ProseAVue from '@/components/content/ProseA.vue';
|
||||
import '@/assets/css/mfm.scss';
|
||||
|
||||
const QUOTE_STYLE = `
|
||||
display: block;
|
||||
|
||||
@ -25,7 +25,7 @@ export default defineNuxtConfig({
|
||||
},
|
||||
css: [
|
||||
"github-markdown-css/github-markdown.css",
|
||||
"@/assets/css/mfm.scss",
|
||||
"@/assets/css/nprogress.css",
|
||||
"@/assets/css/tailwind.css",
|
||||
"@/assets/css/bootstrap-forms.scss",
|
||||
],
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"@nuxtjs/i18n": "8.0.0-beta.13",
|
||||
"@types/js-yaml": "^4.0.5",
|
||||
"@types/node": "^18.17.15",
|
||||
"@types/nprogress": "^0.2.2",
|
||||
"@types/rellax": "^1.7.4",
|
||||
"@types/three": "^0.153.0",
|
||||
"@types/tinycolor2": "^1.4.3",
|
||||
@ -26,6 +27,7 @@
|
||||
"meshline": "^3.1.6",
|
||||
"mfm-js": "^0.23.3",
|
||||
"misskey-js": "^0.0.16",
|
||||
"nprogress": "^0.2.0",
|
||||
"nuxt": "^3.7.3",
|
||||
"postcss": "^8.4.29",
|
||||
"rellax": "^1.12.1",
|
||||
|
||||
@ -34,6 +34,9 @@ devDependencies:
|
||||
'@types/node':
|
||||
specifier: ^18.17.15
|
||||
version: 18.17.18
|
||||
'@types/nprogress':
|
||||
specifier: ^0.2.2
|
||||
version: 0.2.2
|
||||
'@types/rellax':
|
||||
specifier: ^1.7.4
|
||||
version: 1.7.4
|
||||
@ -64,6 +67,9 @@ devDependencies:
|
||||
misskey-js:
|
||||
specifier: ^0.0.16
|
||||
version: 0.0.16
|
||||
nprogress:
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0
|
||||
nuxt:
|
||||
specifier: ^3.7.3
|
||||
version: 3.7.3(@types/node@18.17.18)(sass@1.68.0)(typescript@5.2.2)
|
||||
@ -1098,7 +1104,7 @@ packages:
|
||||
/@nuxt/content-edge@2.8.2-28233414.6d70135(vue@3.3.4):
|
||||
resolution: {integrity: sha512-JBhIByJpVsIi/NJnNrNjiEWygP81K1CMaqOdhmSnPukYE+Mawp6CeYEsm2baYXKsLISAUDsC9h17JAxdVOJCRA==}
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.7.3
|
||||
'@nuxt/kit': 3.8.0
|
||||
'@nuxtjs/mdc': 0.1.6
|
||||
'@vueuse/head': 1.3.1(vue@3.3.4)
|
||||
consola: 3.2.3
|
||||
@ -1116,7 +1122,7 @@ packages:
|
||||
shiki-es: 0.14.0
|
||||
slugify: 1.6.6
|
||||
socket.io-client: 4.7.2
|
||||
ufo: 1.3.0
|
||||
ufo: 1.3.1
|
||||
unstorage: 1.9.0
|
||||
ws: 8.14.2
|
||||
transitivePeerDependencies:
|
||||
@ -1417,7 +1423,7 @@ packages:
|
||||
remark-rehype: 10.1.0
|
||||
scule: 1.0.0
|
||||
shiki-es: 0.14.0
|
||||
ufo: 1.3.0
|
||||
ufo: 1.3.1
|
||||
unified: 11.0.3
|
||||
unist-builder: 4.0.0
|
||||
unist-util-visit: 5.0.0
|
||||
@ -1968,6 +1974,10 @@ packages:
|
||||
resolution: {integrity: sha512-/4QOuy3ZpV7Ya1GTRz5CYSz3DgkKpyUptXuQ5PPce7uuyJAOR7r9FhkmxJfvcNUXyklbC63a+YvB3jxy7s9ngw==}
|
||||
dev: true
|
||||
|
||||
/@types/nprogress@0.2.2:
|
||||
resolution: {integrity: sha512-2wLrSJXLztGmr7wXwM0hA/wuIOY9DznVdd+ZFofHOiXcj9JnVt+2ZeLRJ7v5ZVlmheSkUOSg3Q3O4Ce7yji79A==}
|
||||
dev: true
|
||||
|
||||
/@types/parse5@6.0.3:
|
||||
resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
|
||||
dev: true
|
||||
@ -4317,7 +4327,7 @@ packages:
|
||||
node-forge: 1.3.1
|
||||
pathe: 1.1.1
|
||||
std-env: 3.4.3
|
||||
ufo: 1.3.0
|
||||
ufo: 1.3.1
|
||||
untun: 0.1.2
|
||||
uqr: 0.1.2
|
||||
dev: true
|
||||
@ -5464,6 +5474,10 @@ packages:
|
||||
set-blocking: 2.0.0
|
||||
dev: true
|
||||
|
||||
/nprogress@0.2.0:
|
||||
resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
|
||||
dev: true
|
||||
|
||||
/nth-check@2.1.1:
|
||||
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
|
||||
dependencies:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user