feat(ui): integrate mantine spotlight

gatsby-browser.js

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react/jsx-filename-extension */
 /* eslint-disable import/prefer-default-export */
-import '@mantine/core/styles.css';
+import * as mantineCoreStyle from '@mantine/core/styles.css';
+import * as mantineSpotLightStyle from '@mantine/spotlight/styles.css';
 import { MantineProvider } from '@mantine/core';
 import MantineTheme from './src/theme';
 
@@ -21,13 +23,18 @@ export const wrapPageElement = ({ element, props }) => {
   // Apply the layout component to other pages
   return (
     <MantineProvider
-      defaultColorScheme='dark'
+      defaultColorScheme="dark"
       theme={MantineTheme}
       withCSSVariables
       withGlobalStyles
       withNormalizeCSS
     >
-      <Layout {...props}>{element}</Layout>
+      <Layout
+        {...props}
+        style={{ ...mantineCoreStyle, ...mantineSpotLightStyle }}
+      >
+        {element}
+      </Layout>
     </MantineProvider>
   );
 };

gatsby-ssr.js

@@ -1,10 +1,5 @@
 /* eslint-disable react/jsx-filename-extension */
 /* eslint-disable import/prefer-default-export */
-
-import './src/styles/global.css';
-import './src/styles/prism-dracula.css';
-import './src/styles/prism-plus.css';
-import '@mantine/core/styles.css';
 import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import Layout from './src/components/layout';
 import MantineTheme from './src/theme';
@@ -32,7 +27,7 @@ export const wrapPageElement = ({ element, props }) => {
   // Apply the layout component to other pages
   return (
     <MantineProvider
-      defaultColorScheme='dark'
+      defaultColorScheme="dark"
       theme={MantineTheme}
       withCSSVariables
       withGlobalStyles

package.json

@@ -23,16 +23,16 @@
   "dependencies": {
     "@mantine/core": "^7.7.1",
     "@mantine/hooks": "^7.7.1",
+    "@mantine/spotlight": "^7.7.1",
     "@mdx-js/react": "^2.3.0",
-    "@react-hooks-library/core": "^0.5.1",
-    "@react-icons/all-files": "^4.1.0",
+    "@tabler/icons-react": "^3.1.0",
     "chart.js": "^4.3.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.12.18",
-    "gatsby": "^5.10.0",
+    "gatsby": "^5.13.4",
     "gatsby-plugin-image": "^3.11.0",
     "gatsby-plugin-manifest": "^5.11.0",
     "gatsby-plugin-mdx": "^5.11.0",
@@ -83,14 +83,14 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "gatsby-plugin-postcss": "^6.11.0",
+    "gatsby-plugin-postcss": "^6.13.1",
     "gh-pages": "^5.0.0",
-    "postcss": "^8.4.33",
-    "postcss-preset-mantine": "^1.12.3",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "2.8.8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.1.3"
+    "typescript": "^5.4.5"
   },
   "overrides": {
     "[email protected]": {

src/components/blog-card.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, useMemo } from 'react';
 import { motion } from 'framer-motion';
 import { StaticImage } from 'gatsby-plugin-image';
-import { FcRemoveImage } from '@react-icons/all-files/fc/FcRemoveImage';
+import { IconPhotoCancel } from '@tabler/icons-react';
 import { Img } from 'react-image';
 import { Badge } from '@mantine/core';
 import { formatDateMonthName } from '../utils/format-date';
@@ -66,7 +66,7 @@ const BlogCard = ({ data, onClick }: BlogCardProps) => {
             }
             unloader={
               <div className="flex flex-col items-center justify-center w-[5.5rem] h-28 sm:w-[11rem] sm:h-28 object-cover">
-                <FcRemoveImage size="2.5rem" />
+                <IconPhotoCancel size="2.5rem" />
               </div>
             }
           />

src/components/code-copy-toolbar.tsx

@@ -1,5 +1,4 @@
-import { FaClipboard } from '@react-icons/all-files/fa/FaClipboard';
-import { FaClipboardCheck } from '@react-icons/all-files/fa/FaClipboardCheck';
+import { IconClipboard, IconClipboardCheck } from '@tabler/icons-react';
 import { useCallback, useEffect, useState } from 'react';
 import { Badge, Button } from '@mantine/core';
 import delay from '../utils/delay';
@@ -36,7 +35,7 @@ const CodeCopyToolbar = ({ lang, text }: CodeCopyToolbarProps) => {
         className="absolute h-[1.5rem] transition-all rounded-full top-2 right-1"
         onClick={handleCopy}
       >
-        {isCopy ? <FaClipboardCheck /> : <FaClipboard />}
+        {isCopy ? <IconClipboardCheck /> : <IconClipboard />}
       </Button>
       <Badge
         color="violet"

src/components/cube.tsx

@@ -79,7 +79,7 @@ export const cubeColorMap = {
 const Cube = ({ color = 'purple', icon, className }: CubeProps) => (
   <div
     className={cn(
-      'relative flex items-center justify-center w-[120px] h-[120px] rounded-md scale-50 transition-transform',
+      'relative flex items-center justify-center w-[64px] h-[64px] rounded-md scale-[0.4] transition-transform',
       className
     )}
   >