Remove duplicate basePath (we have another one in metadataBase) (#6430)

Author: hasparus

packages/web/docs/next.config.js

@@ -249,6 +249,7 @@ export default withGuildDocs({
   ],
   env: {
     SITE_URL: 'https://the-guild.dev/graphql/hive',
+    NEXT_BASE_PATH: process.env.NEXT_BASE_PATH,
   },
   webpack: (config, { webpack }) => {
     config.externals['node:fs'] = 'commonjs node:fs';

packages/web/docs/src/app/docs/[[...mdxPath]]/page.tsx

@@ -4,6 +4,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 { metadata as rootMetadata } from '../../layout';
 
 export const generateStaticParams = generateStaticParamsFor('mdxPath');
 
@@ -13,12 +14,20 @@ export async function generateMetadata(
 ) {
   const { mdxPath } = await props.params;
   const { metadata } = await importPage(mdxPath);
-  return {
+  const docsMetadata = {
     ...metadata,
     ...(mdxPath?.[0] === 'gateway' && {
       title: { absolute: `${metadata.title} | Hive Gateway` },
     }),
   };
+
+  // TODO: Remove this when Components have a fix for OG Images with basePath
+  docsMetadata.openGraph = {
+    ...rootMetadata.openGraph,
+    ...docsMetadata.openGraph,
+  };
+
+  return docsMetadata;
 }
 
 const Wrapper = useMDXComponents().wrapper!;

packages/web/docs/src/app/federation/page.tsx

@@ -6,6 +6,7 @@ import { FrequentlyAskedFederationQuestions } from '../../components/frequently-
 import { Hero, HeroLinks } from '../../components/hero';
 import { InfoCard } from '../../components/info-card';
 import { LandingPageContainer } from '../../components/landing-page-container';
+import { metadata as rootMetadata } from '../layout';
 import federationDiagram from '../../../public/federation-diagram.png';
 import queryResultImage from '../../../public/federation/query-result.png';
 import queryImage from '../../../public/federation/query.png';
@@ -17,6 +18,23 @@ export const metadata = {
   title: 'What is GraphQL Federation?',
   description:
     'Discover what GraphQL Federation is, how it unifies multiple APIs into a Supergraph, its core benefits, and the building blocks like subgraphs, schema composition and gateway.',
+  openGraph: {
+    ...rootMetadata.openGraph,
+    /**
+     * We currently have `metadataBase` which includes `basePath`,
+     * so the opengraph-image.png file convention results in a
+     * duplicate `basePath` in the OG Image URL.
+     *
+     * Remove this workaround when we have a fix upstream.
+     * Do not extract this workaround to a separate file, as it will stop working.
+     */
+    images: [
+      new URL('./opengraph-image.png', import.meta.url)
+        .toString()
+        // eslint-disable-next-line no-process-env
+        .replace(process.env.NEXT_BASE_PATH || '', ''),
+    ],
+  },
 };
 
 export default function FederationPage(): ReactElement {

packages/web/docs/src/app/layout.tsx

@@ -27,6 +27,26 @@ export const metadata = getDefaultMetadata({
     'Fully Open-source schema registry, analytics and gateway for GraphQL federation and other GraphQL APIs',
 });
 
+metadata.openGraph = {
+  ...metadata.openGraph,
+  // to remove leading slash
+  url: '.',
+  /**
+   * We currently have `metadataBase` which includes `basePath`,
+   * so the opengraph-image.png file convention results in a
+   * duplicate `basePath` in the OG Image URL.
+   *
+   * Remove this workaround when we have a fix upstream.
+   * Do not extract this workaround to a separate file, as it will stop working.
+   */
+  images: [
+    new URL('./opengraph-image.png', import.meta.url)
+      .toString()
+      // eslint-disable-next-line no-process-env
+      .replace(process.env.NEXT_BASE_PATH || '', ''),
+  ],
+};
+
 const neueMontreal = localFont({
   src: [
     { path: '../fonts/PPNeueMontreal-Regular.woff2', weight: '400' },

packages/web/docs/src/app/page.tsx

@@ -34,12 +34,7 @@ export const metadata: Metadata = {
     // to remove leading slash
     canonical: '.',
   },
-  openGraph: {
-    ...rootMetadata.openGraph,
-    // to remove leading slash
-    url: '.',
-    images: [new URL('./opengraph-image.png', import.meta.url).toString()],
-  },
+  openGraph: rootMetadata.openGraph,
 };
 
 export default function IndexPage(): ReactElement {

packages/web/docs/src/app/partners/page.tsx

@@ -11,11 +11,29 @@ import {
 import { FrequentlyAskedPartnersQuestions } from '../../components/frequently-asked-questions';
 import { Hero, HeroLinks } from '../../components/hero';
 import { LandingPageContainer } from '../../components/landing-page-container';
+import { metadata as rootMetadata } from '../layout';
 
 export const metadata = {
   title: 'Partnerships',
   description:
     'Accelerate GraphQL Federation adoption with the Hive Partner Network. Access enterprise-grade tools and expertise to build scalable, unified APIs across distributed systems. Join our network of federation experts.',
+  openGraph: {
+    ...rootMetadata.openGraph,
+    /**
+     * We currently have `metadataBase` which includes `basePath`,
+     * so the opengraph-image.png file convention results in a
+     * duplicate `basePath` in the OG Image URL.
+     *
+     * Remove this workaround when we have a fix upstream.
+     * Do not extract this workaround to a separate file, as it will stop working.
+     */
+    images: [
+      new URL('./opengraph-image.png', import.meta.url)
+        .toString()
+        // eslint-disable-next-line no-process-env
+        .replace(process.env.NEXT_BASE_PATH || '', ''),
+    ],
+  },
 };
 
 function WhyUs({ className }: { className?: string }) {

packages/web/docs/src/app/product-updates/(posts)/layout.tsx

@@ -1,9 +1,13 @@
-'use client';
-
 import type { ReactElement, ReactNode } from 'react';
 import { ConfiguredGiscus } from '../../../components/configured-giscus';
+import { metadata as rootMetadata } from '../../layout';
 import { ProductUpdateHeader } from './product-update-header';
 
+export const metadata = {
+  // TODO: Remove this when Components have a fix for OG Images with basePath
+  openGraph: rootMetadata.openGraph,
+};
+
 const Layout = ({ children }: { children: ReactNode }): ReactElement => {
   return (
     <>