Fix imports, and add a code highlighter component
This commit is contained in:
parent
17094d7cec
commit
8642740f90
@ -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";
|
||||
|
@ -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";
|
||||
|
@ -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<NextResponse> => {
|
||||
return new NextResponse(JSON.stringify(getDocsContent()));
|
||||
|
65
Frontend/src/app/components/code-highlighter.tsx
Normal file
65
Frontend/src/app/components/code-highlighter.tsx
Normal file
@ -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 (
|
||||
<code className="p-2 max-w-5xl block bg-muted/70 break-all rounded-lg">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="relative max-w-5xl">
|
||||
<SyntaxHighlighter
|
||||
className="!bg-muted/70 break-all rounded-lg"
|
||||
language={language}
|
||||
style={atomOneDark}
|
||||
wrapLongLines
|
||||
>
|
||||
{children}
|
||||
</SyntaxHighlighter>
|
||||
|
||||
{/* Language Icon */}
|
||||
<div className="absolute top-0 right-0 px-2 py-0.5 flex gap-2 items-center text-white/75 bg-zinc-700/50 rounded select-none pointer-events-none">
|
||||
<Image
|
||||
src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${language}/${language}-original.svg`}
|
||||
alt={`${language} Language Icon`}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
{capitalize(language)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default CodeHighlighter;
|
@ -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";
|
||||
|
||||
/**
|
||||
|
@ -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 ? (
|
||||
<div className="relative max-w-5xl">
|
||||
<SyntaxHighlighter
|
||||
className="!bg-muted/70 break-all rounded-lg"
|
||||
language={language}
|
||||
style={atomOneDark}
|
||||
wrapLongLines
|
||||
>
|
||||
{children}
|
||||
</SyntaxHighlighter>
|
||||
|
||||
{/* Language Icon */}
|
||||
<div className="absolute top-0 right-0 px-2 py-0.5 flex gap-2 items-center text-white/75 bg-zinc-700/50 rounded select-none pointer-events-none">
|
||||
<Image
|
||||
src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${language}/${language}-original.svg`}
|
||||
alt={`${language} Language Icon`}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
{capitalize(language)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<code className="p-2 max-w-5xl block bg-muted/70 break-all rounded-lg">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
}): ReactElement => (
|
||||
<CodeHighlighter language={className?.replace("language-", "")}>
|
||||
{children}
|
||||
</CodeHighlighter>
|
||||
),
|
||||
ul: ({ children }: { children: ReactNode }): ReactElement => (
|
||||
<ul className="px-3 list-disc list-inside">{children}</ul>
|
||||
),
|
||||
|
@ -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";
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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,
|
||||
|
@ -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",
|
||||
|
@ -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<
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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<HTMLInputElement> {}
|
||||
|
@ -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"
|
||||
|
@ -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<typeof ScrollAreaPrimitive.Root>,
|
||||
|
@ -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;
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { cn } from "@/app/common/utils";
|
||||
import { cn } from "@/lib";
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
|
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from "@/lib";
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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"]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user