From bbd638e86f3f4e18fa69a61626e7fee82c4a594c Mon Sep 17 00:00:00 2001 From: Melvin1663 <77887471+Melvin1663@users.noreply.github.com> Date: Mon, 25 May 2026 12:39:43 +0800 Subject: [PATCH] added more information to /docs/ --- app/components/site/Navbar.tsx | 117 ++- app/components/site/SiteFrame.tsx | 5 +- app/docs/CopyablePath.tsx | 41 + app/docs/DocsHeading.tsx | 43 + app/docs/DocsMemory.tsx | 36 + app/docs/DocsToc.tsx | 59 ++ app/docs/SupportedVersions.tsx | 62 ++ app/docs/[slug]/page.tsx | 48 + app/docs/articles/article-data.ts | 316 ++++++ app/docs/articles/article-kit.tsx | 125 +++ app/docs/articles/compatibility.tsx | 103 ++ app/docs/articles/configs.tsx | 261 +++++ app/docs/articles/flarial-nametag-icon.tsx | 188 ++++ app/docs/articles/index.ts | 20 + app/docs/articles/module-blocking.tsx | 147 +++ app/docs/articles/modules-list.tsx | 91 ++ app/docs/articles/scripting-api.tsx | 200 ++++ app/docs/articles/usage.tsx | 186 ++++ app/docs/articles/what-is-flarial.tsx | 78 ++ app/docs/dll-css-module-details.ts | 1103 ++++++++++++++++++++ app/docs/docs-data.tsx | 83 ++ app/docs/docs-types.ts | 16 + app/docs/page.tsx | 356 +------ pnpm-lock.yaml | 28 - public/flarial-icons/booster-logo.png | Bin 0 -> 2358 bytes public/flarial-icons/cyan-logo.png | Bin 0 -> 2699 bytes public/flarial-icons/gamer-logo.png | Bin 0 -> 2580 bytes public/flarial-icons/media-logo.png | Bin 0 -> 1646 bytes public/flarial-icons/red-logo.png | Bin 0 -> 7132 bytes public/flarial-icons/supporter-logo.png | Bin 0 -> 3106 bytes public/flarial-icons/white-logo.png | Bin 0 -> 1888 bytes public/misc-imgs/ingame_logo.png | Bin 0 -> 143109 bytes public/mod-icons/discord-white.png | Bin 0 -> 974 bytes tsconfig.json | 14 +- 34 files changed, 3329 insertions(+), 397 deletions(-) create mode 100644 app/docs/CopyablePath.tsx create mode 100644 app/docs/DocsHeading.tsx create mode 100644 app/docs/DocsMemory.tsx create mode 100644 app/docs/DocsToc.tsx create mode 100644 app/docs/SupportedVersions.tsx create mode 100644 app/docs/[slug]/page.tsx create mode 100644 app/docs/articles/article-data.ts create mode 100644 app/docs/articles/article-kit.tsx create mode 100644 app/docs/articles/compatibility.tsx create mode 100644 app/docs/articles/configs.tsx create mode 100644 app/docs/articles/flarial-nametag-icon.tsx create mode 100644 app/docs/articles/index.ts create mode 100644 app/docs/articles/module-blocking.tsx create mode 100644 app/docs/articles/modules-list.tsx create mode 100644 app/docs/articles/scripting-api.tsx create mode 100644 app/docs/articles/usage.tsx create mode 100644 app/docs/articles/what-is-flarial.tsx create mode 100644 app/docs/dll-css-module-details.ts create mode 100644 app/docs/docs-data.tsx create mode 100644 app/docs/docs-types.ts create mode 100644 public/flarial-icons/booster-logo.png create mode 100644 public/flarial-icons/cyan-logo.png create mode 100644 public/flarial-icons/gamer-logo.png create mode 100644 public/flarial-icons/media-logo.png create mode 100644 public/flarial-icons/red-logo.png create mode 100644 public/flarial-icons/supporter-logo.png create mode 100644 public/flarial-icons/white-logo.png create mode 100644 public/misc-imgs/ingame_logo.png create mode 100644 public/mod-icons/discord-white.png diff --git a/app/components/site/Navbar.tsx b/app/components/site/Navbar.tsx index 51af37c..3da7c71 100644 --- a/app/components/site/Navbar.tsx +++ b/app/components/site/Navbar.tsx @@ -4,7 +4,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { AnimatePresence, motion } from "framer-motion"; import { Menu, X } from "lucide-react"; -import { useEffect, useState } from "react"; +import { useEffect, useLayoutEffect, useRef, useState, type MouseEvent, type PointerEvent } from "react"; import { cn } from "../util/cn"; import { FlarialLogo } from "./FlarialLogo"; @@ -15,15 +15,44 @@ const NAV = [ { href: "/faq", label: "FAQ" }, ]; +const docsStorageKey = "flarial:last-docs-article"; +const docsSlugs = new Set([ + "what-is-flarial", + "usage", + "compatibility", + "configs", + "modules-list", + "flarial-nametag-icon", + "module-blocking", + "scripting-api", +]); + +function getRememberedDocsHref() { + if (typeof window === "undefined") { + return "/docs"; + } + + const slug = window.localStorage.getItem(docsStorageKey); + return slug && docsSlugs.has(slug) ? `/docs/${slug}/` : "/docs"; +} + export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () => void } = {}) { const pathname = usePathname(); const isHome = pathname === "/"; + const navRef = useRef(null); + const navItemRefs = useRef<(HTMLAnchorElement | null)[]>([]); + const lastTouchToggleAtRef = useRef(0); /* Two thresholds: a small one for the bg-blur tint, a bigger one (home only) for the slide-in reveal once the visitor leaves the hero. */ const [scrolled, setScrolled] = useState(false); const [revealed, setRevealed] = useState(!isHome); const [mobile, setMobile] = useState(false); + const [docsHref, setDocsHref] = useState("/docs"); + const [indicator, setIndicator] = useState({ x: 0, width: 0, opacity: 0 }); + const activeIndex = NAV.findIndex( + (item) => pathname === item.href || (item.href !== "/" && pathname?.startsWith(item.href)), + ); useEffect(() => { const onScroll = () => { @@ -43,15 +72,64 @@ export function Navbar({ onOpenPalette: _ = () => {} }: { onOpenPalette?: () => useEffect(() => { setMobile(false); + setDocsHref(getRememberedDocsHref()); }, [pathname]); + useEffect(() => { + setDocsHref(getRememberedDocsHref()); + }, []); + + useLayoutEffect(() => { + const updateIndicator = () => { + const activeItem = activeIndex >= 0 ? navItemRefs.current[activeIndex] : null; + if (!activeItem) { + setIndicator((current) => ({ ...current, opacity: 0 })); + return; + } + + setIndicator({ + x: activeItem.offsetLeft, + width: activeItem.offsetWidth, + opacity: 1, + }); + }; + + updateIndicator(); + window.addEventListener("resize", updateIndicator); + return () => window.removeEventListener("resize", updateIndicator); + }, [activeIndex]); + + const toggleMobileMenu = () => { + setMobile((v) => !v); + }; + + const handleMobilePointerDown = (event: PointerEvent) => { + if (event.pointerType !== "touch" && event.pointerType !== "pen") { + return; + } + + event.preventDefault(); + event.stopPropagation(); + lastTouchToggleAtRef.current = Date.now(); + toggleMobileMenu(); + }; + + const handleMobileClick = (event: MouseEvent) => { + event.stopPropagation(); + if (Date.now() - lastTouchToggleAtRef.current < 700) { + return; + } + + toggleMobileMenu(); + }; + return ( {} }: { onOpenPalette?: () => Flarial -