Update dependency @types/node to v22

2024-10-06 22:07:04 +00:00
9 changed files with 55 additions and 242 deletions
--- a/src/app/[[...slug]]/page.tsx
+++ b/src/app/[[...slug]]/page.tsx
@ -10,11 +10,6 @@ import {
    BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { capitalizeWords } from "@/lib/string";
-import { Metadata } from "next";
-import Embed from "@/components/embed";
-import DocsFooter from "@/components/docs-footer";
-import { cn } from "@/lib/utils";
-import OnThisPage from "@/components/on-this-page";

 /**
 * The page to render the documentation markdown content.
@ -31,33 +26,28 @@ const DocsPage = async ({
    );

    // Get the content to display based on the provided slug
-    const pages: DocsContentMetadata[] = getDocsContent();
-    const page: DocsContentMetadata | undefined = pages.find(
+    const content: DocsContentMetadata | undefined = getDocsContent().find(
        (metadata: DocsContentMetadata): boolean =>
            metadata.slug === (slug || "intro")
    );
-    if (!page) {
+    if (!content) {
        notFound();
    }
-    const splitSlug: string[] = page.slug?.split("/") || [];
+    const splitSlug: string[] = content.slug?.split("/") || [];

    return (
-        <main className="w-full flex flex-col">
+        <main className="flex flex-col">
            {/* Breadcrumb */}
            <Breadcrumb className="pt-4 select-none">
                <BreadcrumbList>
                    {splitSlug.map(
                        (part: string, index: number): ReactElement => {
-                            const active: boolean =
-                                index === splitSlug.length - 1;
                            const slug: string = splitSlug
                                .slice(1, index + 1)
                                .join("/");
                            return (
                                <div className="flex items-center" key={part}>
-                                    <BreadcrumbItem
-                                        className={cn(active && "text-primary")}
-                                    >
+                                    <BreadcrumbItem>
                                        <BreadcrumbLink
                                            href={slug}
                                            draggable={false}
@ -76,40 +66,8 @@ const DocsPage = async ({
            </Breadcrumb>

            {/* Content */}
-            <div className="flex justify-between">
-                <div className="flex flex-col">
-                    <CustomMDX source={page.content} />
-                </div>
-                <div className="hidden xl:flex">
-                    <OnThisPage page={page} />
-                </div>
-            </div>
-            <div className="mt-auto">
-                <DocsFooter pages={pages} />
-            </div>
+            <CustomMDX source={content.content} />
        </main>
    );
 };
-
-export const generateMetadata = async ({
-    params,
-}: {
-    params: Promise<{ slug: string[] }>;
-}): Promise<Metadata | undefined> => {
-    const slug: string = (((await params).slug as string[]) || undefined)?.join(
-        "/"
-    ); // The slug of the content
-    if (slug) {
-        const content: DocsContentMetadata | undefined = getDocsContent().find(
-            (metadata: DocsContentMetadata): boolean => metadata.slug === slug
-        ); // Get the content based on the provided slug
-        if (content) {
-            return Embed({
-                title: content.title,
-                description: content.summary,
-            });
-        }
-    }
-};
-
 export default DocsPage;
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -44,14 +44,15 @@ const RootLayout = ({
        <body
            className="scroll-smooth antialiased"
            style={{
-                background: "var(--background-gradient)",
+                background:
+                    "linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)))",
            }}
        >
            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
                <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
                    <Navbar />
-                    <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
-                        <div className="relative hidden xs:flex pr-40 sm:pr-52">
+                    <div className="w-full h-full flex flex-grow gap-5">
+                        <div className="hidden xs:flex">
                            <Sidebar />
                        </div>
                        {children}
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@ -39,8 +39,6 @@ body {
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
-
-        --background-gradient: hsl(var(--background));
    }

    .dark {
@ -68,8 +66,6 @@ body {
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
-
-        --background-gradient: linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)));
    }
 }

--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@ -1,52 +0,0 @@
-"use client";
-
-import { ReactElement } from "react";
-import { usePathname } from "next/navigation";
-import Link from "next/link";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
-import { Separator } from "@/components/ui/separator";
-
-const DocsFooter = ({
-    pages,
-}: {
-    pages: DocsContentMetadata[];
-}): ReactElement => {
-    const path: string = usePathname();
-
-    const current: number = pages.findIndex(
-        (page: DocsContentMetadata) => `/${page.slug}` === path
-    );
-    const previous: DocsContentMetadata | undefined =
-        current > 0 ? pages[current - 1] : undefined;
-    const next: DocsContentMetadata | undefined =
-        current < pages.length - 1 ? pages[current + 1] : undefined;
-
-    return (
-        <footer className="xs:mx-5 sm:mx-10 my-5 flex flex-col select-none transition-all transform-gpu">
-            <Separator className="mb-4" />
-            <div className="flex justify-between">
-                {previous && (
-                    <Link
-                        className="flex gap-2 items-center hover:opacity-75 transition-all transform-gpu group"
-                        href={`/${previous.slug}` || "#"}
-                        draggable={false}
-                    >
-                        <ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
-                        {previous.title}
-                    </Link>
-                )}
-                {next && (
-                    <Link
-                        className="ml-auto flex gap-2 items-center hover:opacity-75 transition-all transform-gpu group"
-                        href={`/${next.slug}` || "#"}
-                        draggable={false}
-                    >
-                        {next.title}
-                        <ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
-                    </Link>
-                )}
-            </div>
-        </footer>
-    );
-};
-export default DocsFooter;
--- a/src/components/embed.tsx
+++ b/src/components/embed.tsx
@ -1,33 +0,0 @@
-import { Metadata } from "next";
-
-/**
- * Props for an embed.
- */
-type EmbedProps = {
-    /**
-     * The title of the embed.
-     */
-    title: string;
-
-    /**
-     * The description of the embed.
-     */
-    description: string;
-};
-
-/**
- * An embed for a page.
- *
- * @param props the embed props
- * @returns the embed jsx
- */
-const Embed = ({ title, description }: EmbedProps): Metadata => {
-    return {
-        title: title,
-        openGraph: {
-            title: `${title}`,
-            description: description,
-        },
-    };
-};
-export default Embed;
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@ -9,8 +9,12 @@ import Sidebar from "@/components/sidebar/sidebar";
 const Navbar = (): ReactElement => {
    const pages: DocsContentMetadata[] = getDocsContent();
    return (
-        <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b">
-            <div className="px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center">
+        <nav
+            className={cn(
+                "py-4 flex justify-between items-center",
+                "after:absolute after:inset-x-0 after:top-[4.2rem] after:h-0.5 after:bg-muted/55"
+            )}
+        >
            {/* Branding */}
            <Link
                className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
@ -23,7 +27,6 @@ const Navbar = (): ReactElement => {
                    alt="Pulse App Logo"
                    width={36}
                    height={36}
-                        draggable={false}
                />
            </Link>

@ -53,7 +56,6 @@ const Navbar = (): ReactElement => {
                    <Sidebar />
                </div>
            </div>
-            </div>
        </nav>
    );
 };
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@ -1,59 +0,0 @@
-"use client";
-
-import { ReactElement, useEffect, useState } from "react";
-import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-
-type Header = {
-    id: string;
-    text: string;
-    level: number;
-};
-
-const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
-    const [headers, setHeaders] = useState<Header[]>([]);
-
-    useEffect(() => {
-        // Regular expression to match markdown headers
-        const headerRegex: RegExp = /^(#{1,6})\s+(.*)$/gm;
-        const extractedHeaders: Header[] = [];
-
-        let match;
-        while ((match = headerRegex.exec(page.content)) !== null) {
-            const level: number = match[1].length; // The number of # symbols determines the header level
-            const text: string = match[2].trim();
-            const id: string = text
-                .toLowerCase()
-                .replace(/\s+/g, "-")
-                .replace(/[^\w-]/g, "");
-
-            extractedHeaders.push({ id, text, level });
-        }
-
-        setHeaders(extractedHeaders);
-    }, [page.content]);
-
-    return (
-        <div className="flex flex-col gap-2 text-sm">
-            {/* Title */}
-            <div className="flex gap-2.5 items-center select-none">
-                <Bars3CenterLeftIcon className="w-5 h-5" />
-                <h1>On This Page</h1>
-            </div>
-
-            {/* Headers */}
-            <ul>
-                {headers.map((header: Header) => (
-                    <li
-                        key={header.id}
-                        className="opacity-65 hover:opacity-80 transition-all transform-gpu"
-                        style={{ marginLeft: `${(header.level - 1) * 16}px` }}
-                    >
-                        <Link href={`#${header.id}`}>{header.text}</Link>
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-};
-export default OnThisPage;
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
        </div>

        {/* Desktop */}
-        <div className="hidden fixed top-[4.3rem] inset-y-0 min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
+        <div className="hidden min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
            <SidebarContent />
        </div>
    </>
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
-    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-[450ms] data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-[450ms] data-[state=open]:duration-[450ms] data-[state=open]:animate-in data-[state=closed]:animate-out",
    {
        variants: {
            side: {