Include LegacyDocsBanner

Author: hasparus

website/src/app/(content-pages)/docs/[[...mdxPath]]/legacy-docs-banner.tsx

@@ -1,14 +1,26 @@
-import Link from 'next/link';
-import { Anchor, Callout } from '@theguild/components';
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Callout } from '@theguild/components';
+import { Link } from '../../../../components/docs-mdx-components';
 
 export function LegacyDocsBanner() {
+  const pathname = usePathname();
+  if (pathname.startsWith('/v1')) {
+    return null;
+  }
+
   return (
     <Callout type="warning">
       This is the documentation for the <b>old</b> GraphQL Mesh version v0. We recommend upgrading
       to the latest GraphQL Mesh version v1.
-      <Anchor href="/v1/migration-from-v0" className="block">
+      <br />
+      <Link
+        href="/v1/migration-from-v0"
+        className="[*:has(div>&)]:mb-8 gap-2 underline hover:no-underline"
+      >
         Migrate to GraphQL Mesh v1
-      </Anchor>
+      </Link>
     </Callout>
   );
 }

website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx

@@ -3,6 +3,7 @@ import { generateStaticParamsFor, importPage } from 'nextra/pages';
 import { NextPageProps } from '@theguild/components';
 import { useMDXComponents } from '../../../../../mdx-components.js';
 import { ConfiguredGiscus } from '../../../../components/configured-giscus';
+import { LegacyDocsBanner } from './legacy-docs-banner';
 
 /**
  * You might have an urge to try to refactor this to a separate file and reuse between product-updates and docs.
@@ -33,6 +34,7 @@ export default async function Page(props: NextPageProps<'...mdxPath'>) {
 
   return (
     <Wrapper toc={toc} metadata={metadata}>
+      <LegacyDocsBanner />
       <MDXContent params={params} />
       <ConfiguredGiscus />
     </Wrapper>

website/src/components/docs-mdx-components.tsx

@@ -14,6 +14,7 @@ export const Link: typeof Anchor = ({ className, ...props }) => {
     />
   );
 };
+
 export const docsMDXComponents = {
   a: Link,
 };