fix code highlighter colors and centre the breadcrumbs on docs

documentation/server/server-lookup.md

@@ -38,17 +38,17 @@ curl -X GET "https://api.mcutils.xyz/server/java/play.hypixel.net" -H "accept: a
 ```json
 {
   "cache": {
-    "cached": false,
-    "cachedTime": -1
+    "cached": true,
+    "cachedTime": 1713747259031
   },
   "hostname": "play.hypixel.net",
-  "ip": "209.222.115.48",
+  "ip": "209.222.115.34",
   "port": 25565,
   "records": [
     {
       "type": "A",
       "ttl": 60,
-      "address": "209.222.115.48"
+      "address": "209.222.115.34"
     }
   ],
   "motd": {
@@ -66,9 +66,13 @@ curl -X GET "https://api.mcutils.xyz/server/java/play.hypixel.net" -H "accept: a
     ]
   },
   "players": {
-    "online": 33892,
-    "max": 200000,
-    "sample": []
+    "online": 34943,
+    "max": 200000
+  },
+  "location": {
+    "country": "Canada",
+    "latitude": 43.6319,
+    "longitude": -79.3716
   },
   "version": {
     "name": "Requires MC 1.8 / 1.20",

src/app/(pages)/docs/[[...slug]]/page.tsx

@@ -61,8 +61,8 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
   const isHome: boolean = slugParts.length == 1;
 
   return (
-    <div className="w-full h-full px-4 flex flex-col gap-4">
-      <div className="flex justify-between">
+    <div className="w-full h-full px-4 flex flex-col">
+      <div className="flex justify-between items-center">
         {/* The breadcrumb for the documentation page */}
         <Breadcrumb>
           <BreadcrumbList>
@@ -88,6 +88,7 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
           </BreadcrumbList>
         </Breadcrumb>
 
+        {/* The Git link for the documentation page */}
         <div className="flex flex-row gap-2 items-center">
           <GithubLink page={page} />
         </div>
@@ -99,7 +100,7 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
       </div>
 
       {/* The content of the documentation page */}
-      <div className="text-left w-full pb-[5rem]">
+      <div className="text-left w-full pb-[2rem]">
         <CustomMDX source={page.content} />
       </div>
     </div>

src/app/components/code-highlighter.tsx

@@ -77,9 +77,9 @@ export function CodeHighlighter({ code, language = "json", rounded = true }: Cod
         renderer={rowRenderer}
         customStyle={{
           maxHeight: "600px",
-          backgroundColor: "hsl(var(--background-accent))",
+          backgroundColor: "hsl(var(--secondary))",
           wordBreak: "break-all",
-          borderRadius: rounded ? "0.75rem" : undefined,
+          borderRadius: rounded ? "0.25rem" : undefined,
         }}
       >
         {code}

src/app/components/command-menu.tsx

@@ -89,7 +89,7 @@ export function CommandMenu({ ...props }: ButtonProps): ReactElement {
         />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
-          {pages && (
+          {pages && pages.length > 1 && (
             <CommandGroup heading="Suggestions">
               {pages.map(page => {
                 return (

src/app/components/docs/documentation-pages.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { DocsContentMetadata } from "@/app/common/documentation";
-import React, { ReactElement } from "react";
-import { DialogClose } from "../ui/dialog";
-import { useRouter } from "next/navigation";
-
-type PagesProps = {
-  /**
-   * The documentation pages to display.
-   */
-  pages: DocsContentMetadata[] | undefined;
-};
-
-export function DocumentationPages({ pages }: PagesProps): ReactElement {
-  const router = useRouter();
-
-  return (
-    <>
-      {pages && pages.length === 0 && <p>No results found</p>}
-
-      {pages &&
-        pages.length > 1 &&
-        pages.map(page => {
-          return (
-            <DialogClose
-              key={page.slug}
-              className="text-left bg-card p-2 rounded-lg"
-              onClick={() => {
-                router.replace(`/docs/${page.slug}`);
-              }}
-            >
-              <h2 className="font-semibold">{page.title}</h2>
-              <p className="text-accent">{page.summary}</p>
-            </DialogClose>
-          );
-        })}
-    </>
-  );
-}

src/app/globals.css

@@ -11,7 +11,7 @@
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
@@ -34,9 +34,9 @@
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --secondary: 0 0% 9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;