From 8642740f907a314300429c71a484aa60d076f38c Mon Sep 17 00:00:00 2001 From: Rainnny7 Date: Sun, 21 Apr 2024 23:11:15 -0400 Subject: [PATCH] Fix imports, and add a code highlighter component --- .../src/app/(pages)/docs/[[...slug]]/page.tsx | 4 +- .../app/(pages)/server/[[...slug]]/page.tsx | 2 +- Frontend/src/app/api/docs/search/route.ts | 2 +- .../app/common/{mdxUtils.ts => mdx-utils.ts} | 0 .../{stringUtils.ts => string-utils.ts} | 0 .../src/app/components/code-highlighter.tsx | 65 +++++++++++++++++++ Frontend/src/app/components/docs/sidebar.tsx | 4 +- Frontend/src/app/components/mdx.tsx | 48 ++------------ .../app/components/server/server-search.tsx | 2 +- Frontend/src/app/components/ui/alert.tsx | 2 +- Frontend/src/app/components/ui/badge.tsx | 2 +- Frontend/src/app/components/ui/breadcrumb.tsx | 2 +- Frontend/src/app/components/ui/button.tsx | 2 +- Frontend/src/app/components/ui/command.tsx | 2 +- .../src/app/components/ui/context-menu.tsx | 2 +- Frontend/src/app/components/ui/dialog.tsx | 2 +- Frontend/src/app/components/ui/input.tsx | 2 +- Frontend/src/app/components/ui/label.tsx | 2 +- .../src/app/components/ui/scroll-area.tsx | 2 +- Frontend/src/app/components/ui/select.tsx | 2 +- Frontend/src/app/components/ui/skeleton.tsx | 2 +- Frontend/src/app/components/ui/table.tsx | 2 +- Frontend/src/app/components/ui/toast.tsx | 2 +- Frontend/src/app/components/ui/tooltip.tsx | 2 +- Frontend/tsconfig.json | 1 + 25 files changed, 95 insertions(+), 63 deletions(-) rename Frontend/src/app/common/{mdxUtils.ts => mdx-utils.ts} (100%) rename Frontend/src/app/common/{stringUtils.ts => string-utils.ts} (100%) create mode 100644 Frontend/src/app/components/code-highlighter.tsx diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx index 376f763..68cbda6 100644 --- a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx +++ b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { getDocsContent } from "@/lib/mdxUtils"; +import { getDocsContent } from "@/lib/mdx-utils"; import { PageProps } from "@/types/page"; import { notFound } from "next/navigation"; import moment from "moment"; @@ -11,7 +11,7 @@ import { BreadcrumbList, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; -import { capitalize } from "@/lib/stringUtils"; +import { capitalize } from "@/lib/string-utils"; import { CustomMDX } from "@/components/mdx"; import Link from "next/link"; import Image from "next/image"; diff --git a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx index 292f67a..3ba1dfd 100644 --- a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx +++ b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx @@ -3,7 +3,7 @@ import ServerResult from "@/components/server/server-result"; import ServerSearch from "@/components/server/server-search"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { minecrafter } from "@/font/fonts"; -import { capitalize } from "@/lib/stringUtils"; +import { capitalize } from "@/lib/string-utils"; import { cn } from "@/lib/utils"; import { PageProps } from "@/types/page"; import { ExclamationCircleIcon } from "@heroicons/react/24/outline"; diff --git a/Frontend/src/app/api/docs/search/route.ts b/Frontend/src/app/api/docs/search/route.ts index 8743fe0..82477e4 100644 --- a/Frontend/src/app/api/docs/search/route.ts +++ b/Frontend/src/app/api/docs/search/route.ts @@ -1,5 +1,5 @@ import { NextRequest, NextResponse } from "next/server"; -import { getDocsContent } from "@/lib/mdxUtils"; +import { getDocsContent } from "@/lib/mdx-utils"; export const GET = async (request: NextRequest): Promise => { return new NextResponse(JSON.stringify(getDocsContent())); diff --git a/Frontend/src/app/common/mdxUtils.ts b/Frontend/src/app/common/mdx-utils.ts similarity index 100% rename from Frontend/src/app/common/mdxUtils.ts rename to Frontend/src/app/common/mdx-utils.ts diff --git a/Frontend/src/app/common/stringUtils.ts b/Frontend/src/app/common/string-utils.ts similarity index 100% rename from Frontend/src/app/common/stringUtils.ts rename to Frontend/src/app/common/string-utils.ts diff --git a/Frontend/src/app/components/code-highlighter.tsx b/Frontend/src/app/components/code-highlighter.tsx new file mode 100644 index 0000000..dd4cf6a --- /dev/null +++ b/Frontend/src/app/components/code-highlighter.tsx @@ -0,0 +1,65 @@ +import { ReactElement } from "react"; +import SyntaxHighlighter from "react-syntax-highlighter"; +import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; +import Image from "next/image"; +import { capitalize } from "@/lib/string-utils"; + +/** + * Props for the code highlighter. + */ +type CodeHighlighterProps = { + /** + * The language of the code, if any + */ + language: string | undefined; + + /** + * The code to highlight. + */ + children: string; +}; + +/** + * A code highlighter component. + * + * @param language the language for syntax highlighting + * @param children the children (code) to highlight + * @return the highlighter jsx + */ +const CodeHighlighter = ({ + language, + children, +}: CodeHighlighterProps): ReactElement => { + // Return a basic code block if no language is provided + if (!language) { + return ( + + {children} + + ); + } + return ( +
+ + {children} + + + {/* Language Icon */} +
+ {`${language} + {capitalize(language)} +
+
+ ); +}; +export default CodeHighlighter; diff --git a/Frontend/src/app/components/docs/sidebar.tsx b/Frontend/src/app/components/docs/sidebar.tsx index a56058d..d206b65 100644 --- a/Frontend/src/app/components/docs/sidebar.tsx +++ b/Frontend/src/app/components/docs/sidebar.tsx @@ -1,9 +1,9 @@ import { ReactElement } from "react"; import Link from "next/link"; import { cn } from "@/lib/utils"; -import { capitalize } from "@/lib/stringUtils"; +import { capitalize } from "@/lib/string-utils"; import { minecrafter } from "@/font/fonts"; -import { getDocsContent } from "@/lib/mdxUtils"; +import { getDocsContent } from "@/lib/mdx-utils"; import QuickSearchDialog from "@/components/docs/search-dialog"; /** diff --git a/Frontend/src/app/components/mdx.tsx b/Frontend/src/app/components/mdx.tsx index 4d71d8d..63827dd 100644 --- a/Frontend/src/app/components/mdx.tsx +++ b/Frontend/src/app/components/mdx.tsx @@ -11,15 +11,9 @@ import { TableRow, } from "@/components/ui/table"; import SyntaxHighlighter from "react-syntax-highlighter"; -import { - atomOneDark, - nord, - ocean, - solarizedDark, - stackoverflowDark, -} from "react-syntax-highlighter/dist/esm/styles/hljs"; -import { capitalize } from "@/lib/stringUtils"; +import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; import Image from "next/image"; +import CodeHighlighter from "@/components/code-highlighter"; /** * The MDX components to style. @@ -78,39 +72,11 @@ const components: any = { }: { className: string; children: any; - }): ReactElement => { - const language: string | undefined = className?.replace( - "language-", - "" - ); // The language of the code, if any - return language ? ( -
- - {children} - - - {/* Language Icon */} -
- {`${language} - {capitalize(language)} -
-
- ) : ( - - {children} - - ); - }, + }): ReactElement => ( + + {children} + + ), ul: ({ children }: { children: ReactNode }): ReactElement => ( ), diff --git a/Frontend/src/app/components/server/server-search.tsx b/Frontend/src/app/components/server/server-search.tsx index 4a2a0d3..0c34007 100644 --- a/Frontend/src/app/components/server/server-search.tsx +++ b/Frontend/src/app/components/server/server-search.tsx @@ -9,7 +9,7 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { capitalize } from "@/app/common/stringUtils"; +import { capitalize } from "@/app/common/string-utils"; import { redirect } from "next/navigation"; import { ReactElement } from "react"; import { ServerPlatform } from "restfulmc-lib"; diff --git a/Frontend/src/app/components/ui/alert.tsx b/Frontend/src/app/components/ui/alert.tsx index e101ac8..1ed9b86 100644 --- a/Frontend/src/app/components/ui/alert.tsx +++ b/Frontend/src/app/components/ui/alert.tsx @@ -1,7 +1,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", diff --git a/Frontend/src/app/components/ui/badge.tsx b/Frontend/src/app/components/ui/badge.tsx index a358d76..a213913 100644 --- a/Frontend/src/app/components/ui/badge.tsx +++ b/Frontend/src/app/components/ui/badge.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", diff --git a/Frontend/src/app/components/ui/breadcrumb.tsx b/Frontend/src/app/components/ui/breadcrumb.tsx index d386de6..0fe9043 100644 --- a/Frontend/src/app/components/ui/breadcrumb.tsx +++ b/Frontend/src/app/components/ui/breadcrumb.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { ChevronRight, MoreHorizontal } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/lib"; const Breadcrumb = React.forwardRef< HTMLElement, diff --git a/Frontend/src/app/components/ui/button.tsx b/Frontend/src/app/components/ui/button.tsx index f222dc1..7bf9602 100644 --- a/Frontend/src/app/components/ui/button.tsx +++ b/Frontend/src/app/components/ui/button.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", diff --git a/Frontend/src/app/components/ui/command.tsx b/Frontend/src/app/components/ui/command.tsx index e4ad011..450add8 100644 --- a/Frontend/src/app/components/ui/command.tsx +++ b/Frontend/src/app/components/ui/command.tsx @@ -5,7 +5,7 @@ import { type DialogProps } from "@radix-ui/react-dialog"; import { Command as CommandPrimitive } from "cmdk"; import { Search } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/lib"; import { Dialog, DialogContent } from "@/app/components/ui/dialog"; const Command = React.forwardRef< diff --git a/Frontend/src/app/components/ui/context-menu.tsx b/Frontend/src/app/components/ui/context-menu.tsx index 0d89fb2..9de657f 100644 --- a/Frontend/src/app/components/ui/context-menu.tsx +++ b/Frontend/src/app/components/ui/context-menu.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"; import { Check, ChevronRight, Circle } from "lucide-react"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const ContextMenu = ContextMenuPrimitive.Root; diff --git a/Frontend/src/app/components/ui/dialog.tsx b/Frontend/src/app/components/ui/dialog.tsx index 51abff2..f0df493 100644 --- a/Frontend/src/app/components/ui/dialog.tsx +++ b/Frontend/src/app/components/ui/dialog.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { X } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/lib"; const Dialog = DialogPrimitive.Root; diff --git a/Frontend/src/app/components/ui/input.tsx b/Frontend/src/app/components/ui/input.tsx index 8a07036..610d7c0 100644 --- a/Frontend/src/app/components/ui/input.tsx +++ b/Frontend/src/app/components/ui/input.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; export interface InputProps extends React.InputHTMLAttributes {} diff --git a/Frontend/src/app/components/ui/label.tsx b/Frontend/src/app/components/ui/label.tsx index c1259fa..75b6a76 100644 --- a/Frontend/src/app/components/ui/label.tsx +++ b/Frontend/src/app/components/ui/label.tsx @@ -4,7 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const labelVariants = cva( "text-sm font-medium text-zinc-300 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" diff --git a/Frontend/src/app/components/ui/scroll-area.tsx b/Frontend/src/app/components/ui/scroll-area.tsx index 8c99967..92169e3 100644 --- a/Frontend/src/app/components/ui/scroll-area.tsx +++ b/Frontend/src/app/components/ui/scroll-area.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; -import { cn } from "@/lib/utils"; +import { cn } from "@/lib"; const ScrollArea = React.forwardRef< React.ElementRef, diff --git a/Frontend/src/app/components/ui/select.tsx b/Frontend/src/app/components/ui/select.tsx index bb86cb8..bbe55db 100644 --- a/Frontend/src/app/components/ui/select.tsx +++ b/Frontend/src/app/components/ui/select.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import * as SelectPrimitive from "@radix-ui/react-select"; import { Check, ChevronDown, ChevronUp } from "lucide-react"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const Select = SelectPrimitive.Root; diff --git a/Frontend/src/app/components/ui/skeleton.tsx b/Frontend/src/app/components/ui/skeleton.tsx index 0020342..7a29225 100644 --- a/Frontend/src/app/components/ui/skeleton.tsx +++ b/Frontend/src/app/components/ui/skeleton.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; function Skeleton({ className, diff --git a/Frontend/src/app/components/ui/table.tsx b/Frontend/src/app/components/ui/table.tsx index 0c0898b..f3be5af 100644 --- a/Frontend/src/app/components/ui/table.tsx +++ b/Frontend/src/app/components/ui/table.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/lib"; const Table = React.forwardRef< HTMLTableElement, diff --git a/Frontend/src/app/components/ui/toast.tsx b/Frontend/src/app/components/ui/toast.tsx index cd8ad97..79caea8 100644 --- a/Frontend/src/app/components/ui/toast.tsx +++ b/Frontend/src/app/components/ui/toast.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { X } from "lucide-react"; import * as React from "react"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const ToastProvider = ToastPrimitives.Provider; diff --git a/Frontend/src/app/components/ui/tooltip.tsx b/Frontend/src/app/components/ui/tooltip.tsx index 3c5f228..5593195 100644 --- a/Frontend/src/app/components/ui/tooltip.tsx +++ b/Frontend/src/app/components/ui/tooltip.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import { cn } from "@/app/common/utils"; +import { cn } from "@/lib"; const TooltipProvider = TooltipPrimitive.Provider; diff --git a/Frontend/tsconfig.json b/Frontend/tsconfig.json index 9dc3f85..f5799c8 100644 --- a/Frontend/tsconfig.json +++ b/Frontend/tsconfig.json @@ -25,6 +25,7 @@ "@/font/*": ["./src/app/font/*"], "@/types/*": ["./src/app/types/*"], "@/lib/*": ["./src/app/common/*"], + "@/lib": ["./src/app/common/utils.ts"], "@/markdown/*": ["./src/markdown/*"], "@/configJson": ["./config.json"] }