Merge pull request #10 from pheralb/next

🚀 New updates

Author: pheralb

apps/website/src/components/docs/search-docs.tsx

@@ -10,9 +10,11 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandSeparator,
 } from "@/components/ui/command";
 import { Button } from "@/components/ui/button";
 
+import { cn } from "@/utils/cn";
 import { SearchIcon } from "lucide-react";
 import { getDocsByFolder } from "@/utils/docs";
 
@@ -54,23 +56,42 @@ const SearchDocs = () => {
         <CommandInput placeholder="Search" />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
-          {Object.entries(docsByFolder).map(([folder, docs]) => (
-            <CommandGroup key={folder} heading={folder} className="my-2">
-              {docs.map((doc) => (
-                <CommandItem
-                  key={doc._meta.path}
-                  onSelect={() => {
-                    router.push(`/docs/${doc.folder}/${doc._meta.path}`);
-                    setOpen(false);
-                  }}
-                >
-                  <span className="font-medium">{doc.title}</span>
-                  <span className="max-w-110 truncate text-xs text-neutral-600 dark:text-neutral-400">
-                    {doc.description}
-                  </span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
+          {Object.entries(docsByFolder).map(([folder, docs], index, array) => (
+            <div key={folder}>
+              <CommandGroup heading={folder} className="my-1">
+                {docs.map((doc) => (
+                  <CommandItem
+                    key={doc._meta.path}
+                    onSelect={() => {
+                      router.push(`/docs/${doc.folder}/${doc._meta.path}`);
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="font-medium">{doc.title}</span>
+                    <span className="max-w-110 truncate text-xs text-neutral-600 dark:text-neutral-400">
+                      {doc.description}
+                    </span>
+                    {doc.category && (
+                      <div className="mt-1 flex items-center space-x-1">
+                        {doc.category.map((cat) => (
+                          <span
+                            key={cat}
+                            className={cn(
+                              "bg-neutral-100 dark:bg-neutral-800",
+                              "border border-neutral-300 dark:border-neutral-700",
+                              "rounded-full px-2 py-0.5 text-xs tracking-tight text-neutral-600 dark:text-neutral-300",
+                            )}
+                          >
+                            {cat}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              {index < array.length - 1 && <CommandSeparator />}
+            </div>
           ))}
         </CommandList>
       </CommandDialog>

apps/website/src/components/ui/command.tsx

@@ -155,7 +155,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "relative flex cursor-default flex-col items-start justify-start rounded-sm px-4 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-neutral-500 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
+        "relative flex cursor-default flex-col items-start justify-start rounded-sm px-4 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-200/70 data-[selected=true]:text-neutral-900 dark:data-[selected=true]:bg-neutral-800/70 dark:data-[selected=true]:text-neutral-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-neutral-500 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
         className,
       )}
       {...props}

apps/website/src/mdx/plugins/rehypeReactDoc.ts

@@ -166,7 +166,7 @@ export function rehypeReactDoc() {
                                   children: [
                                     {
                                       type: "text",
-                                      value: `Included: ${String(reactParentName)}<HTMLDivElement>`,
+                                      value: `Included: ${String(reactParentName)}`,
                                     },
                                   ],
                                 }),

apps/website/src/styles/shiki.css

@@ -69,15 +69,15 @@ pre.has-diff span.line.diff {
 }
 
 pre.has-diff span.line.diff.add {
-  @apply bg-green-300/20 dark:bg-green-700/20;
+  @apply bg-emerald-300/20! dark:bg-emerald-700/20!;
   &::before {
     content: "+";
     @apply absolute left-2 text-green-600 dark:text-green-400;
   }
 }
 
 pre.has-diff span.line.diff.remove {
-  @apply bg-red-300/20 opacity-70 dark:bg-red-600/20;
+  @apply bg-red-300/20! opacity-70 dark:bg-red-600/20!;
   &::before {
     content: "-";
     @apply absolute left-2 text-red-600 dark:text-red-400;

apps/website/src/utils/shiki/transformers/show-line-numbers.ts

@@ -6,12 +6,21 @@ const showLineNumbers = (): ShikiTransformer => {
     pre(node) {
       const rawMeta = this.options.meta?.__raw;
       const addLineNumbers = rawMeta?.includes("lineNumbers") || false;
-      const shikiStyles = node.properties.class;
-      if (addLineNumbers) {
-        node.properties.class = `${shikiStyles} shiki-line-numbers`;
+
+      if (!addLineNumbers) {
+        return;
+      }
+
+      const existingClass = node.properties.class;
+      if (Array.isArray(existingClass)) {
+        existingClass.push("shiki-line-numbers");
+      } else if (typeof existingClass === "string") {
+        node.properties.class = `${existingClass} shiki-line-numbers`;
+      } else {
+        node.properties.class = "shiki-line-numbers";
       }
     },
   };
 };
 
-export { showLineNumbers };
+export { showLineNumbers };