Refactor hideFromNav logic to support breadcrumbs

Author: jesstelford

.changeset/neat-mirrors-wash.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Refactor hideFromNav logic to support breadcrumbs

polaris.shopify.com/scripts/gen-cache-json.mjs

@@ -11,45 +11,45 @@ const navJsonFile = `${cacheDir}/nav.json`;
 const genNavJson = (markdownFiles) => {
   let nav = {};
 
-  markdownFiles
-    .filter((md) => md && !md.frontMatter?.hideFromNav)
-    .forEach((md) => {
-      const {
-        title,
-        navTitle,
-        icon,
-        description,
-        order,
-        newSection,
-        hideChildren,
-        color,
-        url,
-        status,
-        expanded,
-        groups,
-        componentDescriptions,
-        relatedResources,
-      } = md.frontMatter;
-      const {slug} = md;
-
-      const path = `children.${slug.replace(/\//g, '.children.')}`;
-
-      set(nav, path, {
-        title: navTitle || title,
-        icon,
-        description,
-        order,
-        slug: url || `/${slug}`,
-        newSection,
-        hideChildren,
-        color: color ? color.replace(/\\/g, '') : undefined,
-        status,
-        expanded,
-        groups,
-        componentDescriptions,
-        relatedResources,
-      });
+  markdownFiles.forEach((md) => {
+    const {
+      title,
+      navTitle,
+      icon,
+      description,
+      order,
+      newSection,
+      hideChildren,
+      color,
+      url,
+      status,
+      expanded,
+      groups,
+      componentDescriptions,
+      relatedResources,
+      hideFromNav,
+    } = md.frontMatter;
+    const {slug} = md;
+
+    const path = `children.${slug.replace(/\//g, '.children.')}`;
+
+    set(nav, path, {
+      title: navTitle || title,
+      icon,
+      description,
+      order,
+      slug: url || `/${slug}`,
+      newSection,
+      hideChildren,
+      color: color ? color.replace(/\\/g, '') : undefined,
+      status,
+      expanded,
+      groups,
+      componentDescriptions,
+      relatedResources,
+      hideFromNav: hideFromNav || false,
     });
+  });
 
   writeFileSync(navJsonFile, JSON.stringify(nav), 'utf-8');
 };

polaris.shopify.com/src/components/Frame/Frame.tsx

@@ -194,7 +194,9 @@ function NavItem({
   return (
     <>
       {nav.children &&
+        !nav.hideFromNav &&
         Object.entries(nav.children)
+          .filter(([, child]) => !child.hideFromNav)
           .sort((_a, _b) => {
             const [, a] = _a as [string, NavItem];
             const [, b] = _b as [string, NavItem];

polaris.shopify.com/src/types.ts

@@ -203,4 +203,5 @@ export interface NavItem {
   status?: Status;
   children?: NavJSON;
   expanded?: boolean;
+  hideFromNav?: boolean;
 }