Add hiveMdxComponents for use in Hive-rebranding themed websites migrated to Nextra 4 (#1977)

Author: hasparus

.changeset/tidy-hotels-wave.md

@@ -0,0 +1,19 @@
+---
+'@theguild/components': minor
+---
+
+Add hiveMdxComponents for use in Hive-rebranding themed websites
+
+## Usage
+
+```js file=mdx-components.js
+export { useHiveMDXComponents } from '@theguild/components/server';
+import { WebsiteSpecificComponent } from './components/WebsiteSpecificComponent';
+
+export const useMDXComponents = components => {
+  return useHiveMDXComponents({
+    ...components,
+    WebsiteSpecificComponent,
+  });
+};
+```

packages/components/src/server/index.ts

@@ -1,5 +1,5 @@
 // Must be in `server` folder because can contain server-only components or imports Node.js builtin
-export { useMDXComponents } from './mdx-components.js';
+export * from './mdx-components/index.js';
 // Must be in `server` folder because contains import of `useMDXComponents`
 export { MDXRemote } from 'nextra/mdx-remote';
 

packages/components/src/server/mdx-components/hive-mdx-components.ts

@@ -0,0 +1,12 @@
+import { MDXComponents } from 'nextra/mdx-components';
+import { useMDXComponents } from './mdx-components';
+import { MDXLink } from './mdx-link';
+
+/**
+ * MDX components used in Hive-rebranded websites.
+ */
+export const useHiveMDXComponents = (components?: MDXComponents): MDXComponents =>
+  useMDXComponents({
+    a: MDXLink,
+    ...components,
+  });

packages/components/src/server/mdx-components/index.ts

@@ -0,0 +1,4 @@
+export * from './mdx-components';
+export * from './hive-mdx-components';
+
+export * from './mdx-link';

packages/components/src/server/mdx-components.tsx renamed to packages/components/src/server/mdx-components/mdx-components.tsx

@@ -15,7 +15,7 @@ const docsComponents = getDocsMDXComponents({
         await fs.access(filePath);
       } catch (error) {
         const relativePath = path.relative(process.cwd(), filePath);
-        if ((error as any).code === 'ENOENT') {
+        if (typeof error === 'object' && error && 'code' in error && error.code === 'ENOENT') {
           throw new Error(`File doesn't exist: ${relativePath}`);
         }
         throw new Error(`Error checking file: ${relativePath}`);

packages/components/src/server/mdx-components/mdx-link.stories.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
+import { MDXLink, MDXLinkProps } from './mdx-link';
+
+export default {
+  title: 'Components/MDXLink',
+  component: MDXLink,
+  decorators: [hiveThemeDecorator],
+  parameters: {
+    padding: true,
+  },
+} satisfies Meta<MDXLinkProps>;
+
+export const Default: StoryObj<MDXLinkProps> = {
+  args: {
+    href: 'https://the-guild.dev/graphql/stitching',
+    children: 'Schema stitching',
+  },
+};

packages/components/src/server/mdx-components/mdx-link.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { cn } from '../../cn';
+import { Anchor } from '../../components/anchor';
+
+export interface MDXLinkProps
+  extends Omit<React.ComponentProps<typeof Anchor>, 'href' | 'children'> {
+  href?: string;
+  children?: React.ReactNode;
+}
+
+export const MDXLink = forwardRef<HTMLAnchorElement, MDXLinkProps>(
+  ({ className, href, children, ...rest }, ref) => {
+    return (
+      <Anchor
+        ref={ref}
+        // we remove `text-underline-position` from default Nextra link styles, because Neue Montreal font
+        // has a different underline position than system fonts, and it looks bad in Safari.
+        className={cn(
+          'hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50',
+          className,
+        )}
+        href={href || ''}
+        {...rest}
+      >
+        {children}
+      </Anchor>
+    );
+  },
+);
+
+MDXLink.displayName = 'MDXLink';