(add) nprogress

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;

assets/css/nprogress.css

@@ -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);
+    }
+}

components/mk/Mfm.ts

@@ -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;

nuxt.config.ts

@@ -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",
 	],

package.json

@@ -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",

pnpm-lock.yaml

@@ -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: