From e9f30885b010170600afe4fa6ef2b4e26dada59b Mon Sep 17 00:00:00 2001 From: Rainnny7 Date: Sun, 21 Apr 2024 01:01:52 -0400 Subject: [PATCH] Begin on the docs page design --- Frontend/config.json | 1 + Frontend/docs/home.md | 20 +++ Frontend/docs/home.mdx | 8 -- Frontend/package.json | 9 ++ .../src/app/(pages)/docs/[[...slug]]/page.tsx | 11 +- Frontend/src/app/(pages)/docs/layout.tsx | 4 +- Frontend/src/app/common/mdxUtils.ts | 2 +- Frontend/src/app/components/docs/sidebar.tsx | 31 +++-- Frontend/src/app/components/mdx.tsx | 109 ++++++++++++++++ Frontend/src/app/components/ui/breadcrumb.tsx | 115 +++++++++++++++++ .../src/app/components/ui/scroll-area.tsx | 50 ++++++++ Frontend/src/app/components/ui/table.tsx | 120 ++++++++++++++++++ Frontend/src/mdx-components.tsx | 20 --- 13 files changed, 459 insertions(+), 41 deletions(-) create mode 100644 Frontend/docs/home.md delete mode 100644 Frontend/docs/home.mdx create mode 100644 Frontend/src/app/components/mdx.tsx create mode 100644 Frontend/src/app/components/ui/breadcrumb.tsx create mode 100644 Frontend/src/app/components/ui/scroll-area.tsx create mode 100644 Frontend/src/app/components/ui/table.tsx delete mode 100644 Frontend/src/mdx-components.tsx diff --git a/Frontend/config.json b/Frontend/config.json index 95640d5..773e6aa 100644 --- a/Frontend/config.json +++ b/Frontend/config.json @@ -57,6 +57,7 @@ "Mojang Status": "/mojang" }, "Resources": { + "Documentation": "/docs", "Source Code": "https://github.com/Rainnny7/RESTfulMC", "Wiki": "https://git.rainnny.club/Rainnny/RESTfulMC/wiki", "SwaggerUI": "https://api.restfulmc.cc/swagger-ui.html" diff --git a/Frontend/docs/home.md b/Frontend/docs/home.md new file mode 100644 index 0000000..b0e5b9c --- /dev/null +++ b/Frontend/docs/home.md @@ -0,0 +1,20 @@ +--- +title: 'Home' +published: '04-19-2024' +summary: 'Get started with RESTfulMC! duis numquam himenaeos lectus quisque assueverit aperiri' +--- + +# Get started with RESTfulMC! +Welcome to the RESTfulMC documentation! feugait pertinax duis laudem vix integer tempus conubia graece interpretaris + +## Table of Contents +* [Get started with RESTfulMC!](#get-started-with-restfulmc) + * [Features](#features) + +## Features +Some of the core features of RESTfulMC include: + +| Feature | Description | +|--------------------------|:----------------------------------------------------------------------------------------------------------------------------------:| +| [Player Lookup](/player) | praesent omittam mollis maximus has pretium mediocritatem eripuit interesset adversarium inceptos tempor placerat deserunt tritani | +| [Server Lookup](/server) | sapien faucibus numquam ponderum utamur himenaeos menandri tation regione integer aliquam qualisque equidem euismod tortor | \ No newline at end of file diff --git a/Frontend/docs/home.mdx b/Frontend/docs/home.mdx deleted file mode 100644 index 80fdda7..0000000 --- a/Frontend/docs/home.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: 'HOME YES.' -published: '04-19-2024' -summary: 'utinam delicata nominavi ornare eirmod pharetra decore interesset necessitatibus.' ---- - -# bob -HELLO **JOHN** \ No newline at end of file diff --git a/Frontend/package.json b/Frontend/package.json index 2ee7723..fbe1edd 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -11,6 +11,12 @@ "start": "next start", "lint": "next lint" }, + "overrides": { + "remark-mdx": "3.0.0", + "unified": "11.0.4", + "remark-parse": "11.0.0", + "mdast-util-frontmatter": "2.0.1" + }, "dependencies": { "@heroicons/react": "^2.1.3", "@hookform/resolvers": "^3.3.4", @@ -20,6 +26,7 @@ "@radix-ui/react-context-menu": "^2.1.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-navigation-menu": "^1.1.4", + "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", @@ -30,6 +37,7 @@ "clipboard-copy": "^4.0.1", "clsx": "^2.1.0", "lucide-react": "^0.372.0", + "moment": "^2.30.1", "next": "14.2.2", "next-plausible": "^3.12.0", "next-themes": "^0.3.0", @@ -38,6 +46,7 @@ "react-dom": "^18", "react-hook-form": "^7.51.3", "remark-gfm": "^4.0.0", + "remark-mdx": "3.0.0", "remote-mdx": "^0.0.4", "restfulmc-lib": "^1.1.3", "shadcn-ui": "0.8.0", diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx index 3336664..96c9b72 100644 --- a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx +++ b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx @@ -2,6 +2,7 @@ import { ReactElement } from "react"; import { getDocsContent } from "@/lib/mdxUtils"; import { PageProps } from "@/types/page"; import { notFound } from "next/navigation"; +import moment from "moment"; import { Breadcrumb, @@ -11,7 +12,7 @@ import { BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { capitalize } from "@/lib/stringUtils"; -import { CustomMDX } from "@/mdx-components"; +import { CustomMDX } from "@/components/mdx"; /** * The page to display content @@ -35,7 +36,7 @@ const ContentPage = ({ params }: PageProps): ReactElement => { const splitSlug: string[] = content.slug?.split("/") || []; return ( -
+
{/* Breadcrumb */} @@ -61,6 +62,12 @@ const ContentPage = ({ params }: PageProps): ReactElement => { + {/* Publish Date */} +

+ Published on{" "} + {moment(content.published, "MM-DD-YYYY").format("MMMM Do YYYY")} +

+ {/* Content */}
diff --git a/Frontend/src/app/(pages)/docs/layout.tsx b/Frontend/src/app/(pages)/docs/layout.tsx index 6385cd7..39951ea 100644 --- a/Frontend/src/app/(pages)/docs/layout.tsx +++ b/Frontend/src/app/(pages)/docs/layout.tsx @@ -12,8 +12,8 @@ const DocumentationLayout = ({ }: Readonly<{ children: ReactNode; }>): ReactElement => ( -
-
+
+
{children}
diff --git a/Frontend/src/app/common/mdxUtils.ts b/Frontend/src/app/common/mdxUtils.ts index ef969db..caa6b63 100644 --- a/Frontend/src/app/common/mdxUtils.ts +++ b/Frontend/src/app/common/mdxUtils.ts @@ -1,6 +1,6 @@ import * as fs from "node:fs"; -import path from "node:path"; import { Stats } from "node:fs"; +import path from "node:path"; /** * The regex to match for metadata. diff --git a/Frontend/src/app/components/docs/sidebar.tsx b/Frontend/src/app/components/docs/sidebar.tsx index 4c686df..1c5bc97 100644 --- a/Frontend/src/app/components/docs/sidebar.tsx +++ b/Frontend/src/app/components/docs/sidebar.tsx @@ -1,5 +1,6 @@ import { ReactElement } from "react"; import { Input } from "@/components/ui/input"; +import { getDocsContent } from "@/lib/mdxUtils"; /** * The sidebar for the docs page. @@ -7,14 +8,28 @@ import { Input } from "@/components/ui/input"; * @returns the sidebar jsx */ const Sidebar = (): ReactElement => ( -
- {/* Search */} - +
+
+ {/* Search */} + + + {/* Links */} +
+ {getDocsContent().map( + ( + content: DocsContentMetadata, + index: number + ): ReactElement => ( +
{content.title}
+ ) + )} +
+
); export default Sidebar; diff --git a/Frontend/src/app/components/mdx.tsx b/Frontend/src/app/components/mdx.tsx new file mode 100644 index 0000000..9861abd --- /dev/null +++ b/Frontend/src/app/components/mdx.tsx @@ -0,0 +1,109 @@ +import { ReactElement, ReactNode } from "react"; +import { MDXRemote } from "remote-mdx/rsc"; +import { cn } from "@/lib/utils"; +import remarkGfm from "remark-gfm"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; + +/** + * The MDX components to style. + */ +const components: any = { + h1: ({ children }: { children: ReactNode }) => ( + {children} + ), + h2: ({ children }: { children: ReactNode }) => ( + {children} + ), + h3: ({ children }: { children: ReactNode }) => ( + {children} + ), + h4: ({ children }: { children: ReactNode }) => ( + {children} + ), + h5: ({ children }: { children: ReactNode }) => ( + {children} + ), + h6: ({ children }: { children: ReactNode }) => ( + {children} + ), + a: ({ href, children }: { href: string; children: ReactNode }) => ( + + {children} + + ), + p: ({ children }: { children: ReactNode }) => ( +

{children}

+ ), + ul: ({ children }: { children: ReactNode }) => ( +
    {children}
+ ), + + // Tables + table: ({ children }: { children: any }) => ( + + + + {children?.[0].props.children.props.children} + + + {children?.[1].props.children} +
+ ), + th: ({ children }: { children: ReactNode }) => ( + {children} + ), + td: ({ children }: { children: ReactNode }) => ( + {children} + ), +}; + +/** + * The custom render for MDX. + * + * @param props the props for the MDX + * @return the custom mdx + */ +export const CustomMDX = (props: any): ReactElement => ( + +); + +/** + * A heading component. + * + * @param size the size of the heading. + * @param children the children within the heading + * @return the heading jsx + */ +const Heading = ({ + size, + children, +}: { + size: string; + children: ReactNode; +}): ReactElement => ( +

{children}

+); diff --git a/Frontend/src/app/components/ui/breadcrumb.tsx b/Frontend/src/app/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..1725e06 --- /dev/null +++ b/Frontend/src/app/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { ChevronRight, MoreHorizontal } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode; + } +>(({ ...props }, ref) =>