init

docs/.vitepress/theme/Layout.vue

@@ -1,10 +1,28 @@
 <script setup lang="ts">
+import { BProgress } from '@bprogress/core'
 import DefaultTheme from 'vitepress/theme'
 import Announcement from './components/Announcement.vue'
 import Sidebar from './components/SidebarCard.vue'
 
+import '@bprogress/core/css'
+
 const { isDark } = useData()
 
+const router = useRouter()
+
+BProgress.configure({
+  showSpinner: false,
+  easing: 'ease'
+})
+
+router.onBeforeRouteChange = () => {
+  BProgress.start()
+}
+
+router.onAfterRouteChange = () => {
+  BProgress.done()
+}
+
 const enableTransitions = () =>
   'startViewTransition' in document &&
   window.matchMedia('(prefers-reduced-motion: no-preference)').matches
@@ -23,7 +41,6 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     )}px at ${x}px ${y}px)`
   ]
 
-  // @ts-expect-error
   await document.startViewTransition(async () => {
     isDark.value = !isDark.value
     await nextTick()
@@ -61,6 +78,10 @@ const { Layout } = DefaultTheme
 </template>
 
 <style>
+:root {
+  --bprogress-color: var(--vp-c-brand);
+}
+
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;

docs/.vitepress/theme/components/ColorPicker.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import { colors } from '@fmhy/colors'
 import { useStorage, useStyleTag } from '@vueuse/core'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from 'reka-ui'
 import { watch } from 'vue'
 
 const colorScales = [
@@ -22,7 +33,7 @@ const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
 
 const colorOptions = Object.keys(colors).filter(
   (key) => typeof colors[key as keyof typeof colors] === 'object'
-) as Array<ColorNames>
+)
 
 const { css } = useStyleTag('', { id: 'brand-color' })
 
@@ -60,29 +71,44 @@ watch(selectedColor, updateThemeColor)
 const normalizeColorName = (colorName: string) =>
   colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
   colorName.slice(1).replaceAll(/-/g, ' ')
+
+const handleColorChange = (value: string) => {
+  selectedColor.value = value as ColorNames
+}
 </script>
 
 <template>
-  <div>
+  <div class="color-picker">
-    <div class="flex flex-wrap gap-2">
+    <SelectRoot :model-value="selectedColor" @update:model-value="handleColorChange">
-      <div v-for="color in colorOptions" :key="color">
+      <SelectTrigger
-        <button
+        class="inline-flex items-center justify-between px-3 py-2 text-sm bg-bg-alt border border-div rounded-md hover:bg-bg-elv transition-colors min-w-[180px] mx-auto align-left"
-          :class="[
+        aria-label="Select theme color">
-            'inline-block w-6 h-6 rounded-full transition-all duration-200'
+        <div class="flex items-center gap-2">
-          ]"
+          <span class="inline-block w-4 h-4 rounded-full border border-div"
-          @click="selectedColor = color"
+            :style="{ backgroundColor: colors[selectedColor][500] }" />
-          :title="normalizeColorName(color)"
+          <SelectValue :placeholder="normalizeColorName(selectedColor)" />
-        >
+        </div>
-          <span
+        <span class="i-lucide:chevron-down w-4 h-4 text-text-2" />
-            class="inline-block w-6 h-6 rounded-full"
+      </SelectTrigger>
-            :style="{ backgroundColor: colors[color][500] }"
-          />
-        </button>
-      </div>
-    </div>
 
-    <div class="mt-2 text-sm text-$vp-c-text-2">
+      <SelectPortal>
-      Selected: {{ normalizeColorName(selectedColor) }}
+        <SelectContent class="bg-bg-elv border border-div rounded-md shadow-lg z-50 max-h-60 overflow-hidden z-9999"
-    </div>
+          :side-offset="4">
+          <SelectViewport class="p-1">
+            <SelectItem v-for="color in colorOptions" :key="color" :value="color"
+              class="relative flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-bg-alt rounded-sm outline-none data-[highlighted]:bg-bg-alt data-[state=checked]:bg-bg-alt data-[state=checked]:text-text">
+              <span class="inline-block w-4 h-4 rounded-full border border-div"
+                :style="{ backgroundColor: colors[color][500] }" />
+              <SelectItemText>
+                {{ normalizeColorName(color) }}
+              </SelectItemText>
+              <SelectItemIndicator class="absolute right-2">
+                <span class="i-lucide:check w-4 h-4 text-text-2" />
+              </SelectItemIndicator>
+            </SelectItem>
+          </SelectViewport>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
   </div>
 </template>

docs/.vitepress/theme/components/SidebarCard.vue

@@ -7,8 +7,7 @@ import ToggleStarred from './ToggleStarred.vue'
 
 <template>
   <div
-    class="bg-$vp-c-bg hover:bg-$vp-c-bg/40 border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500"
+    class="bg-$vp-c-bg border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500">
-  >
     <div class="align-center mb-4 flex justify-between">
       <div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">
         Emoji Legend

docs/.vitepress/theme/index.ts

@@ -17,7 +17,6 @@
 import type { Theme } from 'vitepress'
 import Components from '@fmhy/components'
 import DefaultTheme from 'vitepress/theme'
-import { loadProgress } from './composables/nprogress'
 import Layout from './Layout.vue'
 import Post from './PostLayout.vue'
 
@@ -33,6 +32,5 @@ export default {
     app.use(Components)
     app.component('Post', Post)
     app.component('Feedback', Feedback)
-    loadProgress(router)
   }
 } satisfies Theme

docs/.vitepress/theme/style.scss

@@ -20,8 +20,12 @@
   --vp-button-alt-hover-bg: #484848;
   --vp-button-alt-hover-text: #f0eeee;
 
-  --vp-c-bg-elv: rgba(255, 255, 255, 0.7);
+  /* Colors: Background */
-  --vp-c-bg-mark: rgb(232, 232, 232);
+ --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
+
 
   /* Colors: Custom Block */
   /** Info */
@@ -54,9 +58,10 @@
   --vp-c-brand-soft: theme('colors.swarm.300');
 
   /* Colors: Background */
-  --vp-c-bg: rgb(26, 26, 26);
+  --vp-c-bg: #1a1a1a;
-  --vp-c-bg-alt: rgb(23, 23, 23);
+  --vp-c-bg-alt: #151515;
-  --vp-c-bg-elv: rgba(23, 23, 23, 0.8);
+  --vp-c-bg-elv: #1f1f1f;
+  --vp-c-bg-soft: #1f1f1f;
 
   /* Colors: Custom Block */
   /** Info */
@@ -103,11 +108,12 @@
   text-decoration-style: solid;
 }
 
+
 ::selection {
-  background-color: #5586a6;
+  background-color: var(--vp-c-brand-400, #5586a6);
 
   .dark & {
-    background-color: #0f2c47;
+    background-color: var(--vp-c-brand-800, #0f2c47);
   }
 }
 
@@ -164,94 +170,6 @@
   }
 }
 
-.base64 {
-  min-width: 100%;
-  width: 0px;
-  white-space: pre-wrap;
-}
-
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-
-  & .bar {
-    background: var(--vp-c-brand-1);
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-  }
-
-  /* Fancy blur effect */
-  & .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);
-  }
-
-  & .spinner {
-    display: block;
-    position: fixed;
-    z-index: 1031;
-    top: 15px;
-    right: 15px;
-  }
-
-  & .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);
-  }
-}
 
 #VPContent strong > a {
   font-weight: bold;

package.json

@@ -20,6 +20,7 @@
     "og:dev": "x-satori -t ./docs/.vitepress/hooks/Template.vue -c ./.vitepress/hooks/satoriConfig.ts --dev"
   },
   "dependencies": {
+    "@bprogress/core": "^1.3.4",
     "@fmhy/colors": "^0.0.11",
     "@fmhy/components": "^0.0.3",
     "@headlessui/vue": "^1.7.23",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@bprogress/core':
+        specifier: ^1.3.4
+        version: 1.3.4
       '@fmhy/colors':
         specifier: ^0.0.11
         version: 0.0.11
@@ -343,6 +346,9 @@ packages:
     resolution: {integrity: sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==}
     engines: {node: '>=6.9.0'}
 
+  '@bprogress/core@1.3.4':
+    resolution: {integrity: sha512-q/AqpurI/1uJzOrQROuZWixn/+ARekh+uvJGwLCP6HQ/EqAX4SkvNf618tSBxL4NysC0MwqAppb/mRw6Tzi61w==}
+
   '@cloudflare/kv-asset-handler@0.3.4':
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
@@ -4430,6 +4436,8 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@bprogress/core@1.3.4': {}
+
   '@cloudflare/kv-asset-handler@0.3.4':
     dependencies:
       mime: 3.0.0