diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx index 6e9c9e6..82438a4 100644 --- a/app/(landing)/page.tsx +++ b/app/(landing)/page.tsx @@ -11,7 +11,7 @@ export default function Home() {
-

+

OpenSeries:{" "} @@ -34,7 +34,7 @@ export default function Home() { {link.name} diff --git a/app/layout.tsx b/app/layout.tsx index 02cc9d8..dbbb59e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -48,7 +48,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: ReactNode }) { return ( - + diff --git a/bun.lockb b/bun.lockb index 738b420..6ff456a 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/landing-svg/index.tsx b/components/landing-svg/index.tsx index 8bb61cb..30b83d6 100644 --- a/components/landing-svg/index.tsx +++ b/components/landing-svg/index.tsx @@ -1,140 +1,460 @@ import { useTheme } from "next-themes"; -import { SVGProps, useEffect } from "react"; +import { SVGProps, useEffect, useRef } from "react"; +import { twMerge } from "tailwind-merge"; const LandingSvg = (props: SVGProps) => { + const pathsRef = useRef([]); const { theme, systemTheme } = useTheme(); const currentTheme = theme === "system" ? systemTheme : theme; useEffect(() => { - const paths = document.querySelectorAll("#landing-svg path"); + const paths = pathsRef.current; - function animatePath(path: SVGPathElement) { + paths.forEach((path) => { const length = String(path.getTotalLength()); path.style.setProperty("--stroke-dasharray", length); path.style.setProperty("--stroke-dashoffset", length); - const delay = Math.random() * 50000; + const delay = Math.random() * 5000; - setTimeout(() => { - path.style.animation = `landing-svg-anim-${currentTheme} 5s ease-in-out infinite`; - path.style.strokeDashoffset = length; - }, delay); - } - - paths.forEach((path) => animatePath(path)); + path.style.animation = `5s ease-in-out ${delay}ms infinite landing-svg-anim-${currentTheme}`; + }); }, [currentTheme]); + const savePathRef = (path: SVGPathElement) => { + if (path) pathsRef.current.push(path); + }; + return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + path]:will-change-[stroke-dashoffset]", props.className)} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/components/navbar/breadcrumbs.tsx b/components/navbar/breadcrumbs.tsx index 64eaf30..0070123 100644 --- a/components/navbar/breadcrumbs.tsx +++ b/components/navbar/breadcrumbs.tsx @@ -23,7 +23,7 @@ const Breadcrumbs = () => { {label} {pathNames.length !== index + 1 && ( - +
  • )} ); diff --git a/components/navbar/navbar-content.tsx b/components/navbar/navbar-content.tsx index 4964a1e..127827c 100644 --- a/components/navbar/navbar-content.tsx +++ b/components/navbar/navbar-content.tsx @@ -39,12 +39,12 @@ const NavbarContent = ({ version }: Props) => { > OpenSeries - + {version} Changelog OpenSeries {version} @@ -57,7 +57,7 @@ const NavbarContent = ({ version }: Props) => { {navLinks.map((link) => ( setIsOpen(false)} @@ -75,6 +75,7 @@ const NavbarContent = ({ version }: Props) => { className={`grid h-10 w-10 place-items-center rounded-lg text-xl text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700`} > + {link.name} ))} @@ -85,6 +86,7 @@ const NavbarContent = ({ version }: Props) => { + Toggle Navbar

    @@ -96,6 +98,7 @@ const NavbarContent = ({ version }: Props) => { className="grid h-10 w-10 place-items-center rounded-lg text-xl text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 lg:hidden" > + Buka Navbar diff --git a/components/sidebar/index.tsx b/components/sidebar/index.tsx index 523f8af..d82882b 100644 --- a/components/sidebar/index.tsx +++ b/components/sidebar/index.tsx @@ -27,6 +27,7 @@ const Sidebar = ({ sidebarLinks }: Props) => { className="absolute right-5 top-10 block text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300 lg:hidden" > + Tutup Sidebar
    {featuredLinks.map((link) => ( @@ -35,7 +36,7 @@ const Sidebar = ({ sidebarLinks }: Props) => { key={link.name} target={link.target} onClick={() => toggleSidebar()} - className="group flex items-center gap-2 font-medium text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300" + className="group flex items-center gap-2 font-medium text-zinc-600 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300" >
    { {sidebarLinks[category].map((item) => ( toggleSidebar()} > diff --git a/components/theme-switcher/index.tsx b/components/theme-switcher/index.tsx index 9807c9e..345e938 100644 --- a/components/theme-switcher/index.tsx +++ b/components/theme-switcher/index.tsx @@ -25,6 +25,7 @@ const ThemeSwitcher = () => { onClick={() => setTheme("light")} > + Light Mode ); } else { @@ -34,6 +35,7 @@ const ThemeSwitcher = () => { onClick={() => setTheme("dark")} > + Dark Mode ); } diff --git a/mdx-components.tsx b/mdx-components.tsx index 19bd5bf..cc1223c 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -1,7 +1,10 @@ import type { MDXComponents } from "mdx/types"; +import Image, { ImageProps } from "next/image"; export function useMDXComponents(components: MDXComponents): MDXComponents { return { + // eslint-disable-next-line jsx-a11y/alt-text + img: (props) => , ...components }; } diff --git a/package.json b/package.json index aa0d61f..8b2ecc2 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,9 @@ "react-py": "^1.10.6", "rehype-pretty-code": "^0.12.6", "remark-gfm": "^4.0.0", + "sharp": "^0.33.2", "shikiji": "^0.9.0", + "tailwind-merge": "^2.2.1", "thememirror": "^2.0.1", "zustand": "^4.5.0" },