Skip to content

Commit

Permalink
Revert "Revert "feat: next-seo (#971)" (#982)"
Browse files Browse the repository at this point in the history 
This reverts commit a70ec5c.
  • Loading branch information
@abvthecity
abvthecity committed Jun 10, 2024
1 parent 297a518 commit fa1ed79
Show file tree
Hide file tree
Showing 11 changed files with 370 additions and 140 deletions.
5 changes: 3 additions & 2 deletions packages/ui/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,21 +39,21 @@
"@emotion/is-prop-valid": "^1.2.2",
"@fern-api/fdr-sdk": "workspace:*",
"@fern-api/template-resolver": "workspace:*",
"@fern-ui/components": "workspace:*",
"@fern-ui/core-utils": "workspace:*",
"@fern-ui/fdr-utils": "workspace:*",
"@fern-ui/loadable": "workspace:*",
"@fern-ui/react-commons": "workspace:*",
"@fern-ui/components": "workspace:*",
"@headlessui/react": "^1.7.18",
"@next/third-parties": "^14.2.3",
"@radix-ui/colors": "^3.0.0",
"@radix-ui/react-tooltip": "^1.0.7",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@segment/snippet": "^5.2.1",
"@sentry/nextjs": "^7.105.0",
"@shikijs/transformers": "^1.2.2",
Expand Down Expand Up @@ -83,6 +83,7 @@
"moment": "^2.30.1",
"next": "^14.2.3",
"next-mdx-remote": "^4.4.1",
"next-seo": "^6.5.0",
"next-themes": "^0.3.0",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
Expand Down
82 changes: 15 additions & 67 deletions packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { DocsV1Read, DocsV2Read } from "@fern-api/fdr-sdk";
import { NodeCollector } from "@fern-api/fdr-sdk/navigation";
import { DocsV1Read, FernNavigation } from "@fern-api/fdr-sdk";
import { useDeepCompareMemoize } from "@fern-ui/react-commons";
import { useTheme } from "next-themes";
import Head from "next/head";
import Script from "next/script";
import { PropsWithChildren, ReactNode, useCallback, useMemo } from "react";
import { PropsWithChildren, useCallback, useMemo } from "react";
import { CustomerAnalytics } from "../../analytics/CustomerAnalytics";
import { renderSegmentSnippet } from "../../analytics/segment";
import { DocsPage } from "../../next-app/DocsPage";
import { getThemeColor } from "../../next-app/utils/getColorVariables";
import { getFontExtension } from "../../next-app/utils/getFontVariables";
import { renderThemeStylesheet } from "../../next-app/utils/renderThemeStylesheet";
import { DocsContext } from "./DocsContext";

Expand All @@ -32,7 +30,7 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({ child
const apis = useDeepCompareMemoize(pageProps.apis);
const { resolvedTheme: theme } = useTheme();

const { baseUrl, title, favicon } = pageProps;
const { domain, basePath } = pageProps.baseUrl;
const { currentTabIndex, currentVersionId } = pageProps.navigation;

const stylesheet = useMemo(
Expand All @@ -54,8 +52,8 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({ child

const value = useMemo(
() => ({
domain: baseUrl.domain,
basePath: baseUrl.basePath,
domain,
basePath,
layout,
colors,
typography,
Expand All @@ -67,25 +65,25 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({ child
currentVersionId,
versions,
sidebar,
nodes: NodeCollector.collect(sidebar),
nodes: FernNavigation.NodeCollector.collect(sidebar),
searchInfo,
navbarLinks,
apis,
}),
[
baseUrl.basePath,
baseUrl.domain,
domain,
basePath,
layout,
colors,
typography,
css,
currentTabIndex,
currentVersionId,
files,
layout,
resolveFile,
sidebar,
currentTabIndex,
tabs,
typography,
currentVersionId,
versions,
sidebar,
searchInfo,
navbarLinks,
apis,
Expand All @@ -99,18 +97,12 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({ child
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
{title != null && <title>{title}</title>}
{favicon != null && <link rel="icon" id="favicon" href={files[favicon]?.url} />}
{typography?.bodyFont?.variants.map((v) => getPreloadedFont(v, files))}
{typography?.headingsFont?.variants.map((v) => getPreloadedFont(v, files))}
{typography?.codeFont?.variants.map((v) => getPreloadedFont(v, files))}
{theme === "light" && colors.light != null && (
<meta name="theme-color" content={getThemeColor(colors.light)} />
)}
{theme === "dark" && colors.dark != null && (
<meta name="theme-color" content={getThemeColor(colors.dark)} />
)}
{maybeRenderNoIndex(baseUrl)}
</Head>
{/*
We concatenate all global styles into a single instance,
Expand Down Expand Up @@ -141,52 +133,8 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({ child
/>
))}
{js?.remote?.map((remote) => <Script key={remote.url} src={remote.url} strategy={remote.strategy} />)}
<Script id="segment-script" dangerouslySetInnerHTML={{ __html: renderSegmentSnippet(baseUrl.domain) }} />
<CustomerAnalytics domain={baseUrl.domain} />
<Script id="segment-script" dangerouslySetInnerHTML={{ __html: renderSegmentSnippet(domain) }} />
<CustomerAnalytics domain={domain} />
</DocsContext.Provider>
);
};

function getPreloadedFont(
variant: DocsV1Read.CustomFontConfigVariant,
files: Record<DocsV1Read.FileId, DocsV1Read.File_>,
) {
const file = files[variant.fontFile]?.url;
if (file == null) {
return null;
}
let fontExtension: string;
try {
fontExtension = getFontExtension(new URL(file).pathname);
} catch (err) {
fontExtension = getFontExtension(file);
}
return (
<link
key={variant.fontFile}
rel="preload"
href={file}
as="font"
type={`font/${fontExtension}`}
crossOrigin="anonymous"
/>
);
}

function maybeRenderNoIndex(baseUrl: DocsV2Read.BaseUrl): ReactNode {
// If the basePath is present, it's not clear whether or not the site is hosted on a custom domain.
// In this case, we don't want to render the no-track script. If this changes, we should update this logic.
if (baseUrl.basePath != null && process.env.NODE_ENV === "production") {
return null;
}

if (
baseUrl.domain.includes("docs.dev.buildwithfern.com") ||
baseUrl.domain.includes("docs.staging.buildwithfern.com") ||
baseUrl.domain.includes(".docs.buildwithfern.com") ||
process.env.NODE_ENV !== "production"
) {
return <meta name="robots" content="noindex, nofollow" />;
}
return null;
}
90 changes: 37 additions & 53 deletions packages/ui/app/src/contexts/navigation-context/NavigationContextProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import { FernNavigation } from "@fern-api/fdr-sdk";
import { useEventCallback } from "@fern-ui/react-commons";
import { debounce } from "lodash-es";
import Head from "next/head";
import { NextSeo } from "next-seo";
import { useRouter } from "next/router";
import { PropsWithChildren, useEffect, useMemo, useState } from "react";
import { renderToString } from "react-dom/server";
import { captureSentryError } from "../../analytics/sentry";
import { MdxContent } from "../../mdx/MdxContent";
import { FernDocsFrontmatter } from "../../mdx/mdx";
import { getNextSeoProps } from "../../next-app/utils/getSeoProp";
import { ResolvedPath } from "../../resolver/ResolvedPath";
import { getRouteNodeWithAnchor } from "../../util/anchor";
import { useFeatureFlags } from "../FeatureFlagContext";
Expand All @@ -19,7 +16,7 @@ export declare namespace NavigationContextProvider {
resolvedPath: ResolvedPath;
domain: string;
basePath: string | undefined;
title: string | undefined;
// title: string | undefined;
}>;
}

Expand Down Expand Up @@ -93,9 +90,9 @@ export const NavigationContextProvider: React.FC<NavigationContextProvider.Props
children,
domain,
basePath,
title,
}) => {
const { nodes, versions, currentVersionId } = useDocsContext();
const docsContext = useDocsContext();
const { nodes, versions, currentVersionId } = docsContext;
const { isApiScrollingDisabled } = useFeatureFlags();
const router = useRouter();

Expand Down Expand Up @@ -215,9 +212,7 @@ export const NavigationContextProvider: React.FC<NavigationContextProvider.Props
});
}, [router, navigateToPath]);

const frontmatter = getFrontmatter(resolvedPath);
const activeTitle = convertToTitle(activeNavigatable, frontmatter);
const activeDescription = convertDescriptionToString(frontmatter);
const seo = useMemo(() => getNextSeoProps(resolvedPath, activeNavigatable), [activeNavigatable, resolvedPath]);

return (
<NavigationContext.Provider
Expand Down Expand Up @@ -248,57 +243,46 @@ export const NavigationContextProvider: React.FC<NavigationContextProvider.Props
],
)}
>
<Head>
{activeTitle != null && <title>{title != null ? `${activeTitle} – ${title}` : activeTitle}</title>}
{activeDescription != null && <meta name="description" content={activeDescription} />}
{frontmatter?.image != null && <meta property="og:image" content={frontmatter.image} />}
</Head>
<NextSeo {...seo} />
{children}
</NavigationContext.Provider>
);
};

function getFrontmatter(resolvedPath: ResolvedPath): FernDocsFrontmatter | undefined {
if (resolvedPath.type === "custom-markdown-page" && typeof resolvedPath.serializedMdxContent !== "string") {
return resolvedPath.serializedMdxContent.frontmatter;
}
return undefined;
}
// function convertToTitle(
// page: FernNavigation.NavigationNodeWithMetadata | undefined,
// frontmatter: FernDocsFrontmatter | undefined,
// ): string | undefined {
// return frontmatter?.title ?? page?.title;
// }

function convertToTitle(
page: FernNavigation.NavigationNodeWithMetadata | undefined,
frontmatter: FernDocsFrontmatter | undefined,
): string | undefined {
return frontmatter?.title ?? page?.title;
}
// function convertDescriptionToString(frontmatter: FernDocsFrontmatter | undefined): string | undefined {
// // const description = frontmatter?.description ?? page?.description ?? frontmatter?.excerpt ?? undefined;
// const description = frontmatter?.description ?? frontmatter?.excerpt ?? undefined;

function convertDescriptionToString(frontmatter: FernDocsFrontmatter | undefined): string | undefined {
// const description = frontmatter?.description ?? page?.description ?? frontmatter?.excerpt ?? undefined;
const description = frontmatter?.description ?? frontmatter?.excerpt ?? undefined;
// if (description == null) {
// return;
// }

if (description == null) {
return;
}
// if (typeof description === "string") {
// return description;
// }

if (typeof description === "string") {
return description;
}
// const mdxContent = <MdxContent mdx={description} />;

const mdxContent = <MdxContent mdx={description} />;
// try {
// return renderToString(mdxContent);
// } catch (e) {
// // eslint-disable-next-line no-console
// console.error("Error rendering MDX to string", e);

try {
return renderToString(mdxContent);
} catch (e) {
// eslint-disable-next-line no-console
console.error("Error rendering MDX to string", e);
// captureSentryError(e, {
// context: "NavigationContext",
// errorSource: "convertDescriptionToString",
// errorDescription:
// "An error occurred while rendering the description (which is a serialized MDX content) to string for the meta description tag. This impacts SEO",
// });

captureSentryError(e, {
context: "NavigationContext",
errorSource: "convertDescriptionToString",
errorDescription:
"An error occurred while rendering the description (which is a serialized MDX content) to string for the meta description tag. This impacts SEO",
});

return undefined;
}
}
// return undefined;
// }
// }
2 changes: 1 addition & 1 deletion packages/ui/app/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ export { LocalPreviewContextProvider } from "./contexts/LocalPreviewContext";
export { useSetThemeColors } from "./docs/ThemeProvider";
export * from "./next-app/DocsPage";
export { NextApp } from "./next-app/NextApp";
export { getDefaultSeoProps } from "./next-app/utils/getSeoProp";
export { ApiDefinitionResolver } from "./resolver/ApiDefinitionResolver";
export { ApiTypeResolver } from "./resolver/ApiTypeResolver";
export * from "./resolver/types";
export { REGISTRY_SERVICE } from "./services/registry";
// export * from "./sidebar/serializer";
export { convertNavigatableToResolvedPath } from "./util/convertNavigatableToResolvedPath";
export { unknownToString } from "./util/unknownToString";
2 changes: 1 addition & 1 deletion packages/ui/app/src/mdx/mdx.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ type OverviewLayout = "overview";
*/
type ReferenceLayout = "reference";

export interface FernDocsFrontmatter {
export interface FernDocsFrontmatter extends DocsV1Read.MetadataConfig {
/**
* The layout of the page. This will determine the width of the content.
* Defaults to "guide"
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/app/src/next-app/DocsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { DocsV1Read, DocsV2Read, FdrAPI, FernNavigation } from "@fern-api/fdr-sd
import type { ColorsConfig, SidebarTab, SidebarVersionInfo } from "@fern-ui/fdr-utils";
import { useDeepCompareMemoize } from "@fern-ui/react-commons";
import { Redirect } from "next";
import type { DefaultSeoProps } from "next-seo";
import { ReactElement } from "react";
import { FeatureFlagContext, FeatureFlags } from "../contexts/FeatureFlagContext";
import { DocsContextProvider } from "../contexts/docs-context/DocsContextProvider";
Expand Down Expand Up @@ -42,13 +43,15 @@ export declare namespace DocsPage {

featureFlags: FeatureFlags;
apis: FdrAPI.ApiDefinitionId[];

seo: DefaultSeoProps;
}
}

export function DocsPage(pageProps: DocsPage.Props): ReactElement | null {
const featureFlags = useDeepCompareMemoize(pageProps.featureFlags);

const { baseUrl, title, layout, logoHeight, logoHref, resolvedPath } = pageProps;
const { baseUrl, layout, logoHeight, logoHref, resolvedPath } = pageProps;

return (
<FeatureFlagContext.Provider value={featureFlags}>
Expand All @@ -58,7 +61,6 @@ export function DocsPage(pageProps: DocsPage.Props): ReactElement | null {
resolvedPath={resolvedPath} // this changes between pages
domain={baseUrl.domain}
basePath={baseUrl.basePath}
title={title}
>
<SearchDialog fromHeader={layout?.searchbarPlacement === "HEADER"} />
<Docs logoHeight={logoHeight} logoHref={logoHref} />
Expand Down
Loading

0 comments on commit fa1ed79

Please sign in to comment.