@theguild/components 8.0.0-alpha-20241205150715-1c38acac57eaf933887bfbbb59a87a939b658817 → 8.0.0-alpha-20241205181447-87125d0b44dc0d1a7ce638de956987d05110bb5e

package/dist/server/theme-layout.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Layout, Navbar } from "nextra-theme-docs";
+import { Layout } from "nextra-theme-docs";
 import { Head } from "nextra/components";
 import { getPageMap } from "nextra/page-map";
-import { Footer } from "../components/footer";
-import { getNavbarLogo } from "../components/guild-navbar-logo";
-import { MoonIcon } from "../components/icons";
-import { ThemeSwitcherButton } from "../components/theme-switcher";
+import { Anchor } from "../components";
+import { HiveFooter } from "../components/hive-footer";
+import { HiveNavigation } from "../components/hive-navigation";
 import { siteOrigin, siteUrl } from "../constants";
 import { PRODUCTS } from "../products";
 const companyItem = {
@@ -43,8 +42,6 @@ const GuildLayout = async ({
   layoutProps,
   navbarProps
 }) => {
-  const url = new URL(layoutProps.docsRepositoryBase);
-  const [, org, repoName] = url.pathname.split("/");
   const [meta, ...pageMap] = await getPageMap();
   const pageMapWithCompanyMenu = [
     {
@@ -73,15 +70,34 @@ const GuildLayout = async ({
         /* @__PURE__ */ jsx("body", { children: /* @__PURE__ */ jsx(
           Layout,
           {
-            footer: /* @__PURE__ */ jsx(Footer, {}),
+            footer: /* @__PURE__ */ jsx(
+              HiveFooter,
+              {
+                logo: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  logo,
+                  /* @__PURE__ */ jsx("span", { className: "text-2xl/[1.2] font-medium tracking-[-0.16px]", children: websiteName })
+                ] }),
+                description
+              }
+            ),
             navbar: /* @__PURE__ */ jsx(
-              Navbar,
+              HiveNavigation,
               {
-                logo: getNavbarLogo({ logo, websiteName, description }),
-                logoLink: false,
-                projectLink: `${url.origin}/${org}/${repoName}`,
+                className: "max-w-[90rem]",
+                productName: websiteName,
+                navLinks: [],
                 ...navbarProps,
-                children: /* @__PURE__ */ jsx(ThemeSwitcherButton, { children: /* @__PURE__ */ jsx(MoonIcon, { className: "fill-transparent stroke-gray-500 dark:fill-gray-100 dark:stroke-gray-100" }) })
+                logo: /* @__PURE__ */ jsxs(
+                  Anchor,
+                  {
+                    href: "/",
+                    className: "hive-focus -m-2 flex shrink-0 items-center gap-3 rounded-md p-2",
+                    children: [
+                      logo,
+                      /* @__PURE__ */ jsx("span", { className: "text-2xl font-medium tracking-[-0.16px]", children: websiteName })
+                    ]
+                  }
+                )
               }
             ),
             editLink: "Edit this page on GitHub",

package/dist/types/components.d.mts

@@ -11,14 +11,6 @@ type ILink = LinkProps & Pick<ComponentProps<'a'>, 'target' | 'rel' | 'title' |
     children: ReactNode;
     newWindow?: boolean;
 };
-interface IFooterExtendedProps {
-    className?: string;
-    /**
-     * @deprecated use `items` instead
-     */
-    resources?: ILink[];
-    logo?: ILink;
-}
 interface IFeatureListProps {
     className?: string;
     title?: string;
@@ -124,4 +116,4 @@ interface IEditorProps {
     operations?: string;
 }
 
-export type { IEditorProps, IFeatureListProps, IFooterExtendedProps, IHeroGradientProps, IHeroIllustrationProps, IHeroMarketplaceProps, IHeroVideoProps, IInfoListProps, ILink, IMarketplaceItemProps, IMarketplaceItemsProps, IMarketplaceListProps, IMarketplaceSearchProps, ISchemaPageProps };
+export type { IEditorProps, IFeatureListProps, IHeroGradientProps, IHeroIllustrationProps, IHeroMarketplaceProps, IHeroVideoProps, IInfoListProps, ILink, IMarketplaceItemProps, IMarketplaceItemsProps, IMarketplaceListProps, IMarketplaceSearchProps, ISchemaPageProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "8.0.0-alpha-20241205150715-1c38acac57eaf933887bfbbb59a87a939b658817",
+  "version": "8.0.0-alpha-20241205181447-87125d0b44dc0d1a7ce638de956987d05110bb5e",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"
@@ -49,8 +49,8 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "clsx": "2.1.1",
     "fuzzy": "0.1.3",
-    "nextra": "4.0.0-app-router.28",
-    "nextra-theme-docs": "4.0.0-app-router.21",
+    "nextra": "4.0.0-app-router.34",
+    "nextra-theme-docs": "4.0.0-app-router.34",
     "react-paginate": "8.2.0",
     "react-player": "2.16.0",
     "semver": "^7.3.8",

package/style.css

@@ -1,58 +1,38 @@
-@layer l-base, l-nextra, l-components;
+@layer l-nextra;
 
-/*@import 'tailwindcss/base' layer(l-base);*/
-@import 'nextra-theme-docs/dist/style.css' layer(l-nextra);
-@import 'tailwindcss/components' layer(l-components);
+/**
+ * We don't need Tailwind CSS preflight styles `@import 'tailwindcss/base'`
+ * because `style.css` from `nextra-theme-docs` already include them
+**/
+@import 'nextra-theme-docs/dist/style-prefixed.css' layer(l-nextra);
 @import 'tailwindcss/utilities';
-
-.nextra-banner-container._bg-neutral-900._flex {
-  @apply bg-[#48224e] bg-none;
-}
-
-:root {
-  --nextra-navbar-height: 72px;
-}
-
-html {
-  /* font from tailwindcss/base is overwritten by Nextra styles */
-  font-family: var(--font-sans, ui-sans-serif), system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
-.nextra-nav-container [role='menu']:has(a[href='https://the-guild.dev/graphql/hive'])
-{
-  @apply grid max-h-[unset] w-[470px] grid-cols-3 gap-y-2 p-2;
-
-  a:nth-child(-n + 3) {
-    @apply rounded-b-none border-b border-black/20 pb-3 dark:border-white/20;
-  }
-}
+@import 'tailwindcss/components';
 
 /* #region hamburger mobile menu */
 
-.light .nextra-sidebar-container input {
+.light .nextra-mobile-nav input {
   color: rgb(0, 52, 44);
   background-color: rgb(248, 247, 246) !important;
   border: 1px solid rgb(241, 238, 228);
 }
 
-.light .nextra-sidebar-container input::placeholder {
+.light .nextra-mobile-nav input::placeholder {
   color: rgba(36, 88, 80, 0.9) !important;
 }
 
-.light .nextra-sidebar-container .nextra-sidebar-footer:is(html[class] *) {
+.light .nextra-mobile-nav .nextra-sidebar-footer:is(html[class] *) {
   border-color: #e5e7eb;
 }
 
-.light .nextra-sidebar-container kbd {
+.light .nextra-mobile-nav kbd {
   @apply !border-gray-200 !bg-white;
 }
 
-.light .nextra-sidebar-container li > :is(a, button) {
+.light .nextra-mobile-nav li > :is(a, button) {
   @apply text-gray-500 hover:bg-gray-100 hover:text-gray-900;
 }
 
-.light .nextra-sidebar-container ul::before {
+.light .nextra-mobile-nav ul::before {
   @apply !bg-gray-200;
 }
 
@@ -80,7 +60,7 @@ html {
 
 /* #endregion search results */
 
-@layer l-components {
+@layer components {
   .hive-focus {
     &:focus {
       outline: none;
@@ -123,21 +103,14 @@ html {
 }
 
 /* wrong with neue montreal */
-._subpixel-antialiased {
+.n\:subpixel-antialiased {
   -webkit-font-smoothing: unset;
   -moz-osx-font-smoothing: unset;
 }
 
 /* fix for nextra navbar for HiveNavigation */
 :root {
-  --nextra-navbar-height: 90px;
-}
-
-@media (min-width: 768px) {
-  .nextra-sidebar-container,
-  .nextra-toc > .nextra-scrollbar {
-    top: var(--nextra-navbar-height);
-  }
+  --nextra-navbar-height: 82px;
 }
 
 @media (max-width: 767px) {

package/dist/components/footer.d.mts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-import { IFooterExtendedProps } from '../types/components.mjs';
-import 'next/image';
-import 'next/link';
-import 'react-player';
-
-declare function Footer({ className, resources, logo }: IFooterExtendedProps): ReactElement;
-
-export { Footer };

package/dist/components/footer.js

@@ -1,116 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { siteOrigin } from "../constants";
-import { GuildLogo, TheGuild } from "../logos";
-import { PRODUCTS } from "../products";
-import { Anchor } from "./anchor";
-import {
-  CSAStarLevelOneIcon,
-  DiscordIcon,
-  GitHubIcon,
-  LinkedInIcon,
-  TwitterIcon,
-  YouTubeIcon
-} from "./icons";
-const COMPANY = [
-  {
-    children: "About",
-    title: "Learn more about us",
-    href: `${siteOrigin}/about-us`
-  },
-  {
-    children: "Blog",
-    title: "Read our blog",
-    href: `${siteOrigin}/blog`
-  },
-  {
-    children: "Newsletter",
-    title: "Newsletter",
-    href: `${siteOrigin}/newsletter`
-  }
-];
-const COMMUNITY = [
-  {
-    icon: TwitterIcon,
-    title: "Visit our Twitter",
-    href: "https://twitter.com/TheGuildDev"
-  },
-  {
-    icon: LinkedInIcon,
-    title: "Visit our LinkedIn",
-    href: "https://linkedin.com/company/the-guild-software"
-  },
-  {
-    icon: DiscordIcon,
-    title: "Reach us on Discord",
-    href: "https://discord.com/invite/xud7bH9"
-  },
-  {
-    icon: GitHubIcon,
-    title: "Check our GitHub account",
-    href: "https://github.com/the-guild-org"
-  },
-  {
-    icon: YouTubeIcon,
-    title: "Watch Our Videos",
-    href: "https://youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd"
-  }
-];
-const products = [
-  PRODUCTS.HIVE,
-  PRODUCTS.MESH,
-  PRODUCTS.YOGA,
-  PRODUCTS.CODEGEN,
-  PRODUCTS.NEXTRA,
-  { ...PRODUCTS.SOFA, name: "GraphQL to REST" }
-].map(({ name, href, title }) => ({
-  children: name,
-  href,
-  title
-}));
-const classes = {
-  title: clsx("mb-2.5 text-lg font-medium text-gray-900 dark:text-gray-100"),
-  anchor: clsx("text-gray-500 hover:text-black dark:text-[#b4b5be] hover:dark:text-gray-100")
-};
-const renderLinks = (list) => /* @__PURE__ */ jsx("ul", { className: "m-0 mb-8 list-none p-0 last:mb-0", children: list.map((link, i) => /* @__PURE__ */ jsx("li", { className: "mb-3 last:mb-0", children: /* @__PURE__ */ jsx(Anchor, { className: clsx(classes.anchor, "inline-block text-sm"), ...link }) }, i)) });
-function Footer({ className, resources = [], logo }) {
-  return /* @__PURE__ */ jsx(
-    "footer",
-    {
-      className: clsx(
-        "bg-[#fafafa] py-[60px] text-base md:py-[140px] dark:bg-[#0f1114]",
-        className
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: "container max-w-[90rem]", children: /* @__PURE__ */ jsxs("div", { className: "relative flex justify-between gap-10 max-md:flex-col", children: [
-        /* @__PURE__ */ jsxs(Anchor, { className: "flex items-center gap-2 self-start", href: `${siteOrigin}/`, ...logo, children: [
-          /* @__PURE__ */ jsx(GuildLogo, { className: "h-9 w-auto" }),
-          /* @__PURE__ */ jsx(TheGuild, { className: "h-7 w-auto" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: classes.title, children: "Products" }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-6", children: renderLinks(products) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: classes.title, children: "Resources" }),
-          renderLinks([
-            {
-              children: "Press Kit",
-              title: "Press Kit",
-              href: `${siteOrigin}/logos`
-            },
-            ...resources
-          ])
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: classes.title, children: "Company" }),
-          renderLinks(COMPANY)
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-start gap-5 text-[#b4b5be]", children: COMMUNITY.map(({ icon: Icon, ...iconProps }) => /* @__PURE__ */ jsx(Anchor, { className: classes.anchor, ...iconProps, children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-auto" }) }, iconProps.title)) }),
-        /* @__PURE__ */ jsx(CSAStarLevelOneIcon, { className: "absolute right-0 ml-auto h-[4.5rem] w-auto md:bottom-0" })
-      ] }) })
-    }
-  );
-}
-export {
-  Footer
-};

package/dist/components/guild-navbar-logo.d.mts

@@ -1,19 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FC, ReactNode } from 'react';
-
-declare const GuildUnifiedLogo: FC<{
-    children: ReactNode;
-    title: string;
-    description: string;
-}>;
-/**
- * GraphQL-related products live under the Hive platform brand, so we use a single logo for them.
- * The rest gets The Guild / {Product} logo.
- */
-declare function getNavbarLogo({ logo, websiteName, description, }: {
-    logo: ReactNode;
-    websiteName: string;
-    description: string;
-}): react_jsx_runtime.JSX.Element;
-
-export { GuildUnifiedLogo, getNavbarLogo };

package/dist/components/guild-navbar-logo.js

@@ -1,62 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { siteOrigin } from "../constants";
-import { GuildLogo, TheGuild } from "../logos";
-import { Anchor } from "./anchor";
-const GuildUnifiedLogo = ({ children, title, description }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Anchor,
-      {
-        title: "View our website",
-        className: clsx(
-          "flex items-center gap-x-1.5 transition-opacity hover:opacity-75",
-          children && "max-md:hidden"
-        ),
-        href: `${siteOrigin}/`,
-        children: [
-          /* @__PURE__ */ jsx(GuildLogo, { className: "h-9 w-auto" }),
-          /* @__PURE__ */ jsx(TheGuild, { className: "w-11" })
-        ]
-      }
-    ),
-    children && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "svg",
-        {
-          height: "22",
-          viewBox: "0 0 10 22",
-          stroke: "currentColor",
-          className: "mx-6 shrink-0 max-md:hidden",
-          children: /* @__PURE__ */ jsx("path", { d: "M8.6001 0.833313L0.600097 20.8333" })
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Anchor,
-        {
-          title,
-          className: "flex shrink-0 items-center gap-x-1.5 hover:opacity-75",
-          href: "/",
-          children: [
-            children,
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold leading-tight", children: title }),
-              /* @__PURE__ */ jsx("h2", { className: "text-xs max-lg:hidden", children: description })
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-function getNavbarLogo({
-  logo,
-  websiteName,
-  description
-}) {
-  return websiteName === "Hive" ? /* @__PURE__ */ jsx(Anchor, { title: websiteName, href: "/", children: logo }) : /* @__PURE__ */ jsx(GuildUnifiedLogo, { description, title: websiteName, children: logo });
-}
-export {
-  GuildUnifiedLogo,
-  getNavbarLogo
-};

package/dist/helpers/render-slot.d.mts

@@ -1,3 +0,0 @@
-declare function renderSlot<TProps extends object>(Slot: React.ReactNode | ((props: TProps) => React.ReactNode), props: Partial<TProps>): React.ReactNode;
-
-export { renderSlot };

package/dist/helpers/render-slot.js

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cloneElement } from "react";
-import { cn } from "../cn";
-function renderSlot(Slot, props) {
-  if (typeof Slot === "function") {
-    return /* @__PURE__ */ jsx(Slot, { ...props });
-  }
-  if (!(typeof Slot === "object" && Slot && "props" in Slot)) {
-    return null;
-  }
-  if ("className" in props) {
-    props = {
-      ...props,
-      className: cn(Slot.props.className, props.className)
-    };
-    return cloneElement(Slot, props);
-  }
-}
-export {
-  renderSlot
-};