Fix imports, and add a code highlighter component

This commit is contained in:
Braydon 2024-04-21 23:11:15 -04:00
parent 17094d7cec
commit 8642740f90
25 changed files with 95 additions and 63 deletions

@ -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()));

@ -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"]
}