fix(components): Re-add exclude functionality in PageGrid (#11510)

Author: Lms24

docs/contributing/pages/components.mdx

@@ -41,9 +41,7 @@ See also the [Note component](#note).
 
 Render an expandable section.
 
-<Expandable title="This is a title">
-This is some content
-</Expandable>
+<Expandable title="This is a title">This is some content</Expandable>
 
 ```markdown {tabTitle:Example}
 <Expandable title="This is a title">
@@ -110,6 +108,7 @@ You can also highlight diffs using the `diff` language:
 + plus one
 ```
 ````
+
 If you want to preserve syntax highlighting, you can add `diff` metadata to any code block
 then annotate the diff with `+` and `-`:
 
@@ -193,6 +192,7 @@ Attributes:
 
 - `header` (string) - optional header value to include, rendered as an H2
 - `nextPages` (boolean) - only render pages which come next based on sidebar ordering
+- `exclude` (string[]) - an array of pages to exclude from the grid. Specify the file name of the page, for example, `"index"` for `index.mdx`.
 
 ## PlatformContent
 
@@ -281,15 +281,11 @@ You can specify multiple features by separating them with a comma:
 
 The range visibility will be controlled by the `OnboardingOptionButtons` component:
 
-````jsx diff
+```jsx diff
 <OnboardingOptionButtons
-  options={[
-    'error-monitoring',
-    "profiling",
-    "performance",
-  ]}
+  options={["error-monitoring", "profiling", "performance"]}
 />
-````
+```
 
 - `options` can either be either an object of this shape:
 
@@ -300,22 +296,20 @@ The range visibility will be controlled by the `OnboardingOptionButtons` compone
   checked: boolean
 }
 ```
+
 or a string (one of these `id`s 👆) for convenience when using defaults.
 
 <Alert level="warning" title="Important">
-  The underlying implementation relies on the `onboardingOptions` metadata in the code blocks to be valid JSON syntax.
+  The underlying implementation relies on the `onboardingOptions` metadata in
+  the code blocks to be valid JSON syntax.
 </Alert>
 
 - default values: `checked: false` and `disabled: false` (`true` for `error-monitoring`).
 
 Example (output of the above):
 
 <OnboardingOptionButtons
-  options={[
-    "error-monitoring",
-    "performance",
-    "profiling",
-  ]}
+  options={["error-monitoring", "performance", "profiling"]}
   dontStick
 />
 
@@ -367,29 +361,32 @@ Or you can use the `hideForThisOption` prop to hide the content for the selected
   Hide this section for `profiling` option.
 </OnboardingOption>
 ```
-``````
+````
 
 Example:
+
 - toggle the `performance` option above to see the effect:
 
     <OnboardingOption optionId="performance">
 
-    ```jsx
-    <OnboardingOption optionId="performance">
-      This code block is wrapped in a `OnboardingOption` component and will only
-      be rendered when the `performance` option is selected.
-    </OnboardingOption>
-    ```
+  ```jsx
+  <OnboardingOption optionId="performance">
+    This code block is wrapped in a `OnboardingOption` component and will only
+    be rendered when the `performance` option is selected.
+  </OnboardingOption>
+  ```
+
     </OnboardingOption>
 
 - toggle the `profiling` option above to see the effect:
 
     <OnboardingOption optionId="profiling" hideForThisOption>
 
-    ```jsx
-    <OnboardingOption optionId="profiling" hideForThisOption>
-      This code block is wrapped in a `OnboardingOption` component and will only
-      be rendered when the `profiling` option is NOT selected.
-    </OnboardingOption>
-    ```
+  ```jsx
+  <OnboardingOption optionId="profiling" hideForThisOption>
+    This code block is wrapped in a `OnboardingOption` component and will only
+    be rendered when the `profiling` option is NOT selected.
+  </OnboardingOption>
+  ```
+
     </OnboardingOption>

src/components/pageGrid.tsx

@@ -13,7 +13,7 @@ type Props = {
   header?: string;
 };
 
-export function PageGrid({header}: Props) {
+export function PageGrid({header, exclude}: Props) {
   const {rootNode, path} = serverContext();
 
   const parentNode = nodeForPath(rootNode, path);
@@ -27,7 +27,7 @@ export function PageGrid({header}: Props) {
       <ul>
         {parentNode.children
           /* NOTE: temp fix while we figure out the reason why some nodes have empty front matter */
-          .filter(c => c.frontmatter.title)
+          .filter(c => c.frontmatter.title && !exclude?.includes(c.slug))
           .sort((a, b) => sidebarOrderSorter(a.frontmatter, b.frontmatter))
           .map(n => (
             <li key={n.path} style={{marginBottom: '1rem'}}>