Patch/sercurity update (#22)

* Add: Upgrade the package for security update

* Fix: Fix the resolve image in Vite 5

* fix: for new ant menu cursor style

* Update getImageUrl utility and add @types/throttle

Refactored getImageUrl to simplify asset URL retrieval using import.meta.glob with 'query' and 'import' options. Added @types/throttle to devDependencies for improved type support.

* Improve NavigationBar brand styling

* Refine NavigationBar styling and menu logic

Removes unnecessary margin from the brand image and disables the border under the first menu item. Also updates menu item selection logic to handle leading/trailing slashes in the pathname and removes the disabled state from the brand menu item.

---------

Co-authored-by: 猴貓 <a102009102009@gmail.com>

Author: whats2000

package.json

@@ -15,13 +15,14 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.0",
     "@swc/core": "^1.4.8",
-    "@swc/plugin-styled-components": "^1.5.119",
+    "@swc/plugin-styled-components": "^12.0.1",
     "@types/i18next-browser-languagedetector": "^3.0.0",
     "@types/react-lazy-load-image-component": "^1.6.3",
     "antd": "^5.14.1",
     "axios": "^1.12.0",
     "i18next": "^23.9.0",
     "i18next-browser-languagedetector": "^7.2.0",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
@@ -31,20 +32,20 @@
     "react-share": "^5.1.0",
     "react-typed": "^2.0.12",
     "styled-components": "^6.1.8",
-    "vite": "^5.4.21",
+    "vite": "^6.4.1",
     "youtube-iframe": "^1.0.3"
   },
   "devDependencies": {
-    "@childrentime/devcert": "^1.2.8",
     "@types/estree": "^1.0.5",
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.34",
+    "@types/throttle": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "critters": "^0.0.20",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "critters": "^0.0.24",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -63,6 +64,6 @@
     "typescript": "^5.2.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-image-optimizer": "^1.1.7",
-    "vite-react-ssg": "^0.6.0"
+    "vite-react-ssg": "^0.8.9"
   }
 }

src/components/common/NavigationBar.tsx

@@ -37,7 +37,6 @@ const NavigationBarContainer = styled.div<{
 
 const Brand = styled.img`
   height: 40px;
-  margin-right: 20px;
 
   @media (max-width: 290px) {
     display: none;
@@ -63,6 +62,11 @@ const StyledMenu = styled(Menu)`
       color: #b1dde6;
     }
   }
+
+  /* brand */
+  .ant-menu-item:first-child::after {
+    border-bottom: none !important;
+  }
 `;
 
 /**
@@ -105,7 +109,6 @@ const NavigationBar: React.FC = () => {
           <Brand src='/brand.webp' alt='brand' />
         </Link>
       ),
-      disabled: true,
     },
     {
       key: 'home',
@@ -174,7 +177,9 @@ const NavigationBar: React.FC = () => {
         mode='horizontal'
         items={[...menuItems]}
         selectedKeys={
-          location.pathname === '/' ? ['home'] : [location.pathname.slice(1)]
+          location.pathname === '/'
+            ? ['home']
+            : [location.pathname.replace(/^\/+|\/+$/g, '')]
         }
       />
     </NavigationBarContainer>

src/utils/getImageUrl.ts

@@ -1,9 +1,15 @@
+const images = import.meta.glob('/src/assets/**/*', {
+  query: '?url',
+  eager: true,
+  import: 'default',
+});
+
 /**
  * Get the URL of an image in the assets folder
  * @param snippet {string} - The snippet of the image URL
  */
 const getImageUrl = (snippet: string) => {
-  return new URL(`/src/assets/${snippet}`, import.meta.url).href;
+  return images[`/src/assets/${snippet}`] ?? '';
 };
 
 export default getImageUrl;