update nextra and move search classes to style.css

packages/components/package.json

@@ -55,15 +55,15 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "clsx": "2.1.1",
     "fuzzy": "0.1.3",
-    "nextra": "4.0.0-app-router.41",
-    "nextra-theme-docs": "4.0.0-app-router.41",
+    "nextra": "4.0.0-app-router.42",
+    "nextra-theme-docs": "4.0.0-app-router.42",
     "react-paginate": "8.2.0",
     "react-player": "2.16.0",
     "semver": "^7.3.8",
     "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
-    "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
+    "@svgr/plugin-svgo": "^8.1.0",
     "@theguild/editor": "workspace:*",
     "@theguild/tailwind-config": "0.6.2",
     "@types/dedent": "0.7.2",

packages/components/src/components/hive-navigation/index.tsx

@@ -5,6 +5,7 @@ import React, {
   FC,
   forwardRef,
   Fragment,
+  ReactElement,
   ReactNode,
   useEffect,
   useRef,
@@ -55,6 +56,7 @@ export type HiveNavigationProps = {
   logo?: ReactNode;
   navLinks?: { href: string; children: ReactNode }[];
   developerMenu: DeveloperMenuProps['developerMenu'];
+  search?: ReactElement;
   searchProps?: ComponentProps<typeof Search>;
 };
 
@@ -83,7 +85,7 @@ export function HiveNavigation({
     },
   ],
   developerMenu,
-  searchProps,
+  search = <Search />,
 }: HiveNavigationProps) {
   const containerRef = useRef<HTMLDivElement>(null!);
 
@@ -152,10 +154,7 @@ export function HiveNavigation({
 
         {children}
 
-        <Search
-          className="relative ml-4 basis-64 [&_:is(input,kbd)]:text-green-700 dark:[&_:is(input,kbd)]:text-neutral-300 [&_input]:h-12 [&_input]:w-full [&_input]:rounded-lg [&_input]:border [&_input]:border-green-200 [&_input]:bg-white [&_input]:pl-4 [&_input]:pr-8 [&_input]:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))] [&_input]:ring-offset-[rgb(var(--nextra-bg))] dark:[&_input]:border-neutral-800 [&_input]:dark:bg-inherit [&_kbd]:absolute [&_kbd]:right-4 [&_kbd]:top-1/2 [&_kbd]:my-0 [&_kbd]:-translate-y-1/2 [&_kbd]:border-none [&_kbd]:bg-green-200 dark:[&_kbd]:bg-neutral-700"
-          {...searchProps}
-        />
+        {search}
 
         <CallToAction
           className="ml-4 max-lg:hidden"

packages/components/src/components/legacy-package-cmd.tsx

@@ -76,7 +76,7 @@ export const LegacyPackageCmd = ({
           <Pre data-filename="Terminal" data-copy="" data-language="sh" data-theme="default">
             <code>
               {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-              <span className="line">{commands[index]}</span>
+              <span className="line mx-4">{commands[index]}</span>
             </code>
           </Pre>
         </Tabs.Tab>

packages/components/src/server/theme-layout.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FC, ReactNode } from 'react';
+import { ComponentProps, FC, ReactElement, ReactNode } from 'react';
 import { Metadata } from 'next';
 import { PageMapItem } from 'nextra';
 import { Layout, Navbar } from 'nextra-theme-docs';
@@ -74,6 +74,7 @@ export const GuildLayout: FC<{
    */
   navbarProps: NavbarProps;
   pageMap?: PageMapItem[];
+  search?: ReactElement;
 }> = async ({
   children,
   websiteName,
@@ -83,6 +84,7 @@ export const GuildLayout: FC<{
   logo,
   layoutProps,
   navbarProps,
+  search,
   ...props
 }) => {
   const [meta, ...pageMap] = props.pageMap || (await getPageMap());
@@ -128,11 +130,13 @@ export const GuildLayout: FC<{
               description={description}
             />
           }
+          search={search}
           navbar={
             <HiveNavigation
               className="max-w-[90rem]"
               productName={websiteName}
               navLinks={[]}
+              search={search}
               {...navbarProps}
               logo={
                 <Anchor

packages/components/style.css

@@ -127,7 +127,23 @@
 :root {
   --nextra-navbar-height: 82px;
 }
-
+@media (min-width: 768px) {
+  .nextra-search {
+    @apply ml-3 basis-64;
+    input,
+    kbd {
+      @apply text-green-700 dark:text-neutral-300;
+    }
+    input {
+      @apply h-12 w-full rounded-lg border border-green-200 bg-white pl-4 pr-8;
+      @apply ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))];
+      @apply ring-offset-[rgb(var(--nextra-bg))] dark:border-neutral-800 dark:bg-inherit;
+    }
+    kbd {
+      @apply absolute right-4 top-1/2 my-0 -translate-y-1/2 border-none bg-green-200 dark:bg-neutral-700;
+    }
+  }
+}
 @media (max-width: 767px) {
   :root {
     --nextra-navbar-height: 64px;

packages/components/tsup.config.ts

@@ -28,17 +28,10 @@ export default defineConfig({
     svgr({
       exportType: 'named',
       typescript: true,
-      jsx: {
-        // svgo's removeXMLNS plugin doesn't work for some reason...
-        babelConfig: {
-          plugins: [
-            [
-              '@svgr/babel-plugin-remove-jsx-attribute',
-              { elements: ['svg'], attributes: ['xmlns'] },
-            ],
-          ],
-        },
+      svgoConfig: {
+        plugins: ['removeXMLNS'],
       },
+      plugins: ['@svgr/plugin-svgo'],
     }),
   ],
   plugins: [

packages/remark-mermaid/package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@types/mdast": "4.0.4",
-    "nextra": "4.0.0-app-router.41",
+    "nextra": "4.0.0-app-router.42",
     "react": "18.3.1",
     "unified": "11.0.5"
   },

packages/remark-npm2yarn/package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/mdast": "4.0.4",
-    "nextra": "4.0.0-app-router.41",
+    "nextra": "4.0.0-app-router.42",
     "unified": "11.0.5"
   },
   "publishConfig": {