feat: add navigating progress

Author: sunls24

web/astro.config.mjs

@@ -13,7 +13,8 @@ export default defineConfig({
     plugins: [tailwindcss()],
     server: {
       proxy: {
-        "/api": "http://127.0.0.1:3000",
+        // "/api": "http://127.0.0.1:3000",
+        "/api": "https://tool.sunls.de",
       },
     },
   },

web/public/apple-icon.png

@@ -1,9 +1,10 @@
 ---
 import ThemeIcon from "@/components/ThemeIcon.astro"
+import Navigating from "@/components/tsx/Navigating"
 import { Button } from "@/components/ui/button"
 import { VERSION } from "@/lib/constants"
 import clsx from "clsx"
-import { DraftingCompass, Github, ToolCase } from "lucide-react"
+import { Github, ToolCase } from "lucide-react"
 
 interface Props {
   wide: boolean
@@ -12,7 +13,7 @@ interface Props {
 const { wide } = Astro.props
 ---
 
-<div class="bg-sidebar border-b py-3 shadow-xs">
+<div class="bg-sidebar relative border-b py-3 shadow-xs">
   <div
     class={clsx(
       "mx-auto flex w-5/6 items-center px-2",
@@ -36,6 +37,7 @@ const { wide } = Astro.props
       {VERSION}
     </Button>
   </div>
+  <Navigating client:load />
 </div>
 
 <script>

web/public/favicon.ico

@@ -7,8 +7,9 @@ const { tool } = Astro.props
   transition:name={tool.route}
 >
   <img
+    width="24"
+    height="24"
     src={tool.image}
-    class="h-5"
     alt={tool.name}
     draggable={false}
     transition:name={tool.image}

web/public/favicon.svg

@@ -0,0 +1,15 @@
+import { $navigating } from "@/lib/store/store"
+import { useStore } from "@nanostores/react"
+
+function Navigating() {
+  const navigating = useStore($navigating)
+  if (!navigating) {
+    return null
+  }
+
+  return (
+    <div className="animate-progress absolute -bottom-0.5 left-0 h-0.5 bg-green-400 dark:bg-green-600" />
+  )
+}
+
+export default Navigating

web/src/components/Header.astro

@@ -21,7 +21,7 @@ const title = tool ? tool.name : "开发者工具箱"
     <meta charset="UTF-8" />
     <meta name="generator" content={Astro.generator} />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="devtools" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
@@ -80,3 +80,14 @@ const title = tool ? tool.name : "开发者工具箱"
   applyTheme()
   document.addEventListener("astro:after-swap", applyTheme)
 </script>
+
+<script>
+  import { $navigating } from "@/lib/store/store"
+
+  document.addEventListener("astro:before-preparation", () =>
+    $navigating.set(true)
+  )
+  document.addEventListener("astro:after-preparation", () =>
+    $navigating.set(false)
+  )
+</script>

web/src/components/Title.astro

@@ -1,3 +1,6 @@
 import { persistentAtom } from "@nanostores/persistent"
+import { atom } from "nanostores"
 
 export const $theme = persistentAtom<string>("theme")
+
+export const $navigating = atom(false)

web/src/components/tsx/Navigating.tsx

@@ -21,8 +21,11 @@ import { ExternalLink, Zap } from "lucide-react"
               >
                 <div class="flex items-center gap-2">
                   <img
+                    width=28
+                    height=28
+                    loading="lazy"
+                    decoding="async"
                     src={tool.image}
-                    class="h-7"
                     alt={tool.name}
                     draggable={false}
                     transition:name={tool.image}