Add Vanilla Macros navigation and update dependencies; refactor context and components

Author: PentSec

package.json

@@ -11,7 +11,7 @@
         "test": "vitest"
     },
     "dependencies": {
-        "@heroui/react": "2.7.2",
+        "@heroui/react": "2.7.4",
         "@heroui/use-infinite-scroll": "2.2.3",
         "@heroui/use-theme": "2.1.2",
         "@tailwindcss/typography": "^0.5.16",
@@ -26,6 +26,7 @@
         "react-toastify": "^11.0.3",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
+        "tailwind-scrollbar": "^4.0.1",
         "tailwind-variants": "^0.3.1",
         "use-dark-mode": "^2.3.1"
     },

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import { DownloadAddon, RoutesNotFound } from '@/components'
 import { useSEO } from '@/hook/useSEO'
-import { Addons, ElvUI, Guides, Home, Notes, Post, WeakAuras } from '@/pages'
+import { Addons, ElvUI, Guides, Home, Notes, Post, Vmacros, WeakAuras } from '@/pages'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 
@@ -23,6 +23,8 @@ const AppRoutes = () => {
                     <Route path="/download/:addonName" element={<DownloadAddon />} />
                     <Route path="/WeakAuras" element={<WeakAuras />} />
                     <Route path="/ElvUI" element={<ElvUI />} />
+                    <Route path="/Vmacros" element={<Vmacros />} />
+                    {/* <Route path="/Vmacros/:filePath?" element={<Vmacros />} /> */}
                     <Route path="/Guides" element={<Guides />} />
                     <Route path="/Post/:folder" element={<Post />} />
                     <Route path="/Notes/*" element={<Notes />} />

src/Routes/Routes.tsx

@@ -0,0 +1,97 @@
+import { motion, useAnimation } from 'framer-motion'
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
+
+export interface BookTextIconHandle {
+    startAnimation: () => void
+    stopAnimation: () => void
+}
+
+interface BookTextIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number
+}
+
+const BookTextIcon = forwardRef<BookTextIconHandle, BookTextIconProps>(
+    ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+        const controls = useAnimation()
+        const isControlledRef = useRef(false)
+
+        useImperativeHandle(ref, () => {
+            isControlledRef.current = true
+
+            return {
+                startAnimation: () => controls.start('animate'),
+                stopAnimation: () => controls.start('normal')
+            }
+        })
+
+        const handleMouseEnter = useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!isControlledRef.current) {
+                    controls.start('animate')
+                } else {
+                    onMouseEnter?.(e)
+                }
+            },
+            [controls, onMouseEnter]
+        )
+
+        const handleMouseLeave = useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!isControlledRef.current) {
+                    controls.start('normal')
+                } else {
+                    onMouseLeave?.(e)
+                }
+            },
+            [controls, onMouseLeave]
+        )
+
+        return (
+            <div
+                className={`cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center ${className}`}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                {...props}
+            >
+                <motion.svg
+                    animate={controls}
+                    variants={{
+                        animate: {
+                            scale: [1, 1.04, 1],
+                            rotate: [0, -8, 8, -8, 0],
+                            y: [0, -2, 0],
+                            transition: {
+                                duration: 0.6,
+                                ease: 'easeInOut',
+                                times: [0, 0.2, 0.5, 0.8, 1]
+                            }
+                        },
+                        normal: {
+                            scale: 1,
+                            rotate: 0,
+                            y: 0
+                        }
+                    }}
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={size}
+                    height={size}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                >
+                    <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+                    <path d="M8 11h8" />
+                    <path d="M8 7h6" />
+                </motion.svg>
+            </div>
+        )
+    }
+)
+
+BookTextIcon.displayName = 'BookTextIcon'
+
+export { BookTextIcon }

src/assets/Icons/BookTextIcon.tsx

@@ -1,7 +1,7 @@
+import { IconSvgProps } from '@/types'
 import type { Transition } from 'framer-motion'
 import { motion, useAnimation } from 'framer-motion'
 import { FC } from 'react'
-import { IconSvgProps } from '@/types'
 
 const defaultTransition: Transition = {
     times: [0, 0.4, 1],
@@ -13,7 +13,7 @@ const CircleChevronDownIcon: FC<IconSvgProps> = ({ size = 24, width, height, ...
 
     return (
         <div
-            className="cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
+            className="cursor-pointer select-none hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
             onMouseEnter={() => controls.start('animate')}
             onMouseLeave={() => controls.start('normal')}
         >

src/assets/Icons/CircleChevronDownIcon.tsx

@@ -0,0 +1,121 @@
+import type { Variants } from 'framer-motion'
+import { motion, useAnimation } from 'framer-motion'
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
+
+export interface MenuIconHandle {
+    startAnimation: () => void
+    stopAnimation: () => void
+}
+
+interface MenuIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number
+}
+
+const lineVariants: Variants = {
+    normal: {
+        rotate: 0,
+        y: 0,
+        opacity: 1
+    },
+    animate: (custom: number) => ({
+        rotate: custom === 1 ? 45 : custom === 3 ? -45 : 0,
+        y: custom === 1 ? 6 : custom === 3 ? -6 : 0,
+        opacity: custom === 2 ? 0 : 1,
+        transition: {
+            type: 'spring',
+            stiffness: 260,
+            damping: 20
+        }
+    })
+}
+
+const MenuIcon = forwardRef<MenuIconHandle, MenuIconProps>(
+    ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+        const controls = useAnimation()
+        const isControlledRef = useRef(false)
+
+        useImperativeHandle(ref, () => {
+            isControlledRef.current = true
+
+            return {
+                startAnimation: () => controls.start('animate'),
+                stopAnimation: () => controls.start('normal')
+            }
+        })
+
+        const handleMouseEnter = useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!isControlledRef.current) {
+                    controls.start('animate')
+                } else {
+                    onMouseEnter?.(e)
+                }
+            },
+            [controls, onMouseEnter]
+        )
+
+        const handleMouseLeave = useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!isControlledRef.current) {
+                    controls.start('normal')
+                } else {
+                    onMouseLeave?.(e)
+                }
+            },
+            [controls, onMouseLeave]
+        )
+        return (
+            <div
+                className={` select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center ${className}`}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                {...props}
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={size}
+                    height={size}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                >
+                    <motion.line
+                        x1="4"
+                        y1="6"
+                        x2="20"
+                        y2="6"
+                        variants={lineVariants}
+                        animate={controls}
+                        custom={1}
+                    />
+                    <motion.line
+                        x1="4"
+                        y1="12"
+                        x2="20"
+                        y2="12"
+                        variants={lineVariants}
+                        animate={controls}
+                        custom={2}
+                    />
+                    <motion.line
+                        x1="4"
+                        y1="18"
+                        x2="20"
+                        y2="18"
+                        variants={lineVariants}
+                        animate={controls}
+                        custom={3}
+                    />
+                </svg>
+            </div>
+        )
+    }
+)
+
+MenuIcon.displayName = 'MenuIcon'
+
+export { MenuIcon }

src/assets/Icons/MenuIcon.tsx

@@ -1,10 +1,12 @@
+export { BookTextIcon } from './BookTextIcon'
 export { CircleChevronDownIcon } from './CircleChevronDownIcon'
 export { DeleteIcon } from './DeleteIcon'
 export { DiscordIcon } from './DiscordIcon'
 export { DownloadIcon } from './DownloadIcon'
 export { FlameIcon } from './FlameIcon'
 export { GithubIcon } from './GithubIcon'
 export { GroupIcon } from './GroupIcon'
+export { MenuIcon } from './MenuIcon'
 export { MoonIcon } from './MoonIcon'
 export { SearchIcon } from './SearchIcon'
 export { SettingIcon } from './SettingIcon'

src/assets/Icons/index.ts

@@ -2,6 +2,35 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@layer utilities {
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: rgb(31 29 29) transparent;
+    }
+
+    .scrollbar-webkit::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .scrollbar-webkit::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .scrollbar-webkit::-webkit-scrollbar-thumb {
+        background-color: rgb(31 41 55);
+        border-radius: 20px;
+        border: 2px solid transparent;
+        -webkit-border-radius: 20px;
+        -moz-border-radius: 20px;
+        -ms-border-radius: 20px;
+        -o-border-radius: 20px;
+    }
+
+    .scrollbar-webkit::-webkit-scrollbar-button {
+        display: none;
+    }
+}
+
 @layer base {
     html {
         font-size: 16px;

src/assets/css/main.css

@@ -0,0 +1,33 @@
+import hljs from 'highlight.js'
+import { useEffect } from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
+
+const BASE_CLASSES = 'markdown-body p-1 !bg-transparent'
+const DEFAULT_CLASSES =
+    'text-default-900 gap-4 w-auto p-4 mx-auto flex-col lg:flex-row rounded-md border-small border-primary-200/40 bg-background/60 shadow-medium backdrop-blur-md mb-2 dark:prose-invert prose'
+
+const Markdown = ({ content, className }: { content: string; className?: string }) => {
+    useEffect(() => {
+        document.querySelectorAll('pre code').forEach((block) => {
+            hljs.highlightElement(block as HTMLElement)
+        })
+    }, [content])
+
+    const markdownClasses = className ? className : DEFAULT_CLASSES
+
+    return (
+        <article className={BASE_CLASSES}>
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeRaw]}
+                className={markdownClasses}
+            >
+                {content}
+            </ReactMarkdown>
+        </article>
+    )
+}
+
+export default Markdown

src/components/Markdown/Markdown.tsx

@@ -0,0 +1,42 @@
+import { CircleChevronDownIcon } from '@/assets/Icons'
+import {
+    Dropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownTrigger,
+    Link,
+    NavbarContent,
+    NavbarItem
+} from '@heroui/react'
+
+export default function Macros({ items }: { items: { label: string; href: string }[] }) {
+    return (
+        <NavbarContent className="hidden sm:flex" justify="center">
+            <Dropdown className="bg-inputs mt-3">
+                <NavbarItem>
+                    <DropdownTrigger>
+                        <Link
+                            showAnchorIcon
+                            href="#"
+                            color="foreground"
+                            anchorIcon={<CircleChevronDownIcon className="w-4 h-4 ml-1" />}
+                        >
+                            Macros
+                        </Link>
+                    </DropdownTrigger>
+                </NavbarItem>
+                <DropdownMenu aria-label="Macros" className="w-auto">
+                    {items.map((item, index) => (
+                        <DropdownItem
+                            key={index}
+                            description={`${item.label} variety `}
+                            href={item.href}
+                        >
+                            {item.label}
+                        </DropdownItem>
+                    ))}
+                </DropdownMenu>
+            </Dropdown>
+        </NavbarContent>
+    )
+}