diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 99e2f7d..8ad8722 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["oxc.oxc-vscode"] + "recommendations": ["oxc.oxc-vscode", "unifiedjs.vscode-mdx"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 367f95b..d311386 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "[markdown][yaml][json][typescript][javascript][typescriptreact][javascriptreact][css]": { + "[markdown][yaml][json][typescript][javascript][typescriptreact][javascriptreact][css][mdx]": { "editor.defaultFormatter": "oxc.oxc-vscode" } } diff --git a/app/app.css b/app/app.css index f0b7de5..6118f4c 100644 --- a/app/app.css +++ b/app/app.css @@ -2,6 +2,7 @@ @import "tw-animate-css"; @import "shadcn/tailwind.css"; @import "@fontsource-variable/inter"; +@plugin "@tailwindcss/typography"; @custom-variant dark (&:is(.dark *)); diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx index 27b8418..5c44d27 100644 --- a/app/components/NavBar.tsx +++ b/app/components/NavBar.tsx @@ -1,5 +1,5 @@ import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons"; -import { ArrowUpRight, Book, Menu, X, LayoutDashboard } from "lucide-react"; +import { ArrowUpRight, Book, Menu, X, LayoutDashboard, NotebookPen } from "lucide-react"; import { useEffect, useState } from "react"; import { Link, useLocation } from "react-router"; import BrandIcon from "~/components/BrandIcon"; @@ -9,8 +9,15 @@ import { cn } from "~/lib/utils"; function NavBar() { const [open, setOpen] = useState(false); + const [scrolled, setScrolled] = useState(false); const location = useLocation(); + useEffect(() => { + const handleScroll = () => setScrolled(window.scrollY > 10); + window.addEventListener("scroll", handleScroll, { passive: true }); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + const openNavBar = (open: boolean) => { if (open) { document.body.classList.add("overflow-hidden"); @@ -38,8 +45,9 @@ function NavBar() { return (