chore: override siteTitle for Glossary (#2046)

* chore: override siteTitle for Glossary * feat: use frontmatter for cleaner implementation * chore: fixed illegal text * chore: changeset * Update websites/documentation/src/content/writing/pages.mdx Co-authored-by: Naveen Karunakaran <[email protected]> --------- Co-authored-by: Naveen Karunakaran <[email protected]>
commercetools · Aug 20, 2024 · 448914a · 448914a
1 parent 522ec0f
commit 448914a
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 3 deletions.
diff --git a/.changeset/slimy-bobcats-explode.md b/.changeset/slimy-bobcats-explode.md
@@ -0,0 +1,7 @@
+---
+'@commercetools-docs/gatsby-theme-docs': minor
+'@commercetools-website/docs-smoke-test': minor
+'@commercetools-website/documentation': minor
+---
+
+Add frontmatter fields to override site title and site breadcrumb per page
diff --git a/packages/gatsby-theme-docs/gatsby-node.mjs b/packages/gatsby-theme-docs/gatsby-node.mjs
@@ -291,6 +291,15 @@ export const createSchemaCustomization = ({ actions, schema }) => {
         courseId: { type: 'Int' },
         topicName: { type: 'String' },
         products: { type: '[String]' },
+        overrides: {
+          type: 'JSON',
+          siteTitle: {
+            type: `String!`,
+          },
+          siteBreadcrumbs: {
+            type: `String!`,
+          },
+        },
       },
       interfaces: ['Node'],
     }),
@@ -442,6 +451,14 @@ export const onCreateNode = async (
       products: Array.isArray(node.frontmatter.products)
         ? node.frontmatter.products
         : [],
+      overrides: {
+        ...(node.frontmatter.siteTitle
+          ? { siteTitle: node.frontmatter.siteTitle }
+          : {}),
+        ...(node.frontmatter.siteBreadcrumbs
+          ? { siteBreadcrumbs: node.frontmatter.siteBreadcrumbs }
+          : {}),
+      },
     };
 
     actions.createNode({

diff --git a/packages/gatsby-theme-docs/src/layouts/content.js b/packages/gatsby-theme-docs/src/layouts/content.js
@@ -52,6 +52,9 @@ const LayoutContent = (props) => {
   const planTags = Array.isArray(props.pageData.planTags)
     ? props.pageData.planTags
     : [];
+
+  const siteTitle =
+    props.pageData?.overrides?.siteTitle || siteData.siteMetadata.title;
   useAiAssistant();
 
   return (
@@ -63,7 +66,7 @@ const LayoutContent = (props) => {
         {...layoutState.sidebar}
         {...layoutState.searchDialog}
         {...layoutState.topMenu}
-        siteTitle={siteData.siteMetadata.title}
+        siteTitle={siteTitle}
         isGlobalBeta={siteData.siteMetadata.beta}
         hasReleaseNotes={props.pageContext.hasReleaseNotes}
       />
@@ -78,7 +81,8 @@ const LayoutContent = (props) => {
           {...layoutState.searchDialog}
           {...layoutState.topMenu}
           ref={ref}
-          siteTitle={siteData.siteMetadata.title}
+          siteTitle={siteTitle}
+          siteBreadcrumbsOverride={props.pageData?.overrides?.siteBreadcrumbs}
           excludeFromSearchIndex={excludeFromSearchIndex}
           allowWideContentLayout={props.pageData.allowWideContentLayout}
         />
@@ -163,6 +167,10 @@ LayoutContent.propTypes = {
     showTimeToRead: PropTypes.bool.isRequired,
     timeToRead: PropTypes.number.isRequired,
     estimatedTimeToRead: PropTypes.number.isRequired,
+    overrides: PropTypes.shape({
+      siteTitle: PropTypes.string,
+      siteBreadcrumbs: PropTypes.string,
+    }),
   }).isRequired,
   children: PropTypes.node.isRequired,
 };

diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js
@@ -246,7 +246,8 @@ const LayoutHeader = forwardRef((props, ref) => {
     }
   };
 
-  const siteContextTitle = siteData?.siteMetadata?.breadcrumbs;
+  const siteContextTitle =
+    props.siteBreadcrumbsOverride || siteData?.siteMetadata?.breadcrumbs;
 
   return (
     <Container id="top" allowWideContentLayout={props.allowWideContentLayout}>
@@ -347,6 +348,7 @@ LayoutHeader.propTypes = {
   isTopMenuOpen: PropTypes.bool.isRequired,
   toggleTopMenu: PropTypes.func.isRequired,
   centeredSearchDialog: PropTypes.bool,
+  siteBreadcrumbsOverride: PropTypes.string,
 };
 
 export default LayoutHeader;
diff --git a/packages/gatsby-theme-docs/src/templates/page-content.js b/packages/gatsby-theme-docs/src/templates/page-content.js
@@ -107,6 +107,7 @@ export const query = graphql`
       showTimeToRead
       timeToRead
       estimatedTimeToRead
+      overrides
     }
   }
 `;
diff --git a/websites/docs-smoke-test/src/content/views/overrides.mdx b/websites/docs-smoke-test/src/content/views/overrides.mdx
@@ -0,0 +1,7 @@
+---
+title: Site Overrides
+siteTitle: Custom Site Title
+siteBreadcrumbs: Custom Breadcrumb
+---
+
+This page demonstrate the the possibility of overriding some site metadata on a page level.
diff --git a/websites/docs-smoke-test/src/data/navigation.yaml b/websites/docs-smoke-test/src/data/navigation.yaml
@@ -22,6 +22,8 @@
       path: /views/custom-anchor
     - title: Wide Layout
       path: /views/wide
+    - title: Site overrides
+      path: /views/overrides
 - chapter-title: Components
   beta: true
   pages:

diff --git a/websites/documentation/src/content/writing/pages.mdx b/websites/documentation/src/content/writing/pages.mdx
@@ -58,6 +58,12 @@ We support the following key-value pairs in the frontmatter section:
 
 - `products` (array of string): if defined in a page, it overrides the site wide `products` setting which affects the [algolia search indexer](/configuration/algolia-search#per-site-tags-configuration). This setting is useful for helping indexing correctly specific pages that are part of a site but their focus is on different products.
 
+- `overrides` (an object) with the following properties:
+
+  - `siteTitle` (string): use to override the site title for a specific page. (for example in Glossary page)
+
+  - `siteBreadcrumbs` (string): use to override the site root breadcrumb shown in the header for a specific page.
+
   Example:
 
 ```mdx