Configurable logo (#1788)

Co-authored-by: Dimitri POSTOLOV <[email protected]>

Author: hasparus

.changeset/clean-worms-lie.md

@@ -0,0 +1,6 @@
+---
+"@theguild/components": patch
+---
+
+Make `HiveNavigation` logo configurable through `logo` prop.
+Expose `navLinks` prop to add links to /plugins.

packages/components/src/components/explore-main-product-cards.tsx

@@ -28,7 +28,7 @@ export function ExploreMainProductCards({ className, ...rest }: ExploreMainProdu
         </TextLink>
       </div>
       <ul className="-mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden">
-        {[PRODUCTS.HIVE, PRODUCTS.YOGA, PRODUCTS.MESH, PRODUCTS.CODEGEN].map(product => (
+        {[PRODUCTS.HIVE, PRODUCTS.HIVE_GATEWAY, PRODUCTS.YOGA, PRODUCTS.MESH].map(product => (
           <MainProductCard key={product.name} as="li" product={product} />
         ))}
       </ul>

packages/components/src/components/hive-footer.stories.ts renamed to packages/components/src/components/hive-footer.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
 import { HiveFooter, HiveFooterProps } from './hive-footer';
+import { CodegenIcon } from './icons';
 
 export default {
   title: 'Hive/HiveFooter',
@@ -34,3 +35,18 @@ export const Default: StoryObj<HiveFooterProps> = {
     ],
   },
 };
+
+export const CodegenFooter: StoryObj<HiveFooterProps> = {
+  ...Default,
+  args: {
+    logo: {
+      href: '/',
+      children: (
+        <div className="flex items-center gap-3 text-green-1000">
+          <CodegenIcon className="size-8" />
+          <span className="text-2xl/[1.2] font-medium tracking-[-0.16px]">Codegen</span>
+        </div>
+      ),
+    },
+  },
+};

packages/components/src/components/hive-footer.tsx

@@ -21,12 +21,14 @@ export function HiveFooter({ className, logo, resources = [], sameSite }: HiveFo
       <div className="mx-4 grid w-full max-w-[75rem] grid-cols-1 gap-x-6 text-green-800 max-lg:gap-y-16 sm:grid-cols-4 lg:gap-x-8 xl:gap-x-10 dark:text-neutral-400">
         <div className="max-lg:col-span-full">
           <Anchor
-            href="https://the-guild.dev"
+            href="/"
             sameSite={sameSite}
             {...logo}
             className="hive-focus -m-1.5 flex rounded p-1.5"
           >
-            <HiveCombinationMark className="h-8 w-auto text-green-1000 dark:text-white" />
+            {logo?.children || (
+              <HiveCombinationMark className="h-8 w-auto text-green-1000 dark:text-white" />
+            )}
           </Anchor>
           <p className="mt-6 lg:mt-8">Open-source GraphQL management platform</p>
         </div>

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

@@ -2,6 +2,8 @@ import { DocsThemeConfig, default as NextraLayout } from 'nextra-theme-docs';
 import { Meta, StoryContext, StoryObj } from '@storybook/react';
 import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
 import { PRODUCTS } from '../../products';
+import { Anchor } from '../anchor';
+import { CodegenIcon } from '../icons';
 import { GraphQLConfCard } from './graphql-conf-card';
 import {
   CompanyMenu,
@@ -147,6 +149,25 @@ export const Company: StoryObj = {
   },
 };
 
+export const CodegenNavmenu: StoryObj<HiveNavigationProps> = {
+  ...Default,
+  args: {
+    navLinks: [
+      {
+        href: '/plugins',
+        children: 'Plugins',
+      },
+    ],
+    productName: PRODUCTS.CODEGEN.name,
+    logo: (
+      <Anchor href="/" className="hive-focus -m-2 flex items-center gap-3 rounded-md p-2">
+        <CodegenIcon className="size-8" />
+        <span className="text-2xl font-medium tracking-[-0.16px]">Codegen</span>
+      </Anchor>
+    ),
+  },
+};
+
 function nextraThemeDocsCtxDecorator(Story: () => React.ReactNode, _ctx: StoryContext) {
   return (
     <NextraLayout

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

@@ -48,6 +48,8 @@ export interface HiveNavigationProps {
    * We change links to relative based on what product we're in.
    */
   productName: string;
+  logo?: ReactNode;
+  navLinks?: { href: string; children: ReactNode }[];
 }
 /**
  *
@@ -66,6 +68,8 @@ export function HiveNavigation({
   children,
   className,
   productName,
+  logo,
+  navLinks,
 }: HiveNavigationProps) {
   // `useThemeConfig` doesn't return anything outside of Nextra, and the provider isn't exported
   const themeConfig = useThemeConfig() as ReturnType<typeof useThemeConfig> | undefined;
@@ -75,6 +79,14 @@ export function HiveNavigation({
 
   const containerRef = useRef<HTMLDivElement>(null!);
 
+  logo ||= <HiveLogoLink isHive={isHive} />;
+  navLinks ||= [
+    {
+      href: isHive ? '#pricing' : 'https://the-guild.dev/graphql/hive#pricing',
+      children: 'Pricing',
+    },
+  ];
+
   return (
     <div
       ref={containerRef}
@@ -93,13 +105,13 @@ export function HiveNavigation({
 
       {/* mobile menu */}
       <div className="flex items-center justify-between md:hidden">
-        <HiveLogoLink />
+        {logo}
         <HamburgerButton />
       </div>
 
       {/* desktop menu */}
       <NavigationMenu className={cn('mx-auto hidden md:flex', className)} delayDuration={0}>
-        <HiveLogoLink />
+        {logo}
         <NavigationMenuList className="ml-4 bg-white dark:bg-transparent [@media(min-width:1180px)]:ml-16">
           <NavigationMenuItem>
             <NavigationMenuTrigger>Products</NavigationMenuTrigger>
@@ -127,15 +139,15 @@ export function HiveNavigation({
               <CompanyMenu>{companyMenuChildren}</CompanyMenu>
             </NavigationMenuContent>
           </NavigationMenuItem>
-          <NavigationMenuItem className="flex">
-            <NavigationMenuLink
-              href={isHive ? '#pricing' : 'https://the-guild.dev/graphql/hive#pricing'}
-              className="font-medium"
-            >
-              Pricing
-            </NavigationMenuLink>
-          </NavigationMenuItem>
+          {navLinks.map(({ href, children }, i) => (
+            <NavigationMenuItem key={i} className="flex">
+              <NavigationMenuLink href={href} className="font-medium">
+                {children}
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          ))}
         </NavigationMenuList>
+
         <div className="flex-1" />
 
         {children}
@@ -197,7 +209,7 @@ export const ProductsMenu = React.forwardRef<HTMLDivElement, ProductsMenuProps>(
               Hive
             </p>
             <p className="mt-1 text-sm leading-5 text-green-800 dark:text-neutral-400">
-              GraphQL Management Platform, a Gateway & Decision-making Engine
+              GraphQL Management Platform & Decision-making Engine
             </p>
           </NavigationMenuLink>
           <Anchor
@@ -207,14 +219,14 @@ export const ProductsMenu = React.forwardRef<HTMLDivElement, ProductsMenuProps>(
             <span>Get started</span> <ArrowIcon />
           </Anchor>
         </div>
-        <div className="w-[267px]">
+        <div className="w-[269px]">
           <ColumnLabel>The GraphQL Stack</ColumnLabel>
           <ul>
             {(
               [
+                [PRODUCTS.HIVE_GATEWAY, 'Federation Gateway'],
                 [PRODUCTS.MESH, 'Anything to GraphQL'],
                 [PRODUCTS.YOGA, 'GraphQL Server & Subgraph'],
-                [PRODUCTS.CODEGEN, 'GraphQL Code Generation'],
               ] as const
             ).map(([product, description]) => {
               const Logo = product.logo;
@@ -491,9 +503,12 @@ export function CompanyMenu({ children }: { children: React.ReactNode }) {
   );
 }
 
-function HiveLogoLink() {
+function HiveLogoLink({ isHive }: { isHive: boolean }) {
   return (
-    <Anchor href="/" className="hive-focus -m-2 flex items-center rounded-md p-2">
+    <Anchor
+      href={isHive ? '/' : 'https://the-guild.dev/graphql/hive'}
+      className="hive-focus -m-2 flex items-center rounded-md p-2"
+    >
       <HiveCombinationMark className="text-green-1000 dark:text-neutral-200" />
     </Anchor>
   );

packages/components/src/components/icons/hive-gateway.svg

@@ -15,6 +15,7 @@ export { ReactComponent as CodegenIcon } from './codegen.svg';
 export { ReactComponent as MeshIcon } from './mesh.svg';
 export { ReactComponent as YogaIcon } from './yoga.svg';
 export { ReactComponent as HiveIcon } from './hive.svg';
+export { ReactComponent as HiveGatewayIcon } from './hive-gateway.svg';
 
 export { InformationCircleIcon, GitHubIcon, DiscordIcon } from 'nextra/icons';