navbar

Author: avivkeller

src/generators/web/components/NavBar.jsx

@@ -1 +1,48 @@
-export default () => <div>NavBar</div>;
+import NavBar from '@node-core/ui-components/Containers/NavBar';
+import NodejsLogo from '@node-core/ui-components/Common/NodejsLogo';
+
+const MDXNavBar = () => {
+  return (
+    <NavBar
+      pathname="/docs/latest/api/"
+      Logo={NodejsLogo}
+      sidebarItemTogglerAriaLabel="Toggle navigation menu"
+      navItems={[
+        {
+          link: '/learn',
+          text: 'Learn',
+        },
+        {
+          link: '/about',
+          text: 'About',
+        },
+        {
+          link: '/download',
+          text: 'Download',
+        },
+        {
+          link: '/blog',
+          text: 'Blog',
+        },
+        {
+          link: '/docs/latest/api/',
+          text: 'Docs',
+        },
+        {
+          link: 'https://github.com/nodejs/node/blob/main/CONTRIBUTING.md',
+          text: 'Contribute',
+          target: '_blank',
+        },
+        {
+          link: 'https://training.linuxfoundation.org/openjs/',
+          text: 'Certification',
+          target: '_blank',
+        },
+      ]}
+    >
+      <p>some child</p>
+    </NavBar>
+  );
+};
+
+export default MDXNavBar;

src/generators/web/utils/bundleCode.mjs

@@ -12,8 +12,7 @@ const uiComponentsResolver = {
   name: 'ui-components-resolver',
   /**
    * This plugin intercepts imports starting with '@node-core/ui-components' or '#ui/' and resolves them
-   * to the corresponding index.tsx file in the node_modules directory. If the index.tsx file
-   * doesn't exist, the resolution falls back to the default behavior.
+   * to the corresponding index.tsx file first, then .tsx file if index doesn't exist.
    * @param {import('esbuild').PluginBuild} build
    */
   setup(build) {
@@ -29,12 +28,24 @@ const uiComponentsResolver = {
         '@node-core/ui-components/'
       );
 
-      // Resolve to index.tsx file
+      // Try index.tsx first
       const indexPath = fileURLToPath(
         import.meta.resolve(`${normalizedPath}/index.tsx`)
       );
+      if (existsSync(indexPath)) {
+        return { path: indexPath };
+      }
+
+      // Try .tsx extension
+      const directPath = fileURLToPath(
+        import.meta.resolve(`${normalizedPath}.tsx`)
+      );
+      if (existsSync(directPath)) {
+        return { path: directPath };
+      }
 
-      return existsSync(indexPath) ? { path: indexPath } : undefined;
+      // Fall back to default resolution
+      return undefined;
     });
   },
 };
@@ -51,7 +62,8 @@ export default async code => {
       resolveDir: ESBUILD_RESOLVE_DIR,
     },
     bundle: true,
-    minify: true,
+    minify: false,
+    sourcemap: 'inline',
     format: 'iife',
     target: 'es2020',
     platform: 'browser',