Update dependency @types/node to v22

on this page component
Took 20 minutes
2024-10-07 00:07:18 +00:00 · 2024-10-06 20:00:37 -04:00 · 2024-10-06 19:40:45 -04:00 · 2024-10-06 19:37:08 -04:00 · 2024-10-06 19:36:24 -04:00 · 2024-10-06 19:27:34 -04:00
11 changed files with 243 additions and 56 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -36,7 +36,7 @@
  },
  "devDependencies": {
    "typescript": "^5",
-    "@types/node": "^20",
+    "@types/node": "^22.0.0",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
--- a/src/app/[[...slug]]/page.tsx
+++ b/src/app/[[...slug]]/page.tsx
@ -10,6 +10,11 @@ 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.
@ -26,28 +31,33 @@ const DocsPage = async ({
    );

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

    return (
-        <main className="flex flex-col">
+        <main className="w-full 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>
+                                    <BreadcrumbItem
+                                        className={cn(active && "text-primary")}
+                                    >
                                        <BreadcrumbLink
                                            href={slug}
                                            draggable={false}
@ -66,8 +76,40 @@ const DocsPage = async ({
            </Breadcrumb>

            {/* Content */}
-            <CustomMDX source={content.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>
        </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,15 +44,14 @@ const RootLayout = ({
        <body
            className="scroll-smooth antialiased"
            style={{
-                background:
-                    "linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)))",
+                background: "var(--background-gradient)",
            }}
        >
            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
                <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
                    <Navbar />
-                    <div className="w-full h-full flex flex-grow gap-5">
-                        <div className="hidden xs:flex">
+                    <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">
                            <Sidebar />
                        </div>
                        {children}
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@ -39,6 +39,8 @@ body {
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
+
+        --background-gradient: hsl(var(--background));
    }

    .dark {
@ -66,6 +68,8 @@ 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
@ -0,0 +1,52 @@
+"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
@ -0,0 +1,33 @@
+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,51 +9,49 @@ import Sidebar from "@/components/sidebar/sidebar";
 const Navbar = (): ReactElement => {
    const pages: DocsContentMetadata[] = getDocsContent();
    return (
-        <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"
-                href="/public"
-                draggable={false}
-            >
-                <h1 className="text-lg font-semibold">docs.</h1>
-                <Image
-                    src="/media/logo.png"
-                    alt="Pulse App Logo"
-                    width={36}
-                    height={36}
-                />
-            </Link>
-
-            {/* Right */}
-            <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
-                {/* Search */}
-                <div className="hidden xs:flex">
-                    <QuickSearchDialog pages={pages} />
-                </div>
-
-                {/* Social */}
-                <div className="flex gap-5 items-center">
-                    <SocialLink
-                        name="GitHub"
-                        link="https://github.com/PulseAppCC"
-                        icon="/media/github.svg"
+        <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">
+                {/* Branding */}
+                <Link
+                    className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
+                    href="/public"
+                    draggable={false}
+                >
+                    <h1 className="text-lg font-semibold">docs.</h1>
+                    <Image
+                        src="/media/logo.png"
+                        alt="Pulse App Logo"
+                        width={36}
+                        height={36}
+                        draggable={false}
                    />
-                    <SocialLink
-                        name="Discord"
-                        link="https://discord.pulseapp.cc"
-                        icon="/media/discord.svg"
-                    />
-                </div>
+                </Link>

-                {/* Mobile Sidebar */}
-                <div className="flex xs:hidden">
-                    <Sidebar />
+                {/* Right */}
+                <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
+                    {/* Search */}
+                    <div className="hidden xs:flex">
+                        <QuickSearchDialog pages={pages} />
+                    </div>
+
+                    {/* Social */}
+                    <div className="flex gap-5 items-center">
+                        <SocialLink
+                            name="GitHub"
+                            link="https://github.com/PulseAppCC"
+                            icon="/media/github.svg"
+                        />
+                        <SocialLink
+                            name="Discord"
+                            link="https://discord.pulseapp.cc"
+                            icon="/media/discord.svg"
+                        />
+                    </div>
+
+                    {/* Mobile Sidebar */}
+                    <div className="flex xs:hidden">
+                        <Sidebar />
+                    </div>
                </div>
            </div>
        </nav>
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@ -0,0 +1,59 @@
+"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 min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
+        <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">
            <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-[450ms] 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-300 data-[state=open]:duration-[450ms] data-[state=open]:animate-in data-[state=closed]:animate-out",
    {
        variants: {
            side: {
Author	SHA1	Message	Date
Renovate Bot	9d162707a3	Update dependency @types/node to v22	2024-10-07 00:07:18 +00:00
Rainnny7	a396118f86	on this page component All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m12s Details Took 20 minutes	2024-10-06 20:00:37 -04:00
Rainnny7	c99a21395b	primary color for active slug in breadcrumb All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 53s Details Took 4 minutes	2024-10-06 19:40:45 -04:00
Rainnny7	f6bd4a2dcb	small fix All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 54s Details Took 43 seconds	2024-10-06 19:37:08 -04:00
Rainnny7	90faa80fe8	fix light mode background All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 58s Details Took 9 minutes	2024-10-06 19:36:24 -04:00
Rainnny7	fbddc47582	make this look a bit better All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 53s Details Took 2 minutes	2024-10-06 19:27:34 -04:00
Rainnny7	4e5e64b390	make this look a bit better All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 51s Details Took 6 minutes	2024-10-06 19:26:02 -04:00
Rainnny7	05a480d41b	add a footer to each docs page All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 53s Details Took 31 minutes	2024-10-06 19:20:32 -04:00
Rainnny7	328a2226d0	yes? All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m9s Details Took 7 minutes	2024-10-06 18:44:52 -04:00
Rainnny7	2b19fdf7bc	fix embed missing thumbnail All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 55s Details Took 4 minutes	2024-10-06 18:38:21 -04:00
Rainnny7	cf6447e4c4	per-page metadata All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 52s Details Took 14 minutes	2024-10-06 18:34:09 -04:00
Rainnny7	96b79d9995	better sidebar responsiveness All checks were successful Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 56s Details Took 8 minutes	2024-10-06 18:15:57 -04:00
Rainnny7	f73c2a61e6	better navbar responsiveness Took 9 minutes	2024-10-06 18:08:12 -04:00