Compare commits
13 Commits
d05d9294e5
...
2b07eb3b22
| Author | SHA1 | Date | |
|---|---|---|---|
|
2b07eb3b22 | ||
| a396118f86 | |||
| c99a21395b | |||
| f6bd4a2dcb | |||
| 90faa80fe8 | |||
| fbddc47582 | |||
| 4e5e64b390 | |||
| 05a480d41b | |||
| 328a2226d0 | |||
| 2b19fdf7bc | |||
| cf6447e4c4 | |||
| 96b79d9995 | |||
| f73c2a61e6 |
@ -10,6 +10,11 @@ import {
|
|||||||
BreadcrumbSeparator,
|
BreadcrumbSeparator,
|
||||||
} from "@/components/ui/breadcrumb";
|
} from "@/components/ui/breadcrumb";
|
||||||
import { capitalizeWords } from "@/lib/string";
|
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.
|
* 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
|
// 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: DocsContentMetadata): boolean =>
|
||||||
metadata.slug === (slug || "intro")
|
metadata.slug === (slug || "intro")
|
||||||
);
|
);
|
||||||
if (!content) {
|
if (!page) {
|
||||||
notFound();
|
notFound();
|
||||||
}
|
}
|
||||||
const splitSlug: string[] = content.slug?.split("/") || [];
|
const splitSlug: string[] = page.slug?.split("/") || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="flex flex-col">
|
<main className="w-full flex flex-col">
|
||||||
{/* Breadcrumb */}
|
{/* Breadcrumb */}
|
||||||
<Breadcrumb className="pt-4 select-none">
|
<Breadcrumb className="pt-4 select-none">
|
||||||
<BreadcrumbList>
|
<BreadcrumbList>
|
||||||
{splitSlug.map(
|
{splitSlug.map(
|
||||||
(part: string, index: number): ReactElement => {
|
(part: string, index: number): ReactElement => {
|
||||||
|
const active: boolean =
|
||||||
|
index === splitSlug.length - 1;
|
||||||
const slug: string = splitSlug
|
const slug: string = splitSlug
|
||||||
.slice(1, index + 1)
|
.slice(1, index + 1)
|
||||||
.join("/");
|
.join("/");
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center" key={part}>
|
<div className="flex items-center" key={part}>
|
||||||
<BreadcrumbItem>
|
<BreadcrumbItem
|
||||||
|
className={cn(active && "text-primary")}
|
||||||
|
>
|
||||||
<BreadcrumbLink
|
<BreadcrumbLink
|
||||||
href={slug}
|
href={slug}
|
||||||
draggable={false}
|
draggable={false}
|
||||||
@ -66,8 +76,40 @@ const DocsPage = async ({
|
|||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
|
|
||||||
{/* Content */}
|
{/* 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>
|
</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;
|
export default DocsPage;
|
||||||
|
|||||||
@ -44,15 +44,14 @@ const RootLayout = ({
|
|||||||
<body
|
<body
|
||||||
className="scroll-smooth antialiased"
|
className="scroll-smooth antialiased"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background: "var(--background-gradient)",
|
||||||
"linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)))",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
|
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
|
||||||
<div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
|
<div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div className="w-full h-full flex flex-grow gap-5">
|
<div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
|
||||||
<div className="hidden xs:flex">
|
<div className="relative hidden xs:flex pr-40 sm:pr-52">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
</div>
|
</div>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@ -39,6 +39,8 @@ body {
|
|||||||
--chart-4: 43 74% 66%;
|
--chart-4: 43 74% 66%;
|
||||||
--chart-5: 27 87% 67%;
|
--chart-5: 27 87% 67%;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
|
|
||||||
|
--background-gradient: hsl(var(--background));
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
@ -66,6 +68,8 @@ body {
|
|||||||
--chart-3: 30 80% 55%;
|
--chart-3: 30 80% 55%;
|
||||||
--chart-4: 280 65% 60%;
|
--chart-4: 280 65% 60%;
|
||||||
--chart-5: 340 75% 55%;
|
--chart-5: 340 75% 55%;
|
||||||
|
|
||||||
|
--background-gradient: linear-gradient(to top, hsl(240, 6%, 10%), hsl(var(--background)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
52
src/components/docs-footer.tsx
Normal file
52
src/components/docs-footer.tsx
Normal file
@ -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;
|
||||||
33
src/components/embed.tsx
Normal file
33
src/components/embed.tsx
Normal file
@ -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;
|
||||||
@ -9,12 +9,8 @@ import Sidebar from "@/components/sidebar/sidebar";
|
|||||||
const Navbar = (): ReactElement => {
|
const Navbar = (): ReactElement => {
|
||||||
const pages: DocsContentMetadata[] = getDocsContent();
|
const pages: DocsContentMetadata[] = getDocsContent();
|
||||||
return (
|
return (
|
||||||
<nav
|
<nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b">
|
||||||
className={cn(
|
<div className="px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center">
|
||||||
"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 */}
|
{/* Branding */}
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
|
className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
|
||||||
@ -27,6 +23,7 @@ const Navbar = (): ReactElement => {
|
|||||||
alt="Pulse App Logo"
|
alt="Pulse App Logo"
|
||||||
width={36}
|
width={36}
|
||||||
height={36}
|
height={36}
|
||||||
|
draggable={false}
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
@ -56,6 +53,7 @@ const Navbar = (): ReactElement => {
|
|||||||
<Sidebar />
|
<Sidebar />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
59
src/components/on-this-page.tsx
Normal file
59
src/components/on-this-page.tsx
Normal file
@ -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;
|
||||||
@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Desktop */}
|
{/* 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 />
|
<SidebarContent />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
|
|||||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
const sheetVariants = cva(
|
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: {
|
variants: {
|
||||||
side: {
|
side: {
|
||||||
|
|||||||
Reference in New Issue
Block a user