fix: render frontmatter title at top of each page instead of sidebar …

…title (#578)
fern-api · Mar 26, 2024 · 0695ce8 · 0695ce8
1 parent ac56a29
commit 0695ce8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/packages/ui/app/src/contexts/navigation-context/NavigationContextProvider.tsx b/packages/ui/app/src/contexts/navigation-context/NavigationContextProvider.tsx
@@ -265,7 +265,7 @@ function convertDescriptionToString(
     page: SidebarNode.Page | undefined,
     frontmatter: FernDocsFrontmatter | undefined,
 ): string | undefined {
-    const description = frontmatter?.description ?? page?.description ?? undefined;
+    const description = frontmatter?.description ?? page?.description ?? frontmatter?.excerpt ?? undefined;
 
     if (description == null) {
         return;

diff --git a/packages/ui/app/src/util/convertNavigatableToResolvedPath.ts b/packages/ui/app/src/util/convertNavigatableToResolvedPath.ts
@@ -3,11 +3,21 @@ import { SidebarNode, findApiSection, traverseSidebarNodes } from "@fern-ui/fdr-
 import grayMatter from "gray-matter";
 import moment from "moment";
 import { emitDatadogError } from "../analytics/datadogRum";
-import { SerializedMdxContent, serializeMdxContent } from "../mdx/mdx";
+import { FernDocsFrontmatterInternal, SerializedMdxContent, serializeMdxContent } from "../mdx/mdx";
 import type { ResolvedPath } from "./ResolvedPath";
 import { flattenApiDefinition } from "./flattenApiDefinition";
 import { resolveApiDefinition } from "./resolver";
 
+function getFrontmatter(content: string): FernDocsFrontmatterInternal {
+    const frontmatterMatcher: RegExp = /^---\n([\s\S]*?)\n---/;
+    const frontmatter = content.match(frontmatterMatcher)?.[0];
+    if (frontmatter == null) {
+        return {};
+    }
+    const gm = grayMatter(frontmatter);
+    return gm.data;
+}
+
 async function getSubtitle(
     node: SidebarNode.Page,
     pages: Record<string, DocsV1Read.PageContent>,
@@ -17,16 +27,10 @@ async function getSubtitle(
         if (content == null) {
             return;
         }
-        const frontmatterMatcher: RegExp = /^---\n([\s\S]*?)\n---/;
 
-        const frontmatter = content.match(frontmatterMatcher)?.[0];
-
-        if (frontmatter == null) {
-            return undefined;
-        }
-        const gm = grayMatter(frontmatter);
-        if (gm.data.excerpt != null) {
-            return await serializeMdxContent(gm.data.excerpt, true);
+        const frontmatter = getFrontmatter(content);
+        if (frontmatter.excerpt != null) {
+            return await serializeMdxContent(frontmatter.excerpt, true);
         }
         return undefined;
     } catch (e) {
@@ -92,12 +96,14 @@ export async function convertNavigatableToResolvedPath({
         };
     } else if (SidebarNode.isChangelogPage(traverseState.curr)) {
         const pageContent = traverseState.curr.pageId != null ? pages[traverseState.curr.pageId] : undefined;
+        const serializedMdxContent = pageContent != null ? await serializeMdxContent(pageContent.markdown, true) : null;
+        const frontmatter = typeof serializedMdxContent === "string" ? {} : serializedMdxContent?.frontmatter ?? {};
         return {
             type: "changelog-page",
             fullSlug: traverseState.curr.slug.join("/"),
-            title: traverseState.curr.title,
+            title: frontmatter.title ?? traverseState.curr.title,
             sectionTitleBreadcrumbs: traverseState.sectionTitleBreadcrumbs,
-            markdown: pageContent != null ? await serializeMdxContent(pageContent.markdown, true) : null,
+            markdown: serializedMdxContent,
             editThisPageUrl: pageContent?.editThisPageUrl ?? null,
             items: await Promise.all(
                 traverseState.curr.items.map(async (item) => {
@@ -117,6 +123,8 @@ export async function convertNavigatableToResolvedPath({
         if (pageContent == null) {
             return;
         }
+        const serializedMdxContent = await serializeMdxContent(pageContent.markdown, true);
+        const frontmatter = typeof serializedMdxContent === "string" ? {} : serializedMdxContent.frontmatter;
         if (
             pageContent.markdown.includes("EndpointRequestSnippet") ||
             pageContent.markdown.includes("EndpointResponseSnippet")
@@ -132,9 +140,9 @@ export async function convertNavigatableToResolvedPath({
             return {
                 type: "custom-markdown-page",
                 fullSlug: traverseState.curr.slug.join("/"),
-                title: traverseState.curr.title,
+                title: frontmatter.title ?? traverseState.curr.title,
                 sectionTitleBreadcrumbs: traverseState.sectionTitleBreadcrumbs,
-                serializedMdxContent: await serializeMdxContent(pageContent.markdown, true),
+                serializedMdxContent,
                 editThisPageUrl: pageContent.editThisPageUrl ?? null,
                 neighbors,
                 apis: resolvedApis,
@@ -143,9 +151,9 @@ export async function convertNavigatableToResolvedPath({
         return {
             type: "custom-markdown-page",
             fullSlug: traverseState.curr.slug.join("/"),
-            title: traverseState.curr.title,
+            title: frontmatter.title ?? traverseState.curr.title,
             sectionTitleBreadcrumbs: traverseState.sectionTitleBreadcrumbs,
-            serializedMdxContent: await serializeMdxContent(pageContent.markdown, true),
+            serializedMdxContent,
             editThisPageUrl: pageContent.editThisPageUrl ?? null,
             neighbors,
             apis: {},